Tài liệu Thiết kế flash với flash cs5 part 60 pdf

ptg 374 Chapter 15 ActionScript 3.0 now supports the ECMAScript, DOM3, event model syntax. In laymen’s terms, this means that you now use the Listener object to detect when you inter- act with your Flash movie using either a key- board, mouse, or the new gesture interfaces used in touching the screen directly. This is a big move from ActionScript 2.0. As an example, the following script is ActionScript 2.0 that instructs a Movie Clip to jump to frame 25 of a movie: ActionScript 3.0 uses Listeners to trigger when an event occurs. Listeners are more complex to work with, but, give you more flexibility. There are essentially two parts to a Listener. The first is a function that describes what is going to happen when you trigger an event. The second is the Listener that waits for a specified event to happen, such as mouse clicking on a button. The following steps adds an ActionScript 3.0 event that mimics the same event as the ActionScript 2.0 example above. Use ActionScript 3.0 Click the File menu, click New , click ActionScript 3.0 , and then click OK . Create a new Movie clip on the Stage with the name myMovie . 2 1 Create a new layer in the Timeline with the name Actions , and then select the layer. Open the Actions panel, create the function, and then add the listener that triggers the function. The function is called gotoFunction and the parenthesis dictates that it is looking for a mouse driven event. There is only one instruction in the function, the gotoAndStop function that moves the Timeline to frame 25. The first part of the Listener, myMovie , instructs ActionScript to target the movie clip object on the Stage. The second part of the Listener, addEventListener , instructs Flash that you are using the Listener object.The parenthesis has two parts that explain that the event is a mouse event and to use the function gotoFunction. The ActionScript 3.0 event model gives you flexibility to write more complex scripts and to extend the functionality of the event model beyond traditional mouse and keyboard inter- faces. To do this you use the core object class controlling events on the screen called the EventsDispatcher class. Through this you can not only leverage standard events such as mouse clicks and the keyboard, but you can extend the class with your event types. 4 3 Developing Solutions Built with the DOM3 Event Model From the Library of Wow! eBook ptg Chapter 15 Working with ActionScript 3.0 375 A common design pattern in Object Oriented programs separates design, programming and data elements. Flash CS5 adds this func- tionality with the inclusion of Classes. A Class is a packaged document that you can use to explain how UI components, business logic and data elements are to interact. A Class is a separate ActionScript file that is associated with the main Flash file and movie clips. You can use Flash CS5 as the Class file editor or your favorite text editor such as Eclipse, Notepad or Textedit. A Class file is only a text file. It is very easy to create entire Flash movies using just Class files and not even add any content into a traditional timeline. Create a Simple Class File Click the File menu, click New , click ActionScript 3.0 , and then click OK . Click the File menu, and then click Save to save the file with the name helloWorld.fla . Open the Properties panel. Click the Edit Class Definition button (pencil icon) in the Property inspector, enter a new class with the name helloClass , and then click OK . A new ActionScript file named helloClass.as opens with the following ActionScript 3.0 script. 4 3 2 1 Remove the line that says //constructor code and replace it with: trace (“Hello, World”); Click the File menu, and then click Save to save the Class file. In the Flash document, click the Control menu, point to Test Movie , and then click Test to view the results. The words “Hello, World” posted to the Output panel. Classes provide you a way in which you can create public and private class elements. The difference between the two is related to how you use the data. For instance, a public property can be shared throughout your whole Flash movie. A private property can only be used within the class it is defined in. Add Classes to Movie Clips You can also add separate class references directly to Movie Clips in your Library. Open the Library panel. Right-click (Win) or Control-click (Mac) a Movie Clip, and then click Properties . In the Properties dialog box, click Advanced if necessary, and then select the Export For ActionScript check box. Click OK . A class is automatically created for the sym- bol using the name of the Movie Clip. You can now modify the Class file for the Movie Clip in your favorite text editor. 4 3 2 1 6 5 4 Working with Classes From the Library of Wow! eBook ptg 376 Chapter 15 With ActionScript 3.0, you specify a class definition, either document or object level, to work with objects using ActionScript code. To create your own class, you need to follow a certain syntax. First, you enter a package statement to indicate where your class will be found. Then, you enter a class statement to define the name of the class. At this point, you define each property in the class by using variables, and each method by using functions. When you define a class element, such as a property or method, you can also specify an attribute. A pri- vate attribute can be called only by code within the class, while a pub- lic attribute can be called by any code in the program. After you define a class, you can define a subclass that inherits all the properties and methods of the parent class, or superclass. In the subclass, you can add methods and properties and override others from the superclass, known as polymorphism. If you want to trigger actions based on events, you can use the EventDispatcher class to keep track of event listeners and notify them of events. Working with Objects and Classes Work with Objects and Classes in ActionScript Create or open a Flash document (ActionScript 3.0). Open the Properties panel. Click the Stage. In the Class field, type the name of the ActionScript file to create a document class definition. IMPORTANT Be sure not to include the .as extension. Open the Library panel. Right-click (Win) or A-click (Mac) the object you want to control in ActionScript, and then click Properties. Click Advanced, if available. (Button name changes to Basic.) Enter a name for the object. Select the Export for ActionScript check box. The Class appears with the same name as the object, and the Base class appears with object type. 9 8 7 6 5 4 3 2 1 2 4 65 10 8 7 Class definitions 9 From the Library of Wow! eBook ptg Chapter 15 Working with ActionScript 3.0 377 Click OK. If prompted, click OK to define the new class. Click the File menu, and then click Save. Click the File menu, and then click New. Click ActionScript File. Click OK. Click the File menu, and then click Save As. Navigate to the folder with the Flash document, and then name the file (same as the one in Step 4). Click Save. In the Actions panel, enter the script as shown in the illustration. IMPORTANT ActionScript 3.0 is case-sensitive, so upper- and lower-case make a difference. Click the File menu, click Save, and then close the ActionScript file. Click the Control menu, point to Test Movie, and then click Test. 21 20 19 18 17 16 15 14 13 12 11 10 Common Syntax in ActionScript 3.0 Command Description Dot syntax Access the properties and methods of an object. myDotEx.method (); Slash syntax Not supported in ActionScript 3.0. Literals A value that appears directly in your code. “text”, true, false, 10 Semicolon (;) Term in at es (end s) a sta te me nt . var a:int = 2; Parentheses Indicates order of operation, evaluates a series of expressions, or pass parameters. Comments Documents code. Single-line comments begin with //, while multi-line comment begin with /* and ends with */. Keywords Reserved words you cannot use as identifiers. as, class, const, if, var, true, in Constants A fixed value. const MINIMUM:int = 0; ActionScript defines constants with all CAPS with words separated by an underscore. const MOUSE_DOWN:String = “mouseDown”; 1 Public attribute Function ActionScript file Change property Variable Package statement Class statement Did You Know? You can define accessor methods. For advanced ActionScripting, you can also define accessors methods, which are a cross between a method and property (defined like a method, yet creates an instance like a property). From the Library of Wow! eBook ptg 378 Chapter 15 Namespaces are ways in which you can define the visibility of properties you are cre- ating. This is commonly used in XML when you are importing documents using a URI indicator. You can also use the NameSpace as a way to overload your objects. The principle in overloading is to create several methods that have the same name but differ in the types of input and output they generate. The following example is built using a Class called NamespaceExample. The role of this class is to pull in an XML document and step through the formatting of the code. Using Namespaces you can instruct Flash where to find a definition of the document type you are using, in this case an RSS for- matted document type. Click the File menu, click New , click ActionScript 3.0 , and then click OK . Open the Properties panel. Click the Edit Class Definition button (small pencil icon) in the Properties inspector, enter a new class with the name NamespacesExample , and then click OK . A new ActionScript file named NamespacesExample.as opens. Create a simple RSS formatted XML document. You can use the following formatted RSS document: <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22- rdf-syntax-ns#" xmlns="http://purl.org/rss/1.0/" xmlns:dc="http://purl.org/dc/elements/1.1/" > 4 3 2 1 <channelrdf:about="http://www.xml.com/cs/ xml/query/q/19"> <title>This is an RSS feed</title> <link>http://www.bbc.co.uk/</link> <description>This is a test RSS document.</description> <language>en-us</language> <items> <rdf:Seq> <rdf:li rdf:resource="http://www.bbc.co.uk/"/> </rdf:Seq> </items> </channel> <item rdf:about="http://news.bbc.co.uk/"> <title>BBC News Center</title> <link>http://news.bbc.co.uk</link> <description>Welcome to the BBC News Center</description> <dc:creator>BBC</dc:creator> <dc:date>2010-02-12</dc:date> </item> <item rdf:about="http://www.bbc.co.uk/radio"> <title>BBC Radio Center</title> <link>http://www.bbc.co.uk/radio</link> <description>Welcome to the BBC Radio Center</description> <dc:creator>BBC</dc:creator> <dc:date>2010-02-12</dc:date> </item> </rdf:RDF> Using Namespaces in your Projects From the Library of Wow! eBook ptg Chapter 15 Working with ActionScript 3.0 379 Open the NamespacesExample Class, and then define the package with a public class named NamespacesExample that will extend the functionality of the Sprite object. package { import flash.display.Sprite; public class NamespaceExample extends Sprite Insert the Namespace reference that describes how to use RSS XML. { private var rss:Namespace = new Namespace("http://purl.org/rss/1.0/"); private var rdf:Namespace = new Namespace("http://www.w3.org/1999/02/22- rdf-syntax-ns#"); private var dc:Namespace = new Namespace("http://purl.org/dc/elements/1.1/ "); public function NamespaceExample() RSS has several standard XML types. You are going to extract the following: title, creator, date, link and description. Each of these items will be formatted in accordance to the namespace called RSS. You will see in the third line of the ActionScript that you reference the RSS namespace. private function parseRSS(rssXML:XML):Array { default xml namespace = rss; var items:XMLList = rssXML.item; var arr:Array = new Array(); var len:uint = items.length(); 7 6 5 for (var i:uint; i < len; i++) { arr.push({title:items[i].title, creator:items[i].dc::creator, date:items[i].dc::date, link:items[i].link, description:items[i].description}); } return arr; } Add a Public function that will use the RSS namespace and send the content to the Output panel: public function NamespaceExample() { var myXML:XML = getRSS(); var rssItems:Array = parseRSS(myXML); var len:uint = rssItems.length; for (var i:uint; i < len; i++) { trace(rssItems[i].title); trace(rssItems[i].creator); trace(rssItems[i].date); trace(rssItems[i].link); trace(rssItems[i].description); } } Click the Control menu, point to Test Movie , and then click Test to see the RSS feed results sent to your Output panel. Namespaces are an effective way to man- age your control over XML data. As with all core classes in Flash, you can extend the Namespace to use it in conjunction with other objects and data types. 9 8 From the Library of Wow! eBook . ActionScript file that is associated with the main Flash file and movie clips. You can use Flash CS5 as the Class file editor or your favorite text. Listener, addEventListener , instructs Flash that you are using the Listener object.The parenthesis has two parts that explain that the event is a mouse