Manipulating Flash Content From Timeline In ActionScript 3

Introduction:

The title of this article pretty much says it all. Coding in the timeline is not recommended for bigger projects due to organization and lack of object oriented programming style. However, for learning purposes, coding in timeline is a quick and dirty way of getting things done.

Section 1: Common Movie Clip Properties In Flash CS3 Timeline

1) Open Flash CS3 and create a new Flash File (ActionScript 3.0)

2) Click on frame 1 on the timeline

3) Press R to select the rectangle tool or click on the icon from the toolbar.

4) Click and drag onto the workspace to create a rectangle.

5) Select the entire rectangle by either:

a) Clicking on frame 1 to select all the contents drawn on that frame.

b) Press V or click on the selection tool from the tool bar (The first icon). Then click and drag anywhere in the workspace to create a selection region; then select over the entire rectangle.

c) With the selection tool, double click on the rectangle.

6) Press F8 to convert it into a symbol (or you can go to Modify->Convert to Symbol from the menu).

7) Give the symbol name: square. Leave it as Movie clip type. Click OK.

8) In the properties panel (It shows up at the bottom when your symbol is selected), give the Movie clip the instance name: m_square. I like to put an m_ for things that are movie clips, b_ for buttons, tf_ for text fields, etc. You can name them whatever you'd like but it is nice to be more organized.

The instance name is the name that will be used to reference the movie clip

9) In the properties panel, change the X and Y values to 0. Your square should now be at the top left corner of the stage.

10) Now click on frame 1 and open your actions panel (F9).

11) Enter the following:

//coordinates (0,0) is the top left corner of the workspace.
m_square.x = 100; //this set the square's x coordinate to 100 pixels.
m_square.y = 100; //this set the square's y coordinate to 100 pixels.

12) Press Ctrl-Enter to do a test run of the movie. Notice that your square is not where you set it at the stage. This is because the code has changed it in run-time.

13) Try out some of these other properties (one at a time):
m_square.alpha = .5; //this will fade the movie clip to half transparent
m_square.visible = false; //this will make the movie clip invisible. This is true by default.
m_square.rotation = 30; //this rotates the square by 30 degrees
m_square.width = 10; //this changes the width of the movie clip
m_square.height = 10; //this changes the height of the movie clip

These functions are inherited from the displayObject class. This means not only do movieclips have these functions, but also buttons, sprites, text, and whatever object that inherits displayObject.

Section 2: Using F1 Help To Find Useful Functions

Understanding what features are available in Flash is quite important.

1) Press F1.

2) Search for movieclip in the search field for ActionScript 3.0.

3) Scroll down and click on MovieClip Class.

On the right, you should see the inheritance:
MovieClip--> Sprite -->DisplayObjectContainer -->InteractiveObject--> DisplayObject--> EventDispatcher--> Object

This means MovieClip can use all of the functions Sprite, DisplayObjectContainer, etc, can.

4) Click on DisplayObject from the inheritance chain.

5) Scroll down until you see the function list.

It is very important that you understand how to use the library of functions that Flash provides. The built in library is your basic tools. You can use these tools to build your own libraries but that is something you will learn later when you are much more experienced.

Take a look at one of the functions; let's say visible : Boolean. This means you can call this function named visible and it returns a Boolean.

//if you see the square on the stage, this will return true.
trace(m_square.visible);

//this will trace the x coordinates in Number format of m_square
trace(m_square.x);

If you click on the function names, you will be brought to the properties and examples section of that function.

Some examples are in packages and classes, which will be confusing to you at this point. They also have a lot of import commands and public/private keywords in front of functions (These are all object oriented related subjects that we will get into later on). When you are coding in timeline, you cannot create a package and importing flash packages is not necessary.

This means you won't be able to copy and paste the examples from the help and into the timeline and expect it to work.

Ending Summary

Don't be overwhelmed by the amount of functions Flash provides; you don't have to use all of them. I also cannot teach all of them. They are there for you to use for whatever things you want to work on; that is why it is very important that you understand what is already available to you.

For example, if you wanted to make a side scrolling fighting game, how will you go about making that? Well, you will need to know about

keyListeners to move your character or fight using your keyboard,

hitTestObject to detect if your character's fist will hit the enemy,

timer object to check for many things (hit tests , detect when to scroll the screen when reach a certain spot on the screen, etc) ,

addChild function to add enemies, players, and all sorts of items on to the stage,

mouseListeners to detect mouse clicks on buttons in your game,

gotoAndPlay movie functions for animation of character walking, fighting, falling, etc,

sound object to load background music and smack sounds when your character hits someone/something.

There should also be a load of other stuff that you will need. All of the above functions are demonstrated in my game source code section of Flashosophy.com. However, you may not be ready for it; you need to learn about object oriented programming first.

The tutorials onward from here will be more about content creation with working examples.

You are now off with a good start with Flash~

Published On: July 20, 2008

Next Chapter: Juice Machine Project In ActionScript 3

Previous Chapter: Flashosophy Cram Session Part III (Arrays and Loops)