1. © 2011 Delmar, Cengage Learning Chapter 9 Introduction to ActionScript 3.0

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

3. 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 to ActionScript 3.0

4. © 2011 Delmar Cengage Learning 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 Introduction to ActionScript 3.0

5. © 2011 Delmar Cengage Learning Tools You’ll Use Introduction to ActionScript 3.0

6. © 2011 Delmar Cengage Learning 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

7. © 2011 Delmar Cengage Learning 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

8. © 2011 Delmar Cengage Learning 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

9. © 2011 Delmar Cengage Learning 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

10. © 2011 Delmar Cengage Learning Understand ActionScript 3.0 Summary of specific AS3 concepts and terms

11. © 2011 Delmar Cengage Learning 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

12. © 2011 Delmar Cengage Learning 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

13. © 2011 Delmar Cengage Learning 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

14. © 2011 Delmar Cengage Learning 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

15. © 2011 Delmar Cengage Learning Understand ActionScript 3.0 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

16. © 2011 Delmar Cengage Learning 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

17. © 2011 Delmar Cengage Learning 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

18. © 2011 Delmar Cengage Learning 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. Understand ActionScript 3.0

19. © 2011 Delmar Cengage Learning With AS3, you do not assign code to a button or any object on the Stage, instead, you reference the object within the code Understand ActionScript 3.0 A button added to the Stage in frame 1 Instance name for object on the Stage

20. © 2011 Delmar Cengage Learning 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

21. © 2011 Delmar Cengage Learning 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

22. © 2011 Delmar Cengage Learning 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

23. © 2011 Delmar Cengage Learning 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

24. © 2011 Delmar Cengage Learning Understand ActionScript 3.0 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

25. © 2011 Delmar Cengage Learning 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

26. © 2011 Delmar Cengage Learning 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

27. © 2011 Delmar Cengage Learning 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

28. © 2011 Delmar Cengage Learning The process for exporting a movie clip for use in AS3 Work with Instances of Movie Clip Symbols 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

29. © 2011 Delmar Cengage Learning 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

30. © 2011 Delmar Cengage Learning 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

31. © 2011 Delmar Cengage Learning 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

32. © 2011 Delmar Cengage Learning 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

33. © 2011 Delmar Cengage Learning 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

34. © 2011 Delmar Cengage Learning 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

35. © 2011 Delmar Cengage Learning 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

36. © 2011 Delmar Cengage Learning 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

37. © 2011 Delmar Cengage Learning 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

38. © 2011 Delmar Cengage Learning 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

39. © 2011 Delmar Cengage Learning 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

40. © 2011 Delmar Cengage Learning 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

41. © 2011 Delmar Cengage Learning 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

42. © 2011 Delmar Cengage Learning 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

43. © 2011 Delmar Cengage Learning 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