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