Differences

This shows you the differences between two versions of the page.

Link to this comparison view

appwiki:flash [2016/10/20 01:17] (current)
Line 1: Line 1:
 +====== Flash - Action Script ======
 +
 +===== Basic syntax =====
 +
 +<code actionscript>​
 +//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++) { }
 +
 +</​code>​
 +
 +===== Programming structure with ActionScript =====
 +  - (main stage) frame-label based state switch screen linear structure
 +    *hard to manage large amount of status
 +    *<code actionscript>​ on(click){_parent.gotoAndStop(theFrame)}</​code> ​
 +  - (button click) movieclip attaching structure
 +    * <code actionscript>​ on(click){_parent.attachMovie(theMC,​ "​currentScreen",​0);​}
 +//​overwrites,​ and with mc as export for actionscript</​code> ​
 +  - 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 <code actionscript>​if(mcA.hitTestObject(mcB)){ doFunHit(); }</​code>​
 +  * mouse hit test<​code actionscript>//​as 2
 +my_mc.hitTest(_root._xmouse,​ _root._ymouse)
 +// as 3 
 +my_mc.hitTest(mouseX,​ mouseY)
 +</​code>​
 +  * drag and drop example
 +    * as3: http://​www.flashuser.net/​flash-tricks/​tips-tricks-10-using-drag-drop-in-actionscript-3-0.html
 +====== Element Scripting ======
 +===== button =====
 +<code actionscript>//​ 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."​);​}
 +</​code>​
 +
 +===== component flvplayer =====
 +<code actionscript>//​ change flv content, instance name as "​flv_view"​
 +// as2
 +flv_view.contentPath = "​heart3d.flv";​
 +
 +// as3
 +flv_view.source = "​heart3d.flv";​
 +</​code>​
 +===== Drawing element =====
 +
 +  * draw a dynamic line with action script 2 (ref: [[http://​www.republicofcode.com/​tutorials/​flash/​video/​dynamic_lines.php|LearnFlash]]) <code actionscript>​
 +// 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();
 +}
 +</​code>​
 +  * action script 3 version (ref: [[http://​drkgodz.hobo-studios.org/​blog/?​p=132|updateAfterEvent]])<​code actionscript>​
 +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;
 +}
 +</​code>​
 +
 +  * more reference on AS 2.0 vs AS 3.0 on MovieClip creation:
 +    * http://​blogs.adobe.com/​pdehaan/​2006/​07/​creating_new_movieclips_in_act.html
 +  * draw line and curve
 +    * http://​flashexplained.com/​actionscript/​the-basics-of-drawing-with-actionscript/​
 +  * draw shape
 +    * http://​www.flashandmath.com/​basic/​linesegment3/​index.html
 +  * simple drawing app
 +    * http://​www.actionscript.org/​resources/​articles/​10/​1/​Creating-a-Dynamic-Drawing-application-in-Flash/​Page1.html
 +===== actionscript 2 =====
 +==== external script loader ====
 +<code actionscript>​
 +#include "​externalfile.As"​
 +</​code>​
 +
 +==== XML loader ====
 +<code actionscript>​
 +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"​);​
 +</​code>​
 +==== text field ====
 +<code actionscript>​
 +// ActionScript 2.0
 +createTextField("​theTextField",​ 0, 10, 10, 100, 100);
 +theTextField.type = "​input";​
 +theTextField.border = true;
 +theTextField.multiline = true;
 +theTextField.wordWrap = true;
 +</​code>​
 +
 +===== 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 ====
 +<code actionscript>​
 +include "​scripts/​myscript.as"​
 +</​code>​
 +==== xml loader ====
 +<code actionscript>​
 +var myLoader:​URLLoader = new URLLoader();​
 +myLoader.load(new URLRequest("​data.xml"​));​
 +</​code>​
 +
 +==== FLV loader ====
 +
 +<code actionscript>​
 +// load flv function
 +
 +</​code>​
 +==== text field ====
 +<code actionscript>​
 +// 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);​
 +</​code>​
 +
 +==== image loader ====
 +<code actionscript>​
 +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);​
 +</​code>​
 +
 +==== movieclip control ====
 +
 +  * play/stop nested movieclip: http://​edvardtoth.com/​flash/​flashfun/​controlling-animation-nested-movieclips/​
 +
 +==== fk/ik animation control ====
 +
 +  * IK in flash: http://​edvardtoth.com/​flash/​flashfun/​procedural-manipulation-of-flash-cs4-ik/​
 +
 +====== Common js_fl_script for flash UI interaction ======
 +Common config: ​
 +  * shortcut <​code>​%userprofile%\AppData\Local\Adobe\Flash CS3\en\Configuration\Keyboard Shortcuts</​code>​
 +  * workspace <​code>​%userprofile%\AppData\Local\Adobe\Flash CS3\en\Configuration\Workspace</​code>​
 +  * swf <​code>​%userprofile%\AppData\Local\Adobe\Flash CS3\en\Configuration\WindowSWF</​code>​
 +  * cmd <​code>​%userprofile%\AppData\Local\Adobe\Flash CS3\en\Configuration\Commands</​code>​
 +
 +===== 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 <code javascript>//​
 +// 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;</​code>​
 +
 +===== SWF UI created in Flash for Flash =====
 +  * Flash Mac location: <​code>​~/​Library/​Application Support/​Adobe/​Flash CS3/​en/​Configuration/​WindowSWF></​code>​
 +  * Flash win location: <​code>​%userprofile%\Local Settings\Application Data\Macromedia\Flash CS3\en\Configuration\WindowSWF
 +%usserprofile%\AppData\Local\Adobe\Flash CS3\en\Configuration\WindowSWF</​code>​
 +
 +reference: http://​www.gotoandlearn.com/​play.php?​id=66 ([[http://​blog.theflashblog.com/?​p=332|source]])
 +
 +===== jsfl api reference =====
 +
 +  * flash cs3 jsfl api pdf: http://​livedocs.adobe.com/​flash/​9.0/​main/​flash_cs3_extending.pdf
 +  * jsfl intro: http://​www.adobe.com/​devnet/​flash/​articles/​jsapi.html
 +
 +====== Flash - Online Application Development ======
 +===== embed flash in html ======
 +<code html>
 +<object width="​550"​ height="​400">​
 +<param name="​movie"​ value="​somefilename.swf">​
 +<embed src="​somefilename.swf"​ width="​550"​ height="​400">​
 +</​embed>​
 +</​object>​
 +</​code>​
 +
 +===== XML server communication =====
 +
 +Flash -> data.xml -> PHP <PROCESS XML> PHP -> data.xml -> Flash 
 +
 +  * post var method <code actionscript>//​ 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");
 + }
 +}
 +</​code><​code 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>";​
 +?> 
 +</​code>​
 +  * post XML method <code actionscript>//​ 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);​
 +</​code><​code php>
 +<?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>";​
 +}
 +?>
 +</​code>​
 +
 +===== 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 ======
 +
 +  * [[http://​www.pyoix.com/​a/​123.html|Flex open source development on Linux platform (CN)]]
 +  * [[http://​www.gaiaflashframework.com/​|Gaia Framework]]
 +  * [[http://​www.gotoandlearn.com/​|GotoAndLearn()]]
 +
 +
 +====== Flash Open Component ======
 +
 +  * [[http://​teethgrinder.co.uk/​open-flash-chart/​|FLash Chart]]
 +  * [[http://​www.superalerts.com/​|Flash desktop alert]]
 +  * [[http://​www.moviemasher.com/​demo/​|Flash Video Editor]]
 +  * [[http://​osflash.org/​swfmill|Flash xml to swf generator - swfmill]]
 +  * [[http://​osflash.org/​flashmyadmin|Flash My Admin]]
 +  * [[http://​osflash.org/​kaltura|Kaltura - flash and php]]
 +  * [[http://​edvardtoth.com/​flash/​flashfun/​aurora-membrane-sound-visualizer/​|Edvard Toth's flash audio visualizer]]
 +
 +====== 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/​