Week 8: Introducing Interactivity

• ActionScript Basics
• Using the Actions Panel
• Flash Banner Ads with ActionScript 2:
• Creating an invisible “button”
• Adding Behavior to an object on the stage
• Using the Trace function to test your code
• ActionScript 3
• How to Set up your Files for AS3 applications
• Targeting an object in AS3
• Creating Custom Functions
• Creating an Interactive Button in AS3
• Using ActionScript for Timeline Control

ActionScript Basics

ActionScript is the language used to program interactivity in Flash. It is what is called an Object Oriented Language, or OOP. We’ll talk more about what that means as we go along. ActionScript is also client-side language, which means that all the processing takes place on the end users machine. In practical terms, this means that the Flash movie can change without reloading the container HTML page, but it also means that Flash cannot save any information back to the Web server.

There are two ways to include ActionScript with your Flash movie, via the Actions panel, or a separate .as files. In this class we are going to explore the first method.

The Actions Panel

Actionscript is adding to your Flash movie through the Actions panel, which you can open either through the Windows menu or Shift+F9 .

The Actions panel will always show you the code for the object on the stage you currently have selected.

ActionScript Syntax

ActionScript is comprised of a series of statements that are always ended with a semi-colon:

some code here;

A more complex statement might be enclosed in curly brackets:

{
  more complex code;
  some more code;
}

If you want to include notes that won’t be read as code, you can do that in the form of comments. There are two types of comments in Actionscript:

// This is a single line comment

/* This is a multi-line
or block comment */

There are also a few naming rules to keep in mind:

• Code is case sensitive: MovieClip is not the same thing as movieclip
• Don’t create names that start with a number (it’s ok to have a number elsewhere in the name)
• Don’t use non-alphanumeric characters in names except hyphen (-) or underscore ( _ )

Flash Banner Ads with ActionScript 2

ActionScript has gone through three versions, 1.0, 2.0, and 3.0. For the most part you should now exclusively use ActionScript 3.0, however the one exception you may encounter in your professional practice is Flash banner ads. Many sites use a click tracking system called ClickTag which is not compatible with AS 3.0. We’re going to review how to set up a ClickTag for a banner ad with ActionScript 2.0, in the case that you might need to do this in the  future.

Keep in mind that there are a few things you can’t use if you are working in AS2, because they were introduced with AS3:

• 3D objects and transforms
• TLF Text (use Classic)
• Bone tool armatures

Step 1: Creating the Invisible Button Symbol

1. Create a new layer at the top of your timeline layers
2. On that layer, draw a rectangle on the stage that is the same size as the stage.
3. Convert the rectangle to a Button symbol (not a MovieClip or Graphic!)
4. Give the button symbol on the stage an instance name
5. Open the button symbol to edit it. Copy the rectangle keyframe to the “Hit” frame. Clear all the other frames, so it looks like this:

This will make the button invisible, but clickable. Yay!

Step 2: Adding Behavior to an Object on the Stage

In AS2 (but not AS3!) you can add Actionscript directly to a MovieClip or Button instance on the stage via the Properties panel, by clicking the little arrow at the top right of the panel:

This will open the Actions panel for that object.

The code for creating an “on click” behavior in AS2 for your button is as follows:

on (release) {
 // put what you want to happen when the button is clicked here
}

Step 3: Using the Trace function to test your code

To test whether you’ve added the button and the behavior correctly, you can use the trace function. The trace function will send data to the output window when you are in Flash, but is invisible to the user once the Flash movie is published as a .swf online.

on (release) {
   trace("click");
}

To add a link to the click behavior, use the getURL function:

on (release) {
   getURL("http://www.google.com", "_blank");
 }

The first parameter is the full path to the web page you want to open. The “_blank” parameter will force the linked URL to open in a new browser window.

If you need to use a ClickTag, you will use this code instead:

on (release) {
 getURL(clickTAG, "_blank");
}

ActionScript 3.0

How to set up your files for AS 3.0 Applications

As I’ve mentioned, you cannot add ActionScript directly to objects in AS3. Instead, you can add code to any frame or sequence of frames on the Timeline. This includes the timelines of symbols.

While you can add code to any layer on the timeline, including layers that have symbols or other objects on them, it is much cleaner to designate a single, empty layer for your code. This will prevent you accidentally erasing code or objects when working with one or the other, and it will also make it easier for you or another developer working on the code to find it later.

With this goal in mind, I want you to place all your ActionScript on a single layer at the very top of your timeline called “actions”. So, the first thing you do now when creating a new file is to make this layer, then open the Actions panel and pin this layer so that it is always easy to get to it.

Targeting Objects on the Stage with ActionScript 3.0

Because you are no longer able to add behavior directly to objects, you need to be able to tell actionscript which object on the stage you are adding behavior to. In order to do this, you must target the object using its instance name. That means that every object on the stage that you want to be interactive must have an instance name!

Then, when you want to refer to that object in your ActionScript, you can call it by name, using object notation:

buttonone.dosomething();

You can also find named objects on the stage using the target button in the Actions panel:

Object Properties and Methods

The core functionality of any object-oriented programming language are classes, objects, properties and methods.

Every object on the stage is an instance of a defined class of object within the ActionScript core library. These classes have properties and methods attached to them, and these vary depending on the class. Here’s an easy way to think of the difference between a property and a method:

• Properties define what an object is
• Methods describe what an object does

instancename.propertyname;

You can change the value of that property like this:

instancename.propertyname = value;

Methods are called like this:

instancename.methodname(arguments);

Creating Custom Functions

ActionScript 3 has many built in functions, like the trace function which we’ve already used. You can also create your own functions, to hold code that you want to be able to reuse anywhere in your project. First you define the function:

function functionname(parameter1,parameter2):return {
    //do something
}

Then, when you want to use the code in the function, you call it using the function name like this:

functionname (value1,value2);

The values in the parentheses are parameters, extra information you can pass into the function when you call it. For example, when you call the trace function, the parameters are whatever you put between the parentheses that you want to send to the output window.

Creating an Interactive Button in AS 3.0

When creating a button or other interactive object in ActionScript 3, there are two steps you must create: an event listener, and an event handler. You can add event listeners and handlers to Button and MoveClip Instances but not Graphic symbols.

The Event Listener

The event listener describes what object to target, and what event to respond to. You do this using the addEventListener method.

This function takes two parameters, the event to respond to (like a mouse click) and the function to run when the event is detected.

 

The first parameter above describes an event of type MouseEvent, and the CLICK event is the particular event that is being listened for. Here are all the MouseEvents you can listen for:

• CLICK
• DOUBLE_CLICK
• MOUSE_DOWN
• MOUSE_MOVE
• MOUSE_OUT
• MOUSE_OVER
• MOUSE_UP
• MOUSE_WHEEL
• ROLL_OUT
• ROLL_OVER

The Event Handler

The event handler is a function that you must define, to describe what you want to happen when the event happens.

Using ActionScript for Timeline Control

So far animation that you have created on the timeline plays automatically and continuously. You can use ActionScript to control when your movie starts and stops, and to jump around the timeline.

There are a number of timeline related methods of the MovieClip class that you can use to control playback of your main or MovieClip nested timelines:

• stop( ) – This will stop the movie wherever it appears on the timeline
• play( ) – Starts playback of the movie
• nextFrame( ) – Advances the movie one frame
• prevFrame( ) – Rewinds the movie one frame
• gotoAndPlay(frame) – Goes to the specified frame (either by name or number) and start playing from that point.
• gotoAndStop(frame) – Goes to the specified frame (either by name or number) and stop there

There is also one timeline related property that will help you do your homework:

• currentFrame;

All the properties and methods of the MovieClip class are detailed here

Homework

Take the original walkcycle exercise or the bone tool exercise (or really any of the animation assignments)  you did earlier in the class, and add buttons that do the following:

• Play
• Stop
• Move Forward 1 Frame
• Move Back 1 Frame
• Jump to the End
• Go Back to the Beginning
  
  

Here’s a hint: Anything that’s a number in Flash (like frame numbers) can be used  to do simple math – add, subtract, multiply and divide.