Student Showcase

Turn in your Rotoscope and Midterm Projects at the beginning of class. We will take a look at everyone's work on the big screen.

Exercise: Build a Basic Flash Website

Let's build a five-page Flash website using materials found at Wikipedia about the wild Pallas's cat. Begin by downloading the ZIP file linked below. Then follow the step-by-step instructions in Flash.

Download

Pallas Cat Source Files

Getting the Timeline Set Up

1. Create a new Flash [ActionScript 3.0] file and set the stage to 960px by 600px with a white background. Save the file as pallas-cat.fla.

2. Add 8 new layers to the Timeline, and then name your layers as shown below:

3. Create keyframes (F6) on the Actions layer at frames 10, 20, 30, 40, 50, and 60. This is where we will label our frames as well as put our ActionScript.
4. Insert a frame (F5) on frome 60 of the Buttons and Background layers. This will assure that the menu and background are continuous throughout all website pages.

5. Click in frame 1 of the Actions layer. In the Properties panel, give the frame the label of home. Give frames 10, 20, 30, 40, and 50 labels too, according to the table below. These labels give the ActionScript a destination frame to go to when a button is clicked:

6. Insert a frame (F5) at frame 9 on the Home layer. This will signify the end of the Home page content.
7. Insert a keyframe (F6) at each of the following frames. These signify the beginning of each page's content:

8. Insert a frame (F5) at each of the following frames. These signify the end of each page's content:

9. Insert a keyframe in frame 9 of the Actions layer. Open the Actions panel (Window > Actions.) Place a stop command there. This will give you ten frames in which to display an animation on the home page (of course, you can always extend the length of time if you want, by inserting frames between frames 1 and 9; you can also elect not to have an animation):

stop();

10. Repeat the stop command in keyframes at frames 19, 29, 39, 49 and 60 of the Actions layer. Your site is now set up so that if a button triggers a jump to a given page's content, the Playhead will only travel from the web page's first keyframe to its second keyframe and then stop without progressing to another page.

11. Save the file.

Prepare the Images in Photoshop

The images provided to you in the ZIP file are very large. This is what you always want to start out with so that you can generate the highest quality downsamples possible. But they do need to be downsampled (resized to be smaller). The images will never need to be seen larger than the size of the website. If you work with the huge image files in your library, your resulting SWF will be an unpleasantly large file to download and view online.

1. Open up each of the photos in Photoshop (the two non-photo images are already small enough for the site.)
2. Use File > Save for Web and Devices to save a copy of pallas-cat_close-up_edinburgh-zoo.jpg in high-quality JPG format at 400px x 267px. Add the word small to the new file name.
3. Save a small JPG copy of pallas-cat_looking-off-left_rotterdam-zoo.jpg at 400x400.
4. Save a small JPG copy of pallas-cat_female_looking-off-right.jpg at 268x400.
5. Save a small JPG copy of pallas-cat_rock-cave_zurich-zoo.jpg at 300x400.
6. The background image of grass in snow (grass-in-snow.jpg) needs an opacity change.
   1. In the Layers panel, locate the lock icon on the left edge of the Background layer.
   2. Drag the lock icon to the trash icon at the bottom of the Layers panel. This converts the layer to a more editable one.
   3. At the top-right of the Layers panel, set the Opacity for this layer to 20%.
   4. Save a small JPG copy of grass-in-snow.jpg at 960x720.
7. Close all the original image files without saving.

Create the Website Background

Our site background will contain site identification and a simple image.

1. In Flash, choose View > Pasteboard so that we can see the whole stage in our window.
2. Choose View > Rulers and pull a horizontal guide down from the top ruler. Line it up with the bottom of the stage.
3. Select the Background layer in the Timeline panel.
4. Import grass-in-snow_small.jpg to to stage.
5. Use the Selection tool to position the image so that its top edge aligns with the top of the stage and its sides match the stage's sides. The bottom of the image extends past the stage, which is why it's nice to have a guide there.

6. Pull another guide down so that it is 100px down from the top, and another at 130px. The top section will be for our site ID, and the second section for our buttons.
7. Select the Text tool. In the Properties panel, choose TLF Text and Read Only.
8. Choose an elegant font at about 60pt and make it black. Make sure it is set to align left.
9. Click near the top-left edge of the stage and type Pallas's Cat.
10. Press Enter/Return and reduce the font size to about 30pt. Type The cat that time forgot.
11. Position the site ID so that it has a little room around it above the first guide.

12. Select the Rectangle tool. Turn on Object Drawing and Snap to Objects. Set the fill color to white and the stroke to none.

13. Draw a rectangle between the top two guides and from the left to right edges of the stage. This will form the backdrop for your menu buttons on the layer above.
14. Lock the Background layer and save the file.

Create the Master Button

First we'll design a basic button with animation, and then we'll make copies for the six menu items we'll need.

1. Insert > New Symbol
2. For Name, type in Master. For Type, choose Button. Click OK.
3. In the Library panel, create a new folder using the New Folder icon at the bottom of the panel.
4. Name the new folder Buttons and drag your Master button into this folder.
5. In the Timeline, name the current layer Background.
6. Insert a frame (F5) in the Hit frame for this layer.
7. Select the Rectangle tool and use these settings:
   1. Stroke: none
   2. Fill: a dark color
   3. Object Drawing: on
   4. Rectangle Options (bottom of Properties panel): all four corners at 15.00.
8. Draw a rectangle on the stage which is 25px tall and 150px wide. You may want to use guides to get this exact.

9. Add a new layer and name it Gradient.
10. Select and copy the shape on the stage. Lock the Background layer.
11. Go back to the Gradient layer and Edit > Paste in Place.
12. Zoom way in so you can see what you are doing.
13. Use the Free Transform tool to make the shape on the Gradient layer a bit small than on the Background layer, by a couple of pixels on each side.

14. In the Properties panel, set the Stroke color to white (1px width.) Set the Fill color to the default linear gradient (white to black.)

15. Switch to the Gradient Transform tool. Rotate the gradient 90° CCW so that the black is on the top. Resize the gradient so that it is only as tall as the shape.

16. In the Color panel, make sure Fill (the paint bucket icon) is selected. Set the left crayon to the same color you used for the button background. Set the right crayon to a bit lighter shade of the same hue.

17. In the Gradient layer in the Timeline, insert a keyframe (F6) in the Over frame.
18. Insert another keyframe in the Down frame.

19. Return to the Over frame, and select the gradient shape with the Selection tool.
20. Convert it to movieclip symbol (F8) named Hover-effect.
21. In the Library panel, drag the Hover-effect symbol into the Buttons folder. Double-click on its movieclip icon to open the symbol for editing.
22. In the Hover-effect symbol, select the shape on the stage and press Ctrl+B (Mac: Cmd+B) twice to convert it back to a vector shape.
23. Add a keyframe (F6) in frame 10 of the single layer.
24. At frame 10, use the Gradient Transform tool to flip the gradient 180°.

25. Right-click in between frames 1 and 10, and select Create Shape Tween.
26. Test the animation by dragging the playhead.
27. In frame 10, place a stop command in the Actions panel, as shown earlier. This will keep the animation from looping when the mouse hovers over a button.

28. Return to editing the Master button.
29. Move the playhead to the Down frame and select the gradient shape with the Selection tool.
30. In the Properties panel, change the Stroke color to a medium gray.
31. In the Color panel, change the two gradient crayon to slightly darker shades.

34. Return to Scene 1, drag an instance of Master somewhere out onto the stage in the Buttons layer, and test the movie. Interact with the button to see how it works. Close the SWF and remove the Master instance from the stage.
35. Return to editing the Master button.
36. Add a new layer at the top of the Timeline panel named Text.
37. Use the Text tool with white Color, a simple font at about 18pt, and set to left align.
38. Type the word Characteristics over the button so that we are sure that the longest button text will fit as the font style and size you chose. Adjust as necessary so that the text fits easily within the white border.

39. Now, without changing the position or other settings of the text, change the word to Master.
40. Save the file.

Arrange the Menu Buttons

We'll need six menu buttons across on the rectangular band of white.

1. In the Library panel, right-click on the Master button and select Duplicate...
2. In the dialog box, name the duplicate button Home.
3. Repeat steps 1 and 2 to create five more buttons:
   • Characteristics
   • Habitat
   • Behavior
   • Reproduction
   • Conservation
4. Make sure all the button symbols end up inside the Buttons folder in the Library.

5. Double-click the button icon for the Behavior button symbol.
6. Change the text from Master to Behavior.
7. Repeat steps 5 and 6 for the other new buttons, giving them each text which matches the symbol name.

8. Return to Scene 1.
9. Select the Buttons layer and the Selection tool.
10. Drag out a copy of each of these buttons in the following order, and line them up on the white rectangle. Precision is not required—we'll let Flash line them up afterward. Do make sure the the outer two buttons have a little white space between them and the edges:

11. Click on frame 1 of the Buttons layer to select all six buttons at once.
12. Open the Align panel (Window > Align.)
13. Uncheck Align to stage.
14. Click the Align top edge icon, and then Distribute horizontal center. This will nicely align the buttons and space them evenly.
15. With all six buttons still selected, use the arrow keys on your keyboard to move the button set so that they have an even amount of white on the top, bottom, and far left and right.

16. Delect everything by clicking in the gray pasteboard off the stage.
17. Click on the Home button on the stage.
18. In the Properties panel, give the button an instance name of btnHome.

19. Give the other buttons instance names according to this table. These instance names are very important to the functionality of the menu, so make sure you type the names exactly:

20. Click in frame 1 of the Actions layer and open the Actions panel.
21. Type in the following ActionScript exactly as you see it here. I am making you type (rather than copy-and-paste) in order to help your brain become better familiar with the flow and syntax of ActionScript. Every little quote, semicolon and upper/lowercase letter is very important.

22. Test the movie and make sure you don't get any compiler errors (Compiler Errors panel.) You should be able to click on the buttons, but you won't see that you're actually moving the playhead around yet.
23. Close the SWF, lock the Buttons layer and save the file.

Build the Home Page Layout

1. Pull out some more guides to help align our text and images:
   • Horizontal guides at 150px and 575px on the left-hand ruler.
   • Vertical guides at 25px, 470px, 490px, and 935px on the top ruler.

2. Click in frame 1 of the Home layer in the Timeline panel.
3. Import the pallas-cat_female_looking-off-right_small.jpg image to the stage and position it centrally but top-aligned within the new left-hand column created by the guides.

4. In the Library, create a new folder called Photos and move the two photo bitmaps into this folder. All of the remaining photos we import should end up in here too.

5. Open the pallas-cat.txt file and copy the first full paragraph from it to the clipboard (Ctrl+C on PC, Cmd+C on Mac.)
6. Select the Text tool in Flash. Use the following settings in the Properties panel:
   • TLF Text
   • Read Only
   • Arial (or Helvetica)
   • Regular
   • 26pt
   • black
   • Left align
7. Click and drag on the stage to match the edges of the right-hand column formed by the guides. Dragging out a box gives you paragraph text with text wrap, rather than point text without.

8. Paste your text from the clipboard (Ctrl+V on PC, Cmd+V on Mac.)

9. Select the cat photograph and text box together by clicking in frame 1 of the Home layer.
10. Convert the two objects into a movieclip symbol (F8) named Home.
11. In the Properties panel, add an Alpha Color Effect and set the alpha to 0.
12. Right-click in frame 1 of the Home layer and select Create Motion Tween.
13. Still in the Home layer, move the playhead to frame 9.
14. Select the now-invisible movieclip of the cat photo and textbox.
15. Return the Alpha setting back to 100%. This will automatically generate a property keyframe in frame 9 of the Home layer.

16. Move the playhead to check the animation.
17. Test the movie. The home page contents should gradually appear.
18. Click on another button, and then back to home. The content area should go back to blank, and then show the animation again at home. The stop command in frame 9 prevents the animation from looping on the home page.
19. Close the SWF, lock the Home layer, and save the file.

Build the Interior Page Layouts

We'll be repeating the techniques above to animate the content on the remaining pages.

Characteristics Page

1. Click in frame 10 of the Characteristics layer.
2. Import the pallas-cat_close-up_edinburgh-zoo_small.jpg to the stage and position it neatly and top-aligned within the right-hand column.
3. Paste the Characteristics heading and the paragraph that follows from pallas-cat.txt into a new text box in the left-hand column.
4. Set the heading to 24pt and the paragraph text to 16pt.

5. Repeat steps 9 through 15 above to animate this content, but name the movieclip Characteristics, and create the Motion Tween from frames 10 through 19 on the Characteristics layer.
6. Test the movie, and click between the Home and Characteristics buttons.
7. Close the SWF, lock the Characteristics layer, and save the file.

Habitat Page

1. Click in frame 20 of the Habitat layer.
2. Import the Pallas's_Cat_area.png to the stage and position it neatly and top-aligned within the right-hand column.
3. Paste the Habitat heading and the paragraph that follows from pallas-cat.txt into a new text box in the left-hand column.
4. Set the heading to 24pt and the paragraph text to 16pt.
5. Repeat steps 9 through 15 above to animate this content, but name the movieclip Habitat, and create the Motion Tween from frames 20 through 29 on the Habitat layer.
6. Lock the Habitat layer and save the file.

Behavior Page

1. Click in frame 30 of the Behavior layer.
2. Import the pallas-cat_rock-cave_zurich-zoo_small.jpg to the stage and position it neatly and top-aligned within the right-hand column.
3. Paste the Behavior heading and the paragraph that follows from pallas-cat.txt into a new text box in the left-hand column.
4. Set the heading to 24pt and the paragraph text to 16pt.
5. Repeat steps 9 through 15 above to animate this content, but name the movieclip Behavior, and create the Motion Tween from frames 30 through 39 on the Behavior layer.
6. Lock the Behavior layer and save the file.

Reproduction Page

1. Click in frame 40 of the Reproduction layer.
2. Import the pallas-cat_looking-off-left_rotterdam-zoo_small.jpg to the stage and position it neatly and top-aligned within the right-hand column.
3. Paste the Reproduction heading and the paragraph that follows from pallas-cat.txt into a new text box in the left-hand column.
4. Set the heading to 24pt and the paragraph text to 16pt.
5. Repeat steps 9 through 15 above to animate this content, but name the movieclip Reproduction, and create the Motion Tween from frames 40 through 49 on the Reproduction layer.
6. Lock the Reproduction layer and save the file.

Conservation Page

1. Click in frame 40 of the Conservation layer.
2. Import the near-threatened_conservation-status.png to the stage and position it neatly and top-aligned within the right-hand column.
3. Paste the Threats and Conservation heading and the two paragraphs that follow from pallas-cat.txt into a new text box in the left-hand column.
4. Set the heading to 24pt and the paragraph text to 16pt.
5. Repeat steps 9 through 15 above to animate this content, but name the movieclip Conservation, and create the Motion Tween from frames 50 through 60 on the Conservation layer.
6. Lock the Conservation layer and save the file.

Wrapping Up

1. Test the movie and confirm that all the buttons and animations work correctly. Fix anything that's broken.
2. Check your Timeline. It should look like this:

3. In the Library panel, create a new folder named Movieclips. Move all the movieclip symbols into it. Your final Library should look like this:

4. Time to publish the movie so that it is embedded within an HTML file. Go to File > Publish Settings...
5. In the Format tab, click the checkboxes for Flash and HTML. Then click on the Publish button at the bottom of the dialog box.

6. Close the Publish Settings dialog box and save your Flash file.
7. Search for the newly-generated pallas-cat.html file in the same location as your pallas-cat.fla file.
8. Open pallas-cat.html in Dreamweaver. Change the <title> element to say Pallas's Cat - the Cat that Time Forgot.
9. In the <style> element up in the <head>, add to the body rule so that it looks like this (this will center the SWF in the browser window in Internet Explorer, and change the background color surrounding the SWF to match the cat's eyes):

body { margin:0; padding:0; overflow:hidden; background-color: #828865; text-align: center; }

10. Add to the #flashContent rule so that it looks like this (this will center the SWF in the browser window in all other browsers):

#flashContent { width:100%; height:100%; margin: 0 auto; }

11. Open the HTML file in a browser and test all of the buttons again. It should work like this demo.