Griffin | Web Design 2
 
Resume Table of Contents  

Web Design 2

Flash 4
Creating Animations (Finally...the cool stuff.)

 
State Standards
 
  • WD 3.1 Content Standard: Students demonstrate the principles of good design and graphics utilizing commercial based software. (e.g. Adobe Photoshop, Microsoft Paint, Macromedia Fireworks, Macromedia Flash) (H.9.1)
Chapter Objectives
 
  • Create frame-by-frame animations.
  • Create motion-tweened animation.
  • Work with motion guides.
  • Create animation effects.
  • Animate text.
1. Flash 1A Assignment
Duration: moments
 
  1. Within your last name folder create a NEW folder called "FLASH4". Save all future Flash Chapter 4 assignments in this folder. Remember, no spaces or extra periods in filenames.
2. Read Chapter 4
3.

Print, staple, and complete the Chapter 4 Questions.

Chapter 4 Questions

Grading:
1. Questions

 ___ 23 points

Total  
 ___ 23 points

4.

Lecture CH4 /CH4 PowerPoint

  • Intro / Why Animate (F4-1: 4-3)
  • Create Motion-Tweened Animation (F4-4 - F4-19)
  • Create Classic Tween Animations(F4-20 - F4-23)
  • Create Frame-by-frame Animations(F4-24 - F4-29)
  • Create Shape Tween Animations(F4-30 - F4-35)
  • Create Movie Clips (F4-36 - F4-41)
  • Animate Text (F4-42 - F4-49)

5. Create a Animations
Duration: 2 Periods
(F4-1 - F4-19)
 

Complete the assignments outlined in Chapter 4.

  1. Open fl4_1.fla and save it as motionTw.fla. Complete the assignment that begins on
    page 4-6 and ends on 4-13.
  2. Create an extra layer that includes your name, period and date. Make sure the name layer extends across all frames.
  3. Create a new Flash 4 section at the top of your index.
  4. Link the motionTw.swf file to your index.

tools cool

  1. Open fl4_2.fla and save it as tweenEdits.fla. Complete the assignment that begins on page 4-14 and ends on 4-19.
  2. Create an extra layer that includes your name, period and date. Make sure the name layer extends across all frames.
  3. Link the tweenEdits.swf file to your index.

tools

  1. Open fl4_3.fla and save it as cTween.fla. Complete the assignment that begins on
    page 4-22 and ends on 4-23.
  2. Create an extra layer that includes your name, period and date. Make sure the name layer extends across all frames.
  3. Link the cTween.swf file to your index.

skillsdemo

  1. Open fl4_4.fla and save it as frameAn.fla. Complete the assignment that begins on
    page 4-26 and ends on 4-27.
  2. Create an extra layer that includes your name, period and date. Make sure the name layer extends across all frames.
  3. Link the frameAn.swf file to your index.

skillsdemo

  1. Open fl4_5.fla and save it as frameM.fla. Complete the assignment that begins on
    page 4-28 and ends on 4-29.
  2. Create an extra layer that includes your name, period and date. Make sure the name layer extends across all frames.
  3. Link the frameM.swf file to your index.

skillsdemo

  1. Open fl4_6.fla and save it as antiqueCar.fla. Complete the assignment that begins on page 4-32 and ends on 4-32.
  2. Create an extra layer that includes your name, period and date. Make sure the name layer extends across all frames.
  3. Link the antiqueCar.swf file to your index.

skillsdemo

  1. Open fl4_7.fla and save it as morphCar.fla. Complete the assignment that begins on
    page 4-33 and ends on 4-34.
  2. Create an extra layer that includes your name, period and date. Make sure the name layer extends across all frames.
  3. Link the morphCar.swf file to your index.

skillsdemo

  1. Open fl4_8.fla and save it as shapeHints.fla. Complete the assignment that begins on page 4-35 and ends on 4-35.
  2. Create an extra layer that includes your name, period and date. Make sure the name layer extends across all frames.
  3. Link the shapeHints.swf file to your index.

skillsdemo

  1. Open fl4_9.fla and save it as mClip.fla. Complete the assignment that begins on
    page 4-38 and ends on 4-41.
  2. Create an extra layer that includes your name, period and date. Make sure the name layer extends across all frames.
  3. Link the mClip.swf file to your index.

skillsdemo

  1. Open fl4_10.fla and save it as textAn.fla. Complete the assignment that begins on
    page 4-44 and ends on 4-49.
  2. Create an extra layer that includes your name, period and date. Make sure the name layer extends across all frames.
  3. Link the textAn.swf file to your index.

skillsdemo

Grading:
1. motionTw.swf 2
2. tweenEdits.swf 2
3. cTween.swf 2
4. frameAn.swf 2
5. frameM.swf 2
6. antiqueCar.swf 2
7. morphCar.swf 2
8. shapeHints.swf 2
9. mClip.swf 2
10. textAn.swf
2
Total  
 ___ 20 points 
6a. Shape Tween Practice
Duration: 1 Period
 
 

smiley

  1. Create the animation as shown.

skillsdemo

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


 
6.

Flash Skills Review
Duration: 1 Period

 
 

SkillsDemo4

  1. Open fl4_11.fla and save it as skillsDemo4.fla. Complete the assignment that begins on
    page 4-50 and ends on 4-52.
  2. Create an extra layer that includes your name, period and date. Make sure the name layer extends across all frames.
  3. Link the skillsDemo4.swf file to your index.

skillsdemo small

Grading:
1. Text Animates  
2. Ball - Frame Animation  
3. Ball - Path Animation  
4. Name, period, Date  
Total  
 ___ 10 points

7.

Project Builder 1
Duration: 2 Periods

 
 

Ultimatetours4

  1. Open ultimateTours3.fla and save as ultimateTours4.fla. Complete the assignment outlined on pages F4-53 & F4-54.
  2. Create an extra layer that includes your name, period and date. Make sure the name layer extends across all frames.
  3. Link the ultimateTours4.swf file to your index.

sm layers

Grading:
1. Text Animates  
2. Buttons Animate  
3. Trek Button - Go to Treks  
4. Cruise Button - Go to Cruise  
Total  
 ___ 15 points

8.

Design Project
Duration: 1 Period

 
 

dpc4

  1. smComplete the assignment outlined on page F4-46 using the site below.
  2. Use the design template to complete a design analysis of the Smokey The Bear web site: www.smokeybear.com/kids. Include the questions from the template and type the answers in MS Word. Include the print screens of the web site you are analyzing as described.
  3. Here is a great analysis example.

    1. Whose Web site is this?
    2. What is the goal(s) of the site?
    3. Who is the target audience?
    4. Briefly describe the Contrast. Include a few sentences on what draws your eye to the page. Make sure to talk about text size and color.
    5. Briefly describe the Repetition. Include a few sentences on how design is used to add visual interest. What colors and shapes are repeated on the page or in the site?
    6. Briefly describe the Alignment. Include a few sentences on the visual connections from one element to the next. Talk about horizontal and vertical alignments of elements as well as if text is left, right, centered, or full. What is the primary text alignment?
    7. Briefly describe the Proximity. Include a few sentences on how design is used to organize the web page. How many visual elements are on the page? Explain why each section is separated.
    8. What may be animated on this homepage?
    9. Do you think this is an effective design for the company, its products, and its target audience?  Why or why not?
    10. What suggestions would you make to improve on the design, and why?

  4. Link the file file to your index.
  5. Print and hand into the instructor
Grading:
1.

Complete Answers for dpc4

 
2.    
3.    
Total  
 ___ 10 points
10. Optional – Complete the Online Practice Test, Study Guide  
11.

CH4 Quiz Part 1
CH4 Quiz Part 2

sm

Note:

  • Animations should avoid use of bears, ketchup, salsa, tabasco, or other red colored food items.

  • Search MS Office clip art for "alternative energies car " for the image.
  • You may use different text or different images.
  • Bonus points for a second button that moves the cloud and allows the car to continue.

  • At the beginning include one sentence on why one should use animation on a web site. (See CH4 Intro for more information. And by 'see CH4 Intro' I mean actually read the CH4 Intro. It's amazing what you find out when you actually read. Really.)

    car      cloud

Grading:
1. Text Animation  
2. text is a button  
3. Symbol Animation  
4. Why animate?  
5. name, period, date  
Total  
 ___ 10 points

 

 

Additional Resources

A. Online Textbook Resource

top