Tutorial 8

XP Tutorial 8 Adding Interactivity with ActionScript

---

XP Objectives • Review the basics of ActionScript programming• Use ActionScript to create links to access external Web sites • Create input and dynamic text fields• Use ActionScript to create an input form• Create and test a Flash preloader New Perspectives on Macromedia Flash 8 2

---

XP Programming with ActionScript • ActionScript: programming language in Flash• ActionScript is used to make a document interactive – Examples: make buttons operational, process user input • ActionScript may also be used to write applications – Example: shopping card application • Tutorial tasks involving the use of ActionScript – Control multimedia elements to access Web pages– Process data entered into input forms New Perspectives on Macromedia Flash 8 3

---

XP Sample Flash Application New Perspectives on Macromedia Flash 8 4

---

XP Working with Objects and Properties • ActionScript is used to control and modify objects• Object: Flash element with modifiable properties – Examples: buttons, movie clips, and text blocks • Properties are identified by underscore; e.g., _alpha• ActionScript examines and modifies many properties – Objects to be manipulated often require a name assignment • Dot notation: links object to properties and methods – Example: circle_mc._alpha = 30 // mc stands for movie clip New Perspectives on Macromedia Flash 8 5

---

XP Code Hints in the Actions Panel New Perspectives on Macromedia Flash 8 6

---

XP Using Actions, Methods, and Functions • Action: statement passing instruction to SWF file • Functions – Statement blocks that process data when called– Return a value or perform some action – Parameters or arguments: values passed to a function • Methods are functions specific to a particular object – Use dot notation to bind a method to an object – Example: circle_mc.gotoAndPlay(10) New Perspectives on Macromedia Flash 8 7

---

Writing ActionScript Using Variab X lePs, Expressions, Operators, and Comments • Variable: container that holds data while SWF plays• Keyword: word or phrase reserved for ActionScript – Examples: else, if, while, this • Expression: statement assigning a value to a variable • Two types of data – String data: series of characters within quotation marks– Numeric data: numbers not enclosed with quotation marks • Operators manipulate values in expressions New Perspectives on Macromedia Flash 8 8

---

Writing ActionScript Using Variabl X e P s, Expressions, Operators, and Comments (continued) • Types of operators – Assignment operator (=): assigns value to variable – Arithmetic operators: + , -, *, and /– Comparison operators: <, <=, >, >=, = =, != • Conditional statement – Uses comparison operators to compare values– Example: if (x > 50) { gotoAndPlay(1):} • Comments: explanatory notes set off by slashes (//) New Perspectives on Macromedia Flash 8 9

---

XP Comment in Script Pane New Perspectives on Macromedia Flash 8 10

---

XP Writing ActionScript Code • Syntax: set of rules specifying valid code constructs• ActionScript statements follow a specific syntax – Example: parentheses are required to group arguments • Use Actions toolbox to limit syntax errors• Some places where scripts are added – Frame: script triggered when playhead reaches frame– Button: script activated when button clicked and released– Movie clip: script performed as part of a movie clip New Perspectives on Macromedia Flash 8 11

---

XP ActionScript Syntax New Perspectives on Macromedia Flash 8 12

---

XP Exploring ActionScript Examples • Leslie’s Salad and Sandwich Shop Web site – Use this site to review ActionScript examples • ActionScript code for buttons in Specials page – Controls how playhead moves in the Timeline– Playhead moves to daily special based on button click • Another code example from ballsample.fla – _x property of movie clip is modified with ActionScript– _x property contains horizontal position (X coordinate) New Perspectives on Macromedia Flash 8 13

---

XP ActionScript for Movie Clip New Perspectives on Macromedia Flash 8 14

---

XP Linking to Web Sites Using the getURL() Function • Objective: add links to a Resources page• getURL(): loads a document into a browser window• Format: getURL(url, window) – url (uniform resource locator): address of the Web site– window options: _self, _blank, _parent, and _top • _blank option will be used in Resources page – Specifies that document is opened in a new window • Button clicks cause getURL() to load document New Perspectives on Macromedia Flash 8 15

---

XP getURL() Function New Perspectives on Macromedia Flash 8 16

---

XP Text Block Above Buttons New Perspectives on Macromedia Flash 8 17

---

XP Creating an Input Form • How an input form works – User enters data into input fields– Input data processed by current page or Web server – Results of process are displayed • One scenario involving an input form – Visitor enters number and type of items to be purchased– Other fields display total price based on entry • Input forms must include dynamic text and input text New Perspectives on Macromedia Flash 8 18

---

XP Using Dynamic and Input Text • Static text: cannot be changed after document plays• Dynamic text: defined to display variable contents – Variable can be manipulated to change value displayed • Use the Text tool to create a dynamic text block – Select Dynamic Text type in the Property inspector • Input text: allows user to enter text into text block• Use Text tool to create an input text box – Select Input Text type in the Property inspector New Perspectives on Macromedia Flash 8 19

---

XP Dynamic Text Options New Perspectives on Macromedia Flash 8 20

---

XP Additional Options for Input Text New Perspectives on Macromedia Flash 8 21

---

XP Creating the Team Jersey Calculator Page • Objective: calculate costs for team jerseys• Calculator requirements – Four input text boxes to gather type, quantity, add-ons– Calculate button with ActionScript to process input data – Dynamic text block to display the total cost– Explanatory text for input text and calculate button • Pseudocode: programming logic in English syntax• Use pseudocode to design the script New Perspectives on Macromedia Flash 8 22

---

XP Dynamic Text Block For Cost Calculator Page New Perspectives on Macromedia Flash 8 23

---

XP Complete ActionScript Code New Perspectives on Macromedia Flash 8 24

---

XP Using a Flash Preloader • SWF files are often downloaded to a client computer • Factors affecting the download time of SWF files – Size of the file measured in kilobytes– Type of Internet connection; e.g., broadband or dial-up • Large SWF file may require a long time to download• Ways to overcome excessive download wait time – Stream the content: play frames as content arrives– Add a preloader animation to advise user of status New Perspectives on Macromedia Flash 8 25

---

XP Sample Preloaders New Perspectives on Macromedia Flash 8 26

---

XP Creating the Preloader ActionScript • Adding a preloader requires ActionScript code• Pseudocode for the preloader logic – Get the total number of bytes– Get the number of bytes loaded– If the number of bytes loaded equals the total number of bytes Play the rest of the SWF file else continue playing the preloader animation New Perspectives on Macromedia Flash 8 27

---

XP Changing the Width of a Movie Clip New Perspectives on Macromedia Flash 8 28

---

XP Creating a Preloader for the Jackson’s Sports Web Site • Objective: create a preloader on main page• Specifications for preloader – Add preloader to revised version of Main.fla file– Preloader will start Frame 1 of its own layer– ActionScript is added to second frame of Actions layer New Perspectives on Macromedia Flash 8 29

---

XP ActionScript for Preloader New Perspectives on Macromedia Flash 8 30

---

XP Completing the Actions for the Jackson’s Sports Web Site • Objective: make new buttons on Main.fla functional • Resources and Calculate buttons load SWF files• Requirements – SWF files load in level 1 of Flash Player– loadMovieNum() action will be added to each button– Action will execute after button is clicked – Files to load: Resources.swf and Calc.swf New Perspectives on Macromedia Flash 8 31

---