appwiki:flash

Differences

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


appwiki:flash [2021/08/28 08:27] (current) – created ying
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/