Electronic Commerce

Final Exam:Vector Graphics Exercise / Flash

MX

Instructor: John Seydel, Ph.D.

MIS 6453 -- Spring 2006

Student Objectives

Distinguish between bitmap and vector graphicsIdentify the basic features of Flash MXCreate simple graphics using FlashIncorporate Flash objects into web pagesUse Flash to develop a simple animation

First, Get Setup for the Exercises

Login locally UserID = peachtree Password = accounting Domain = BU201 . . . This computer

Start these applications and then minimize: Windows Explorer Internet Explorer; navigate to your website SmartFTP; connect to your website NotePad (or other text editor) Flash MX

Start | Programs | Macromedia Initially: tutorials screen

Cancel (click on X in top right corner) To retrieve later, click on Help | Tutorials

Leave Flash alone for now

Images and EditingImage 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

Image editing platforms Flash (or other) for vector graphics PaintShop Pro (or other) 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

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

MenuBarStageToolBarTimeLinePanels (especially, Properties)Popup menus

*Version 6 (currently on Version 8)

Basic Drawing: Look at the Tools Available

Typical tools available (note ToolBar) Drawing lines: line, pencil, & pen Creating shapes: ellipse, rectangle, &

paint brush Filling/outlining: paint bucket / ink bottle Text tool Selection tools: arrows & lasso

See Appendix for more infoNow, let’s create something . . .

Get Started with Our ExercisePrepare a file Open new file Save it as “aState” Note file extensions

aState.fla (work version) aState.swf (export for viewing)

Prepare the stage Set zoom to 200% Adjust stage so that top left corner is visible Close all panels Drag borders as far as possible from center Enable grid:

View | Grid | Show Grid View | Grid | Snap to Grid

An AState Logo: The BoxSelect the Rectangle tool

Set stroke Red 2 pixels

Set fill: blackClick near the top left portion of the stage and drag across and down a few cellsResize and relocate

Click on the Selection tool (black arrow) Select around the rectangle, and redefine its

properties: Width = 200 Height = 100 X = 1 Y = 1

Save the file

An AState Logo: The TextSelect the Text tool (letter A)

Set font: Perpetua Set fontsize: 60pt Set color: white Click on Boldface and Italic buttons

Type the text: ASTATERelocate

Click on the Selection tool (black arrow) Select any part of the text and drag to the center of

the boxIncrease the size of the “S”

Use the Text tool Select the “S” and change font to 80pt Use the Selection tool to recenter the text

Save the file

An AState Logo: Wrapping it Up

Change the fill of the rectangle Using the Selection tool, click anywhere on the fill Click on the fill selector in the Properties panel Set the fill properties to red/black gradient

Reset the stage size to 202 x 102 Click any blank spot on the stage In the Properties panel, click on the Size button Specify the new stage width and height

Save the fileAnd now, export the file

First as a Flash image Then, optionally, as

A GIF image A JPG image

A Note About Fills & StrokesBy 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

Adding Flash Objects to Web Pages

Must first use File | Export Animations: select Movie (.swf) Other: select Image (.swf)

Then, in HTML, use the <embed> element Works similarly to the <image> element Has both brief and extended specifications Note source code on the handout

Simple Flash Demo Flash Demo/Comparison

Take a look: Upload your aState.swf (not the .fla file) Open your page aState.html and take a look

Note a comparison: flashDemo.html

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 (in-between frames) Motion Shape

Shape Tweening Exercise (a)Save existing file as goState and

Change stage size to 550 x 400 Zoom to 100%

Using the TimeLine, insert blank keyframes at 10, 20, and 30

Select the desired frame Click on Insert | Blank Keyframe

Use the Selection tool to select the aState logo Right-click and select Cut Select frame 20, right-click, click on Paste Select the logo again and relocate it to X=200,

Y=100 Do the same with frame 30

Create a circle near the top left corner Same stroke and fill as the rectangle Edit the properties: W=108; H=108; X=18; Y=18

Shape Tweening Exercise (b)Don’t forget to save the file periodicallySetup tweening

On TimeLine: press Control key and then select frames 11-19

In Properties panel, select “Shape” for Tween type

Setup the animation controls: Turn-on looping: Control | Loop Playback Start the animation: Control | Play Press the Escape key to stop the animation

Alternatively, drag the PlayHead along the TimeLineNow, export the image

First, reduce the stage size (approximately 425 x 225) File | Export Movie Incorporate into a web page

Summary of Objectives

Distinguish between bitmap and vector graphicsIdentify the basic features of Flash MXCreate simple graphics using FlashIncorporate Flash objects into web pagesUse Flash to develop a simple animation

Appendix

Drawing Lines

Straight lines Select line tool Click anywhere, drag, and release Line segment “snaps” to nearest intersections

“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

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 (try it) Use the rectangle tool Works similarly to ellipse tool

See what happens when you hold down the Shift key while drawing ellipses and rectangles

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

Exporting the LogoAs a Flash image

File | Export Image Select file type of “Flash Movie (*.swf)” Provide a name (aState) and a location Click on Save Select “Flash 4” as the Version and then OK

As a GIF image Similar to above, but select file type of “GIF Image

(*.gif)” Check “Interlace” and “Full Document Size”

As a JPG image Similar to above, but select file type of “JPEG Image

(*.jpg)” Check “Progressive Display” and “Full Document Size”

HTML Needed for Flash ObjectsSample 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