XP Tutorial 8 Adding Interactivity with ActionScript

XP 2New Perspectives on Macromedia Flash 8 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

XP 3New Perspectives on Macromedia Flash 8 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

XP 4New Perspectives on Macromedia Flash 8 Sample Flash Application

XP 5New Perspectives on Macromedia Flash 8 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

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

XP 7New Perspectives on Macromedia Flash 8 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)

XP 8New Perspectives on Macromedia Flash 8 Writing ActionScript Using Variables, 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

XP 9New Perspectives on Macromedia Flash 8 Writing ActionScript Using Variables, 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 (//)

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

XP 11New Perspectives on Macromedia Flash 8 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

XP 12New Perspectives on Macromedia Flash 8 ActionScript Syntax

XP 13New Perspectives on Macromedia Flash 8 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)

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

XP 15New Perspectives on Macromedia Flash 8 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

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

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

XP 18New Perspectives on Macromedia Flash 8 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

XP 19New Perspectives on Macromedia Flash 8 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

XP 20New Perspectives on Macromedia Flash 8 Dynamic Text Options

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

XP 22New Perspectives on Macromedia Flash 8 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

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

XP 24New Perspectives on Macromedia Flash 8 Complete ActionScript Code

XP 25New Perspectives on Macromedia Flash 8 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

XP 26New Perspectives on Macromedia Flash 8 Sample Preloaders

XP 27New Perspectives on Macromedia Flash 8 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

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

XP 29New Perspectives on Macromedia Flash 8 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

XP 30New Perspectives on Macromedia Flash 8 ActionScript for Preloader

XP 31New Perspectives on Macromedia Flash 8 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