|
|
ActionScript basics for JavaScript developersAdobe® ActionScript® 3.0 is a programming language like JavaScript—both are based on ECMAScript. ActionScript 3.0 was released with Adobe® Flash® Player 9 and you can therefore develop rich Internet applications with it in Adobe® Flash® CS3 Professional, Adobe® Flash® CS4 Professional, and Adobe® Flex™ 3. The current version of ActionScript 3.0 was available only when developing SWF content for Flash Player 9 in the browser. It is now also available for developing SWF content running in Adobe® AIR®. The Adobe AIR Language Reference for HTML Developers includes documentation for those classes that are useful in JavaScript code in an HTML-based application. It’s a subset of the entire set of classes in the runtime. Other classes in the runtime are useful in developing SWF-based applications (the DisplayObject class for example, which defines the structure of visual content). If you need to use these classes in JavaScript, refer to the following ActionScript documentation:
Differences between ActionScript and JavaScript: an overviewActionScript, like JavaScript, is based on the ECMAScript language specification; therefore, the two languages have a common core syntax. For example, the following code works the same in JavaScript and in ActionScript: var str1 = "hello";
var str2 = " world.";
var str = reverseString(str1 + str2);
function reverseString(s) {
var newString = "";
var i;
for (i = s.length - 1; i >= 0; i--) {
newString += s.charAt(i);
}
return newString;
}
However, there are differences in the syntax and workings of the two languages. For example, the preceding code example can be written as the following in ActionScript 3.0 (in a SWF file): function reverseString(s:String):String {
var newString:String = "";
for (var i:int = s.length - 1; i >= 0; i--) {
newString += s.charAt(i);
}
return newString;
}
The version of JavaScript supported in HTML content in Adobe AIR is JavaScript 1.7. The differences between JavaScript 1.7 and ActionScript 3.0 are described throughout this topic. The runtime includes some built-in classes that provide advanced capabilities. At runtime, JavaScript in an HTML page can access those classes. The same runtime classes are available both to ActionScript (in a SWF file) and JavaScript (in an HTML file running in a browser). However, the current API documentation for these classes (which are not included in the Adobe AIR Language Reference for HTML Developer) describes them using ActionScript syntax. In other words, for some of the advanced capabilities of the runtime, refer to the Adobe AIR ActionScript 3.0 Language Reference. Understanding the basics of ActionScript helps you understand how to use these runtime classes in JavaScript. For example, the following JavaScript code plays sound from an MP3 file: var file = air.File.userDirectory.resolve("My Music/test.mp3");
var sound = air.Sound(file);
sound.play();
Each of these lines of code calls runtime functionality from JavaScript. In a SWF file, ActionScript code can access these runtime capabilities as in the following code: var file:File = File.userDirectory.resolve("My Music/test.mp3");
var sound = new Sound(file);
sound.play();
ActionScript 3.0 data typesActionScript 3.0 is a strongly typed language. That means that you can assign a data type to a variable. For example, the first line of the previous example could be written as the following: var str1:String = "hello"; Here, the str1 variable is declared to be of type String. All subsequent assignments to the str1 variable assign String values to the variable. You can assign types to variables, parameters of functions, and return types of functions. Therefore, the function declaration in the previous example looks like the following in ActionScript: function reverseString(s:String):String {
var newString:String = "";
for (var i:int = s.length - 1; i >= 0; i--) {
newString += s.charAt(i);
}
return newString;
}
Note: The s parameter and the return
value of the function are both assigned the type String.
Although assigning types is optional in ActionScript, there are advantages to declaring types for objects:
Data types corresponding to custom classesAn ActionScript 3.0 object can have a data type that corresponds to the top-level classes, such as String, Number, or Date. In ActionScript 3.0, you can define custom classes. Each custom class also defines a data type. This means that an ActionScript variable, function parameter, or function return can have a type annotation defined by that class. For more information, see Custom ActionScript 3.0 classes. The void data typeThe void data type is used as the return value for a function that, in fact, returns no value (a function that does not include a return statement). The * data typeUse of the asterisk character (*) as a data type is the same as not assigning a data type. For example, the following function includes a parameter, n, and a return value that are both not given a data type: function exampleFunction(n:*):* {
trace("hi, " + n);
}
Use of the * as a data type is not defining a data type at all. You use the asterisk in ActionScript 3.0 code to be explicit that no data type is defined. ActionScript 3.0 classes, packages, and namespacesActionScript 3.0 includes capabilities related to classes that are not found in JavaScript 1.7. Runtime classesThe runtime includes built-in classes, many of which are also included in standard JavaScript, such as the Array, Date, Math, and String classes (and others). However, the runtime also includes classes that are not found in standard JavaScript; classes that have a variety of uses, from playing rich media (such as sounds) to interacting with sockets. Most runtime classes are in the flash package, or one of the packages contained by the flash package. Packages are a means to organize ActionScript 3.0 classes (see ActionScript 3.0 packages. Custom ActionScript 3.0 classesActionScript 3.0 allows developers to create their own custom classes. For example, the following code defines a custom class named ExampleClass: public class ExampleClass {
public var x:Number;
public function ExampleClass(input:Number):void {
x = input;
}
public function greet():void {
trace("The value of x is: ", x);
}
}
This class has the following members:
ActionScript 3.0 packagesPackages provide the means to arrange ActionScript 3.0 classes. For example, many classes related to working with files and directories on the computer on which an AIR application is installed are included in the flash.filesystem package. In this case, flash is one package that contains another package, filesystem. And that package may contain other classes or packages. In fact, the flash.filesystem package contains the following classes: File, FileMode, and FileStream. To reference the File class in ActionScript, you can write the following: flash.filesystem.File Both built-in and custom classes can be arranged in packages. When referencing an ActionScript package from JavaScript, use the special runtime object. For example, the following code instantiates a new ActionScript File object in JavaScript: var myFile = new air.flash.filesystem.File(); Here, the File() method is the constructor function corresponding to the class of the same name (File). ActionScript 3.0 namespacesIn ActionScript 3.0, namespaces define the scope for which properties and functions in classes can be accessed. Only those properties and methods in the public namespace are available in JavaScript. For example, the File class (in the flash.filesystem package) includes public properties and methods, such as userDirectory and resolve(). Both are available as properties of a JavaScript variable that instantiates a File object (via the runtime.flash.filesystem.File() constructor method). There are four predefined namespaces:
Additionally, custom classes can use other namespaces that are not available to JavaScript code. Required parameters and default values in ActionScript 3.0 functionsIn both ActionScript 3.0 and JavaScript, functions can include parameters. In ActionScript 3.0, parameters can be required or optional; whereas in JavaScript, parameters are always optional. The following ActionScript 3.0 code defines a function for which the one parameter, n, is required: function cube(n:Number):Number {
return n*n*n;
}
The following ActionScript 3.0 code defines a function for which the n parameter is required, and for which the p parameter is optional, with a default value of 1: function root(n:Number, p:Number = 1):Number {
return Math.pow(n, 1/p);
}
An ActionScript 3.0 function can also receive any number of arguments, represented by ...rest syntax at the end of a list of parameters, as in the following: function average(... args) : Number{
var sum:Number = 0;
for (var i:int = 0; i < args.length; i++) {
sum += args[i];
}
return (sum / args.length);
}
ActionScript 3.0 event listenersIn ActionScript 3.0 programming, all events are handled using event listeners. An event listener is a function. When an object dispatches an event, the event listener responds to the event. The event, which is an ActionScript object, is passed to the event listener as a parameter of the function, which differs from the DOM event model used in JavaScript. For example, when you call the load() method of a Sound object (to load an MP3 file), the Sound object attempts to load the sound and then dispatch any of the following events:
Any class that can dispatch events either extends the EventDispatcher class or implements the IEventDispatcher interface. (An ActionScript 3.0 interface is a data type used to define a set of methods that can be implemented by a class.) In each class listing for these classes in the ActionScript Language Reference, there is a list of events that the class can dispatch. You can register an event listener function to handle any of these events, using the addEventListener() method of the object that dispatches the event. For example, in the case of a Sound object, you can register for the progress and complete events, as shown in the following ActionScript code: var sound:Sound = new Sound();
var urlReq:URLRequest = new URLRequest("test.mp3");
sound.load(urlReq);
sound.addEventListener(ProgressEvent.PROGRESS, progressHandler);
sound.addEventListener(Event.COMPLETE, completeHandler);
function progressHandler(progressEvent):void {
trace("Progress " + progressEvent.bytesTotal + " bytes out of " + progressEvent.bytesTotal);
}
function completeHandler(completeEvent):void {
trace("Sound loaded.");
}
In HTML content running in AIR, you can register a JavaScript function as the event listener, as shown in the following code (which assumes that the HTML document includes a TextArea object named progressTextArea): var sound = new runtime.flash.media.Sound();
var urlReq = new runtime.flash.net.URLRequest("test.mp3");
sound.load(urlReq);
sound.addEventListener(runtime.flash.events.ProgressEvent.PROGRESS, progressHandler);
sound.addEventListener(runtime.flash.events.Event.COMPLETE, completeHandler);
function progressHandler(progressEvent) {
document.progressTextArea.value += "Progress " + progressEvent.bytesTotal + " bytes out of " + progressEvent.bytesTotal;
}
function completeHandler(completeEvent) {
document.progressTextArea.value += "Sound loaded.";
|