chapter 9 introduction to actionscript 3.0. chapter 9 lessons 1.understand actionscript 3.0 2.work...

40
Chapter 9 Introduction to ActionScript 3.0

Upload: christian-anderson

Post on 24-Dec-2015

222 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: 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

Chapter 9

Introduction to ActionScript 3.0

Page 2: 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

Chapter 9 Lessons

1. Understand ActionScript 3.02. Work with instances of movie clip symbols3. Use code snippets4. Work with variables

Page 3: 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

• 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

Page 4: 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

• 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.

Understand ActionScript 3.0

Page 5: 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

• 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.

Understand ActionScript 3.0

Page 6: 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

• 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.

Understand ActionScript 3.0

Page 7: 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

Summary of specific AS3 concepts and terms

Understand ActionScript 3.0

Page 8: 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

• 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.

Understand ActionScript 3.0

Page 9: 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

• 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.

Understand ActionScript 3.0

Page 10: 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

• 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.

Understand ActionScript 3.0

Page 11: 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

• 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.

Understand ActionScript 3.0

Page 12: 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

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

Understand ActionScript 3.0

Page 13: 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

• 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.

Understand ActionScript 3.0

Page 14: 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

• 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

Understand ActionScript 3.0

Page 15: 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

• After adding 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.

Understand ActionScript 3.0

Page 16: 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

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

Instance name for object on the Stage

Understand ActionScript 3.0

Page 17: 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

• 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.

Understand ActionScript 3.0

Page 18: 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

• 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.

Understand ActionScript 3.0

Page 19: 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

• 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.

Understand ActionScript 3.0

Page 20: 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

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.

Understand ActionScript 3.0

Page 21: 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

Understand ActionScript 3.0

Page 22: 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

• 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.

Understand ActionScript 3.0

Page 23: 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

• 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

Page 24: 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

• 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.

Work with Instances of Movie Clip Symbols

Page 25: 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

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

Work with Instances of Movie Clip Symbols

Page 26: 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

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

Page 27: 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

• 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

Page 28: 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

• 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

Page 29: 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

Use Code Snippets

Page 30: 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

• 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

Page 31: 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

• 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

Page 32: 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

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

Draggable movie clips in a Flash game

Use Code Snippets

Page 33: 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

• 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

Page 34: 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

• 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

Page 35: 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

• 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

Page 36: 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

Work with Variables

Page 37: 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

• 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

Page 38: 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

• 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

Page 39: 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

• 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

Page 40: 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

Work with Variables