Flash - Action Script
Basic syntax
//variable var varName:String="valueData"; // type: Number, Interger, Boolean //function function funName():void { } //as3 only:events objName.addEventListener(MouseEvent.CLICK, funName); function funName(event:MouseEvent): void { } // event type: keyboard event // classes package { import flash.display.MovieClip public class MyClass extends MovieClip { public function MyClass() {} } } // conditional statements if (condition) { } else { } // loops for (var i:Number=0;i<10;i++) { }
Programming structure with ActionScript
- (main stage) frame-label based state switch screen linear structure
- hard to manage large amount of status
on(click){_parent.gotoAndStop(theFrame)}
- (button click) movieclip attaching structure
on(click){_parent.attachMovie(theMC, "currentScreen",0);} //overwrites, and with mc as export for actionscript
- form based screen non-linear structure
- only exists in Flash MX 2004, Flash 8, CS3 and CS4, CS5 has dropped it
Programming with interaction and game like feedback
- hit test
if(mcA.hitTestObject(mcB)){ doFunHit(); }
- mouse hit test
//as 2 my_mc.hitTest(_root._xmouse, _root._ymouse) // as 3 my_mc.hitTest(mouseX, mouseY)
- drag and drop example
Element Scripting
button
// actionscript 2.0 box_mc.onRollOver = function():Void { box_mc.gotoAndStop(2); }; box_mc.onRollOut = function():Void { box_mc.gotoAndStop(1);}; box_mc.onPress = function():Void { trace("Mouse was pressed down.");}; box_mc.onRelease = function():Void { trace("Clicked the button.");}; // actionscript 3.0 box_mc.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler); // or MouseEvent.ROLL_OVER box_mc.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler); // or MouseEvent.ROLL_OUT box_mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); box_mc.addEventListener(MouseEvent.CLICK, mouseClickHandler); // or MouseEvent.MOUSE_UP box_mc.buttonMode = true; // enables use of hand cursor function mouseOverHandler($e:MouseEvent):void { box_mc.gotoAndStop(2);} function mouseOutHandler($e:MouseEvent):void { box_mc.gotoAndStop(1);} function mouseDownHandler($e:MouseEvent):void { trace("Mouse was pressed down.");} function mouseClickHandler($e:MouseEvent):void { trace("Clicked the button.");}
component flvplayer
// change flv content, instance name as "flv_view" // as2 flv_view.contentPath = "heart3d.flv"; // as3 flv_view.source = "heart3d.flv";
Drawing element
- draw a dynamic line with action script 2 (ref: LearnFlash)
// AS2 this.createEmptyMovieClip("line_mc", this.getNextHighestDepth()); function drawLine(){ line_mc.clear(); line_mc.lineStyle(5,0xBBBBBB); line_mc.moveTo(0, 0); line_mc.lineTo(100, 0); line_mc._x = 80; line_mc._y = 60; updateAfterEvent(); } this.onMouseMove = function(){ drawLine(); }
- action script 3 version (ref: updateAfterEvent)
var line_mc:MovieClip = new MovieClip(); this.addChild(line_mc); function drawline(){ line_mc.graphics.clear(); line_mc.graphics.lineStyle(5, 0x990000, .75); line_mc.graphics.moveTo(0, 0); line_mc.graphics.lineTo(100,0); line_mc.x = 80; line_mc.y = 60; }
- more reference on AS 2.0 vs AS 3.0 on MovieClip creation:
- draw line and curve
- draw shape
- simple drawing app
actionscript 2
external script loader
#include "externalfile.As"
XML loader
var myXML:XML = new XML(); myXML.ignoreWhite = true; myXML.onLoad = function (success:Boolean):Void{ var colors:XML = this.firstChild; for (x=0;x<colors.childNodes.length;x++){ var node:XMLNode = colors.childNodes[x]; yourActionFun({label:node.attributes.label, data:node.attributes.data}); } } myXML.load("colors.xml");
text field
// ActionScript 2.0 createTextField("theTextField", 0, 10, 10, 100, 100); theTextField.type = "input"; theTextField.border = true; theTextField.multiline = true; theTextField.wordWrap = true;
actionscript 3
difference in ActionScript 3
- object oriented design structure applied
- based on that structure, ActionScript no longer can be stored on object, it must be in main timeline
- centralized coding
external as loader
include "scripts/myscript.as"
xml loader
var myLoader:URLLoader = new URLLoader(); myLoader.load(new URLRequest("data.xml"));
FLV loader
// load flv function
text field
// ActionScript 3.0 var theTextField:TextField = new TextField(); theTextField.type = TextFieldType.INPUT; theTextField.border = true; theTextField.x = 10; theTextField.y = 10; theTextField.multiline = true; theTextField.wordWrap = true; addChild(theTextField);
image loader
var myholder=new Loader(); myholder.load(newURLRequest("Photo1.jpg")); //add to stage at position myholder.x=20; myholder.y=20; myholder.name="test"; addChild(myholder); //change holder content myholder=new Loader(); myholder.load(newURLRequest("Landscape1.jpg")); //update myholder.x=30; myholder.y=30; addChild(myholder);
movieclip control
- play/stop nested movieclip: http://edvardtoth.com/flash/flashfun/controlling-animation-nested-movieclips/
fk/ik animation control
Common js_fl_script for flash UI interaction
Common config:
- shortcut
%userprofile%\AppData\Local\Adobe\Flash CS3\en\Configuration\Keyboard Shortcuts
- workspace
%userprofile%\AppData\Local\Adobe\Flash CS3\en\Configuration\Workspace
- swf
%userprofile%\AppData\Local\Adobe\Flash CS3\en\Configuration\WindowSWF
- cmd
%userprofile%\AppData\Local\Adobe\Flash CS3\en\Configuration\Commands
get js_fl interaction script from history panel
Display the commands
- open “history panel”
- right on panel > view > “JavaScript in panel”
- note: what you see in history panel is what the command drives
Execute the commands
- copy the command to a text file, save as “Name.jsfl”
- go to Command menu > Run command … (load that file) to run
jsfl script
- ASnow.jsfl
// // First Frame Now // // Shining Camera January:14:2009 // // get my first frame, so i can directly go to script it var tl = fl.getDocumentDOM().getTimeline(); var frameArray = tl.layers[0].frames; var n = frameArray.length; // go back to first frame fl.getDocumentDOM().getTimeline().currentFrame = 0; fl.getDocumentDOM().getTimeline().currentLayer = 0;
SWF UI created in Flash for Flash
- Flash Mac location:
~/Library/Application Support/Adobe/Flash CS3/en/Configuration/WindowSWF>
- Flash win location:
%userprofile%\Local Settings\Application Data\Macromedia\Flash CS3\en\Configuration\WindowSWF %usserprofile%\AppData\Local\Adobe\Flash CS3\en\Configuration\WindowSWF
reference: http://www.gotoandlearn.com/play.php?id=66 (source)
jsfl api reference
- flash cs3 jsfl api pdf: http://livedocs.adobe.com/flash/9.0/main/flash_cs3_extending.pdf
Flash - Online Application Development
embed flash in html
<object width="550" height="400"> <param name="movie" value="somefilename.swf"> <embed src="somefilename.swf" width="550" height="400"> </embed> </object>
XML server communication
Flash → data.xml → PHP <PROCESS XML> PHP → data.xml → Flash
- post var method
// actionscript 3.0 var xmlResponse:XML = new XML(); var xmlListener:Object = new Object(); xmlResponse.addListener(xmlListener); xmlListener.onLoad = registrationResponse; submit_btn.onRelease = function():Void{ var userNameVal:String = username_ti.text; var emailVal:String = email_ti.text; var passwordVal:String = password_ti.text; xmlResponse.sendAndLoad("http://localhost/my_path_to_the_php_file/register.php?user="+userNameVal+"&email="+emailVal+"&pass="+passwordVal, xmlListener); } function registrationResponse(success){ if (success) { // do something wtih the XML }else{ trace("something bad happened with the PHP"); } }
<?php $username = $_GET['user']; $email = $_GET['email']; $password = $_GET['pass']; //now do something with those values $someValue = "some value here"; // and echo out some XML that you want flash to deal with echo "<node>"; echo "<firstChild>".$someValue."</firstChild>"; echo "</node>"; ?>
- post XML method
// actionscript 2.0 // flash xml holder var myXML:XML = new XML(); myXML.ignoreWhite= true; myXML.onLoad = function(success){ if(success){ trace(this); //or process } } else{} } // xml info trigger and picker var msgXML:XML = new XML("<data><tableName attr1='old'>user_info</tableName></data>"); msgXML.sendAndLoad("http://lucy/dev/fl_data_process.php",myXML);
<?php // flash xml msg picker $raw_data = file_get_contents("php://input"); // process xml msg $xml = new SimpleXMLElement($raw_data); $data=$xml->tableName; // print $data; // got the table name //--------------conditioning & send xml msg back to flash if($data == "user_info"){ print "<?xml version='1.0'?><pack><rec id='110' name='bill' note='user' /></pack>"; } else{ print "<?xml version='1.0'?><pack><rec id='111' name='gates' note='guest' /></pack>"; } ?>
flash data driven app structure
- Data structure
- xml connector
- data set
- data grid
- Data binding
- connection between data sources (in Component Inspector panel)
- Flash app example,
- dynamic charts in Flash: http://webkoof.com/tag/action-script-30/
Flex - development environment
Flash Open Component
Best Flash Game I like
- Canabalt (single): http://www.adamatomic.com/canabalt/
- RoboKill (single): http://www.rocksolidarcade.com/
- BoxHead 2 Play (2 player): http://www.crazymonkeygames.com/Boxhead-2Play-Rooms.html
- Bubble Tanks 2: http://armorgames.com/play/1920/bubble-tanks-2
Flash Developer Blogs
- Valentin Simonov's Flash Blog (scripted graphics and Interactive GUI): http://va.lent.in/blog/
- Summit Projects Flash Blog (Code and Projects): http://summitprojectsflashblog.wordpress.com/