Download Vector Graphics Exercise: Flash MX

MIS 4453 -- Spring 2004
eCommerce Technologies
Vector Graphics Exercise: Flash MX
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 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 exist
Most 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 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 68-72
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 <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 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: tweening


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 www.macromedia.com
and install on your own computer
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 exercises
Read / reread Chapter 3
Appendix
Input / Processing / Output
(Program code: VB, Java, . . . )
Input (data)
Process/Program
Output
HTML file (text)
Browser
&/or
Server
Web page(s)
Rich: includes programming, markup, pointers to files, . . .
HTML for Incorporating Flash Objects
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
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