Website Development

1
Website Development Management
CIT 3353 -- Fall 2005 www.clt.astate.edu/jseydel/m
is3353

• 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
• Use Flash to develop animated logo
• Incorporate Flash objects into web pages
• If time
• Create rollover button using Flash
• Create shape-tweened object

3
First, Get Setup for the Exercises

• Start these applications and then minimize
• Windows Explorer
• Internet Explorer
• HTTP to your website
• FTP to SuSE1
• PHP Designer (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
• Initially, leave Flash alone

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
• MS Photo Editor (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

• Menu bar
• Stage
• Toolbar
• Timeline
• Panels (especially, Properties)
• Popup menus
• Version 6 (currently on Version 8)

7
Get Started with Our Exercises

• Prepare a file
• Open new file
• Save it as home
• Note file extensions
• home.fla (work version)
• home.swf (export for viewing)
• Prepare the stage
• Resize to 36 x 180
• Set zoom to 200
• 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

8
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

9
Drawing Lines

• 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

10
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

11
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

12
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

13
Adding Flash Objects to Web Pages

• Must first use File Export
• Animations select Movie (.swf)
• Other select Image
• Typical
• SWF (Shockwave Flash)
• GIF
• Try both
• Then, in HTML, use the element
• Works similarly to the element
• Has both brief and extended specifications
• Add to your page fbk_flash.php and compare
  results
• Bitmap (home.gif)
• Vector (home.swf)
• Note file size and quality

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
• Motion
• Shape

15
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

16
Appendix
17
An Exercise A Static Button

• 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
• Later make it into a rollover button

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

• Rollover buttons
• Shape tweening
• Other stuff
• Editing miscellaneous
• Working with intersecting objects
• Importing other file formats

20
An Exercise A Rollover Button

• Open new file, set zoom, and turn on grid
• Start with static button (home.fla)
• 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

21
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

22
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

23
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

24
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

25
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

26
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