eCommerce Technologies
Vector Graphics Exercise: Flash MX
MIS 4453 -- Spring 2004
Instructors:Kelly Fish, Ph.D.John Seydel, Ph.D.
Student Objectives
Distinguish between bitmap and vector graphicsIdentify the basic features of Flash MXCreate simple graphics using FlashUse Flash to develop animated logoIncorporate Flash objects into web pagesIf 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 aloneOpen blank web page in FrontPage
Images and Editing
Image types for use on the Web 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 existMost create bitmap images Every pixel mapped out Files get large quickly
Flash incorporates vector 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 barStageToolbarTimelinePanels (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, & penCreating shapes: ellipse, rectangle, & paint brushFilling/outlining: paint bucket / ink bottleText toolSelection 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
ColorModifying 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 LogoRefer to text, page 68-72Open 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 periodicallyWorking 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 threeThen, in HTML, use the <embed> element
Works similarly to the <image> element Has both brief and extended specifications
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 openCreate 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 BasicsTraditional (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: tweening Motion Shape
Summary of Objectives
Distinguish between bitmap and vector graphicsIdentify the basic features of Flash MXCreate simple graphics using FlashUse Flash to develop animated logoIncorporate Flash objects into web pagesIf time: Create rollover button using Flash Create shape-tweened object
For Next Time
Download Flash MX from www.macromedia.com and install on your own computerWork through Flash tutorials available through Handouts page of course websiteRework 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 exercisesRead / reread Chapter 3
Appendix
Input / Processing / Output
Input (data)
Output
HTML file (text)Browser
&/orServer
(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="http://www.macromedia.com/go/getflashplayer">/>
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 buttonsShape tweeningOther stuff Editing miscellaneous Working with intersecting objects Importing other file formats
An Exercise: A Rollover Button
Open new file, set zoom, and turn on gridCreate 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” framePreview (click on Control | Enable Simple Buttons)Return to Scene 1 (standard editor) and modify location and stage sizeSave 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 fillSelect frames 2-9 (press Control key and then drag)Turn off onion skinningRun 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 objectsNote that only part of the object is selectedIntersecting objects on the same layer are automatically broken apartTry 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 BitmapCan 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