====== 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
* as3: http://www.flashuser.net/flash-tricks/tips-tricks-10-using-drag-drop-in-actionscript-3-0.html
====== 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: [[http://www.republicofcode.com/tutorials/flash/video/dynamic_lines.php|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: [[http://drkgodz.hobo-studios.org/blog/?p=132|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:
* 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 ====
#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
==== 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 ====
* 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 %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 ([[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 ======
===== XML server communication =====
Flash -> data.xml -> PHP 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");
}
}
";
echo "".$someValue."";
echo "";
?>
* 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("user_info");
msgXML.sendAndLoad("http://lucy/dev/fl_data_process.php",myXML);
tableName;
// print $data; // got the table name
//--------------conditioning & send xml msg back to flash
if($data == "user_info"){
print "";
}
else{
print "";
}
?>
===== 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/