Electronic Commerce

1
Electronic Commerce
MIS 6453 -- Spring 2006

• Final Exam
• Vector Graphics Exercise / Flash MX

Instructor John Seydel, Ph.D.
2
Student Objectives

• Distinguish between bitmap and vector graphics
• Identify the basic features of Flash MX
• Create simple graphics using Flash
• Incorporate Flash objects into web pages
• Use Flash to develop a simple animation

3
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

4
Images and Editing

• Image types for use on the Web
• Bitmap
• Uncompressed BMP (dont 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 . . .

5
Whats 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
• 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

6
Now, Lets Look at Flash MX Its Anatomy

• MenuBar
• Stage
• ToolBar
• TimeLine
• Panels (especially, Properties)
• Popup menus
• Version 6 (currently on Version 8)

7
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 info
• Now, lets create something . . .

8
Get Started with Our Exercise

• Prepare 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

9
An AState Logo The Box

• Select the Rectangle tool
• Set stroke
• Red
• 2 pixels
• Set fill black
• Click near the top left portion of the stage and
  drag across and down a few cells
• Resize 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

10
An AState Logo The Text

• Select the Text tool (letter A)
• Set font Perpetua
• Set fontsize 60pt
• Set color white
• Click on Boldface and Italic buttons
• Type the text ASTATE
• Relocate
• Click on the Selection tool (black arrow)
• Select any part of the text and drag to the
  center of the box
• Increase 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

11
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 file
• And now, export the file
• First as a Flash image
• Then, optionally, as
• A GIF image
• A JPG image

12
A Note About 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

13
Adding Flash Objects to Web Pages

• Must first use File Export
• Animations select Movie (.swf)
• Other select Image (.swf)
• Then, in HTML, use the ltembedgt element
• Works similarly to the ltimagegt 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

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

15
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 X200,
  Y100
• Do the same with frame 30
• Create a circle near the top left corner
• Same stroke and fill as the rectangle
• Edit the properties W108 H108 X18 Y18

16
Shape Tweening Exercise (b)

• Dont forget to save the file periodically
• Setup 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
  TimeLine
• Now, export the image
• First, reduce the stage size (approximately 425 x
  225)
• File Export Movie
• Incorporate into a web page

17
Summary of Objectives

• Distinguish between bitmap and vector graphics
• Identify the basic features of Flash MX
• Create simple graphics using Flash
• Incorporate Flash objects into web pages
• Use Flash to develop a simple animation

18
Appendix
19
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

20
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

21
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

22
Exporting the Logo

• As 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

23
HTML Needed for Flash Objects
Sample markup for incorporating Flash
objects ltembed src"_XXX_"
width"_WWW_" height"_HHH_"
id"_YYY_" align"" quality"high"
bgcolor"00CC00"
type"application/x-shockwave-flash"
pluginspace"http//www.macromedia.com/go/getflash
player" /gt 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