Parkland College > Fine & Applied Arts > Graphic Design | Web Design >
Student Links > GDS 215 > Exercise #3

 

 

GDS 215 WEB DESIGN III
Exercise #3: Flash Drop-Down Menu
Instructor: Paul Young

 

Objective

To learn drop-down menu building techniques using Flash.

 

Procedure

prepping for the exercise

  1. view finished menu
  2. download starter files
  3. examine downloaded files
  4. duplicate "menu-start.fla", rename "menu.fla", open in flash

creating the master menu in flash

  1. window > panel sets > default layout
  2. edit > select all, make symbol (movie clip) (F8)
  3. double click symbol to edit symbol on stage
  4. create new layers: labels, actions, heartland, buttons1, buttons2, buttons3, green, color1, color2, color3 (in this order)
  5. create symbols of each color bar (graphic) (F8)
  6. move color bars to appropriate layers
  7. move type to appropriate layers
  8. extend heartland and green to frame 20 (F5)
  9. color1: insert keyframe on 5, tween, move art on frame 1 up
  10. repeat with color2 between frames 6 and 10
  11. repeat with color3 between frames 11 and 15
  12. copy frames 11-15 and paste into frames 16-20
  13. actions layer: add stop action on frames 5, 10, 15, 20
  14. add labels: frame 6 "activities", frame 11 "spa_treatments", frame 16 "spa_activities"
  15. button1 layer: move to frame 5, extend art to frame 20 (F5)
  16. drag "color 2" symbol onto stage, resize to match rollover area for "about us"
  17. convert to symbol "button1" (button) (F8)
  18. double click symbol to edit symbol on stage
  19. drag art to "over" state, copy art to "down" state and "hit" state (F6)
  20. return to "menu"
  21. assign action to button: "goto" "frame label" "activities" (release=yes; over=yes)
  22. copy button to other menu items, resize
  23. repeat with button2 and button3
  24. test movie (cmd+RETURN)
  25. add additional frames, labels as needed (note: action script for "contact" needs to be handled slightly differently)

publishing

  1. file > publish settings, format (.swf & .html), flash (version 4, no loop); publish
  2. modify "menu.html" in dreamweaver, margins=0
  3. test site in browser, resize browser
  4. publish your uploadable files for grading

 

Schedule

See Calendar.

 

 

______________________________

Last updated: 2/23/04 • Webmaster: Paul Young

 

 

Student
Exhibition

Influential
Designers

Internet
Resources

Tips, Tricks
& Handouts

Student
Links