FLASH 1

 

Theme: Animation (Introductory)

 

Prerequisite: Photoshop 1 Module, Illustrator 1 Module.

 

Description: This module will introduce students to the basics of Flash Animation.  Students will learn Flash Animation for online presentations and website design.  Students will complete a number of animation projects.

 

Parameters: Access to a computer, software (Macromedia Flash 8.0, Flash 8.0 Video Files, Flash Exercise Files, Adobe Photoshop CS2,), scanner and/or digital camera.

 

Notes:  

 

You have 18 classes to complete this module. 

 

In this class, time is of the essence and you will not have time to chat with friends, play games or do other assignments.  You are allotted 1 class period for each day. If you fall behind, you are responsible for completing all module components outside of class time (before class, lunch, after school) or for homework.

 

All assignments are considered due at the end of the class on the due date.  Assignments handed in after these times are considered late.  All assignments handed in late will receive the following deductions.  There are no exceptions.

 

1 day late – deduct 10%
2 days late – deduct 20%
3 days late – deduct 30%
More than three days late – 0% for the assignment (although the assignment will receive a grade of 0%, it must be completed in order for the student to receive credit for the module).

 

If the assignments are due on the Wednesday and are not handed in until the Saturday, this will be considered as one day.

Plagiarism or any other form of academic dishonesty will not be tolerated.  Students caught trying to copy the work of others will receive an automatic “0%”, and be referred to the administration.  In addition, the offence will be recorded in the student’s permanent file. 

 

Grading:  Grading your work is straight forward task for your instructors as rubrics are used for each and every assignment.  Components for these rubrics dictate what grade you will receive in several specific areas.  These component grades are then tallied up and a final grade for your assignment is recorded.  Your grades are nonnegotiable.

 

LESSON 1: Introduction & Interface Essentials

 

As you work with Macromedia Flash 8.0, you'll discover that there is often more than one way to accomplish the same task. To make the best use of the extensive capabilities in Flash, you must first learn to navigate the work area. 

 

Lesson Overview

 

At the end of this lesson the student will be able to:

 

Save a Panel Set.
Insert and re-name layers.
Use the Pen tool to draw straight lines.
Change background color.
Change the frame rate.
Add key frames and blank key frames.
Scale, rotate, and change the color of a shape.
Add and format text.
Fade content in and out.
Create a Shape Tween.
Create a Motion Tween.
Undock and move Panels.

 

Start this section by watching the following videos.

 

File Types
Bitmap vs. Vector Graphics
Start Page
Default Workspace
Interface Management
Essential Preferences
Finding Help

 

ASSIGNMENT 1: STAR ZOOM AND FADE 

 

In this 3 part exercise you are going to use the Flash for Kids lesson Instructions Workbook to complete your first assignment.  You should complete this by the end of class.  

 

Do not worry about finishing the Animating A Graphical Shape and Text assignment (the fourth part of this exercise) by the end of class.  This will be your first project (remember projects are worth 40% of  your grade) which you will complete later.  For now, just worry about the first 3 parts .  You are free although, to begin the Animating A Graphical Shape and Text to get a head start on earning a good grade.  

 

Open up the Flash for Kids workbook.  

 

Save each part of the lesson.  You should have 3 FLA files labeled Part 1, Part 2 & Part 3 to hand in along with the SWF files with the same name.  There should be 6 items saved.  Your work should be turned in as Flash 1 > Assignment 1 

 

Click here to see an example of this assignment. 

 

Click here to see the the rubric for this assignment.

 

LESSON 2:  Drawing and Color 

 

How to use color in strokes and fills is critical to your success.  Understanding gradients and other coloring techniques will only make your presentations even more attractive. 

 

Lesson Overview

 

At the end of this lesson the student will be able to: 

 

Draw with a Pencil
Modify Lines
Draw with the Pen
Use Ovals and Rectangles
Free Transform
Use their Toolbar
Group Objects

 

Start this section by watching the following videos.

 

Pencil Drawing
Modifying Lines
Drawing with the Pen
Ovals and Rectangles
Free Transform
Optimizing Shapes
Brush Tool
Lasso Tool
Eyedropper Tool
Mixer and Gradient
Color Swatches
Grouping
Object Based Undo
 

 

LESSON 3: Animation Essentials

 

Understanding animation essentials is the heart of Flash.  Since your first project is all about animation, it will help you to watch these movies. 

 

Lesson Overview

 

At the end of this lesson the student will be able to: 

 

Change the properties of their work
Work with their timeline
Delete and Copy parts of their timeline
Test movies

 

Start this section by watching the following videos.

 

Document Properties
Timeline Frames
Deleting Copying
Testing Movies
Frame by Frame
 

 

Project 1:  Animating a graphical shape and text

 

You will animate a graphical shape and text using the transform skills that you learned in this lesson such as zoom-in, zoom-out, fade-in, fade-out, scale and rotate, and the changing of color.  Set your stage up to include size, background color, and frame rate of your choice.  Draw a Flash shape of your choice using the Pen tool or any of the other drawing tools such as the Rectangle tool, Oval tool, Pencil tool, or Brush tool.  Animate your drawing using various transform techniques learned in this lesson. Create a text of your choice, then animate it. 

 

Both your text and your graphical shape should have the following elements.

  • Zoom In

  • Zoom Out

  • Fade In

  • Fade Out

  • Scale and Rotate

  • Change Color

The overall length of the animation must be approximately 20 - 25 seconds.  The frame rate should be adjusted so that your animation flows smoothly, approximately 20-25fps.  If the animation is jerky, slow the frame rate down to compensate.  

 

When you are finished, save your work in Flash 1 > Project 1 folder. 

 

Name the project animate.fla.  You should also create a SWF file.

 

Click here to see an example of this project

. 

Click here to see the the rubric for this project.

 

LESSON 4: Shape Tweens and Animating Letters

 

Today, you're going to start the next section of Flash which involves shape tweens (which you have some experience with) and an assignment which will involve animating letters.   

 

Lesson Overview 

 

At the end of this lesson the student will be able to: 

 

Use shape tweens
Use shape hints
Shape tween text
Edit multiple frames
Animate a gradient
 

Start this section by watching the following videos.

 

Shape Tweens
Shape Hints
Shape Tweening Text
Edit Multiple Frames
Animating a Gradient
 

 

ASSIGNMENT 2 

  • Open up the Flash for Kids.

  • On the contents page, click on Animating Letters.  You will automatically jump to page 23.

  • Make note of the skills you will be learning.

  • Complete Part 1 - Creating Text.

  • Upon completion of Part 1, save it to Flash  1 > Assignment 2, as Part_1.fla.  Include your SWF file in that folder.  

  • Move forward onto Part 2-Animating Text and save it in Flash 1 > Assignment 2. Name this assignment, Part_2.fla and also include your SWF file.

Click here to see an example of this assignment. 

 

Click here to see the the rubric for this assignment.

 

Project 2:   Animating Scattered Letters 

 

You will animate scattered letters of a word so that they are rearranged in the correct order and spelling of that word.  Create a one word text, break the text apart, then distribute each letter to its own layer. On the starting keyframe scatter each letter to different locations on the stage, then on the ending keyframe further down the Timeline rearrange the letters to the correctly spelled order of the word.

Create a Motion Tween that will animate the letters from their scattered position to their correct position.

To add interest to the animation, change the size of each letter when they are scattered on the stage in frame 1. Use the Transform tool to re-size the letters, and use different sizes for each letter.  Have the letters move about, do different things, and incorporate creative animation into the work.
 

 

Remember to use these elements from your previous work.

 

Zoom In
Zoom Out
Fade In
Fade Out
Scale and Rotate
Change Color

 

 Project Check List

  • Each letter is distributed to its own layer.

  • Timeline is expanded so that all layers are visible.

  • Starting layer, 'Layer 1' is deleted. 

  • Only the letter layers are displayed.

  • Guides are all present and properly placed.

  • There must be a minimum of 5 letters in the word.

  • Be creative. The more you add to the project using previous skills, the better your grade.

  • The overall length of the animation must be 15-20 seconds.

  • The frame rate should be adjusted so that the animation flows smoothly, approximately 20-25fps.  If the animation is jerky, slow the frame rate down to compensate.

  • When you are finished, name your work letters.fla and save it and it's accompanying SWF file in your Flash 1 > Project 2 Folder.

Click here to see an example of this project. 

 

Click here to see the the rubric for this project. 

 

LESSON 5 Symbols & Pictures

 

Working and converting objects to symbols is an important part of Flash.  Working with pictures falls right in with this.  Today you will cover both items. 

 

Lesson Overview

 

At the end of this lesson the student will be able to: 

 

Create symbols
Manipulate and move symbols
 

 

Start this section by watching the following videos.

 

Creating Symbols
Moving Symbols
Working with Symbols
 

 

You are now going to begin the next part of the lesson which will involve working with Part Three of the Flash for Kids workbook.  This section is titled Photo Merge and as it's title suggests, you are going to be working with Images as well as being introduced to timelines.

 

ASSIGNMENT 3 

 

There are 4 parts to this section of the Flash for Kids workbook covering pages 37 to 52.  Follow the instructions carefully.  Name and save your work as the book tells you to.  When you are ready to save your work, you will save all of your work to Flash 1 > Assignment 3 Folder.  There should be 4 FLA's and 4 SWF's in the folder upon completion.  

 

You are also going to have to access some exercise folders for this assignment.  In the Flash for Kids workbook, it tells you to access them from the Flash for Kids CD.  Obviously you cannot do that.  You will access them below instead. 

 

Banzaicliff.jpg

Cafe-Bottom-Left.jpg

Cafe-Bottom-Right.jpg

Cafe-Top-Left.jpg

Cafe-Top-Right.jpg

Houses.jpg

Lagoon.jpg

Mountainview.jpg

Shacks.jpg

Street.jpg

Tropical-Island.jpg

Umbrella.jpg

Vendors.jpg

White-Road-Left.jpg

White-Road-Right.jpg

 

Click here to see an example of this assignment. 

 

Click here to see the the rubric for this assignment.

 

Project 3: MERGING TWO IMAGES INTO ONE 

 

You will create an animation that has two sections of a photograph merge into one photograph with Timeline effects applied to the text.

  • Set the dimensions of the stage to 400 pixels wide by 600 pixels high.  This is the dimension of the photograph when the two sections have come together as one.

  • Make sure each image is on its own layer.

  • Animate the sections of the photograph so that they merge and come together with transformation effects such as zoom, fade, or spin.

  • Create a short title that fades in over the still photograph after the image sections have come together, and apply a Timeline effect to the title.

  • Experiment with the various Timeline Effects to see what is the most effective special effect for your text.

  • You also have some creativity room when it comes to the title and the colors you use.  Be imaginative and impress the viewer with your flash animation skills.

  • The more you show of your skills, the better. 

You can use the supplied photo here;  Left side & Right Side, or you can use your own photo that has the same dimensions.

 

The overall length of your animation must be approximately 20 - 25.  The frame rate should be adjusted so that the animation flows smoothly, approximately 20-25fps.  If the animation is jerky, slow the frame rate down to compensate.  

 

When you are finished with the project, save it as photo_merge.fla along with it's accompanying SWF file in your Flash 1 > Project 3 Folder. 

 

Project Check List

  • Stage dimensions are accurate.

  • Each photo half is in it's own layer.

  • Both sections are animated creatively before coming together.

  • Title fades in and has a timeline effect.

  • Be creative. The more you add to the project using previous skills, the better your grade.

Click here to see an example of this project.  Here is a second example. 

 

Click here to see the the rubric for this project.

 

LESSON 6: Motion Tweens

 

Learning and using motion tweens properly is important for Flash.  Many broken motion tweens have been seen so far.  These videos should help solve that problem. 

 

Lesson Overview 

 

At the end of this lesson the student will be able to: 

 

Use Motion Tweens
Edit Multiple Frames
Use Motion Guides
 

Start this section by watching the following videos.

 

Basic Motion Tween
Tweening Effects
Edit Multiple Frames
Motion Guides
Motion Tweening Text
Easing
Custom Easing
 

 

LESSON 7 & ASSIGNMENT 4: Race Car on Tracks

 

Today you are going to work on an entire section in the Flash for Kids Workbook.  Starting on Page 57, you will finish all four parts of the Race Car on Track Lesson.  This will count as Assignment 4 for you.  Save a completed FLA and the corresponding .SWF of each of the four parts in Flash 1 > Assignment 4.

 

Click here to see an example of this assignment. 

 

Click here to see the the rubric for this assignment.

 

Lesson 8: Bitmap Graphics

 

Today you are going to watch videos on incorporating bitmap graphics into your Flash work.  Using bitmap graphics will enrich your Flash palette beyond the simple vector graphics which is inherent to Flash.  

 

Lesson Overview 

 

At the end of this lesson the student will be able to: 

 

Import and Compress Bit Images
Sequence Bitmaps
Convert Bitmaps to Vector Graphics
Change Opacity of Bitmaps

 

Start this section by watching the following videos.

 

Importing and Compressing
Bitmap Sequence
Bitmap Fills
Tracing Bitmaps
Changing Opacity of Bitmaps
 

 

Project 4:   The Race 

 

Welcome to your final project for Flash I , The Race.  This project will consist of you creating a race between at least two objects where one goes faster and passes the other.   Think of this as a short movie.  

  • Create a track or course of some sort for the objects to race upon. This will be your background. 

  • Create a separate motion guide for each object in the race.

  • Use 2 (or more) pictures of something for the race.  (i.e.. the proverbial Tortoise and the Hare, a Porsche vs. a BMW, etc). You should convert your pictures to transparent GIF's so that they exhibit no background.

  • You are NOT limited to 2 items.  You can use 3 or more items racing against each other. 

  • Not all have to finish.  (i.e. one of your Porches could run off your road and crash and burn).

  • You should have 1 object start later and end up winning.

  • Use all the skills you have learned so far. (i.e.  Zooming, Fades and Sound)

  • The entire animation does not have to be just the race.  You can have a opening title,  introduction of the racers, the race itself, the award ceremony, and end credits.

  • The overall length of your animation must 30 - 35 seconds.  The frame rate should be adjusted so that the animation flows smoothly, approximately 20-25fps.  If the animation is jerky, slow the frame rate down to compensate.

  • Save the project as therace.fla along with its accompanying SWF file. Save them in your Flash I > Final Project Folder

 

Click here to see an example of this project. 

 

Click here to see the the rubric for this assignment.

 

 

 

Accredited by the Middle States Association of Colleges and Institutions since 1971

©2006 American School of Kuwait