© 2011 delmar, cengage learning chapter 9 introduction to actionscript 3.0

© 2011 Delmar, Cengage Learning

Chapter 9

Introduction to ActionScript 3.0

Chapter 9 Lessons

1. Understand ActionScript 3.0

2. Work with instances of movie clip symbols

3. Use code snippets

4. Work with variables

© 2011 Delmar Cengage Learning


• Introduction– ActionScript 3.0 (AS3) allows you to do

everything you did in AS2 and more

– AS3 significantly improves the performance of Flash movies by delivering large and complex animations

– Increased performance enhances the user experience by not having to wait for movies to download



• Introduction– AS3 also makes complex animations work more

smoothly

– AS2 and AS3 are scripting languages with intuitive code (instructions)

– AS3 is based on the Object Oriented Programming (OOP) standards

– OOP is a way to organize code



Tools You’ll Use



• The emphasis in AS3 shifts to the objects, both on and off the Stage.

• You can write code directly in the Actions panel that defines the button and specifies the event (mouse click) that triggers the action (goto) or simply plays the motion tween without moving the playhead.

Understand ActionScript 3.0


• When you start a new Flash movie, you must choose AS2 or AS3. Specifying AS3 means that when you are writing code in the Actions panel, you must adhere to the AS3 rules.

• However, you can still use the draw tool features that you have already learned.



• Most Flash movies are a combination of using the drawing tools and ActionScript code.

• You can only develop using one ActionScript code.

• In AS3, an object is an instance, similar to the instances you created from movie clip graphics and button symbols.



• With AS3, instances are defined by classes instead of symbols.

• Classes have certain attributes (properties) and functionality (methods) that are passed on to its objects.

• The properties describe the objects.• The methods describe what the objects can

do.




Summary of specific AS3 concepts and terms


• The Flash program has many predefined classes.

• If a class is not predefined in Flash, you can import it.

• Flash files have a display list and Flash uses it to manage every object on the screen when the movie is published.



• In order for an object to be on the display list, it must be a part of the DisplayObjects class.

• Objects that can be a part of this class include movie clips, buttons, text, shapes, bitmaps, and videos.

• Objects you create in AS3 must be added to the display list with the addchild() method.



• A variable is a container that holds data and the data can be either numeric or text.

• You can assign each variable a Data Type, which indicates class used to populate the variable.

• Data Types include: Number, String (text), MovieClip, and shape.



• An important use of variables is to hold instances of objects that can be referred to throughout the AS3 code.

• The process for working with AS3 is to plan how you will be developing objects, how you will be using the Timeline, and how to construct the user interactivity.




A movie with a circle and the AS3 code used to create the circle

With just four lines of code you can create a circle and specify a fill color, size, and Stage location


• Many, but not all classes are built into a Flash document.

• You can keep the Flash file size smaller by including only commonly used classes, such as Shape.



• Tweens involve a change in an object’s size, transparency, or position, and these changes could also involve easing.

• You must import the Tween class and the Easing class.

• The code for these two imports is:– import fl.transitions.Tween– import fl.transitions.easing



• Now that you added a motion tween to an object, a button can be added to provide interactivity.

• A common type of interactivity is to have the user click a button, which causes some action.



With AS3, you do not assign code to a button or any object on the Stage, instead, you reference the object within the code


A button added to the Stage in frame 1

Instance name for object on the Stage


• AS3 is a strict code environment which means you must adhere to specific syntax rules including spelling, punctuation, capitalization, and use of special characters.

• If you need help, you can display code hints which give the syntax or possible parameters for an action you are entering.



• To see a code hint, type the action statement, and then type an opening parenthesis.

• To dismiss the code hint, type the action statement, and then type a closing parenthesis or press [Esc].

• To disable code hints, click Edit on the menu bar, click Preferences, and then click to deselect the Code hints check box in the ActionScript category.



• The Check syntax button checks for any errors in the syntax of the coding and displays a message in the Compiler Errors panel if any errors are found.

• The Auto format button formats the code in accordance with ActionScript formatting conventions. This may add spaces, lines, and indents to make code more readable.



The Actions panel has three panes.• Actions toolbox pane—provides the

categories of actions that can be selected to build ActionScript code.

• Script navigator pane—provides a list of frames that contain scripts used in the movie.

• Script pane—used to type in the code and a toolbar for editing code.




Actions panel ready to enter AS3 code

ActionScript 3.0 selected

Code Snippets button

Auto format button

Check syntax button

Script pane

Actions panel menu bar

Code applied to frame 1 of the actions layer

Script Assist off

Actions toolbox pane

Click to expand or collapse the left window

Script navigator pane


• The left window in the Actions panel displays the Actions toolbox pane and the Script navigator pane.

• The right window in the Actions panel displays the Script pane where the ActionScript code is displayed.

• You can resize the windows by dragging the border between the two panes up or down.



• Using movie clips in a Flash document helps you to manage your document by breaking complex tasks into smaller components.

• It allows you to reuse content and reduce file size.

• You can also use actions with movie clips giving you more control over the objects.

Work with Instances of Movie Clip Symbols


• You can set actions you associate with movie clips to:– Run automatically– Run when a user performs an action– Run when a condition is met

• The Export for ActionScript feature allows you to export a movie clip.



The process for exporting a movie clip for use in AS3


Symbol Properties dialog box is used to make Export for ActionScript active

Class name from dialog box is displayed in Linkage area of Library panel

Instance on the screen when movie is published

Code to add Purple shirt to display list

Code to create new instance of Purple shirt based on PurpleShirtMC


AS3 allows you to enter predefined blocks of AS3 code called code snippets, which provide a quick way to insert AS3 code into the Script pane

Use Code Snippets

The Code Snippets panel


• When you use a code snippet, the process includes:– Creating a button symbol and giving it an instance

name– Selecting the button instance on the Stage– Opening the Code Snippets panel and clicking the

desired snippet to enter that code in the Script pane– Editing the code as needed, such as changing the

function name and editing the actions you want executed

Use Code Snippets


• You should think of code snippets as templates that allow you to make changes to customize the code, including changes in function names, frame numbers, or properties such as ease values.

• As you write code, it becomes useful to provide comments to help clarify what is happening in a particular section of code.

Use Code Snippets


Use Code Snippets

The Script pane after adding a code snippet

Void is an optional keyword that indicates the function does not return a value

Name of code snippet

Button with event listener

Comment lines explaining the code and giving instructions; /” marks the beginning and “/ marks the end of comments

A function with gotoAndPlay code


• You can insert comments by using the Apply block comment button or Apply line comment button on the Actions menu bar.

• You can also add a comment to your ActionScript code by typing a slash and an asterisk (/*) at the beginning and an asterisk and a slash (*/) at the end of one or more lines of text.

Use Code Snippets


• Any code between this set of symbols is treated as a comment and it is ignored when the ActionScript code runs.

• Alternately, if your comment is only a single line, you can place two slashes (//) at the beginning of the line, and that line will be ignored when the ActionScript runs.

• Comments appear as gray text.

Use Code Snippets


When you make a movie clip draggable, you allow the user to move the movie clip to another location on the screen

Use Code Snippets

Draggable movie clips in a Flash game

Each checker is a movie clip symbol, which you can drag to a square


• AS3 code can also change the properties of movie clip symbols as a movie is playing.

• You can control such properties as position, rotation, color, size, and whether the movie clip is visible or hidden.

• Actions that change movie clip properties are often used in combination with actions that test for user input or interactions.

Use Code Snippets


• A variable is a container that holds information.

• Variables are dynamic; that is, the information they contain changes depending on an action a user takes or another aspect of how the movie plays.

• You create variables in ActionScript with the var keyword.

Work with Variables


• You can create a string variable, which is a sequence of characters including letters, numbers, and punctuation, by placing quotation marks around the string.

• You can create a number variable by just writing the number.

• A powerful use of variables allows you to collect and work with information from users by creating input text fields.

Work with Variables


Work with Variables

Using the Properties panel to create an input text field

Input Text selected as the text type

Text type list arrow

Embed button

Change Character settings

Show border around text button

Behavior set to Single line


• An input text field takes information entered by a user and stores it as a variable.

• A dynamic text field displays information derived from variables.

• A dynamic text field can be used together with an input text box.

Work with Variables


• When you include input text fields in your Flash movie you need to embed the font so that it is available to the users no matter what fonts they have on their computer.

• When you embed the font, it ensures the text maintains the appearance you desire.

Work with Variables


• Expressions are formulas for manipulating or evaluating the information in variables.

• Flash lets you enter logical expressions that perform true/false comparisons on numbers and strings, with which you can create conditional statements and branching.

Work with Variables


Work with Variables

Example of an expression used for a calculation

Expression that performs a calculation

Event listener for the plusBtn calls the addTotal function when the button is clicked

© 2011 delmar, cengage learning chapter 9 introduction to actionscript 3.0

Documents

delmar cengage learningwhen

actionscript code

lessonsunderstand actionscript

as3 shifts

as3 rules

new flash movie

performance of flash

flash files