Hide Notes 

Slide 1: Flex and Flash: Flash Are Two Heads Better Than One?
Slide 2: Speaker Information • • • • • Windows-based Developer - Since ‘85 Senior ColdFusion MX Developer - Since ‘99 Technical Instructor - Since ‘85 Flash Developer - Since ’99 Flex Developer – Since ’05 theo@teratech.com http://therush.wordpress.com
Slide 3: Presentation Agenda • • • • • • • Advantages of Flash and Flex Flash and Flex Audience Producing the Same Results (kinda) Everything Old is New Again Using LocalConnection Using ExternalInterface Other Considerations
Slide 4: Advantages Flash • Longevity • Thousands of Flash related resources • Thousands of community created components and samples • Great authoring tool for designers • Visual drawing environment
Slide 5: Advantages Flex • Improved ASv3 architecture • Improved components • Developer-centric Eclipse based development environment • Predefined effects and transitions
Slide 6: The Flash Audience Timelines Layers Canvas Designer Stage MovieClip
Slide 7: The Flex Audience Actionscript Tags Perspectives Developer Data Services Source View
Slide 8: Working Together
Slide 9: Producing the Same Results (kinda) Version 9 only Version 8 and below
Slide 10: In the “Bad Ol’e Days” … • Used getUrl() and fscommand() to communicate from Flash to JavaScript. • Used setVariable() to communicate from JavaScript to Flash. • fscommand() used VBScript that could conflict with other VBScript on the page and can only pass one string parameter.
Slide 11: Everything Old is New Again LocalConnection ExternalInterface • Invoke methods between Flash apps/movies • Pass data between Flash apps/movies
Slide 12: Using LocalConnection Why use LocalConnection? • • • • Supported by Flash Player version 6 and above Uses a one-way “Channel” to communicate Supports asynchronous communication Pass multiple variables
Slide 13: Using LocalConnection How does it work? Step 1 SENDER: • Create a new LocalConnection object (1) • Use send() method of the localconnection object (2) 1) myLC:LocalConnection = new LocalConnection(); 2) myLC.send(swf1, myName, name_txt.text);
Slide 14: Using LocalConnection How does it work? Step 2 RECIEVER: • Create a new LocalConnection object (1) • Prepare to receive commands (2) • Define function that will be called by SENDER (3) 1) myLC:LocalConnection = new LocalConnection(); 2) myLC.connect(swf1); 3) myLC.myName = function(param) { reciever_txt.text = param; }
Slide 15: Using LocalConnection How does it work? setClock clockStopped Provides direct one-way communication between swfs
Slide 16: Using LocalConnection Can you show us an example? The Resort Tracker 2000 v.5
Slide 17: Using ExteranalInterface Why use ExternalInterface? • • • • • Supports synchronous communication Easier to implement Uses JavaScript as a “proxy” between Pass multiple variables Supports multiple data types Note: Only supported by Flash Player version 8 above
Slide 18: Using ExternalInterface How does this work? Step 1 SEND TO JS: • Import ExternalInterface class • Use call() method of ExternalInterface object Import flash.external.ExternalInterface ExternalInterface .call(“alert”, “Hello from Flash”);
Slide 19: Using ExternalInterface How does this work? Step 2 RECIEVE FROM JS: • Import ExternalInterface class • Use addCallBack() method of ExternalInterface object Import flash.external.ExternalInterface ExternalInterface.addCallBack(“tweenMe”, this, tweenMe);
Slide 20: Using ExternalInterface How does this work? Step 3 SEND TO FLASH: • Get reference to Flash object • Use object reference to call Flash function // for IE use myFlash = window[“flashmovie”]; // otherwise use myFlash = document[“flashmovie”]; myFlash.tweenMe(“Hello from JS”)
Slide 21: Using ExternalInterface How does this work? setClock clockStopped
Slide 22: Using ExternalInterface Got another example? The African Country Guide ver .5
Slide 23: Other Considerations • Flash 8 Security Model • Frame Rate
Slide 24: Other Considerations Flash 8 Security Model • By default, local SWFs can no longer contact the Internet, perform HTTP communication, or communicate with local HTML files. • SWF and HTML content from non-local URLs may no longer load any content (SWF, HTML, PNG, and so on) from local paths. • Use localConnection.allowDomain to permit crossdomain scripting. • Use a crossdomain.xml policy file to permit crossscripting operations.
Slide 25: Other Considerations Flash 8 Security Model (cont.) • Use allowScriptAccess to handle communication with Javascript. • allowScriptAccess – Never: outbound scripting fails – Always: outbound scripting succeeds (default) – sameDomain: outbound scripting allowed only if swf resides in same domain (default in FP 8+)
Slide 26: Other Considerations Frame Rate • • • 5. 6. Flex’s default frame rate is 24 Adjust your Flash movie accordingly You can reset the default Flex frame rate Open Project Properties >> Flex Compiler Add the following into "Additional compiler arguments:" in single line: -default-frame-rate int Note: The maximum frame rate is limited to machine performance, if this value is set too high the player will simply run at the fastest rate that it can on the given machine.
Slide 27: Additional Resources • • • • • http://www.adobe.com/cfusion/knowledgebase/in http://livedocs.macromedia.com/flex/2/langref/fla http://www.adobe.com/devnet/flash/articles/exter http://livedocs.macromedia.com/flex/2/langref/fla http://therush.wordpress.com
Slide 28: Additional Resources Flash / JavaScript Integration Kit (Beta) http://weblogs.macromedia.com/flashjavascript/ Flex-Ajax Bridge http://labs.adobe.com/wiki/index.php/Flex_Framew