electronic commerce final exam: vector graphics exercise / flash mx instructor: john seydel, ph.d....
TRANSCRIPT
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