Website Development

1
Website Development Management
MIS 3353 -- Fall 2002

• Macromedia Flash MX
• Plus a Little Other Stuff

Instructor John Seydel, Ph.D.
2
Topics to be Addressed

• Flash MX
• Overview
• Vector graphics
• Flash versus other animation
• Demonstration
• Exercise
• First, however,
• Where XML fits into all this
• Web development odds ends

3
A Map of Markup Languages
4
eXtensible Markup Language

• XML facilitates interchange of information across
  disparate applications
• XML is more flexible than HTML
• Not necessarily a web markup language
• Generally, a language for data exchange
• XML requires more than HTML, in particular a
  processing application

5
Whats Involved with XML?

• With XML, we can
• Create our own markup language
• Use someone elses markup
• Thus, a DTD (i.e., DOCTYPE) is required to ensure
  completeness and consistency
• Tells the user agent what the tags mean
• Provides syntax for the tags
• Note XML documents resemble HTML documents, but
  the tags are different
• DTD for HTML is built into browsers
• User agents need to look externally for DTDs for
  XML documents

6
XML Components

• XML document
• DTD
• Stylesheet
• CSS (preferred for the time being)
• XSL (not well supported yet)

7
Why Use XML?

• Can do much more with it
• Not restricted to standard browsers
• Can render/process same set of data numerous
  ways, depending upon the DTD employed
• Allows for special purpose treatment of content
  (e.g., chemical formulae, house plans, etc.)
• Makes data free of context
• Hence
• Application integration through marked up data
• Greater overall flexibility

8
Facilitating b2b eCommerce
9
A Sample XML Document

• Language RML (Recipe Markup Language)
• Note
• XML declaration
• DTD for element
• Content
• How would this look?

10
Sample RML Document

• Bean Burrito
• 1 can refried beans
• 1 small onion
• 3 flour tortillas
• Empty beans into saucepan and heat until beans
  are smooth. Then warm tortillas in microwave
  oven for 30 seconds.
• Spread 1/3 of beans on each tortilla, sprinkle
  with onions, roll, and serve.

11
Notice Some Things

• General guidelines
• XML declaration and DTD
• One tags contains all the others (root)
• All elements have start/end
• Empty elements also
• Elements are nested (e.g., item within
  ingredient)
• Hierarchical
• Parent/child relationships
• Attribute values quoted
• In other words, the same rules we should be
  applying to HTML (i.e., XHTML)

12
Another XML Document

• html
• PUBLIC
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-transitio
  nal.dtd
• xmllang"en" lang"en"
• Home Page for Suzy
  Student
• Suzy Jo Student
• Welcome to my web site Here's what
  you'll find
• . . .

13
Now, the DTD

• Can be within the XML document
• More often external
• Where can we find one to look at?
• How about ANY web page
• Defines elements, content, attributes,
  parent/child, entities

14
DTDs Specify Element Declarations

• General syntax
• Consider XHTML elements
• img
• p
• ul
• div

15
Finally, Attribute Lists

• General syntax
• XHTML attributes (for tag)
• src
• alt
• width
• height
• onMouseOver
• . . .

16
Odds Ends

• Weve covered a lot
• Survey of crucial web development technologies
• Markup
• Stylesheets
• Client-side scripting
• Server-side scripting / interaction with
  databases
• Essentially 5 different computer languages
• You should now have the ability to carry on (or
  pickup what you need) on your own
• But there are some important concepts about which
  you need at least to be aware

17
What We Have Not Covered

• Meta tags
• Keywords
• Refresh (redirect)
• Design concepts
• Functionality/navigability
• Aesthetics
• Java, ActiveX
• Other server-side technologies (CGI, PHP, Cold
  Fusion)
• Frames
• Site management tools (e.g., FrontPage
  DreamWeaver)
• . . . ?
• And, . . . , a very important emerging
  technology Flash

18
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

19
Using Meta Elements

• Typical name values
• keywords
• description
• author
• Typical http-equiv values
• expires
• refresh
• All tags have content attribute

20
Meta Elements Keywords

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

21
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
• /

22
Now, Finally Some Flash

• Whats Flash?
• Flash anatomy
• Basic drawing
• Shapes
• Fills
• Editing
• Importing other graphics
• Animation the traditional way
• Using tweening
• Incorporating Flash graphics into web page
• A small project rollover buttons

23
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
• Vectors
• Bitmaps
• Considerably smaller files
• But user agent needs Flash player (ActiveX)
• Consider a simple circle

24
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

25
Setting Up for the Exercise

• 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

26
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

27
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

28
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

29
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

30
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

31
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

32
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

33
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

34
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

35
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

36
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

37
Adding Flash to Web Pages

• The easy way, using File Publish
• Creates .swf file
• Generates the HTML needed also
• Separate page
• Look at source code and copy wherever needed
• Must use special tags in XHTML
• In IE, use and
• With Netscape, use
• Employs either ActiveX control or plug-in

38
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

39
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

40
Lets Do Some Comparing

• Make sure button file is open
• Create GIF version
• Click on File Export Image
• Provide name and indicate type GIF
• Then, in dialog box, select
• Full Document Size
• Transparent
• Smooth
• Note
• File size
• Quality (add to web page)

41
Now, What?

• Add code to HRU footer
• Result will be rollover button linking to HRU
  home page
• Extra credit create buttons for HRU navigation
  bar in header