Website Development

1
Website Development Management
MIS 3353 -- Fall 2002

• Macromedia Flash, Some Exercises

Instructor John Seydel, Ph.D.
2
First, an Assignment

• Try to complete the rest of the exercises already
  assigned
• Then, on your own, try to build the complete
  application in Chapter 11
• Your AITP accounts will remain active
• For a few weeks if you dont request any
  extension
• Indefinitely if youd like to keep them available
• Consider building your AITP website into a
  portfolio
• Personalize
• Try new things

3
Note What We Have Not Covered

• Meta tags
• Keywords
• Refresh (redirect)
• Design concepts (except in passing)
• Functionality/navigability
• Aesthetics
• Frames
• Java, ActiveX
• Other server-side technologies (CGI, PHP, Cold
  Fusion)
• Site management tools (FrontPage, DreamWeaver . .
  . )
• . . . ?
• And, . . . , a very important emerging
  technology Flash (whos worked with it / heard
  of it?)

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 (but vast majority of users
  already have Flash Player installed)
• Bandwidth is a major concern (still!)

5
Now, Some Flash

• Whats Flash? Consider some examples
• CoB
• EconDSci
• FKAuto
• Topics to be addressed
• Flash anatomy
• Basic drawing shapes and fills
• Animation
• The traditional way
• Using tweening
• Incorporating Flash graphics into web pages
• A small project rollover buttons

6
Whats the Big Deal About Flash?

• Many good graphics/animation packages exist
• Most create bitmap images .bmp, .jpg, .gif
• 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
• Vectors
• Bitmaps
• Considerably smaller files
• But user agent needs Flash player (ActiveX)
• Consider a simple circle pixel data or formula?

7
Basic Flash Anatomy

• Start Flash
• Initially tutorials screen
• Cancel (click on X in top right corner)
• To retrieve later, click on Help Tutorials
• Note
• Menu bar
• Stage
• Toolbar
• Timeline
• Panels (especially, Properties)
• Popup menus

8
Setting Up for the Exercises

• Prepare file
• Open new file
• Save it as basics
• Note file extensions
• basics.fla (work version)
• basics.swf (export for viewing)
• Prepare 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

9
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

10
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

11
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

12
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
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

14
Additional Setup for the Exercises

• Start applications
• Windows Explorer
• Internet Explorer (course website)
• Visual Studio (no projects)
• Open blank web page in VStudio
• Save as flash.htm

15
Lets Create a Logo

• Refer to the example
• www.clt.astate.edu/jseydel/mis3353/flash.htm
• Open new file turn off snap (View Snap to
  Objects)
• File New
• Save as FKAuto.fla File Save As FKAuto )
• Resize stage to 250 x 50
• Steps
• Draw rectangle (any size)
• Draw text
• Draw symbol

16
A Logo The Rectangle

• Stroke colormaroon width3l
• Fill color red
• Change properties (use arrow tool to select)
• Size 250 x 50
• Position 0, 0
• Frame rate for the stage 10 fps

17
A Logo The Main Text

• Content Flybai-Knight
• Display
• Font is Comic Sans MS
• Size is 18 point
• Color is white
• Bold
• Dont worry about placement
• Draw anywhere
• Select with main arrow tool and move using cursor
  keys

18
A Logo The Symbol

• At the proper location, draw an ellipse
• Edit properties
• Use main arrow tool
• Click on border
• Stroke maroon, 3 point
• Fill white
• Add text (FKAuto) to the ellipse
• Size 12 point
• Color blue
• Draw anywhere and then move into place

19
Now, Animate the Logo

• Dont forget to save your work periodically
• Working 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
• Inserting keyframes at 20, 30, and then 30
• Change some color for each
• Add final keyframe (same as previous)
• Play the animation
• Click on Control Loop Playback
• Click on Control Play

20
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 three
• Then, in HTML, use the element
• Works similarly to the element
• Has both brief and extended specifications
• Add to your page flash.htm and compare results
• Flash movie
• Images
• JPEG file
• GIF file

21
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, 40, and 50, dampening
  the bounce
• Run the animation (Window Toolbars
  Controller)
• Improvement additional intermediate frames
• Better approach tweening
• Motion
• Shape

22
An Exercise A Rollover Button

• Open new file, set zoom, and turn on grid
• 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
• 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

23
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 Export Movie)
• Test/modify the web page

24
Now, What?

• Add code to FKAuto page (at bottom)
• Logo
• Button
• Result will be rollover button linking to your
  websites home page

25
Appendix
26
Meta Elements

• Meta means about (more or less)
• Metadata data about data
• tag refers to meta information, i.e.,
  information about information
• Typical formats
• or
• http-equivactiontype
• contentswhatever
• /
• Positioning between and
• Multiple tags typically used

27
Meta Elements Keywords

• Purpose improve chances of being listed by
  search engines
• Example
• namekeywords
• contentstatistics Excel math
• /

28
Meta Elements HTTP Header Info

• Keeping content current
• http-equivexpires
• content1 January 2001
• /
• http-equivrefresh
• content120
• /
• Redirect from expired page
• http-equivrefresh content10,newhome.htm
• /

29
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
30
Additional Stuff (If Time)
31
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

32
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

33
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

34
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

35
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