Flash is great, but accessibility can sometimes be a problem if it is not paid attention to. Direct linking, deep linking, back button support, these are very important to wire up in your applications. I am seeing many new RIAs, apps, sites, interactives still not do this and it is quite annoying.

The great thing about the web is that is gave users the ability to control the presentation and the context, from outside the presentation. By allowing users to use the back button and change urls in the address bar this was empowering. Empower your users and ad campaigns to get to different places of your application easily with deep linking, it is required for usability.

But this is hard right? Not really with great tools. What are you waiting for, SWFObject and SWFAddress make up THE platform right now for deep linking, embedding and back button support. These kits have been exhaustively tested and are very compact scripts to help you embed and then provide deep-linking, back button support and direct linking instantaneously almost.

Download SWFObject

Download SWFAddress

Both of these kits are well tested and provide instant small simple components of which to build complex systems on top of. SWFAddress builds on SWFObject tested embedding script and provides the tools you need to get deep linking running in your application in no time.

Note of caution, design implications (architecture design)

When you drive off the URL such as with direct and deep linking in Flash it does change your order of how you handle operations when you have to take into account the URL state. The first thing you have to do is when you receive an onChange event from SWFAddress that the URL has changed, you need to parse it and take action. However if you plan to deep link and provide usability throughout your flash site or app (even in the forms or multistep processes driven by URL) then you need to plan for this event and work this into your architecture for the url handling within the flash framework for your site.

A scenario might be:

1. User using your flash app
2. User clicks link or new section of your flash application
3. INSTEAD of just animating the state in the flash application, you have to just update the section or URL (location.hash in javascript that provides the # name linking allowing the browser to stay put, or in this case SWFAddress.setValue((“/sectionname/page1″)),
4. THEN the flash app or site is REACTIVE to the URL, reads in “sectionname/page1″ parses it and then animates to sectionname/page1.
5. Or detect if the change came from the app or the URL directly and handle that differently in the onChange event with a subsystem.

Rather than just animating the app state or changing it, or showing that next photo on the button event, your button event would change the URL, then the flash monitoring the URL would push the onChange event. After that either animate in the next section or take appropriate action per the user requested action.

It isn’t like this for all areas or states of your application but you have to decide what is directly linkable, and when you want a state directly linkable then you have to wire it this way. Obvious choices are navigation items in your site, but they might also be specific cases like a multi-page form wizard that you want to link to step 3 directly, or a movieclip that someone can pass #3m2s to advance the movie by the url. There are many cases where you might want to provide deep linking into your flash application.

I know it sounds complicated? but it really isn’t, just a reversed way of thinking which we will highlight in the future with a tutorial and a fluid flash template. The SWFAddress site has great samples and examples, SWFAddress sets up the onChange handling in these samples and examples of how to do it in AS1, AS2 and AS3 so pick it up.

Download SWFObject

Download SWFAddress

Enable Deep Linking in Flash in 8 lines of code to start with SWFAddress:

From SWFAddress Documentation

1) Insert the SWFAddress script in your page directly after the SWFObject file.

<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript" src="swfaddress/swfaddress.js"></script>

2) Include or import one of the provided ActionScript classes. SWFAddress comes with versions for AS1, AS2 and AS3.3) Write your own navigation logic that will be executed when the address is changed.

SWFAddress.onChange = function()
{
    // Your code goes here.
}

3) Call the SWFAddress setter method from every button or action that requires deep linking.

this.onRelease = function() {
    SWFAddress.setValue('/portfolio/');
}

Check out the Asual blog (makers of SWFAddress) for more on good practices and bad practices with deep linking and more tips.Tips like:

Bad Practice: Address values naming using camelCase or other forms of custom convention

SWFAddress samples clearly define the best naming convention for deep links. Web addresses are case insensitive and the standard is lower case. For readability and Google SEO compatibility reasons the convention ‘my-deep-link’ is more appropriate than ‘myDeepLink’ or ‘My_deep_link’. The format http://domain.com/#/my-deep-link/?param=value is the only one fully compatible with the SWFAddress SEO rewriting.

Silverlight Deep Linking

This is also very simple in Silverlight to deep-link using javacript tools kits for Silverlight 1.0 which is javascript only, on location.hash change using a timer you could call an application method that might change the state or call certain transitions or move Canvases around, hide/show them, load content in, etc. Again, something you want to think about early on.

Other notes

SWFObject 2.0 beta5 is out and after 5 betas hopefully is nearing release

Pick up the code here for SWFObject 2.0

SWFObject 2 (script based) is the name again after a small switch and merge with UFO (standards based) to SWFFix but as Geoff Sterns pointed out, this seems to assume that something is broken.

SWFObject 2.0 is the new name again and let’s hope many more great tools are built on SWFObject 2.0 like SWFAddress which handles direct linking and back button support (using location.hash as most AJAX/RIA apps do to get deep linking and back button support).

Zeh Fernando’s AS2 and AS3 Flash Animation Kit Tweener has inspired a JSTweener port to javascript, why thanks Yuichi Tateno (secondlife).

This actually could be used quite easily with Silverlight and an AgTweener could be very easily created from this. The Tweener like syntax with an object and adding tweens of available properties as an object or array is very simple and could make animation systems much more standard if everything used this not to mention easier for developers to animate in any presentation layer. The syntax makes for the best of the Animation Packages currently available for AS3. If this could be used in other kits it would make animation pretty standard and simple when changing platforms.

JQuery is very lightweight and has a similar syntax on their animate() call. There are many animation javascript kits such as mootools, jquery, dojokit and prototype and others that have similar functionality but it is all handled differently.

JSTweener

• http://coderepos.org/share/wiki/JSTweener
• http://svn.coderepos.org/share/lang/javascript/jstweener/trunk/examples/index.html

JSTweener.addTween(element.style, {
time: 3,
transition: 'linear',
onComplete: function() {},
width: 200,
height: 200,
left: 500,
top: 300
});

JSTweener Source

JSTweenerRepo

Samples:

• transitions
• mtypo_bezier
• mtypo

Found via Zeh

When debugging flash sometimes you need to either debug in browser or check a past version of the Flash player or the new beta player to see how things are looking. Here is a list of some tools beyond the included debugging IDEs FlashCS3 and Flex2 that are helpful to making your flash projects more bulletproof.

• Firefox Flash Version Switcher from Sephiroth
  

  

  
  Find out if your code is just messed in the latest version or an older version of the flash player. This has links to the older versions of the Flash player from Adobe that you are interesting in testing.

• Xray Flash/Flex Debugging Kit by John Grden XRay is a flash/flex debugger
  

  

  for real-time debugging and spying on your code. It is 16KB for the connector that you add to your files but it is debugging in style. If you have any issues with a live app or to help during testing Xray is great. It also includes a nifty admin site that allows you to access objects and spy on your code at any time.

  

  Xray (The AdminTool) is a “snapshot viewer” of the current state of your Flash application without impacting the performance or the file size of your application. Xray’s true nature is to look into the very guts of the Flash application and disolve the 2d myth you see on screen to a 3D tangible entity you can truly crawl through.Xray is brought to you by Blitz Labs.

• AS3 Debugging with Firebug and Actionscript from marcosweskampWhen using Firebug (a web developers Swiss army knife for browser debugging) you can also use actionscript to write to the firebug console with this class from marcosweskamp The code to Console.as for firebug is here.
  

  

• Output Panel from Senocular
  Last but not least, try out this class that creates or mimic the output panel in flash. Another great quick class from senocular. You have to change your trace command to Output.trace but I recommend that you abstract logging anyways to a method that can determine to trace, Output.trace(str:*) or any further logging you might want to do for debug or application logs (it also makes it easy to switch out logging options). This Output panel can help when you don’t’ have the debugger available, or for use in a live debug mode of your application. This class can be implemented in minutes.

  package com.senocular.utils {
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.display.Stage;
    import flash.display.GradientType;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.geom.Matrix;
    import flash.text.TextField;
    import flash.text.TextFieldType;
    import flash.text.TextFormat;
    import flash.text.TextFormatAlign;
    import flash.text.TextFieldAutoSize;
   
    /**
    * Creates a pseudo Output panel in a publish
    * swf for displaying trace statements.
    * For the output panel to capture trace
    * statements, you must use Output.trace()
    * and add an instance to the stage:
    * stage.addChild(new Output());
    *
    * Note: You may want to place Output in an
    * unnamed package to make it easier to
    * trace within your classes without having
    * to import com.senocular.utils.Output.
    */
    public class Output extends Sprite {
    private var output_txt:TextField;
    private var titleBar:Sprite;
    private static var instance:Output;
    private static var autoExpand:Boolean = true;
    private static var maxLength:int = 1000;
   
    public function Output(outputHeight:uint = 150){
     if (instance && instance.parent){
      instance.parent.removeChild(this);
     }
   
     instance = this;
     addChild(newOutputField(outputHeight));
     addChild(newTitleBar());
   
     addEventListener(Event.ADDED, added);
     addEventListener(Event.REMOVED, removed);
    }
   
    // public methods
    public static function trace(str:*):void {
     if (!instance) return;
     instance.output_txt.appendText(str+“n”);
     if (instance.output_txt.length > maxLength) {
      instance.output_txt.text = instance.output_txt.text.slice(-maxLength);
     }
     instance.output_txt.scrollV = instance.output_txt.maxScrollV;
     if (autoExpand && !instance.output_txt.visible) instance.toggleCollapse();
    }
    public static function clear():void {
     if (!instance) return;
     instance.output_txt.text = “”;
    }
   
    private function newOutputField(outputHeight:uint):TextField {
     output_txt = new TextField();
     output_txt.type = TextFieldType.INPUT;
     output_txt.border = true;
     output_txt.borderColor = 0;
     output_txt.background = true;
     output_txt.backgroundColor = 0xFFFFFF;
     output_txt.height = outputHeight;
     var format:TextFormat = output_txt.getTextFormat();
     format.font = “_typewriter”;
     output_txt.setTextFormat(format);
     output_txt.defaultTextFormat = format;
     return output_txt;
    }
    private function newTitleBar():Sprite {
     var barGraphics:Shape = new Shape();
     barGraphics.name = “bar”;
     var colors:Array = new Array(0xE0E0F0, 0xB0C0D0, 0xE0E0F0);
     var alphas:Array = new Array(1, 1, 1);
     var ratios:Array = new Array(0, 50, 255);
     var gradientMatrix:Matrix = new Matrix();
     gradientMatrix.createGradientBox(18, 18, Math.PI/2, 0, 0);
     barGraphics.graphics.lineStyle(0);
     barGraphics.graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, gradientMatrix);
     barGraphics.graphics.drawRect(0, 0, 18, 18);
   
     var barLabel:TextField = new TextField();
     barLabel.autoSize = TextFieldAutoSize.LEFT;
     barLabel.selectable = false;
     barLabel.text = “Output”;
     var format:TextFormat = barLabel.getTextFormat();
     format.font = “_sans”;
     barLabel.setTextFormat(format);
   
     titleBar = new Sprite();
     titleBar.addChild(barGraphics);
     titleBar.addChild(barLabel);
     return titleBar;
    }
   
  // Event handlers
    private function added(evt:Event):void {
     stage.addEventListener(Event.RESIZE, fitToStage);
     titleBar.addEventListener(MouseEvent.CLICK, toggleCollapse);
     fitToStage();
     toggleCollapse();
    }
    private function removed(evt:Event):void {
     stage.removeEventListener(Event.RESIZE, fitToStage);
     titleBar.removeEventListener(MouseEvent.CLICK, toggleCollapse);
    }
    private function toggleCollapse(evt:Event = null):void {
     if (!instance) return;
     output_txt.visible = !output_txt.visible;
     fitToStage(evt);
    }
    private function fitToStage(evt:Event = null):void {
     if (!stage) return;
     output_txt.width = stage.stageWidth;
     output_txt.y = stage.stageHeight - output_txt.height;
     titleBar.y = (output_txt.visible) ? output_txt.y - titleBar.height : stage.stageHeight - titleBar.height;
     titleBar.getChildByName(“bar”).width = stage.stageWidth;
    }
   }
  }

Other debug and logging tools that may help are listed here from OSflash.

• Alcon – An external output console for Actionscript debugging
• LuminicBox.Log – A logging API and output console for ActionScript
• DebugIt – Displays traced data in a seperate SWF so you can debug outside of Flash, while running your application in its shell/production environment.
• Print_r Debugger – Brings PHP‘s “print_r” to Flash, invaluable once you start to use it. Free, Complete Source Available
• Sock4Log – JAVA application which displays traced data from SWF and other (PHP,JS…). Could be a command line or windowed application.

Haxe is a very interesting project that is a scripting language that can create SWF for Flash.

Haxe has now added Flash9 Assembler library called hxASM and released version 1.1.4 that includes performance updates for Flash9 SWFs compiled using Haxe scripting.

I have to compile SWFs dynamically right now in a service and this is a very attractive solution with the new version and the performance improvements. Previously there was some slow down and only static content really worked well but if this is equal or a 30% improvement that is excellent.

Flex 2 can also compile at the command line you can compile flash9 swf with or without the flex2 libraries, when using mxml the flex libraries are included which add 100k or so minimum. It is not required to compile with flex 2 libraries though.

Flex 2 command compiler options

Haxe command compiler tutorial

Using Haxe with Flex 2

Using Haxe hxASM

Full Haxe API (includes all flash libraries)

Polygonal Labs is building a Motor Physics Engine (unreleased) and here is a test that has boxes stacked up that you shake. I am looking forward to the Motor Physics Engine by Michael of Polygonal Labs after going through APE Physics engine by Alec Cove which is pretty slick.

The tools so far by polygonal labs such as the AS3 Data Structures for Game Developers have been excellent and made it into many games and engine tests of mine and his blog is a really well presented and the topics are always well presented and researched.

Be sure to check out the 50 boxes test with Motor Physics at Polygonal Labs

Also if you don’t regularly visit polygonal labs you are missing out on some really good research and tools. The recent post with the graph-based A* sample using the AS3 Data Structures for Game Developers was killer.

In case you haven’t heard the SWFObject creator Geoff Stearns and the UFO creator have teamed up to create a new Flash Embed kit for HTML/XHTML called SWFFix that is more DOM compliant yet works.  Its always been a battle on this front of DOM standards vs Javascript when it comes to Flash embedding.

This teamwork to make a common kit will help to consolidate all issues with this and hopefully provide a really solid platform for embedding flash that takes into account all browser and satisfies standards but also works all the time. Making it harder to vote against when it comes time to decide what technology to use.

Of course there have been libraries like SWFAddress (for deep linking in flash and back button support easily) that have been built on top of SWFObject that will have to be switched over that have large user bases and following.

Check out SWFfix (of course this project has been very quiet and is not public since Feb 6-7th) hrm.

Be sure to check out the APE physics engine for flash. 

The library contains particles to assign to movieclips that appy the physics.  These base objects can be extended in many ways to create complexity from simplicity.

APE (Actionscript Physics Engine) is an AS3 open source 2D physics engine for use in Flash and Flex. APE is written and maintained by Alec Cove.

CircleParticles
-fixed or non-fixed
-variable mass, elasticity, and surface friction

RectangleParticles
-rotatable
-fixed or non-fixed
-variable mass, elasticity, and surface friction
-corner particles that can be attached to other particles with SpringConstraints

WheelParticles
-traction and angular velocity
-fixed or non-fixed
-variable mass, elasticity, and surface friction
-edge particles that can be attached to other particles with SpringConstraints

SpringConstraints
-stiffness
-collidable or non-collidible
-collidable constraints have variable width and scale

Licensing
-non restrictive LGPL

 [demo]

Hopefully we will have a tutorial soon here using APE and some other excellent libraries released recently with the onslaught of AS3 code and kits that will be fluid in their frequency. Another coming physics library is from polygonal labs called the Motor Engine.

Didier Brun of ByteArray just keeps throwing down.  Here is another great showcase of the power of AS3 and the tools that can be built with it, strongly based on alogorithms proven in other hardcore languages. This project is a Mouse Gesture Recognition lib for AS3 (demo)

Mouse gesturing can be used for recognition of letters, numbers or even just programmable actions by gesture.  Imagine an application that allows you to just make a gesture (even if its not a drawing program or letter recognition) that would open when you make an open gesture, or close a file with a slash gesture. I have many uses for this planned. Very inspiring stuff.

A bit on the algorithm from Didier at ByteArray, I just don’t think it can be made any more simple:

1. Each letter is defined by a n ‘ 8-directions gesture sequence
2. The mouse moves are saved with the same 8-directions sensibility
3. A Levenshtein distance is calculated from each letter to the user moves
4. The algorithm return the best candidate (lowest levenshtein cost)

Usage

Example for the B :

gesture=new MouseGesture(stage);
gesture.addGesture("B","260123401234");
gesture.addEventListener(GestureEvent.MATCH,matchHandler);
 
function matchHandler(e:GestureEvent):void{
 trace (e.datas+" matched !")
}

This project is OPEN SOURCE under RPL License.
2007-05-17 v1.0 mouse_gesture_v1_0.zip