art 1 | art 2 | drawing&ptg | comp. graphicss | adv. comp. graphics | visual literacy | ceramics I | ceramics II | sculpture&jewelry | art history
 
ActionScript. Buttons
 

ActionScript is an internal programming language for Flash. It is similar, but not identical, to JavaScript.

ActionScript allows you to make your web site interactive.

For example - you can assign actions to buttons or to individual frames in the Timeline: to go to the next page or to another web site, to play or stop a movie, to load or unload an external movie, and so much more...

This is what you are going to do:
Start movie from a "stop" position
Create Play and Stop buttons
Loop the movie

 


Let's start...

Open your first animation file. Remember? With the bouncing ball.....

If you don't have it - start from scratch. Don't remember how? Shame on you!!!! Go to the "Basic Animation" page.

Add a layer. This is where you will put the Play and Stop buttons.

Add another layer. This is where you'll put some ActionScript that will control the timeline.

The first step is to add a "STOP" action to the first frame. Why? Because we want the movie to play only when Play button is pressed.

Important: click on frame 1 of action layer.

Open Actions panel: Window > Actions

Or press F9

On the left panes click "Timeline Control"
(hey, you are going to control the timeline!!!)

Double-click on "stop"

Stop action will appear in the right panel.

Little "action" emblem will appear in frame 1 to show you that an action has been assigned to this frame.

Control > Test Movie. See? The ball is not bouncing.

Return to the file.

Time to add the first button.

Go to "buttons" layer.

Use Type tool and type PLAY.

Switch to Selection tool.

Select the PLAY word. You are going to convert it to Symbol.

F8

Type in the name of the symbol: play

For the symbol type choose: button

Click OK

Open Library (CTRL L)

See your first button? Good!

Now you need to make this button act as a button:

change color on rollover

and

assign the area that will respond to the mouse click

and

add ActionScript to assign this button a task of starting the movie.

Double-click on the library symbol to open its timeline

Remember that every symbol has its own timeline?

Well... so do buttons. Button's timeline is a little different. Instead of timeline frames it has button stages:

UP - the way button looks on the page

OVER - the way button looks when you roll your cursor over the button

DOWN - the way button looks when you click on it

HIT - The area that is assigned to this button as a hit area

Timeline is still a timeline. You still use the same shortcuts to add frames to it.

Push F6 two times. It will insert keyframes to Over and Down states (meaning that it will copy what's on your Up state to the rest of the states)

Control > Test movie.

See? The button is there. The cursor changes to a hand when rolled over. But it is not a fun button yet. And it does not do anything. So...

Return to your file.

Insert a blank keyframe on HIT state ( F 7 ).

Draw a rectangle the size of your text.

Color does not matter - it will not be seen on your page. You just assigned the area that will work as a button. That means if you roll over the area of this rectangle - the regular cursor will recognize it as a button and will change into a hand.

Note: Any shape will work as a designated area. If you leave the Hit state empty - the button will not work.

Now let's change the color of your text in "Over" state. That means : when you roll over your button - the text color will change.

Go to OVER state.

Click on the text to select it.

Go to Properties Inspector and change the font color.

Now your button is ready. All that's left is to assign an ActionScript to it to make it play the movie.

Return to the Main Timeline (click on Scene 1)

Click on the PLAY button to select it (it is important to select the right object when you assign ActionScript!!!!!)

Go to Actions panel (Window > Actions)

Click on Movie Clip Control
Double-click on "on"

You will see the options to choose from.

Click on "release"

Why? Because you want some action to happen to your movie after you click (and release!!!!) your mouse.

Place your cursor at the end of the first line.

Hit ENTER to create another line.

This is where you are going to assign the action that you want to happen after you click on this button.

Click on Timeline Control

Double-click "play"

Your ActionScript should look exactly like mine.

Control > Test movie

Does it work?

Back to your file.

Buttons layer

Type: STOP

Convert to Symbol ( F8 )
name: stop
type: button

Repeat the steps you have followed for the PLAY button:
insert keyframes at Over and Down states
draw a rectangle for the Hit state
change text color at Over state

I went further and added some cute stuff for the Over state. You can do it too.

Back to Main Timeline.

Open Actions panel.

Movie Clip Control: on > release

Click at the end of line 1

Enter

Timeline Control : stop

You are almost done.

Control > Test Movie.

Play.

See? the ball bounces for the entire length of your timeline and then stops. Why? Because it returned to the beginning of the movie (frame 1). And what is at frame 1 on your timeline?
It's a Stop action!!!!!!

How do we loop the movie so it skips frame 1?

Easy. Go to the last frame of your animation.

Actions layer.

Insert a blank keyframe ( F7 )

 

 

Select the frame you just inserted.

Open Actions panel.

Click on Timeline Control.

Double-click on "gotoAndPlay"

Between the parentheses type 2 You just assigned the last frame of your movie the following task: "When the last frame is reached - go and start playing from frame 2" This will loop the movie (skipping frame 1 and going directly to frame 2 )

Control > Test Movie

Let me know when you are done!!!

Next task is to create PLAY and STOP buttons on your "Walking" project. You can be creative with the buttons!!!

When you are done - call me.

Have fun!!!!

 

 

 

top

home | my art | my ceramics | my graphics and cards | my paintings | art lessons online | resources | school art classes | art 1 | art 2 | computer graphics | adv.comp.graphics | visual lit | drawing & painting | ceramics 1 | art history | contact | privacy policy