Objective

To learn advanced Flash site building skills by recreating this Flash site.

Discussion

In addition to animation, Flash web sites gives one complete control over typography. However, updating content could be slightly harder than an HTML site.

In this exercise, the art has been created in Illustrator. We'll import the art into Flash to build the site, then use Dreamweaver to put the finishing touches on the published files.

Procedure

prepping for the exercise

1. download starter files, examine files
2. launch Flash, file > new: actionscript 2.0
3. file > import "portfolio.ai" (all layers, set stage to match artboard)
4. save as "portfolio.fla"
5. delete uneeded layers
6. rename "scene 1" as "master"
7. duplicate "master" scene, rename "master2"
8. delete "pix" and "portfolio" layers
9. window > swatches: clear colors, add custom colors to swatches

making navigation links

1. select "portfolio" type, convert to button symbol "link1" (F8)
2. edit button on stage (double-click symbol)
3. add keyframe to "over" state (F6), change color
4. add keyframe to "down" and "hit" states (F6)
5. add box to "hit" state
6. return to "master2" scene
7. window > actions: goto scene "portfolio" (script assist=on)
8. repeat with other links
9. logo layer: draw box for "hit" state, convert to button symbol "buttonBlank" (F8)
10. edit button: drag art to "hit" state
11. window > actions: goto scene "intro"

animating "master2" scene

1. new layer "actions": insert blank keyframe on frame 20 (F7)
2. window > actions: stop
3. new layer "fade": insert blank keyframe on frame 10 (F7)
4. draw white box, convert to graphic symbol "box" (F8)
5. insert keyframe on frame 20 (F6), tween
6. select "box" on frame 20: alpha=0
7. new layer "wipe": drag "box" symbol from library to stage
8. color=tint (blue)
9. insert keyframe on frame 13 (F6), tween
10. move bullet art to frame 7
11. move text to fram 10
12. frame 20: insert frames (F5)
13. test movie (cmd+RETURN)

making text scenes

1. duplicate "master2" scene, rename "resume"
2. break apart link (cmd+B), move bullet art
3. repeat with "portfolio", "philosophy", "personal" and "contact" scenes
4. change heads to match links
5. go to "resume" scene
6. select text, convert to movie clip symbol "resumeContent"
   (advanced: export for actionScript=yes, export in first frame=yes)
7. edit symbol: add text, add PDF link (blank button); return to "resume" scene
8. delete "resumeContent" symbol from stage
9. window > components: drag srollPane to stage (w=490, h=470, instance name="resume")
10. window > properties > parameters: contentPath=resumeContent, hScrollPolicy=off
11. go to "actions" layer, frame 10: add blank keyframe (F7)
12. add the following actionscript to frame 10:
    resume.setStyle("borderStyle","none");
13. reference: www.ultrashock.com/tutorials/flashmx2004/skinning.php
14. test movie (cmd+RETURN)
15. troubleshoot scrolling error: add white period

making "portfolio" scene

1. go to "portfolio" scene
2. delete text frame
3. copy portfolio art from "master" scene into "portfolio" scene
4. convert portfolio art to movie clip symbol "portfolio"
5. file > import to library: all art from "portfolio" folder
6. edit "portfolio" symbol on stage
7. rename "layer1" as "menu"
8. delete FPO art
9. new layer "art", insert 11 blank keyframes
10. draw horizontal guide
11. drag imported art to stage, reposition
12. new layer "stop": add 11 stop actions
13. new layer "buttons": drag "buttonBlank" to stage, scale, reposition
14. window > actions: goto and stop (frame 1)
15. duplicate "buttonBlank", reposition, change actionscript
16. new layer "numbers": copy numbers from "menu" layer
17. change color to dark blue; insert 11 keyframes
18. delete unneeded numbers on each keyframe
19. go to "menu" layer: convert left triangle to button symbol "left"
20. window > actions: goto and stop (previous frame)
21. repeat with right triangle
22. insert keyframes on 2, 11
23. modify actionscript on frame 1, 11
24. return to "portfolio" scene
25. test movie (cmd+RETURN)

animating the "intro" scene

1. duplicate "portfolio" scene, rename "intro"
2. modify stop action to: goto "portfolio" scene
3. delete unneeded layers, delete unneeded art
4. animate art from frames 5 to 75
5. window > scenes: restack sequence
6. test movie (cmd+RETURN)

publishing

1. file > publish settings, format (.swf & .html), flash (version 8, no loop); publish
2. duplicate "portfolio.html", rename "index.html"
3. modify "index.html" in dreamweaver: wrap <div#center> around flash object (position=absolute, L=50%, T=0px, margin-left=-700px)
4. modify <body>: margins=0
5. change title to "Jane Smith Graphic Design"
6. test menu in browser (drag and drop .html file onto browser icon)
7. link HTML file from your projects page and publish