CogSci 3 Assignment Flash Animation-- PART 1
Due Saturday, October 31st (11:59pm!)

Goals

Adobe Flash CS3 is the most advanced authoring environment for creating rich, interactive content for digital, web, and mobile platforms.
Create interactive websites, media rich advertisements, instructional media, engaging presentations, games, and more.

For this Flash CS3 assignment you will:
1. Learn how to use the vector graphics tools to create elements for your scene,
2. Understand the Flash CS3 (CS4) workspace,
3. Create a library of graphic symbols that can be used in this assignment.

You may print a copy of this assignment if you wish. However, we recommend that you access the assignment online as there may be links on this document to other related information, and the online version is always the most recent one, in case changes need to be made.
Note: Flash CS3 is available on a limited number of machines on campus.
We strongly recommend that you work on the computers in class lab(s).

Note: The images used in this assignment are from Adobe Flash CS4 - they are similar to CS3, but not exact.

Log In

If you are already logged in, you can skip ahead. Otherwise, review the instructions in a previous assignment on how to log in. Then log into your class file server.

Once you are logged in:

You should already have thefolder in the "Class Resources" folder on the PC file server from the previous assignment
And save your work in the next homework folder.

Create a New Flash CS3 Document

Open Flash CS3 Professional

You have many options --- you can open a recent item, create from template (a set is available from Adobe), or create a new document

Create New Document > Flash File (ActionScript 3.0)

A new document is created

There are multiple layouts --- you can use "CLASSIC"
The "Classic" layout has been selected.

Save the file.

File > Save
Save it as: animation-cg3xzz.fla in your homework folder.
Flash source files have a .fla file extension
1. There are many file types in Flash --- the two most common are .fla and .swf
2. .fla extension is associated with this assignment
3. .swf (pronounced "swift" - is the exported Flash file that will go on the web when your assignment is complete.

Set up the Document Properties

Modify > Document
Give the title (this is for CS3)
description and dimensions (500x300 pixels).
choose a color for the background ---
make sure that the fps (frames per second) is set to 12.
Click OK
Notice that the stage dimensions and background color have changed.

Modify Document - dimensions, and background

Workspace

This is an image of the CS3 workspace (the view is: default):

CS3 workspace image (default view)

This is an image of the CS4 workspace (classic view)

CS4 Workspace

Add your account number using text in Flash

Add text using the text tool

You can add text by using the text tool (on the left of the stage) and click on the stage where you want the text to be located.

Note: The first tool, the solid arrow (Selection Tool) is used to select the text after you have typed it in. Once the text is selected, you can place it anywhere. If it is on the stage, it is visible when the animation runs.

text tool properties become active when the text tool is used

New Layer.

You can change the text color, size, font, and alignment from these properties.
For this assignment, the text we will be using is "Static Text"
Use any font and color - just make sure that the text is visible and readable.

Graphic Symbols

Select the text using the "Selection Tool"
Modify > Convert to Symbol
Name it with your name and account number - e.g. "Stu Dent - cg3xzz"
Select the "Graphic" option.

Notice when you have completed the conversion that the properties associated with your account changed to reflect that it is now a graphic symbol.

Symbols in Flash are important. There are 3 types of symbols -

Movie clip,
Button and
Graphic.

Symbols make working with your animation much easier. They are easy to manage and manipulate when they are a symbol so it is best to create symbols for everything that you put on the stage.

All symbols will appear in the Library.

Note: In Flash, graphic objects are items on the Stage. Flash lets you move, copy, delete, transform, stack, align, and group graphic objects. “Graphic objects” in Flash are different from “ActionScript objects,” which are part of the ActionScript® programming language.

Name of symbol is: Stu Dent - cg3xzz ---- USE YOUR NAME AND ACCOUNT!!!!

Flash has layers, too!!

Change the layer name to "Account"

Just like in the Photoshop assignments, layers in Flash enable you to manipulate each symbol independently.

It is a good idea to give your layers a name so that you can identify it easily.

Select the layer, double click the name, and change it to "Account Title".

Time to be creative!!!

Drawing shapes in Flash is similar to working with Photoshop.

In this example, we will draw a house with a lawn in the front yard.
In this assignment, you can make any scene - :-)

You may want to look over these directions and understand the concepts before you make your own scene.

select the rectangle tool in the tool box

Select the rectangle shape tool
(see image on left)
When the rectangle tool is selected, the properties associated with it also pops up.
The rectangle colors - stroke and fill colors can be assigned at this time.
Anytime that you need to modify a shape, first select it and then in the properties tab, make the appropriate changes.

the rectangle tool properties - allow you to change the fill and border (stroke) colors

Click on the color block next to the "pencil" icon - this represents the stroke color -- the outline of the shape color.
If you do not want to have an outline, select option shown in the image on the left.

Select the no color option - for stroke in this example

You can repeat this process for the fill color and select the color of your choice.
The "Alpha" number represents the percent of transparency.
Try it out --- see how it works. Perhaps you can incorporate it into your animation.
Remember these properties are all associated with the rectangle shape that was selected.

View the Library Window --- it is very important to see what you have got!!

Window > Library

When we display the library window at the moment - the only graphic symbol saved is: "Stu Dent." See the image on the right.

You can place this window anywhere that is convenient for you. You will want to have it open for the remaineder of the assignment.

Select the rectangle object using the selection tool, and convert it to a graphic symbol --- name it "Grass" (alternatively, you can name it whatever is appropriate for your image.) You will see that symbol appear in your library.

converted rectangle to graphic symbol and named it "grass" - the saved symbol is shown in the Library window.

Make a new layer - for your grass, and then ...

Put your grass on a new layer. (see image on left side) Label the layer (see image on right side) While still on the grass layer - go to the library palatte and select the "grass" object and drag it onto the stage. Create the rest of the objects needed to build the or whatever scene you want to build. There are multiple options behing the rectangle tool - (far right image with orange arrow.) Notice that each layer has a color square next to it. Those are there to help idendify the objects on that layer. Those are the color lines associated with the objects on the layers. When you have more objects and layers up on stage we will explore that feature.

Building your graphic symbols library --- to build the house in this example, you will need...

To build the house in this example, you will need the following graphic symbols. Triangle - for roof Parallelogram - for roof Rectangle - for walls, doors, windows, etc Make the symbols first. Save them into your library -- and then use them to build your house. For example, you can make the door and windows from the same graphic's object --- just modify the properties associated with it after you drag it on to your stage.
	To create a triangle: select the PolyStar Tool (see image on left) Select Options in the Properties Palatte (see image on right) A Tool Settings pop-up will appear and you can select "polygon" with "3" sides.

You can select the fill and stroke colors of the triangle working in the properties palatte --- refer to the grass if needed. The triangle can be transfomed using the Free Transform Tool (see image below). Once the triangle is set appropriately, select it with the Selection Tool and convert a graphic symbol. (Recall: select triangle with Selection Tool; Modify > Convert to Symbol; Make it a Graphic symbol and name it "triangle" or something descriptive. Continue making basic graphics symbols to build your scene --- In this example I will make a rectangle with a border, an oval.

So far, there are three layers (red arrow). The library (see green arrow) has the following graphic symbols: grass, oval, rectangle, square, Stu Dent - cg3fzz, and triangle. The "square" is selected and therefore it is shown in the window above the library (see yellow arrow).

So far, there are three layers (red arrow) - the library has six graphic symbols (green arrow).

Make a road with a thick line.
Select the pencil tool see below.

Select the "Smooth" option associated with the pencil tool.
See image on right.

The image below shows how to change the Stroke height to make a thicker line. See pink arrows.

Change the pencil line thickness by changing the Stroke Height in the pencil tool properties.

Select the smooth option for the pencil.

Once you have completed your scene --- go to the next part! Be sure to save your file. Here is the scene that we have created:

The finished scene. When you are done with your scene, go to the next part. Be sure to save your file!

Portions ©opyright 2009 Mary ET Boyle
Last updated: Sunday, April 27, 2009

CogSci 3 Assignment Flash Animation-- PART 1 Due Saturday, October 31st (11:59pm!)