Flash Lesson Plan Cs5 6o1331

This is an excerpt from the TechnoFlash Teacher Guide. To learn more about TechnoFlash, click here or go to: http://www.technokids.com/computer-curriculum/senior/animation-for-beginners.aspx

SESSION 1 Out of this World In this session, students are introduced to Flash CS5. To begin, they view a sample animation called "Out of this World" to gain an understanding of the types of animation that can be created using the program. Afterwards, they open Flash to learn about the program environment. Once familiar with the components, they practice drawing using the tools in the Tools . They then learn how to manipulate images by scaling, skewing, and rotating. With these skills mastered, they apply their knowledge of the drawing tools to create the first scene in a space adventure. Assignment 1: What is Animation? Assignment 2: Introduction to Flash Assignment 3: Working with Shapes Assignment 4: About the Timeline Assignment 5: Create Scene 1 – In a Land Far Far Away Session 1 Review: About Flash Session 1 Skill Review: Cartoon Challenge Session 1 Extension Activity: Flip and Align Objects

To order: http://www.technokids.com/Store/Senior-Projects/TechnoFlash/TechnoFlash-Page1.aspx

TECHNOFLASH

SESSION 1

Session 1: Out of this World Getting Started Overview In this session, students are introduced to Flash CS5. To begin, they view a sample animation called "Out of this World" to gain an understanding of the types of animation that can be created using the program. Afterwards, they open Flash to learn about the program environment. Once familiar with the components, they practice drawing using the tools in the Tools . They then learn how to manipulate images by scaling, skewing, and rotating. With these skills mastered, they apply their knowledge of the drawing tools to create the first scene in a space adventure. Materials 

Flash CS5



Flash Flashcards (optional)



o

Tools

o

Timeline Area

o

Layer Area

Flash Folder o

Out of this World sample



Session 1 Review: About Flash



Session 1 Skill Review: Cartoon Challenge o

Creature.swf sample

Teacher Preparation (Refer to the Preparing to Teach section of this guide for instructions)



Make the Flash folder available to students.



Determine a location for students to save their work during this project.



(Optional) Print the flashcards listed in the materials list for this session.

Teaching Strategy In this project, students become animators. Explain scenario to students. In this project, you assume the role of an animator. By learning how to use the program Flash Professional CS5, you will be able to make objects move across a stage. By combining different types of animation including frame by frame, motion tweens, shape tweens, and motion paths, you will make a story come to life.

TECHNOKIDS INC.

1-1

TECHNOFLASH In this session, students learn how to use the drawing tools to create the introductory scene to a space adventure movie. Explain scenario to students. To be able to use Flash CS5, it is essential that you understand the components of the program window, as well as how to use the tools to draw objects. To help you gain an understanding of the types of animation you can create using Flash you will view the sample story, Out of this World. Afterwards, you will learn how to use the most common drawing tools to make objects. Once confident with these tools, you will use them to create the first scene of an animated space adventure.

Assignment 1 What is Animation? In this assignment, students are introduced to animation. To start, they learn about the history of animation and the benefits to using the computer. Afterwards, they study how the Flash program can be used to create animations. They then watch a sample movie clip of space adventure and identify the various types of animation contained within the clip. This movie is a model of the type of animated story students will create in Sessions 1-6. New terminology: 

Animation: Animation is a series of drawings that show action.

Assignment 2 Introduction to Flash In this assignment, students are introduced to the Flash environment by labeling the parts of the program window, including the property inspector, stage, layers, tools , menu bar, edit bar, Library , and Timeline. It may be a good idea to do this activity together. Have each student open up the Flash program and point to each part. Afterwards, discuss the similarities between the Flash program and other programs student are familiar with. For example, the Timeline is similar to the Timeline in Windows Movie Maker; the drawing tools are similar to those in Microsoft Paint; the s are similar to Microsoft PowerPoint. Next, students explore the function of many of the tools in the Tools . For some of the tools there are additional options available in both the Tool Options tray and Property Inspector. Encourage students to experiment. Assignment 3 Working with Shapes In this assignment, students learn how to group objects and adjust the stacking order. They learn these skills by making a simple race car. Afterwards, they select a drawing challenge of either a bear or a chick. Once your students have mastered the drawing tools, encourage them to make their own creations. Common problem: Entering the Edit Pane – if students double click on a GROUPED object, it opens into an editing pane. If this happens, click on the Scene Name to return to the stage.

1-2

TECHNOKIDS INC.

TECHNOFLASH

SESSION 1

Assignment 4 About the Timeline In this assignment, students read to learn about the Timeline. The following terminology is introduced: 

Static Animation – Images with no movement that are displayed in a sequence.



Playhead – Red bar that shows the current frame and moves from left to right when the project plays.



Timeline – The area below the stage that consists of layers and frames. It is used to organize the document by controlling when the content appears over time.



Timeline Header – Runs along the top of the Timeline and displays the frame numbers.



Layer – A row in a Timeline that divides the stage into levels to create different animations that play at the same time.



Frame – A box that holds a single picture in a strip of animation.



Frame Rate - The number of frames that will play in one second.



Keyframe – A frame added to the Timeline that copies the content from the previous frames.



Blank Keyframe – A frame added to the Timeline that does not copy the content of the previous frames, and instead is empty.



Scene – A section of a document that has its own stage and Timeline. It is used to organize the content of the document into parts.



Library – A gallery used to store symbols such as graphics or movie clips. The stored items can be added to the document repeatedly.



Paste in Place – An editing feature that pastes an object in exactly the same place on the stage as the original copied item.

Assignment 5 Create Scene 1 – In a Land Far Far Away In this assignment, students make the first scene in their animated space adventure. This scene will consist of some basic drawings and text. Using static animation, images will appear on the stage, and then disappear, to be replaced with a new image. This assignment contains many basic skills. It is advisable to do this assignment together and model each of the steps.

About Assessment: A customizable marking sheet is available in the Session 6 folder to assess the Out of this World movie. You may wish to review this document.

TECHNOKIDS INC.

1-3

TECHNOFLASH Lesson Plan Assignment 1 - What is Animation? 

Read the information to learn about animation, the benefits of using the computer to make animations, and the benefits of using the Flash program to make animations.



Watch an animated story and identify the different types of animation used. Discuss the elements of the story and the ways it can be improved.

Assignment 2 - Introduction to Flash 

Label the parts of the Flash program window.



Consider how the Flash program window is similar to other known programs.



Label the parts of the Tools .



Draw shapes including a line, oval, circle, rectangle, and square. For each shape select options such as stroke color, stroke width, stroke style, and fill color.



Use the Selection Tool to move the shape, bend the line, and change the corner point.



Use the Free Transform Tool to scale, skew, and rotate an object.



Edit the stroke color with the Ink Bottle Tool and the fill color using the Paint Bucket Tool.



Clear the stage using the Selection Tool.



Draw a smiley face with spiked hair using the Pencil Tool.



Draw a worm using the Brush Tool.



Edit a drawing using the Eraser Tool. Experiment with the tools in the Tool Options.



Type your name using the Text Tool. Customize the font, size, and color of the letters.



Discover how to use tools in the Tools including: Subselection Tool, Lasso Tool, Pen Tool, Spray Brush Tool, Deco Tool, Hand Tool, and Zoom Tool.



Practice using the tools in the Tools .



Close Flash.

Assignment 3 - Working with Shapes 



1-4

Open Flash. Follow the instructions to make a car: o

Draw the car body using a Rectangle tool.

o

Add a tire using the Oval tool and then copy the shape to make two tires.

o

Draw the top of the car away from the body. Adjust the stacking order to send it to the back of the car.

o

Edit a grouped object by placing a racing stripe onto the car body.

o

Upon completion, group all the car parts together.

o

Practice drawing using grouped shapes. Select either the bear or duck to draw.

Close Flash.

TECHNOKIDS INC.

TECHNOFLASH

SESSION 1

Assignment 4 - About the Timeline 

Open Flash. Study the parts of the Timeline including the playhead, layer, Timeline header, current frame indicator, frame rate indicator, and frame.



Read to learn about frames. Identify the frame number.



Read to learn about frames per second. Calculate the number of seconds a document will play based on 24.00 fps.



Read to learn about keyframes and blank keyframes. Draw a picture of the keyframe in the Timeline.



Read to learn about layers. Record the name of the layer in the Timeline.



Read to learn about scenes.



Close Flash.

Assignment 5 - Create Scene 1 – In a Land Far Far Away 

Open Flash.



Use the Text tool to add the text: In a land far far away. Draw a picture of outer space. Notice the change to the Timeline.



Insert a blank keyframe in Frame 72, and then view the story using the ENTER key.



In Frame 72, use the Text Tool to add the text: there lived an alien that longed for adventure. Draw an alien and add the object to the Library.



Insert the alien from the Library. Change the newly added alien, by scaling, skewing, and rotating the object. Break apart the newly added alien, and ungroup it. Edit the fill color using the Paint Bucket tool. When finished, delete the newly added alien.



Insert a blank keyframe in Frame 144. In Frame 144, use the Text tool to add the text: He decided to leave his planet to explore the galaxy. This is his story.



Copy an object from Frame 1 into Frame 144 using Paste in Place.



Test the movie by viewing it in the Preview pane. Notice the problem areas.



Close the Preview pane. Correct the problem by inserting a blank keyframe onto the Timeline to cause the text to be on the screen longer.



Edit the story by inserting or removing frames to adjust the time the words are on the screen.



Save the file as space.



Close Flash.

TECHNOKIDS INC.

1-5

TECHNOFLASH Learning Objectives Students should be able to complete each learning objective independently. Content Knowledge:  define animation  understand the history of animation and how the computer has changed how animation is created  understand how the Flash program can be used to create animation  list the benefits of using the computer to create animation  label the parts of the Flash window  label the parts of the Tools  label the parts of the Timeline: playhead, layer, Timeline header, current frame indicator, frame rate indicator, and frame Technical Skills: Operating Environment  open and close a program  save a document Animation  identify a frame by its number  calculate the length of time animation will play based on the frames per second  identify the name of the layer  insert a blank keyframe  add content to a blank keyframe  convert a symbol into the Library  add a symbol from the Library onto the stage  play a document using the ENTER key  test a movie in the Preview pane  select, insert, and remove frames Graphics  draw a line, oval, and rectangle  select the stroke color, width, style, and fill color from the Property Inspector  move, bend, and reshape an object using the Selection tool  transform an object by rotating, skewing, or scaling it using the Free Transform tool  select a stroke and fill color using the Stroke Color Control and Fill Color Control  fill an object with color using the Paint Bucket tool  fill the stroke of an object with color using the Ink Bottle tool  clear the stage using the Selection tool and the DELETE key  delete an object from the stage using the DELETE key  draw freehand using the Pencil or Brush tools  change the Pencil type by making a selection from the Tool Options  select the brush size and shape from the Tool Options  adjust the paint mode to fill different areas with color using the Brush tool  erase a drawing using the Eraser tool and its options  add words using the Text tool  format the text by adjusting the font, font size, and font color in the Property Inspector  edit the individual points of a shape using the Subselection tool  select a portion of the stage using the Lasso tool  draw a polygon or zigzag shape using the Pen tool  spray paint on the stage using the Spray Brush Tool  draw preset patterns on the stage using the Deco Tool  move the stage within the window using the Hand tool  increase or decrease the size of magnification with the Zoom tool  copy and paste an object  paste an object in the same position as the copied image using Paste in Place  modify the appearance of a grouped object in the editing pane  modify the stacking order of objects  group together multiple objects  group together the stroke and fill of an object  break apart an object  ungroup an object Applied Technology  view a movie clip and label the types of animation  draw objects using tools in the Tools  create a scene that contains static animation

1-6

TECHNOKIDS INC.

TECHNOFLASH

SESSION 1

Assignment 1: What is Animation? In this assignment you will learn about the history of animation as well as how the computer has changed the way animators make cartoons. What is Animation? Animation is a series of drawings that show action. By changing the still image slightly, it can be made to look like it is moving. This is done by rapidly showing the images in sequence. The human eye sees the change in images as movement, not as separate pictures. History of Animation Although humans have been drawing cartoon pictures since the time of the cave dweller, the ability to show movement did not occur until the 19th century. It was during this time that scientists created the camera and projector. Artists were then able to use this technology to film a series of drawings that, when shown rapidly, looked like they were moving. In the beginning, artists would draw a picture by hand and film it. Then they would change the image and film the new picture. These still images were strung together to create an animated picture. It would take a very long time to make animations using this method. It was not until the 1960’s that animation was made easier by using the computer. At first the technology would allow artists to draw simple shapes and view the objects as if they were three-dimensional. Later, the computer would allow the artist to draw a picture and then the software program would automatically create the animation. Today, software programs have become very complex and can create life-like animations that have realistic lighting and textures. 1.

List some of the benefits you think there are to using the computer to create animations: Can create animations quickly, Can make animations appear life-like, Can create animations cost-effectively, Software makes it easy to create objects, Do not need to be a computer expert or professional artist to make animations

Using Flash to Make Animations Flash CS5 is a program that can be used to create animations. Flash animations are used most often on the Internet. This is because they can be complex but still have small file sizes, making it easy for people to view. Flash animation is used to create online games, electronic greeting cards, information videos, electronic ments, splash pages for company websites, or fancy navigation buttons. Flash has many features that make it easy to create animations:  





Draw one object, use it many times. Flash has a Library where you can save your drawings. This makes it easy to add the same object many times. Pick your start and end point for an object, and then watch it move. Flash lets you apply motion tweening to an object. This means that you select the start point and end point for the object and the program will automatically create all the still images that come in between or “tween” the two objects. By using motion tweening you can make an object move from left to right, up and down, diagonally, clockwise, or counter clockwise. Morph an object from one form into another. Flash lets you apply shape tweening to an object. This means that you draw the original image and the transformed image. The program will then automatically create all the still images that come between or “tween” the two pictures. By using shape tweening you can morph an object into the form of another. Make many things animate at one time. Flash lets you use layers to create your animations. Each layer can hold a separate moving object. This means that many movements can happen at the same time.

TECHNOKIDS INC.

1-7

TECHNOFLASH 





Make objects move realistically. Flash lets you apply a motion path to an object. A motion path is a hand drawn line that an object moves along. You can use a motion path to make many fun animations such as a plane doing a loop or a rabbit hopping. Save time by copying, pasting, and reversing action sequences. Flash lets you copy an animation you have already created and paste it into a new spot. As well, you can reverse the action, making it fast and easy to create new action sequences. Add sound to make the animation more interesting. Flash lets you add sound to an action or to an entire scene. This is a great way to apply effects, sound track, or dialogue to an animated story.

Watch an Animated Story Made Using Flash Flash lets you create several types of animation. Watch the animated story Out of this World, which was created using Flash. For each scene, notice the type of animation. 

Open the Flash folder. (Ask your teacher how to do this.)



Double click the Out of this World file to watch the animated story.

Scene 1 Static Animation

Scene 2 Frame by Frame

Scene 3 Frame by Frame

Scene 6

Scene 7

Scene 8

Shape Tween

Shape Tween

Bone Tool

Scene 4 Motion Tween

Scene 5 Motion Tween

Scene 9 Classic Tween with Motion Path

Scene 10 Classic Tween with Motion Path

2.

What did you like about the animation "Out of this World"?

3.

What would you add to this story to make it even better?



1-8

Close the file.

TECHNOKIDS INC.

TECHNOFLASH

SESSION 1

Assignment 2: Introduction to Flash

In this assignment, you learn about the components of the Flash program environment. Read the description on the back of this sheet about the parts of the Flash window. Use this information to label each part correctly.

Open the Flash Program 

Open the Flash program.



From the File menu, click New. Select ActionScript 3.0 and then click OK.

Label the Parts of the Flash Window 1.

Label the parts of the Flash window.

 Property Inspector

 Stage

 Layers

 Tools

 Menu Bar

 Edit Bar

 Library

 Timeline Property Inspector

Menu Bar

Edit Bar

Stage

Layers

Library

Tools

Timeline

Your window may look slightly different. If you are missing some of the parts, click on the Window menu. Click the Toolbar option and select Edit Bar. Place a checkmark beside Timeline, Tools, and Library. NOTE: The options are slightly different for earlier versions of the program.

TECHNOKIDS INC.

1-9

TECHNOFLASH Parts of the Flash Window Part

Description

Menu Bar

A bar at the top of the window. It lists menu options including File, Edit, View, Insert, Modify, Text, Commands, Control, Debug, Window, and Help

Stage

The stage is the white area in the center of the window. It is where Flash movies are created.

Timeline

The Timeline is typically at the bottom of the window. It is an area that controls when objects appear on the stage. It is made up of a series of boxes. Each box is a frame. Keyframes are added to the Timeline to set the start and end point for each animation.

Layers

Layers are part of the Timeline. They divide the stage into levels. The layers section has tools to show, lock, or unlock layers, as well as display layer contents as outlines. By placing objects on different layers, it is possible to have several animations appear at the same time. Layers can also be used to adjust the stacking order of objects. The layer at the bottom of the list is at the back of the stage. The layer at the top of the list is at the front of the stage.

Tools

The tools is a vertical bar that holds a collection of drawing tools used to create and customize objects on the stage.

Property Inspector

A that when active displays options for the selected tool.

Library

The Library stores the media elements and symbols for a project. Use this to insert, delete, or rename items in the Library.

Edit Bar

A bar that contains commonly used program options to edit the stage such as changing the scene currently displayed, selecting a symbol, and adjusting the magnification.

1-10

TECHNOKIDS INC.

TECHNOFLASH

SESSION 1

Parts of the Tools

I know that you want to animate something, and you will. However, before you can start making objects move you need to know to draw objects. As you experiment with the tools in the Tools , you will notice how similar they are to most paint programs. It is likely that if you have drawn before using the computer you will find it a "flash" to learn the Flash drawing tools.

2.

The Tools includes everything you need to create, select, or edit graphics on the Stage. It is divided into six parts. Read the descriptions and then label the diagram.

Parts of the Tools : Selection Tools  Selection Tools: Tools used to select an area on the canvas and modify the selection.  Drawing and Text Tools: Tool used to draw and paint lines, shapes, and text. Drawing and Text Tools

 Color Tools: Tools used to add bones, fill an area, copy a color, or erase a mistake.  Navigation Tools: Tools used to move or magnify an area.  Stroke and Fill Color Selectors: Tools used to select an outline or fill color.  Tool Options: A tray that displays options for the selected tool.

Color Tools

Navigation Tools

Stroke and Fill Color Selectors

Tool Options

TECHNOKIDS INC.

A tool that has a black arrow will display a fly out menu of tools.

1-11

TECHNOFLASH Get to Know the Tools Some tools have a tiny arrow in the right corner. If you click on the arrow, a fly out menu appears displaying more tools. The tools in the Tools are not "sticky". In most programs, the tools are "stuck" in the same spot. This makes them easy to find. However, in Flash the tools in the Tools change. If you select a tool from the fly out menu, it replaces the current tool in view. This can be frustrating when you are just learning the program, because it takes some time to get used to the location of the tools.

Answer the questions to help you learn the location of the tools.

3.

Find the Oval Tool.

List two other tools in the fly out menu.

Rectangle Tool, Oval Tool, Rectangle Primitive Tool, Oval Primitive Tool, PolyStar Tool TIP: Click tools with a black arrow to find the Oval Tool.

4.

Find the Spray Brush Tool.

List the other tool in the fly out menu.

Brush Tool TIP: Click tools with a black arrow to find the Spray Brush Tool.

About Object Drawing Mode In Flash when you draw objects you must set the Object Drawing mode. This option is at the bottom of the Tools when you select a drawing tool. OFF

ON

If Object Drawing mode is turned OFF: 

The stroke and fill color of a shape is separate.



Parts of the shape can be selected and then deleted or edited.



If you have many objects on the stage it can be difficult to select and move a desired shape, because other objects will become selected as well.



If you layer an object over top of another, they will merge together.



If you double click on the object you will select it.

If the Object Drawing mode is turned ON: 

The stroke and fill color are grouped.



When you click the shape the entire object is selected. If you press DELETE or edit the shape the entire object is affected.



If you have many objects on the stage it is easy to select and move a desired shape, without affecting other objects.



If you layer an object over top of another, they will remain separate.



If you double click on the object it will open in the Editing Pane.

1-12

TECHNOKIDS INC.

TECHNOFLASH

SESSION 1

Draw a Line 

Click the Properties tab to ensure it is active. The Property Inspector changes each time you select a tool.



Click to select the Line tool.



Look at the Property Inspector. Notice how it now offers a series of Line tool options. Set the appearance of the line by selecting a stroke color, width, and style.

Stroke color Stroke width

Stroke style

Draw a Line with Object Drawing Mode OFF 

At the bottom of the Tools , find Object Drawing. Make sure that it is TURNED OFF!



Now click and drag the cursor across the Stage to draw a line.



Click the Selection Tool.



Click and drag to draw a small box around part of the line to select a segment.



Press DELETE to remove PART of the line.

OFF

ON

Draw a Line with Object Drawing Mode ON 

Click to select the Line tool.



At the bottom of the Tools , find Object Drawing. Make sure that it is TURNED ON!



Now click and drag the cursor across the Stage to draw a line.






TRY to click and drag to draw a small box around part of the line to select a segment. YOU CAN NOT!



Click on the line ONCE.



Press DELETE to remove the ENTIRE line.

TECHNOKIDS INC.

OFF

ON

TIP: If you have the Object Drawing option turned ON, Flash draws objects as grouped. If you double click on the grouped object the editing pane will open. If this happens to you, click Scene 1 to return to the stage.

1-13

TECHNOFLASH Draw a Rectangle and a Square 

Click the Rectangle Tool.

-

Look at the Property Inspector. Notice the options now include a Fill Color option.



Change the rectangle appearance by selecting a stroke color, width, style and fill color.

Fill Color

Draw a Shape with Object Drawing Mode OFF 




Now click and drag the cursor across the Stage to draw a rectangle in a blank area.






Click and drag to draw a small box around part of the shape to select a chunk.



Press DELETE to remove the chunk from the shape.



Click on a line segment.



Click and drag to separate it from the shape.



Double click inside the shape to select BOTH the stroke and fill.



Press DELETE to remove the shape.

OFF

ON

Draw a Shape with the Drawing Mode ON 

Click the Rectangle Tool.




ON

OFF



Now click and drag across the stage to draw a rectangle.



The rectangle is selected. Press ESC on the keyboard to deselect the shape.



Choose a new fill color in the Property Inspector. (If the rectangle changes color it is still selected. Press CTRL + Z to undo the change. Press ESC to deselect the shape)



1-14

Press and hold the SHIFT key. Now click and drag again to draw a square in a blank area.

TECHNOKIDS INC.

TECHNOFLASH

SESSION 1

Draw an Oval and a Circle 

Click and hold the mouse on the Rectangle Tool.



Choose the Oval Tool from the fly-out menu.

-

Look at the Property Inspector. It shows the same properties as the Rectangle Tool.






Now click and drag across the stage to draw an oval in a blank area.



The oval is selected. Press ESC on the keyboard to deselect the shape.



Choose a new fill color. (If the oval changes color it is still selected. Press CTRL + Z to undo the change. Press ESC to deselect the shape)



Press and hold the SHIFT key. Now click and drag again to draw a circle.

Use the Selection Tool to Move, Bend, and Reshape 


Move the Line 

Click on the line. Rest the mouse pointer over the LINE.



The mouse pointer changes to a Move Shape pointer. This is used to MOVE the object. Click and drag to move the line on the Stage.



Click off the line. MAKE SURE THAT THE LINE IS NOT SELECTED.

Bend the Line 

Rest the mouse pointer over the center of the line. Notice how it changes to a Line Shape pointer. This is used to BEND the shape.



Click and drag to bend the line.

Change the End Point

5.



Rest the mouse at the end of the line. The mouse pointer changes to a Corner Shape pointer. This is used to CHANGE THE END POINT or CORNER of the object.



Click and drag to move the end point of the line. Use the Selection Tool to change the appearance of each shape by bending it and moving the end points or corner(s). Can you make a triangle from the rectangle? How did you do it? Click on the corner point of the rectangle and drag it into the opposite corner of the shape.

TECHNOKIDS INC.

1-15

TECHNOFLASH Use the Free Transform Tool to Scale, Skew, and Rotate

The Flash program lets you scale, skew, and rotate a selection. Try it!



Click on the circle to select it on the Stage.



Click the Free Transform Tool.



Rest the mouse pointer over a corner of the bounding box. The mouse pointer changes to a two-way arrow. Click and drag to change the shape. If you hold the SHIFT key, it keeps the object in proportion.



Rest the mouse pointer over the line of the bounding box. The mouse pointer changes to a double line. Click and drag upwards or downwards to skew the shape. This causes it to slant to the left or right.



Rest the mouse pointer above the corner of the bounding box. The mouse pointer changes to a round arrow. Click and drag the mouse in a circular motion to rotate the shape.

Edit the Color of the Stroke and Fill of a Shape

Sometimes you may forget to pick a stroke or fill color before you begin to draw. Other times, you may change your mind and decide you no longer like the way the shape looks. It is easy to change the stroke and fill color.



Press the ESC key on the keyboard to deselect any objects on the stage.

Change the Stroke Color 

Select a color for the stroke color using the Stroke Color Control.



Select the Ink Bottle Tool.



Now click on the stroke of a shape.

Change the Fill Color 

Select a color for the fill color using the Fill Color Control.



Select the Paint Bucket Tool.



Now click on the fill of a shape.

1-16

TECHNOKIDS INC.

TECHNOFLASH

SESSION 1

Clear the Stage

The stage is full with all of the objects you have drawn. It is time to clear the stage.






Rest the mouse pointer in the upper right corner of the stage. It will change to a Marquee Select pointer.



Click and drag to draw a dotted box around all the items on the stage. Once all of the objects are selected, click DELETE on the keyboard.

Draw Freehand using the Pencil or Brush Tool

You are now going to experiment with the Pencil and Brush Tools. The Pencil is used to draw LINES. The Brush is used to paint FILLS.

Draw with the Pencil 

Click the Pencil Tool.



Look at the Property Inspector. It looks just like the Line Tool options. Set the appearance of the Pencil line by selecting a stroke color, width, and style.

Stroke color Stroke style




Stroke width

OFF

-

Now you need to pick a Drawing Option. Look at the Tool Options at the bottom of the Tools .



Click on the Pencil Mode arrow to choose a drawing mode: Straighten, Smooth, or Ink.



Use the pencil to draw a smiley face and give him spiked hair.

TECHNOKIDS INC.

ON

1-17

TECHNOFLASH Paint with the Brush 

Click on the Brush Tool.



Look at the Property Inspector. It only has the fill option. Pick a color.

Fill color



Look at the Tool Options in the Tools . Pick a brush size and shape.

Brush size Brush shape



6.

Click the Paint Mode tool in the Tool Options.

List the 5 types of Paint Modes. Paint Normal, Paint Fills, Paint Behind, Paint Selection, Paint Inside

7.

Which Paint Mode will paint only fills? Paint Fills

8.

Which Paint Mode will paint only an area that is selected? Paint Selection



From the Paint Mode options, select Paint Normal.



Draw a worm.

1-18

TECHNOKIDS INC.

TECHNOFLASH

SESSION 1

Edit a Drawing Using the Eraser Tool

The eraser has many options. This makes it easy to remove unwanted sections of a drawing. Experiment with using the Eraser Tool.



Click the Eraser Tool.



Click Eraser Mode from the Tool Options in the Tools .

9.

List the 5 types of Eraser Modes. Erase Normal, Erase Fills, Erase Lines, Erase Selected Fills, or Erase Inside

10.

Which Eraser Mode will erase only lines? Erase Lines

11.

Which Eraser Mode will erase only fills? Erase Fills



Select Erase Normal from the Eraser Modes.



Click Eraser Shape from the Tool Options in the Tools .



Select a shape from the list.



Click and drag over part of the WORM to erase part of it.



Click the Faucet from the Tool Options in the Tools .



Click on a WORM part to erase it.



Click the Faucet again to turn it OFF.

12.



Which method of erasing do you prefer, the Eraser Mode or Faucet?

From the Edit menu, click Select All. Press DELETE on the keyboard to erase the stage.

TECHNOKIDS INC.

1-19

TECHNOFLASH Add Text

You are now going to add your name to the Stage using the Text Tool. You will notice that it is very similar to most paint programs.



Click on the Text Tool.



Look at the Property Inspector. Notice how it now offers a series of tool options. You can select the type of text, font, size, color, style, direction, alignment, character spacing, and more! Change the font, size, and color.

Font Font size

Font color



Click and drag the mouse across the Stage to draw a text box.



Type Student Name.



To change the look of your name, select the text inside the text box. Now make a new selection from the Property Inspector. You can scale, skew, and rotate text.



Click on the text box.






Rest the mouse pointer over a corner of the text box. The mouse pointer changes to a twoway arrow. Click and drag to change the text box.



Rest the mouse pointer over the line of the text box. The mouse pointer changes to a double line. Click and drag upwards or downwards to skew the shape.



Rest the mouse pointer above the corner of the text box. The mouse pointer changes to a round arrow. Click and drag the mouse in a circular motion to rotate the text box.

1-20

TECHNOKIDS INC.

TECHNOFLASH

SESSION 1

What Do These Tools Do?

The tools you have learned so far are the ones you will most likely use when you are drawing. However, the Tools has several other tools. See if you can find out what they do. Draw a flower using the tools you have just learned. Then experiment with more Flash tools to discover their function.

 step 1

Use your skills to draw a flower. Draw the center of the flower using the Oval tool: a.

Select the Oval Tool.

b.

Turn the Object Drawing option OFF.

Tip: The Oval Tool is on the Rectangle fly out menu.

Why turn Object Drawing mode OFF? When you draw many objects with Object Drawing mode ON the shapes stack on top of each other. This means that you need to set the object order to arrange them properly. Since this is a skill you do not have yet, it is better to turn Object Drawing mode OFF when making the flower. As well, when Object Drawing mode is ON the objects are separate. This means that they do not merge together. Often when you are drawing an item you will want to create an outline and then fill each section with color. When Object Drawing mode is OFF, the lines will merge together making it easy to fill areas that were drawn separately.

step 2

c.

From the Property Inspector, select the stroke color and width. Select the fill color.

d.

Draw a small circle.

e.

Press ESC to deselect the shape.

Draw the petals of the flower using the Pencil tool: a.

Select the Pencil Tool.

b.

Turn the Object Drawing option OFF. Why turn Object Drawing mode OFF? The line of the petals will merge with the center of the flower. This makes it easy to fill an area with color.

c.


d.

Draw petals.

e.

Click the Fill Color selector. Select a color.

f.

Click the Paint Bucket.

g.

Fill each petal with color. TIP: If the petals will not fill with color, click the Gap Size option at the bottom of the Tools . Select Close Large Gaps.

TECHNOKIDS INC.

1-21

TECHNOFLASH 13.

Edit the picture using each the tools to discover their function.

a) Subselection

Edit the individual points of a shape.

b) Lasso

Select a part of the Stage by drawing freehand around the area.

c) Pen

Draw by clicking on the Stage to add points that form a series of lines.

d) Spray Brush Tool

Spray paint on the Stage.

Tip: This tool is in the Brush Tool fly out menu.

e) Deco Tool

Draw preset patterns on the Stage.

Hand

Move the Stage within the window.

Zoom

Increase or decrease the magnification of the Stage.

f)

g)

Experiment with the Drawing Tools and then Exit Flash

Have some fun drawing with the tools in the Flash Toolbox. The more you practice the better you will become at making objects in this program. When you are done, exit the program.

1-22

TECHNOKIDS INC.

TECHNOFLASH

SESSION 1

Assignment 3: Working with Shapes

In this assignment, you learn how to group and ungroup objects. Grouping is when you combine separate objects to make a single item. This can happen when you group the stroke (line) and fill of an object. It can also happen when you take multiple objects on the stage, and combine them all together. Learn tips for drawing using grouped objects by following the instructions to draw a simple car with Object Drawing mode turned ON.





From the File menu, click New.



Select ActionScript 3.0 and then click OK.

Draw a Car and Group Together the Pieces Draw the Car Body and Tire 

Select the Rectangle Tool.



Turn the Object Drawing option ON. This will automatically group the fill and stroke together.



Draw the body of the car using the Rectangle Tool.






Click on the Stage to make sure that the shape is NOT SELECTED.



Rest the mouse pointer over the center of the outline. When it changes to a Line Shape pointer, click and drag to bend the outline.



Select the Oval Tool. TIP: The Oval Tool is on the Rectangle fly out menu.



Turn the Object Drawing option ON.



Click and drag to draw a car tire.

TECHNOKIDS INC.

OFF

ON

1-23

TECHNOFLASH Copy and Paste the Car Tire It is easy to copy and paste grouped objects. Follow the instructions to copy the car tire and then paste it. 

Select the car tire.



From the Edit menu, select Copy.



Now from the Edit menu select Paste in Center.






Move the tire into position.

TIP: A dotted guideline appears to help you align the tire.

Draw the Car Top and Adjust the Stacking Order You can adjust the stacking order of grouped objects. For example, you can move an object to the front or back. Follow the instructions to draw a car top and move it to the back.




TIP: The Rectangle Tool is on the Oval fly out menu.






Away from the car, draw a rectangle to act as the top of the car.






Move the car top into position.

-

It is in front of the car body.



Right click on the rectangle car top. From the Arrange menu, select Send to Back.

TIP: You can also select object order options from the Modify menu. Click Modify – Arrange – Send to Back.

1-24

TECHNOKIDS INC.

TECHNOFLASH

SESSION 1

Edit a Grouped Object When drawing lines and shapes you can turn Object Drawing mode ON or OFF. If it is ON, the stroke and fill color of a shape are grouped. If you want to edit a grouped shape you must use the Editing Pane. The Editing Pane is a separate window that opens when the grouped shape is double clicked. Any changes made to the shape become part of the grouped object. There are several reasons you would want to edit shapes in the Editing Pane: 

Focus on One Item: The Editing Pane displays the grouped object to be edited with all other elements on the stage dimmed. This makes it easy to focus on the grouped object to be changed.



Automatically Grouped: Any changes to the grouped object in the Editing Pane are automatically combined together when the Editing Pane is closed.

You can edit a grouped shape. For example, you could draw a racing stripe on the car body. Follow the instructions to make the car look good. 

Double click on the car body.

-

It opens into an editing pane. Although you can see the stage, only the grouped shape is active. The Editing pane lets you edit an object. All changes to the object are automatically grouped.



Use the Pencil Tool to draw a racing stripe across the car body.



When finished, click the Scene 1 button to return to the stage.



Click OK if a warning message appears that states Drawing Objects can only contain shapes. This object will be automatically converted to a Group.

-

The racing stripe is now part of the grouped object.

Group all the Car Parts and then Ungroup the Object If you wanted to apply animation to this object, such as a motion tween the ENTIRE object would need to be grouped together. Follow the instructions to group the car parts. 




Click and drag around the car parts.



When the car parts are all selected, click the Modify menu. Select Group.

-

You can still edit the car, by double clicking on the object to open the edit pane. Alternatively, if you want you can ungroup it.



Select the car. Click the Modify menu. Select Ungroup.

TECHNOKIDS INC.

1-25

TECHNOFLASH Practice Drawing using Grouped Objects

It is a good idea to practice drawing objects using grouped shapes. There are two drawing challenges. Clear the canvas. Now pick a drawing challenge. Try to draw it using the tools in the Tools .

Challenge One: Draw a Bear 1.

2.

3.

4.

1-26

Draw the head using the Oval tool: a.


b.


c.


d.

Draw the head of the bear.

e.


f.

Rest the mouse over the head.


Click anywhere on the stage to DESELECT the head. Bend the oval.

Draw the ears using the Oval tool: a.


b.


c.

Draw an ear.

d.

Select the ear. Right click the mouse. Select Arrange and click Send to Back.

e.

Select the ear. From the Edit menu, click Copy.

f.

From the Edit menu, click Paste in Center.

g.


h.

Select the ear. Right click the mouse. Select Arrange and click Send to Back.

Click and drag the ear to the correct place.

Draw the body using the Oval tool: a.


b.


c.

Draw the body of the bear.

d.


e.

Rest the mouse over the body.

f.

Select the body. Right click the mouse. Select Arrange and click Send to Back.

Click anywhere on the stage to DESELECT the body. Bend the oval.

Draw the arms using the Oval tool: a.


b.


c.

Draw an oval. Bend the shape to make an arm.

d.

Select the arm. Right click the mouse. Select Arrange and click Send to Back.

e.


f.

Select the arm. From the Edit menu, click Copy.

g.


h.


i.


j.


Rotate the arm.

Click and drag the arm to the correct place. Rotate the arm.

TECHNOKIDS INC.

TECHNOFLASH 5.

6.

SESSION 1

Draw the legs using the Oval tool: a.


b.


c.

Draw an oval. Bend the shape to make a leg.

d.

Select the leg. Right click the mouse. Select Arrange and click Send to Back.

e.


f.

Select the leg. From the Edit menu, click Copy.

g.


h.


i.


j.


Rotate the leg.

Click and drag the leg to the correct place. Rotate the leg.

Draw a face: a.

Double click on the head to open the editing pane.

b.

Click the Zoom Tool.

c.

Click Enlarge from the Tool Options.

Click on the face to zoom in.

d.

Click the Brush Tool

.

e.

Select tool options.

f.

Draw eyes, nose, and mouth.

g.

Click Scene 1 to return to the Stage.

h.


i.

Click Reduce from the Tool Options.

or Pencil Tool

Click on the face to zoom out.

TIP: To see the Stage, select 100% from the Zoom tool on the Edit Bar. When you draw the bear as grouped objects you can animate the body parts. For example, you can make the arm wave. 7.

Save the file. a.

Click the File menu. Select Save.

b.

Locate student’s folder. Type bear in the File name box. Click Save.

Challenge Two: Draw a Chick Can you draw a chick? Follow the instructions to use the tools in the Tools . 1.

2.

Draw the head using the Oval tool: a.


b.


Tip: The Oval Tools is on the Rectangle fly out menu.

c.

Draw the head of the chick.

Draw the beak using the Rectangle tool: a.


b.


c.

Draw a small rectangle.

d.


e.

Rest the mouse over a corner.

f.


TECHNOKIDS INC.

Tip: The Rectangle Tools is on the Oval fly out menu.

Click anywhere on the stage to DESELECT the beak. Drag the corner inwards to form a triangle. Rotate the beak.

Position it on the head.

1-27

TECHNOFLASH 3.

4.

5.

6.



b.


c.

Draw the body of the chick.

d.


e.


f.



Draw the wings using the Oval tool: a.


b.


c.

Draw a wing.

d.


e.

Select the wing. From the Edit menu, click Copy.

f.


g.


h.

Select the wing. Right click the mouse. Select Arrange and click Send to Back.

i.


Rotate the wing.

Position it over the body.

Click and drag the wing to the correct place. Rotate the wing.


Select the Pencil Tool.

b.


c.

Away from the chick, draw a leg.

d.


e.

Click the Modify menu. Click Group.

f.

Drag the leg to the correct location.

g.


h.


i.


j.


Click and drag a box around the leg to select the parts.

Click and drag the leg to the correct place.

Draw a face: a.


b.


c.

Click Enlarge from the tool options.


d.


. Select tool options.

e.

Draw eyes.

f.


g.


h.

Click Reduce from the tool options.

or Pencil Tool


TIP: To see the Stage, select 100% from the Zoom tool on the Edit Bar. When you draw the chick as grouped objects you can animate the body parts. For example, you can make the wings flap. 7.

Save the file. a.

Click the File menu. Select Save.

b.

Locate student’s folder. Type chick in the File name box. Click Save.

Exit Flash

1-28

TECHNOKIDS INC.

TECHNOFLASH

SESSION 1

Assignment 4: About the Timeline Over the next few sessions, you are going to apply your knowledge of the drawing tools to make an animated space adventure, similar to the Out of this World sample you watched in Assignment 1. Before you can start, you need to understand the Flash Timeline. Read the information and answer the questions. Open the Flash Program 




From the File menu, click New.




About the Timeline 1.

The secret to making animations using Flash is to add "keyframes" to the Timeline. The Timeline organizes and controls a document's content over time in layers and frames. Label the parts of the Timeline. a. Playhead

A

Playhead: red bar that shows the current frame and moves from left to right when the project plays

C

Layer: row in the Timeline that divides the stage into levels to create different animations that play at the same time

B

Timeline Header: shows the frame numbers

E

Current Frame Indicator: indicator that displays the number of the selected frame

F

Frame Rate Indicator: indicator that sets the speed or frames per second (fps) at which the animation plays

D

Frame: box that holds a single picture in a strip of animation

b. Timeline Header

c. Layer

d. Frame

e. Current Frame Indicator

f. Frame Rate indicator

About Frames The Timeline is made up of numbers with boxes. Each box is a frame. A frame holds a single picture in a strip of animation. The numbers in the Timeline header tell the frame number. These can be used as a guide to help place objects, animation, or sound into the correct frame. You can select a frame by clicking on it. 2.

In the Timeline above, what frame number is d?

TECHNOKIDS INC.

9

1-29

TECHNOFLASH About the Frame Rate A default Flash document shows twenty four frames per second (24.00 fps), this is called the frame rate. 24.00 fps means in one second you will watch the animation from twenty four frames. It is important to understand frames per second, because this will help you set when an animation should start and stop. For example, in this assignment you are going to add text. You will want to leave the words on the screen long enough for a person to read. You will likely need 3 seconds for a person to read the words. At twenty four frames per second, the text would need to be on the screen for 72 frames. 3.

If the frames per second is set to twenty four (24. 00 fps), how many seconds will the Flash document have played when it reaches frame number 48?

2 seconds

About Keyframes You use the Timeline to fill the frames. To do this you add keyframes. Keyframes are the "key" to animation. A keyframe is a frame in an animated sequence that contains drawn objects. You can only add objects to keyframes. You have two choices when you add a keyframe to a Timeline. You can add a keyframe, which copies the content of the previous keyframe into the new one OR you can add a blank keyframe, which does not copy the content of the previous keyframe, and instead is empty. What type of keyframe you use depends on the type of animation you are creating. Today you are going to use blank keyframes in your animation. keyframe

4.

Look at the keyframe on the Timeline. Draw a picture of what the frame looks like.

About Layers You will notice that the layer has a row in the Timeline. By adding additional layers, it is possible to have many animations happening at the same time. This is because on each layer a keyframe can be added to the Timeline at the same frame number. This makes it possible to have a dog's tail wag at the same time as his ears wiggle. 5.

Look at the Timeline. What is the name of the layer?

Layer 1

About Scene One 6.

A Flash document can have more than one scene. Much like a movie, scenes divide the action into parts. Each scene has a stage that contains drawn objects, layers for the objects, and a Timeline that holds animation and sounds. When you make a large production, it is a good idea to divide the story into scenes. What is the name of the scene?

HINT: The scene number is displayed above the stage.

Scene 1 Exit Flash

1-30

TECHNOKIDS INC.

TECHNOFLASH

SESSION 1

Assignment 5: Create Scene 1 – In a Land Far Far Away In this assignment you use static animation to make the first scene in a space adventure. Static animation is when still pictures are shown in a sequence. The scene will introduce the purpose of the story. It will contain pictures and the words "In a land far far away there lived an alien that longed for adventure. He decided to leave his planet to explore the galaxy." Follow the instructions to: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13.

In Frame 1, add the words, "In a land far far away" and include a picture of space. Insert a blank keyframe onto the Timeline in Frame 72. View the story using the ENTER key. Add, "there lived an alien that longed for adventure" onto the blank keyframe. Below the words, draw an alien. Add the alien to the Library. Insert the alien from the Library onto the stage. Edit the appearance. Delete the newly added alien. Insert another blank keyframe in Frame 144. Add, "He decided to leave his planet in search of adventure." onto the blank keyframe. Copy an image from Frame 1 onto the blank keyframe using Paste in Place. View the story. Solve the problem of why the last frame does not appear for very long. Edit the story by adding or removing frames. Save the Flash document.


Open the Flash program. From the File menu, click New.




Draw the First Still Picture in Frame 1: In a Land Far Far Away Follow the instructions to create the first still picture in the scene. 

Use the Text Tool

to add the text In a land far far away.



Use the tools in the Tools to draw a scene of outer space. Hints:

TECHNOKIDS INC.



Use a gradient fill to make the planets. There are several options at the bottom of the palette.



Draw a rectangle and then bend the top to make it look like a planet at the bottom of the stage.



If you used the Pencil Tool to draw an object, sometimes it is difficult to fill with color. Try using the Brush Tool. Set the options to Paint Inside. Paint color along the inside edges. Now the shape should easily fill with color when you use the Paint Bucket Tool.

1-31

TECHNOFLASH Draw the Second Still Picture in Frame 72: There Lived an Alien Follow the instructions to make the second still picture in the scene. Add a Blank Keyframe You need to add a blank keyframe to the Timeline at frame 72. This will cause the first picture you drew to show on the screen for 71 frames. After that, it will no longer be displayed because a new picture on frame 72 will be seen. 

Right click on Frame 72, and from the menu select Insert Blank Keyframe.

Notice how the Timeline has changed. The frames in between frame 1 and frame 71 are gray. Frame 71 has a white box. This indicates that the contents of frame 1 will stop being displayed after this frame. Frame 72 has a white box with a circle. This shows that it is a keyframe.

View the Story 

Click on frame 1. Press the ENTER key to view the story.

-

The playhead moves across the Timeline. The current frame playing is shown in the Current Frame Indicator.

Current Frame Indicator

Playhead

There Lived an Alien Hints:



In Frame 72, use the Text tool

to add:

there lived an alien that longed for adventure. 

1-32



Draw shapes and then bend them to create an alien.



Add details to the alien. If Object Drawing mode was turned on you will need to double click on a shape to open the editing pane. Now add the details. When finished, click Scene 1 to return to the stage.



Press ENTER inside the text box to make the words appear on two lines.



To fill an area with color, use the Paint Bucket Tool. Set the Gap Size to Close Large Gaps.



If an area won't fill with color, select the Brush Tool. Set the Brush Mode to Paint Inside. Paint around the inside edges. Now use the Paint Bucket to fill the area.



Use the Zoom tool to magnify the stage.



Copy and paste a shape to make arms or legs quickly.



To flip a shape, from the Modify menu, select Transform. Click Flip Horizontal.

Use the tools in the Tools to draw an alien. Make sure it is filled with color.

TECHNOKIDS INC.

TECHNOFLASH

SESSION 1

Add a Picture to the Library as a Graphic Symbol When you draw an object, it can be saved in the Library as a symbol. This means it can be used over and over again. You are going to add your alien to the Library. That way you can use him in many scenes of your space adventure. Add the Alien to the Library 

Click the Selection Tool. Click and drag to draw a box around the alien to select the entire object.



To group the alien, from the Modify menu, select Group.



Right click on the alien and from the menu select Convert to Symbol.



Type alien in the Name box. Select Graphic in the Type box. Click OK.

Insert a Symbol from the Library Now the alien is a symbol stored in the Library. You can insert it from the Library. Try it! 

From the Window menu, select Library. A should display itself on the right hand side of the window.



Click on the alien symbol under the Name heading and drag it onto the stage. IMPORTANT DO NOT double click on the symbol once it is on the stage. If you do, it will open the image in the editing pane. Any changes you make in this pane will change the symbol.

Edit the Newly Added Alien 




Change the size, skew, and rotate the newly added alien.



Notice how the alien in the Library and the original alien on the stage stay the same.

You can even change the color of the newly added alien, without changing the symbol in the Library or the original alien on the stage. To do this you need to break apart the object. 

Select the newly added alien. From the Modify menu, click Break Apart.



With the new alien selected from the Modify menu click Ungroup.

TECHNOKIDS INC.

1-33

TECHNOFLASH 

You can now use the Fill Color



Use the Brush Tool to add polka dots to the new alien.

NOTE:

-

and Paint Bucket Tool

to change the color of the objects.

If you added detail to an object in the editing pane, you can only make edits in the editing pane. To do this, double click on an ungrouped object that you would like to edit. It will open in the editing pane. Click on the stage to deselect the object. Select a color and then use the Paint Bucket Tool to fill an area with color or use the Brush Tool to draw polka dots. When finished, click Scene 1 to return to the stage. Notice how the original and the Library symbol stay the same.

Delete the Newly Added Alien 




Click and drag around the newly added alien to select it. Press DELETE on the keyboard.

Draw the Third Still Picture in Frame 144: He Decided to Leave his Planet Follow the instructions to make the third still picture in the scene. Add a Blank Keyframe You need to add a blank keyframe to the Timeline at frame 144. This will cause the second picture you drew to show on the screen for about 3 seconds. After that, it will no longer be displayed because a new picture on frame 144 will be seen. 

Click frame number 144. From the Insert menu, select Timeline and choose Blank Keyframe.



Notice how the Timeline has changed again.

Add Text to Describe the Story 

In Frame 144, use the Text Tool

to add the text:

He decided to leave his planet to explore the galaxy. This is his story.

1-34

TECHNOKIDS INC.

TECHNOFLASH

SESSION 1

Copy an Object from Frame 1 to the Same Place in Frame 144 

Click on frame 1 in the Timeline.



Click on an outer space object. You may need to double click it to select both the fill and stroke.



From the Edit menu, select Copy.



Click on frame 144 in the Timeline.



From the Edit menu, select Paste in Place. The object is now positioned in the exact same place as in frame 1.

When you use Paste in Place the object is put in the exact same spot as the copied item.

What is the Problem? 

Watch your story by selecting frame 1 and pressing ENTER. Do you notice the problem?

-

Maybe you cannot tell because when the playhead gets to frame 144 the animation stops. However, there is a problem.



To find the problem, from the Control menu select Test Movie. Select Test.

-

The movie opens into a preview pane and will continually loop.

1.

What is the problem? The final words and picture do not show up long enough to read.



Click the Close button on the Test window pane to exit the preview.

Solve the Problem: Insert a Blank Keyframe The objects in frame 144 only plays for one frame, which is not enough time to read the text or see the drawings. To solve this problem you need to add a blank keyframe to the Timeline. , it takes one second to play twenty four frames. How many seconds do you think you need to read the last bit of text? The frame 216 will give the viewer 3 seconds to read the words. 

Insert a blank keyframe on the Timeline in frame 216.

TECHNOKIDS INC.

1-35

TECHNOFLASH Edit the Story You may find the words are on the screen too long or short. This can easily be fixed. More Time is Needed to Read the Words If you need more time to read the words, then you need to add more frames prior to the next picture being shown, in other words, before the next keyframe. Frame when picture stops being shown.

Keyframe where picture starts to be shown.

New keyframe and picture.



For the desired picture, right click on a frame between the starting keyframe and the ending frame (the white rectangle).



Select Insert Frame. Add as many frames as are necessary to read the words.

Less Time is Needed to Read the Words If you need less time to read the words, then you need to remove frames prior to the next picture being shown, in other words, before the next keyframe. 

For the desired picture, right click on a frame between the starting keyframe and the ending frame (the white rectangle).



Select Remove Frames. Remove as many frames as necessary.

Save the Flash Document and then Exit Flash. 

From the File menu, select Save.



Click the Look in: arrow and locate the folder where you save your work.



Type the filename space in the File name box.



Click Save.



From the File menu, select Exit.

1-36

TECHNOKIDS INC.

TECHNOFLASH

SESSION 1

Session 1 Review: About Flash Label the parts of the Flash window.  Timeline

 stage

 layers

 tools

Stage Tools

Layers

Timeline

/4 Match the tool to its function. 5.

B

A.

Draw freehand.

6.

C

B.

Rotate, skew, or scale a selected object.

7.

A

C.

Bend a line.

8.

E

D.

Erase fills or lines.

9.

D

E.

Draw an oval.

/5

TECHNOKIDS INC.

1-37

TECHNOFLASH Circle whether the statement is TRUE or FALSE. 10.

A blank keyframe copies the content from the previous keyframe.

TRUE

FALSE

11.

Each frame on the Timeline plays for one second.

TRUE

FALSE

12.

Objects can only be added to keyframes.

TRUE

FALSE

13.

A graphic can be stored as a symbol so that it can be used over and over again.

TRUE

FALSE

/4 Match the term to its definition 14.

B

frames per second

A.

A gallery of stored objects called symbols

15.

C

group

B.

The number of frames played per second

16.

A

Library

C.

To combine multiple items to form one object /3

Answer the questions. 17.

If the frames per second is set to twenty four (24. 0 fps), how many seconds will the Flash document have played when it reaches frame number 120? 5 seconds /1

18.

What is the difference between Paste and Paste in Place? Paste puts the selection onto the stage slightly below the original image. Whereas Paste in Place puts the image onto the stage in exactly the same spot as the original image.

19.

List two benefits to placing an object into the Library. It can be used over and over again. The object can be edited without changing the symbol in the Library.

/1

/2

TOTAL: /20

1-38

TECHNOKIDS INC.

TECHNOFLASH

SESSION 1

Session 1 Skill Review: Cartoon Challenge Practice using the tools in the Tools to make a cartoon creature. 1.

Open Flash. Click the File menu and select New. Select ActionScript 3.0 as the file type. Click OK.

2.

Draw the head using the Oval tool:

3.

4.

5.

6.

a.


b.


c.


d.

Draw the head of the cartoon character.

e.


f.

Rest the mouse over the head.


Click anywhere on the stage to DESELECT the head. Bend the oval.

Draw a face: a.


b.


c.

Click Enlarge from the Tool Options.


d.


. Select tool options.

e.

Draw eyes, nose, and mouth.

f.


g.


h.

Click Reduce from the Tool Options.

or Pencil Tool





b.

Draw the body of the cartoon character.

c.


d.


e.



Draw details on the body: a.

Double click on the body to open the editing pane.

b.


c.


d.

Add details such as a colored belly or spots.

e.


or Pencil Tool

.

Draw the arms using the Oval tool: a.


b.

Draw an oval. Bend the shape to make an arm.

c.

Double click on the arm to open the editing pane.

d.


e.


f.

Add details such as claws.

g.


h.

Position the arm.

TECHNOKIDS INC.


or Pencil Tool

.

1-39

TECHNOFLASH 7.

8.

9.

10.

Copy and paste the arm: a.

Select the arm. From the Edit menu, click Copy.

b.


c.


d.


e.


Click and drag the arm to the correct place. Rotate the arm.




b.

Draw an oval. Bend the shape to make a leg.

c.

Double click on the leg to open the editing pane.

d.


e.


f.

Add details such as claws or wrinkles.

g.


h.

Position the leg.

or Pencil Tool

.

Copy and paste the leg: a.


b.


c.


d.


e.


Click and drag the leg to the correct place. Rotate the leg.

Use your skills to add more details such as spikes, ears, or wings. TIP: If using the Pencil or Brush Tool turn the Object Drawing option OFF.

11.

Save the file as creature.

12.

Exit Flash.

1-40

TECHNOKIDS INC.

TECHNOFLASH

SESSION 1

Session 1 Extension Activity: Flip and Align Objects Below are instructions for flipping objects horizontally and vertically, as well as aligning them on the stage or to one another. Try it! How to Flip an Object You may want to flip an object to have it face in the other direction. This is easy to do. 1.

Open the saved space adventure file.

2.

Select the frame with the alien (Frame 72).

3.

Select the alien.

4.

From the Modify menu, select Transform. From the menu options select either Flip Vertical or Flip Horizontal.

How to Align an Object to the Stage You can align objects on the stage. For example, perhaps you want an object in the center of the stage. 1.

Select an object you want to center on the stage.

2.

From the Modify menu, select Align. Click Align to Stage.

3.

From the Modify menu, select Align again. Align the object in the middle of the stage from the left and right sides by clicking Horizontal Center.

4.

From the Modify menu, select Align again. This time, align the object in the center of the stage from the top to the bottom by clicking Vertical Center.

How to Align Objects to Each Other You can also align objects to each other. For example, perhaps you want the text and the alien to be centered to each other. 1.

This time instead of using the menu, you will use the Align . Select the text and alien. To do this, hold the SHIFT key and click on each object.

2.

If necessary, clear the Align to stage checkbox.

TECHNOKIDS INC.

1-41

TECHNOFLASH 3.

From the Window menu, select Align. Notice how all the options for aligning objects are shown as buttons.

4.

Experiment with the alignment options in the to discover what they do. Record in the space below what each button does:

a)

Align objects to the left.

b)

Align objects to the horizontal center.

c)

Align objects to the right.

d)

Align objects to the top edge.

e)

Align objects to the vertical center.

f)

Align objects to the bottom edge.

5.

1-42

DO NOT SAVE THE CHANGES. Exit Flash.

TECHNOKIDS INC.

Flash Lesson Plan Cs5 6o1331

Overview 26281t

More details 6y5l6z

Related Documents 3h463d

Flash Lesson Plan Cs5 6o1331

Apuntes De Flash Cs5 62c4b

Adobe Flash Cs5 2od3c

El Entorno De Flash Cs5 5dj6e

Curso De Flash Cs5. Aulaclic 4gw1c

Cs5 i3d6p

More Documents from "Sesha Sai Kumar" 5p26t

Flash Lesson Plan Cs5 6o1331

Principal Nondetailed Essay The Meeting Pool f6xx

Iit Jee Main Advnaced Inorganic Chemistry 12th Metallurgy w11g

Iit-jee-main-advanced-physical-chemistry-12th-chemical-kinetics.pdf 355d1q

Effects Strengths 2u4n4t

Raman Spectroscopy Basics 5n4lv