Advanced Web CO404

For this quiz you will be asked to duplicate the sample Flash movie below using motion tweening, motion guides and shape tweening.

>>Quiz sample movie

Layers (in order):
trees: Graphic “tree”
sand: background image drawn directly on stage
water moving: Movie Clip “water” with shape tween (uses three keyframes to make water flow left, then right)
bird flying: Movie Clip “fly” with motion tween with guide (uses graphic symbol “bird”)
sun setting: Movie Clip “setting” with motion tween of setting sun (uses graphic symbol “sun”)
sky changing: Movie Clip “sky” with shape tween (color transformation)
words: Movie Clip “text” with masking with gradient on background

Library
bird (graphic)
fly (movie clip, motion tween with bird on motion guide, 60 frames, stop action on last frame optional)
setting (movie clip, motion tween with sun, 60 frames, stop action on last frame optional)
sky (movie clip, shape tween, 60 frames, stop action on last frame optional)
sun (graphic)
tree (graphic)
water (movie clip, 60 frames, shape tween)
text (movie clip, masking, gradient)

Workflow for posting on homework page:
1. Create Flash movie as noted above; save as quiz1.fla in your student folder.
2. Go to File/Publish to create the quiz1.swf file.
3. Open Fetch. Connect to www2.bc.edu with your username and password. Double click on the www folder, then double-click on the aw folder.
4. Use the Get command to download a copy of your index.html page. Minimize the Fetch window. IMPORTANT: If this downloads to the desktop, move it into your student folder before opening.
5. Open your index.html in Dreamweaver (if you are prompted about moving into a root folder, click cancel)
6. Use Insert/Media to insert quiz1.swf into your homework page at the top of the page.
7. Save your index.html page.
8. Using Fetch “Put” both the updated index.html page and the quiz1.swf file into your aw folder.
9. Go to Safari and view your homework page. If your quiz is not showing, review the directions and try again.

For homework create one masked effect and one text effect. They can both be in the same movie.

Text effects:
To make a text effect you can either apply regular motion and shape tweening to a graphic symbol containing text or use some of the assistants in Flash. To a Timeline Effect, follow these steps:
1. Insert a new movie clip symbol “text1″
2. Type your text
3. Insert/Timeline Effects/Effects to chose a special text effect.
4. Go into the graphic symbol created in your library, unlock the layers, and customize the effect by moving some symbols around.

Basic masking instructions:
Masks can have motion or shape tween on one or both layers. Either the mask can move over and object revealing what it below, or the background can move below a still mask. Here are step-by-step instructions for a basic text mask with a moving background.

1. Insert a new movie clip symbol called “mask1″
2. Use the text tool to type a word using a font that is fairly thick, and larger than 36 pt.
3. Name the layer with the text “text”
4. Insert a new layer. Name this layer “background” and be sure it’s below the layer text.
5. On Frame 1, of layer “background,” draw a large rectangle and make it wider than the text. Choose a color gradient from the bottom of the color palette for the fill of the rectangle.
6. Insert new Keyframes at Frame 36 on both layers. (Note: holding the shift key will allow you to select Frame 36 in both layers at the same time and insert both keyframes in one step.
7. Select the entire layer “background” and set up a shape tween making the colored rectangle move from left to right.
8. Select the top layer and Control Click, choose Mask from the menu.
9. Go back to Scene 1 and insert your symbol “mask1″
10. Test your movie.

Using the Shape Tween 101 tutorials online at practice a few applications for shape tweening.

maclab.guhsd.net/flash/intro.html#shape

*skip the blade of grass.

Then create an animated greeting card using shape tweens with a changing background that shifts several times like this:

maclab.guhsd.net/flash/2004/shape_tween/fun_with_tweens_01.swf

1. Create a movie clip containing your multi-step shape tween.
2. Create a movie clip with text.
3. Place these clips on the stage (on separate layers with shape tween on bottom layer).
4. Draw some additional graphic elements on the stage (on a separate layer).

• Pick a topic like last week to give your finished movie a theme.
• Create a movie 300×300 with a nice background color (modify/movie).
• Create four graphic symbols in your library, at least one should be text that has been converted to a graphic symbol.
• Create four movie clip symbols in your library (at least one should follow a guide).
• Drag your movie clips to the stage and adjust the spacing as needed and transform the symbols.
• Add one more layer to your main timeline and draw some background objects to complete the scene.
• Publish your movie and post on your homework page under the Week 4/Homework3 header

NOTE:
Each tween should transform in different ways (size, color, rotation, location, etc.).
At least one tween must follow a guided path.

Remember the order for doing this:
• Select frame 1 on layer 1
• Drag a symbol from the library onto the stage of the movie clip
• Adjust the size, location, color, alpha, etc. for how your tween will begin.
• Select frame 60 on layer 1, right-click and Insert Keyframe
• Adjust the size, location, color, etc. for how your tween will end.

Using Adobe Flash, create a static banner ad. Utilize “symbols” and transform several aliases of symbols from your library. Publish your Flash movie to create an .swf format file. Insert your finished ad into your homework page under the header Week 2. Upload your edited homework page and your .swf file to the appropriate folder in your webspace.

Choose from a standard web ad size.

Be sure to include a minimum of three graphic symbols, with multiple instances of each placed on your stage and altered using both the transform panel and property inspector. Include some text.

Examples:

Beach Scene #1

Beach Scene #2