Introduction to Flash and Actionscript

Lesson 1 - Objects, Instances, Movieclips and Frame by Frame Animation

 


1. Create a new Flash ActionScript 3 document.

2. Draw a circle on the stage.  Rename the Layer Body.

3. Convert this circle into a movie clip symbol. You must convert the shape into a movie clip or button symbol in order to be able to give it an instance name.


NOTE: The symbol name (the one you type in the Convert to Symbol dialog box) is NOT the same as the instance name.

4. Make sure that the circle is selected, then go to the Properties Inspector.

NOTE: When selecting instances of symbols on the stage, do NOT double-click them. Double-clicking will open up symbol-editing mode. To select an instance, just click on it once using the selection tool (the black arrow).

5. Then in the properties inspector, you will see an input field for the instance name. Type my
Circle1_mc inside the input field.


You've now given the currently selected instance the name my
Circle1_mc. The same step is followed if you wish to give buttons or text fields instance names as well.

6. Add another instance of the circle symbol on to the (Circle2) by dragging it from the library down to the stage.

http://4.bp.blogspot.com/-EjwJNX9NZEA/TgMGYryJHWI/AAAAAAAAAL0/v1_ukSArNMM/s320/drag-another-instance.png


7. Make sure that this second instance is selected, then go to the Properties Inspector and give it the name my
Circle2_mc.



8. Create a mySquare movie clip for your library, add a new layer called Legs and add 2 instances to the stage named mySquare1_mc and mySquare2_mc

9. Create a myTriangle movie clip for your library (Use the Polystar tool), add a new layer called eyes and add 2 instances to the stage. Name the instance.

10. Create a myHat movie clip for your library, add a new layer called hat and add 1 instance to the stage. Name the instance.

11. Add 3 more instances of the circle to a buttons layer and resize them. Name the instances.

12. Move all instance of the stage. We will position them using code.

 



MODIFYING PROPERTIES OF AN INSTANCE


Now that the instances have names, you will be able to target them using ActionScript. In this exercise, you will add some ActionScript code that will modify some of the properties of the instances on the stage.

What are properties?
Think of properties as characteristics that describe instances (e.g. size, color, rotation).

Some properties of MovieClip instances are:

  • scaleX - scales the instance horizontally by a specified number
  • scaleY - scales the instance vertically by a specified number
  • x - controls the x coordinate of the instance
  • y - controls the y coordinate of the instance
  • rotation - rotates the instance to the angle specified (-180 to 180)
  • width - adjusts the width of the instance
  • height - adjusts the height of the instance
  • alpha - adjusts the opacity level of the instance (0 to 1)
  • visible - visibility (true or false)


To access a property, add a dot to the end of the instance name followed by the property name. Then use the equals sign to assign a property value.

Syntax:
instanceName.property = value;

Examples:
myCircle1_mc.x = 50;
myCircle1_mc.rotation = 45;
myCircle2_mc.scaleY = .5;


MOVING THE OBJECTS TO CREATE A SNOWMAN

1.
Create a new layer for the ActionScript code. Name this Actions.

 


2. Make sure that frame 1 of the Actions layer is selected, then launch the Actions Panel by choosing Window > Actions from the main menu.

http://4.bp.blogspot.com/-kLliuKv9Pok/TgMKMcoQvjI/AAAAAAAAAL8/2DA4qNgAZVs/s320/actions-panel.png

 

 


To position movie clips

 

 

To resize objects if necessary


 

 

 

 

 

 

CREATING A SIMPLE ANIMATION

Create a new MovieClip using an image

 

1. Find a picture of wind on the internet.

2. Copy the image.

3. Insert > New Symbol and name it myWind.

4. Paste the image.

5. Create a new layer and add an instance of the wind to the stage. Name the instance.

 

Fade the wind in using alpha

 

1. On frame 1 of the actions layer change the alpha value of the wind to 0 (invisible)

 

 

2. Right click on frame 10 of the animations layer and add a blank keyframe, set the alpha to 0 .1;

3. Right click on frame 20 of the animations layer and add a blank keyframe, set the alpha to 0.2;

4. Continue every 10 frames until the alpha value is 1.

6. Make duplicate frames of all your other layers by right clicking on the last frame (probably 100) of each layer and adding a keyframe.

7. Run your program.

 

Move the hat across the screen and have it disappear when it leaves the stage.

Change x values and alpha on frames to accomplish this

.

Have the hat rotate as it blows off the screen.

Use the rotate feature on existing frames to rotate the hat

 

 

Change the color of different parts of your snowman(Note: Flash uses the American spelling of color)

 

To get the color hex values click on the color palette icon in the tool menu (Replace the # with 0x)

 


 

 

Assignments

20% of each assignment mark is for additional work that is above and beyond the required elements.

Add something extra to each of the assignments below.

 

 

Assignment 1 - Create the drawing below using only 3 movie clip symbols (myCircle, mySquare, myTriangle)and actionscript.

Now have the images disappear from the stage one at a time until the screen is blank. (Hint: Change Alpha values on different frames.)

Add Additional Frames to make the animation

 

To create 20 frames of your circles, squares and triangles. Right click on frame 20 and insert a keyframe

To create additional Actions add a blank keyframe to the frame you want to modify the actions on.

 

Adding a stop(); on the last frame will stop it from replaying.

 

 

ICS3C - items may start on the screen in the appropriate position

 

ICS3U - items must start off the screen and be positioned using code (see below)

 

 

 

 

You can only use 3 library items

 

 

 

 

Use one layer for all your circles, one for squares and one for triangles

 

 

 

Position the shapes, change the alpha values and rotate as necessary to produce the

 

Final Product

 

 

Extend the first frames so that the starting image is clearly visible.

 

Now have the shapes slowly fade out by changing the alpha values, the shapes will disappear at different times since their starting alpha values are different.

 

 

 

 

Assignment 2 - Create a Spinning illusion similar to the ones below. You may only use 1 movieclip object to create the animation. The objects must spin in different directions.



1. Choose File > Import to Stage to bring the bitmap into Flash

2. Remove the background of imported bitmaps
Select the image.
Choose Modify > Break Apart.
Deselect the image.
Select the Lasso Tool.
Click the Magic wand in the Options pane of the Tools panel.
Select the background areas of the bitmap image.
Press Delete.


3. Convert it to a movie clip



Add at least 3 instances of the spiral


Add Additional Frames to make the animation

To create 20 frames of your circles, squares and triangles. Right click on frame20 and insert a keyframe

To create additional Actions add a blank keyframe to the frame you want to modify the actions on.

 


Rotate using Code

 

 

 

 

 

 

Assignment 3 - First have a simple background appear. The background should include the buildings shown below.

 

You may use a maximum of 3 library symbols (myBlackSquare, myBrownSquare and myYellowSquare ) to create the buildings.

 

Use 6 instance of the myBlackSquare and 6 instances of myBrownSquare to make the building, and 30 instances of myYellowSquare.
The black squares are used to draw the border.
You may manually position the squares in the correct locations and then resize them using code

 

 

 

 

Now use additional library elements to add sky, grass, sun, road etc.

 

 

 

Draw a car similar to the one below. (It does not need to be exactly the same)
You may use a maxium of 4 library symbols (mySquares,myPolygons, myTriangle, myCircles) to create the car.

 

Have it appear on the left side of the screen and drive across the screen and off the stage using actionscript. You may position elements in the correct location and change the size using code.

 

ICS3C students may draw the car as one single movie clip.

 

 

 

To Move the Car

 

 

Student Example

 

 

 

Posting your Flash Animations

1. Upload the .fla file to the Gravelle Folder on your Google Drive

Create a link to the google document on your S1 Subpage

 

2. Export your animation as a .swf file

 

3. Attach the .swf file to the bottom of your website.

4. Copy the link location to the swf

5. Insert the Flash Wrapper Gadget

6. Open Flash Wrapper and Paste the link location from Step 2

7. Save your page to view your animation

 

 

8. Take a screenshot of each frame of your actions layer(if code repeats only copy 1 frame) and upload to the Gravelle Folder. Post on your website using insert > drive > image

 

9. Upload the Evaluation Sheet to the Gravelle Folder on your Google Drive

10. Add a Link at the top of the S1 subpage

 

Posting your Work

S 1 - Objects, Instances, Movieclips and Frame by Frame Animation

Evaluation Sheet Link for S1 - Saved in Gravelle Folder

For Each Assignment

Title
Link to .fla file which is in Gravelle Folder
Code inserted on to webpage from a Google Doc File in Gravelle Folder
.swf File attached to the bottom of the webpage
.swf inserted on the webpage using Flash Wraper

Each section should be organized and clearly labeled.

Assignment Title

Assignment.fla Link

Snowman Code


// February 1, 2017
// Creating a Snowman from basic objects

// Set the position of the snowman's body
mySnowMiddle_mc.x = 175; // set snowmiddle x value
mySnowMiddle_mc.y = 221; // set snowhead y value

....

 

Animation .swf inserted using Flash Wrapper

 

 

Repeat above for

Assignment 1, 2, 3

.......