eCommerce Technologies Vector Graphics Exercise: Flash MX MIS Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D.

Student Objectives Distinguish between bitmap and vector graphics Identify the basic features of Flash MX Create simple graphics using Flash Use Flash to develop animated logo Incorporate Flash objects into web pages If time: Create rollover button using Flash Create shape-tweened object

First, Get Setup for the Exercises Start these applications and then minimize: Windows Explorer Internet Explorer (course website) FrontPage; open your website Flash MX  Start | Programs | Macromedia  Initially: tutorials screen Cancel (click on X in top right corner) To retrieve later, click on Help | Tutorials Initially, leave Flash alone Open blank web page in FrontPage

Images and Editing Image types for use on the WebWeb Bitmap  Uncompressed: BMP (don’t use!)  Compressed: JPEG: loads line at a time (more colors, 24 bit) GIF: loads increasing levels of clarity (interlacing) Vector (e.g., Flash)  Often much smaller  Much more scalable  However, need player Our editing platforms (rather than PSP, etc.) Flash for vector graphics MS Photo Editor for bitmap graphics And now, presenting Flash MX...

What’s the Big Deal About Flash? Many good graphics editing packages exist Most create bitmap images Every pixel mapped out Files get large quickly Flash incorporates vector graphicsvector graphics Not a bitmap but a set of formulae instead Formulae can refer to either vectors or bitmaps Considerably smaller files But user agent needs Flash player (ActiveX) Consider a simple circle, 200 x 200 pixels Bitmap: 40,000 pixels to track (700 if compressed) Formula: y = radius * Cos(x); just a few bytes

Now, Let’s Look at Flash MX: Its Anatomy Menu bar Stage Toolbar Timeline Panels (especially, Properties) Popup menus

Get Started with Our Exercises Prepare a file Open new file Save it as “basics” Note file extensions  basics.fla (work version)  basics.swf (export for viewing) Prepare the stage Set zoom to 75% Close all panels Drag top, right, and bottom borders as far as possible from center Enable grid:  View | Grid | Show Grid  View | Grid | Snap to Grid

Basic Drawing: Look at the Tools Available Drawing lines: line, pencil, & pen Creating shapes: ellipse, rectangle, & paint brush Filling/outlining: paint bucket / ink bottle Text tool Selection tools: arrows & lasso

Drawing Lines (Try It!) Straight lines Select line tool Click anywhere, drag, and release Line segment “snaps” to nearest intersection “Freehand” lines Turn off “Snap to Grid” Select pencil tool (not pen) Click, drag in curvy manner, note “preview” of line, release and note smoothing of line

Drawing Shapes (Try It!) Ellipses & circles Turn on “Snap to Grid” Select ellipse tool Click anywhere, drag, and release  Oblong if horizontal and vertical differ  Otherwise circle drawn Rectangles Use the rectangle tool Works similarly to ellipse tool See what happens when you hold down the Shift key while drawing ellipses and rectangles

Fills & Strokes By default, ellipses and rectangles have Fills (color) Outlines have stroke defaults  Type  Color  Weight All attributes can be changed before or after initial drawing Note Options (at bottom of toolbar) upon tool selection Or use Properties panel (i.e., window)  At bottom of screen  May need to be maximized

Drawing Text Text tool Click and start typing Box expands without wrapping Note text attributes (in Properties panel) Font  Style  Size Color Modifying text attributes Can be done when typing or later If later, select text and then use Properties panel Use handle to expand/contract/wrap

Let’s Create a Logo Refer to text, page Open new file; turn off snap (View | Snap to Objects) File | New Save as indianapolis.fla: File | Save As | indianapolis ) Resize stage to 250 x 50 Draw rectangle (any size) No stroke color; 1 pixel Fill color: red Change properties (use arrow tool to select)  Size: 250 x 50  Position: 0, 0  Frame rate: 7 fps Draw text (Indianapolis) Comic Sans MS, 18 pt, white Select with arrow tool and move using cursor keys Draw funky mouse symbol, using ellipse tool

Now, Animate the Logo Don’t forget to save your work periodically Working with the timeline Use arrow tool Click on frame 10 Click on Insert | Keyframe Click on any blank area on stage Click on red area and then change fill color Repeat by inserting keyframes at 20 and then 30 Play the animation Click on Control | Loop Playback Click on Control | Play

Adding Flash Objects to Web Pages Must first use File | Export Animations: select Movie (.swf) Other: select Image  SWF (Shockwave Flash)  JPEG  GIF Try all three Then, in HTML, use the element Works similarly to the element Has both brief and extended specificationsspecifications Add to your page flash.htm and compare results Flash movie Images  JPEG file  GIF file

Let’s Do Some Comparing Make sure logo file is open Create GIF version Click on File | Export Image Provide name and indicate type = GIF Then, in dialog box, select  Full Document Size  Smooth Create JPEG version Click on File | Export Image Provide name and indicate type = JPEG Then, in dialog box, select  Full Document Size  Smooth Note: file size and quality (add to web page)

Animation Basics Traditional (tedious, large file sizes) Relies upon keyframes (where motion changes) Example: bouncing ball  Create a 3x3 circle near top left  Use the Timeline Click on frame 10 Then Insert | Keyframe Move circle to bottom and slightly to right Continue for frames 20, 30, and 40  Run the animation (Window | Toolbars | Controller) Improvement: additional intermediate frames Better approach: tweeningtweening Motion Shape

Summary of Objectives Distinguish between bitmap and vector graphics Identify the basic features of Flash MX Create simple graphics using Flash Use Flash to develop animated logo Incorporate Flash objects into web pages If time: Create rollover button using Flash Create shape-tweened object

For Next Time Download Flash MX from and install on your own computerwww.macromedia.com Work through Flash tutorials available through Handouts page of course website Rework in-class exercises (on your own) Play around with miscellaneous Flash features Enhance your work Add movies to your web pages Try to work through supplementary exercisessupplementary exercises Read / reread Chapter 3

Appendix

Input / Processing / Output Input (data)Output HTML file (text) Browser &/or Server (Program code: VB, Java,... ) Web page(s) Process/Program Rich: includes programming, markup, pointers to files,...

Sample markup for incorporating Flash objects: <embed src="_XXX_" width="_WWW_" height="_HHH_" id="_YYY_" align="" quality="high" bgcolor="#00CC00" type="application/x-shockwave-flash" pluginspace=" /> You must, of course, replace the following: _XXX_ with the Flash object's folder/file name (e.g.,../images/FKAuto.swf) _YYY_ with a reasonable unique identifier label (e.g., imgFKAuto) _WWW_ with the width of the object _HHH_ with the height of the object HTML for Incorporating Flash Objects

Supplementary Exercises Rollover buttons Shape tweening Other stuff Editing miscellaneous Working with intersecting objects Importing other file formats

An Exercise: A Rollover Button Open new file, set zoom, and turn on grid Create basic button Rectangle at 36 x 180 (2 x 10 on grid)  Rounded corners (20 pixels)  Stroke: 10 pixels and red  Fill: red gradient Add text (“Home”)  Size = 24 point  Font = Arial  Color = White Convert to symbol  Rectangular select  Click on Insert | Convert to Symbol  Name btnHome and check Button box Assign URL: Window | Actions | BrowserNetwork | getURL Create rollover effects

Button Rollover Effects Open button in symbol editor Note difference in timeline Only four frames: Up, Over, Down, Hit Create mouseover effect Select “Over” frame and then Insert | Keyframe Modify button Repeat for “Down” frame Preview (click on Control | Enable Simple Buttons) Return to Scene 1 (standard editor) and modify location and stage size Save for web use (File | Publish) Test/modify the web page

Basic Shape Tweening Exercise Open new file and Turn on grid/snap Zoom to 75% Create circle near center (red stroke & gradient fill) On timeline, select frame 10 Click on Insert | Blank Keyframe Press Onion Skin icon Use line tool to draw triangle slightly larger than circle (black stroke) Use bucket tool to fill triangle with gray gradient fill Select frames 2-9 (press Control key and then drag) Turn off onion skinning Run the animation With control bar (Window | Toolbars | Controller) Or drag playhead on timeline

Some Enhancements Turn on looping (Control | Loop Playback) Reverse the action Copy frame 10 to frame 11 Copy frame 1 to frame 20 Tweening is automatically copied! Now, run the animation

Additional Editing Use selection tool (arrow) Straighten/Smooth: lines & shapes Note how pointer changes for points and curves Click and drag Right-click Scale Rotate Try it: Smooth curves Extend lines Other: adjust curvature, scale, rotate

Intersecting Objects Draw several objects Use stroke widths of 5 pixels Set fill to None Make sure objects intersect/overlap Now, use selection tool (solid arrow) and click on any of the objects Note that only part of the object is selected Intersecting objects on the same layer are automatically broken apart Try playing with the subselection tool (the other arrow) Drag the points around Play with the paint bucket also

Importing Other File Formats Consider ASU logo File | Import Can then edit and save as  Flash file  Other format (Export) Can also transform to vector: Modify | Trace Bitmap Can build into animations Be careful; files become large in a hurry Demonstration  Frame 1: import ASU logo and then convert to vector  Frame 10: Insert | Blank Keyframe Import and convert ASU, then re-size  Frames 2-9: Control + select  Properties: Tween = Shape  Run animation