Upload
satmania
View
233
Download
0
Embed Size (px)
Citation preview
8/3/2019 Flash Action Script 33216
1/26
Berne University of Applied Sciences
Flash - ActionScript 3
Dr. E. BenoistBibliography: http://as3.betaruce.com/tut/
http://livedocs.adobe.com/flex/201/langref/index.html
Fall Semester 07/08
Flash - ActionScript 3
1
http://as3.betaruce.com/tut/http://livedocs.adobe.com/flex/201/langref/index.htmlhttp://find/http://goback/http://livedocs.adobe.com/flex/201/langref/index.htmlhttp://as3.betaruce.com/tut/8/3/2019 Flash Action Script 33216
2/26
Table of Contents
Actionscripts principles
Actionscript SyntaxHelloworldCreating a Movie Clip instance
Event HandlingImport an image
Action Script Syntax
Flex: develop in AS without Flash IDE
Bibliography
Flash - ActionScript 3
2
http://find/http://goback/8/3/2019 Flash Action Script 33216
3/26
ActionScripts principles
Syntax: from Javascript to Java Actionscript was just there for some small interaction (stop(),gotoAndPlay(frame)
It developped using Javascript syntax: loosely typed,eventhandling attached to the objects by clicking on them
Now mature: more Object Oriented, less loosely typed Classes organized in packages, Javadoc like documentation, . . . Programs are stored in separate files.
Symbols are classes derivating from basis classes MovieClip is the central concept of any animation
A MovieClip class should be attached to the FlashAnimation
Flash - ActionScript 3
Actionscripts principles 3
http://find/http://goback/8/3/2019 Flash Action Script 33216
4/26
Helloworld Example
To create a class, we create an Action Script file with itsname.
class Example will be stored in file Example.as
We have to link a Class extending MovieClip with ourmain movie clip.
We need to integrate the actionscript file in a .fla file tocompile it into a .swf file.
The constructor is executed when the Movie is started.
Flash - ActionScript 3
Actionscript Syntax: Helloworld 4
http://find/http://goback/8/3/2019 Flash Action Script 33216
5/26
Helloworld Example
We create the file helloWorld.as
We write the definition of the class
We create a new .fla file and define helloWorld asDocumentClass.
package{import flash.display.MovieClip;
public class helloWorld extends MovieClip{public function helloWorld(){
trace(Hello);}
}}
Flash - ActionScript 3
Actionscript Syntax: Helloworld 5
http://find/http://goback/8/3/2019 Flash Action Script 33216
6/26
Action Script Syntax
Action Script Creates a Tree,like Document ObjectModel in HTML The root is the MovieClip Object attached to the application We can attache children to this object (= inserting an object
on its stage).
We can also create empty new instances of a MovieClipand configure them after the creation We use the graphics member of a MovieClip instance to
draw in it. Graphics knows how to: beginFill(color,alpha) (starts
the fill mode), curveTo (draw a curve from the currentposition to the given position), drawCircle(), drawRect(),drawRoundRect(), endFill() (go back to draw only mode). . .
Flash - ActionScript 3
Actionscript Syntax: Creating a Movie Clip instance 6
http://find/http://goback/8/3/2019 Flash Action Script 33216
7/26
Movie Clip including 2 MCspackage{
import flash.display.MovieClip;public class example extends MovieClip{
public var mc1:MovieClip = new MovieClip();public var mc2:MovieCLip = new MovieClip();public function example(){
mc1.graphics.lineStyle(1);mc1.graphics.beginFill(0xff0000);mc1.graphics.drawCircle(100,100,50);this.addChild(mc1);mc2.graphics.lineStyle(1);mc2.graphics.beginFill(0xffff00);mc2.graphics.drawRect(100,100,150,100);this.addChild(mc2);
}
} Flash - ActionScript 3Actionscript Syntax: Creating a Movie Clip instance 7
http://find/http://goback/8/3/2019 Flash Action Script 33216
8/26
Event Handling in AS3
We can add event handling to any instance of the class
MovieClip. We call the method addEventListener on the object
First argument: the event Second argument: the function that has to be executed
mc1.addEventListener(Event.ENTER_FRAME, enterFrame_handler);
Available Events for a movie Clip
Event.ENTER_FRAME fired as long as the clip is not stopped,by each frame entry.
MouseEvent.CLICK
MouseEvent.DOUBLE_CLICK (Only if activated) MouseEvent.MOUSE_OVER
. . .
Flash - ActionScript 3
Actionscript Syntax: Event Handling 8
http://find/http://goback/8/3/2019 Flash Action Script 33216
9/26
Change properties of MC Instances
MovieClips are children of a parent They have properties:
x and y are read write properties: place of MC in its parentstage (read/write).
mouseX, mouseY indicates where the mouse is currently; currentFrame (read only) indicates at which frame this MC
is. visible (Read/Write) to change the visibility status of an
object.
width and height(RW) of the object.
Flash - ActionScript 3
Actionscript Syntax: Event Handling 9
http://find/http://goback/8/3/2019 Flash Action Script 33216
10/26
Example
package{import flash.display.MovieClip;public class example extends MovieClip{
public var mc1:MovieClip = new MovieClip();public var mc2:MovieCLip = new MovieClip();
public function example(){mc1.graphics.lineStyle(1);mc1.graphics.beginFill(0xff0000);
mc1.graphics.drawCircle(100,100,50);mc1.addEventListener(Event.ENTER_FRAME,enterFrame_handlethis.addChild(mc1);
Flash - ActionScript 3
Actionscript Syntax: Event Handling 10
http://find/http://goback/8/3/2019 Flash Action Script 33216
11/26
...mc2.graphics.lineStyle(1);
mc2.graphics.beginFill(0xffff00);mc2.graphics.drawRect(100,100,150,100);mc2.addEventListener(MouseEvent.CLICK, mouseClick_handler);this.addChild(mc2);
}
private function enterFrame_handler(e:Event):void{mc1.x += 3;
}private function mouseClick_handler(e:Event):void{
trace("mc2Rectangleisclicked!");
}}
Flash - ActionScript 3
Actionscript Syntax: Event Handling 11
http://find/http://goback/8/3/2019 Flash Action Script 33216
12/26
Import an Image
We import the image in the flash application
File/Import/ImporttoStage
select the image Modify/ConverttoSymbol(F8) Select type Movie-Clip Remove the image from the stage
Create a class representing your MC Open the library (Ctrl L) Right click on your image, choose Linkage Choose Export for ActionScript Type the name of the class you want to define
We can create an instance of an existing MC Class
mc = new MyImageClass();
Flash - ActionScript 3
Actionscript Syntax: Import an image 12
http://file/Import/Import%20to%20Stagehttp://modify/Convert%20to%20Symbolhttp://modify/Convert%20to%20Symbolhttp://find/http://goback/http://modify/Convert%20to%20Symbolhttp://file/Import/Import%20to%20Stage8/3/2019 Flash Action Script 33216
13/26
More on Event Listeners
We can add an event listener
mc.addEventListener(MouseEvent.DOUBLE_CLICK,doubleClick_handler);
We can also remove an event listenermc.removeEventListener(MouseEvent.DOUBLE_CLICK,
doubleClick_handler);
The event listener function can access the Object whichgenerated this event: event.target
Flash - ActionScript 3
Actionscript Syntax: Import an image 13
http://find/http://goback/8/3/2019 Flash Action Script 33216
14/26
Example We already have imported an image, created a MC
symbol and named its class FunnyCarpackage{
import flash.display.;import flash.events.;public class Car extends MovieClip{
public var mc:MovieClip;public function Car(){
mc = new FunnyCar();this.addChild(mc);
mc.y = stage.stageHeight/2;mc.doubleClickEnabled = true;mc.addEventListener("doubleClick", doubleClick_handler);mc.addEventListener("click", click_handler);
}
... Flash - ActionScript 3Actionscript Syntax: Import an image 14
http://find/http://goback/8/3/2019 Flash Action Script 33216
15/26
...private function doubleClick_handler(e:Event){
e.target.addEventListener("enterFrame",enterFrame_handler);}private function enterFrame_handler(e:Event){
e.target.x += 3;
}private function click_handler(e:Event){e.target.removeEventListener("enterFrame", enterFrame_handler);
}}
}
Flash - ActionScript 3
Actionscript Syntax: Import an image 15
http://find/http://goback/8/3/2019 Flash Action Script 33216
16/26
Use text Field 1
We can create an instance of the flash.text.TextFieldclass
It has a member text that is read/write
public function HelloWorld(){
var display_txt:TextField = new TextField();display_txt.text = "HelloWorld!";addChild(display_txt);
}
1this example comes from http://www.senocular.com/flash/tutorials/
as3withmxmlc/
Flash - ActionScript 3
Actionscript Syntax: Import an image 16
http://www.senocular.com/flash/tutorials/as3withmxmlc/http://www.senocular.com/flash/tutorials/as3withmxmlc/http://find/http://goback/http://www.senocular.com/flash/tutorials/as3withmxmlc/http://www.senocular.com/flash/tutorials/as3withmxmlc/8/3/2019 Flash Action Script 33216
17/26
Actionscript syntax
Data Typing Type is given after the element variable:Type All members should be typed If a member can accept any type, use *
var myNum:Number;var myVar:;
Return value should be typed, use void if the function returnsnothing
function myFunction():void {}
Flash - ActionScript 3
Action Script Syntax 17
http://find/http://goback/8/3/2019 Flash Action Script 33216
18/26
Actionscript syntax (Cont.) Parameters/Arguments: Functions can have optional
value.public function testFunctions():void {
usingOptional(1);// usingOptional();
8/3/2019 Flash Action Script 33216
19/26
Dynamic Objects with dynamicproperties
Unlike in Java, AS objects may receive properties on therun
// Create a dynamic object with dynamic propertyvar obj:Object = new Object();
obj.prop = "value";// delete dynamic property on obj using deletedelete obj.prop// cannot delete obj, only able to set to nullobj = null;// int, unit, Number and Boolean types cannot be deletedvar intNum:int = 0;var uintNum:uint = 0;var numNum:Number = NaN;
Flash - ActionScript 3
Action Script Syntax 19
http://find/http://goback/8/3/2019 Flash Action Script 33216
20/26
Flex SDK
Compile AS without using Flash Need the Flex Standard Development Kit (SDK)
Available on all platforms
Windows and Mac Beta Version for Linux (plug-in for Eclipse available)
Swing like development Define a tree of movie clips Difference: the time lines (one per mc)
Flash - ActionScript 3Flex: develop in AS without Flash IDE 20
http://find/http://goback/8/3/2019 Flash Action Script 33216
21/26
Flex Builder
Compilator mxmlc.exe
Works like javac
mxmlc.exe o output.swf "D:\MyDirectory\samples\MyClass.as"
Flash - ActionScript 3Flex: develop in AS without Flash IDE 21
H ll W ld E l
http://find/http://goback/8/3/2019 Flash Action Script 33216
22/26
Hello World Example
The root element extends the class Sprite
package {import flash.display.Sprite;import flash.text.TextField;
public class HelloWorld extends Sprite {public function HelloWorld() {var display_txt:TextField = new TextField();display_txt.text = "HelloWorld!";addChild(display_txt);
}}
}
Flash - ActionScript 3Flex: develop in AS without Flash IDE 22
G hi d d i
http://find/http://goback/8/3/2019 Flash Action Script 33216
23/26
Graphics and drawing
package {import flash.display.Sprite;import flash.display.Shape;import flash.display.Graphics;public class Rectangles extends Sprite {
public function Rectangles() {drawColoredRectIn(graphics, 0xFF0000);var rect:Shape = new Shape();drawColoredRectIn(rect.graphics, 0xFFFF00);rect.x = 50;
rect.y = 50;addChild(rect);
}
Flash - ActionScript 3Flex: develop in AS without Flash IDE 23
http://find/http://goback/8/3/2019 Flash Action Script 33216
24/26
private function drawColoredRectIn(target:Graphics, color:int):void {target.lineStyle(1, 0x000000);target.beginFill(color);target.drawRect(0, 0, 100, 100);
}}}
Flash - ActionScript 3Flex: develop in AS without Flash IDE 24
I i A f Fl h ( i h
http://find/http://goback/8/3/2019 Flash Action Script 33216
25/26
Importing Assets from Flash (withoutFlash IDE)
package {import flash.display.Sprite;public class EmbedAssets extends Sprite {
[Embed(source="images/trophy.png")]
private var TrophyImage:Class;[Embed(source="swfs/satdish.swf")]private var SatelliteAnimation:Class;public function EmbedAssets() {
addChild(new SatelliteAnimation());
addChild(new TrophyImage());}
}}
Flash - ActionScript 3Flex: develop in AS without Flash IDE 25
M b t Fl h d Fl
http://find/http://goback/8/3/2019 Flash Action Script 33216
26/26
More about Flash and Flex
Flash language reference (Javadoc like Description ofstandard packages)http:
//livedocs.adobe.com/flex/201/langref/index.html
Flash tutorials (Flash with AS3 / Flex)http://www.senocular.com/flash/tutorials.php
An easy tutorial to start with Actionscripthttp://as3.betaruce.com/tut/
A lot of tutorials showing some nice features of AS (in
french ;))http://www.zoneflash.net/tutoriaux.php
Flash - ActionScript 3Bibliography 26
http://livedocs.adobe.com/flex/201/langref/index.htmlhttp://livedocs.adobe.com/flex/201/langref/index.htmlhttp://www.senocular.com/flash/tutorials.phphttp://as3.betaruce.com/tut/http://www.zoneflash.net/tutoriaux.phphttp://find/http://goback/http://www.zoneflash.net/tutoriaux.phphttp://as3.betaruce.com/tut/http://www.senocular.com/flash/tutorials.phphttp://livedocs.adobe.com/flex/201/langref/index.htmlhttp://livedocs.adobe.com/flex/201/langref/index.html