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

 

 

GDS 215 WEB DESIGN III
Exercise #2: Flash Web Design
Instructor: Paul Young

 

Objective

To learn site building techniques using Flash. To utilize dynamic text in a Flash site (with scroll bars).

 

Procedure

prepping for the exercise

  1. view finished flash site
  2. download starter files
  3. examine "inside.psd"
  4. create template JPG
  5. examine extra photos & text
  6. examine "links.txt"

laying out master scene in flash

  1. launch Flash; modify > document: 720 x 390; save as "main.fla"
  2. window > panel sets > default layout
  3. file > import to library: all pictures (organize with folders)
  4. drag template to stage, layout master scene (position without fractions)
  5. split into layers (left, right, sublinks, links)
  6. create symbols (match JPG file names)
  7. new layer "logo": create type (futura condensed); convert to symbols
  8. draw box, match color, convert to symbol; dupe box, alpha=40%
  9. delete "template" layer
  10. duplicate "scene 1", rename "intro"

create the main links rollover effects

  1. create button symbol "link1-button"; edit symbol (double-click)
  2. copy keyframe to over state (F6)
  3. convert over state picture to symbol (movie clip) "link1-over" (F8)
  4. edit "link1-over" symbol on stage (double-click)
  5. create 15 frame sequence (F5)
  6. add new layer "black", draw black box, convert to symbol (F8)
  7. tween between frame 1 and 10, frame 1 alpha=0, frame 10 alpha=50
  8. add new layer "type", add appropriate type (futura condensed 14pt)
  9. convert type to symbol "link1-type" (F8)
  10. tween between frame 5 and 15, make frame 5 alpha=0
  11. new layer "action", add stop action on frame 15
  12. return to "link1-button"
  13. copy keyframe to down state (F6)
  14. in properties: change behavior to "graphic", single frame, 15
  15. insert blank keyframe on hit state (F7)
  16. drag "black" symbol from library to stage, position, resize
  17. return to scene 1
  18. new layer "action", add stop action on frame 10 (F7)
  19. extend art to frame 10
  20. test movie (cmd+RETURN)
  21. repeat with other "link" symbols

creating new scenes

  1. window > scene: rename "scene 1" as "master"
  2. duplicate "master", rename "1-food" etc
  3. assign actions to buttons
  4. copy buttons to clipboard, paste in position in all scenes

creating sublinks

  1. go to "1-food" scene
  2. new layer "actions": add stop actions on frame 10, 20, 30, 40
  3. new layer "labels": blank key frame on 11, label "fine", repeat
  4. library: duplicate "church" symbol, rename "sublink-food", swap symbols on stage
  5. edit "sublink-food" symbol (double-click)
  6. new layer "type": add sublink text (14 px futura condensed, +20 line spacing, white, centered); convert to symbol "sublink-food-type" (F8)
  7. type changes from alpha=0 to 100% between frame 1 and 5
  8. new layer "black": draw black box, convert to symbol "black"
  9. black changes from alpha=0 to 50% between frame 6 and 10
  10. return to "1-food" scene
  11. extend "sublink-food" symbol to frame 40 (F5), play once
  12. new layer "buttons"
  13. draw black box over "food", convert to symbol "button" (F8), edit
  14. drag box to hit state (all other states are blank), return to "1-food" scene
  15. assign action to button: go to "food" scene, label "fine"
  16. duplicate button (opt-shift-drag), edit action, repeat
  17. test movie (cmd+RETURN)

linking to dynamic text

  1. new layer "text": go to frame 11, add blank keyframe (F7)
  2. text tool: dynamic text, instance name="food-fine", multiline, render text as HTML (font will be overriden, but line spacing will stick)
  3. variable=content
  4. frame actions: browser/network > loadVariables "text/food-fine.txt"
  5. draw triangles for scrolling buttons (on new layer), make symbols
  6. botton actions: objects > movie > textField > properties "content.scroll = content.scroll -1" (scrolls up one line at a time); repeat with down button

create intro

  1. duplicate "master" scene, , rename "intro"
  2. animate intro (start with vector)
  3. file > publish preview > flash
  4. view bandwidth profiler; adjust

publish movie

  1. file > publish settings, format (.swf & .html), flash (version 6, no loop); publish
  2. modify "main.html" in dreamweaver, margins=0
  3. create sniffer
  4. create "index.html"
  5. test site in browser, resize browser
  6. submit the FLA file with your name on it and drop it in classes > students for grading

 

Schedule

See Calendar.

 

 

______________________________

Last updated: 1/19/04 • Webmaster: Paul Young

 
 

Student
Exhibition

Influential
Designers

Internet
Resources

Tips, Tricks
& Handouts

Student
Links