flash

flash/actionscript topics

Finally, AS 3 Autocompletion in TextMate

Found this at http://blog.simongregory.com/09/as3-autocompletion-in-textmate/ . I'll admit it's not to the level of Flex Builder, but it's great to see actual autocomplete working in TextMate for AS 3. Once installed, hit option-esc to bring up the autocomplete suggestion list. If you choose a function it will give you the the expected parameters:

Actionscript:
  1. stage.addEventListener(type:String,listener:Function,useCapture:Boolean=false,priority:int=0,useWeakReference:Boolean=false);

This is the flaky part, because the idea is that you can tab through the parameters to enter your values. But say if you wanted to listen for MouseEvent.CLICK, and don't have the MouseEvent class imported alread. You can easily import it by starting to type M.. and hitting apple-shift-I to import it (then again using autocomplete to choose 'CLICK'), but then you can't tab over to the rest of the parameters. I'm going to dig around to see if there's a workaround.

Other than that, seems to work fine with custom classes, i can autocomplete methods and function just fine. Mix this the other tab triggers in the bundle and you really start to feel a big speed increase when busting out the code.

By the way, apparently there is some confusion because there is an older AS3 bundle. I wound up removing the one i already had installed, and using the GetBundles bundle (a bundle that acts like a package manager) to install the newer version, then the autocomplete worked properly.

TransformManager fix for Mac Firefox

This post is specifically about Jack Doyle's (aka greensock) awesome TransformManager tool, but the overall idea solves the issue of mouse up events when releasing the mouse button outside the stage in Mac Firefox.

In case you didn't know already, in Firefox on the Mac there is a problem with releasing the mouse outside the browser window. If you click within the swf, then while holding the mouse button down, drag outside the browser window, then release the mouse button, Mac FF doesn't hear the MOUSE_UP event. Obviously, this is a problem for the TM because if you do that, when you bring the mouse back over the swf, the MOUSE_MOVE handlers are still firing, and the selection is still following the mouse, event though you've released the mouse button.

The key to the whole fix is that in Mac FF, the MOUSE_LEAVE event will not fire until you release the mouse button, if it was being held down when you drag out of the swf.

So to solve this I tweaked the TM class as follows:

add a helper method to determine if it is mac ff, and one to dispatch fake mouse up events (you'll see why in a bit)

Actionscript:
  1. // on Mac Firefox, if you click the mouse button,
  2. // then drag out of the browser window and release the mouse button,
  3. // the MOUSE_LEAVE event doesn't fire doesn't fire until the mouse button is released.
  4. // Knowing that we can properly handle MOUSE_UP events for moving, resizing, etc.
  5. private function get isFirefoxMac():Boolean{
  6.             // this is adapted from some flex code
  7.             var browserUserAgent:String = ExternalInterface.call("navigator.userAgent.toString");
  8.             var browserPlatform :String = ExternalInterface.call("navigator.platform.toString");
  9.  
  10.             var isFirefoxMac:Boolean = (browserUserAgent && browserPlatform &&
  11.                 browserUserAgent.indexOf("Firefox")> -1 && browserPlatform.indexOf("Mac")> -1);
  12.             return isFirefoxMac;
  13. }
  14.  
  15.  
  16. private function dispatchFakeMouseUpEvent():void{
  17.             var mevent:MouseEvent = new MouseEvent(MouseEvent.MOUSE_UP, true, false, _stage.mouseX, _stage.mouseY);
  18.             _stage.dispatchEvent(mevent);
  19. }

Then, I made a slight modification to the onPress* methods, to check if it isFirefoxMac, if so also listen for the MOUSE_LEAVE event.

Actionscript:
  1. private function onPressRotate($e:MouseEvent):void {
  2.                        
  3.                         //... whatever pre-existing code ...
  4.                        
  5.                         _stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveRotate, false, 0, true);
  6.                         _stage.addEventListener(MouseEvent.MOUSE_UP, onReleaseRotate, false, 0, true);
  7.                        
  8.                         if ( isFirefoxMac ){
  9.                                     _stage.addEventListener(Event.MOUSE_LEAVE, onMouseLeaveRotate, false, 0, true);
  10.                         }
  11.  
  12.                         // other stuff...
  13.             }
  14. }

Each type of press gets an associated onMouseLeave* event (onMouseLeaveScale, onMouseLeaveRotate, etc).

Actionscript:
  1. private function onMouseLeaveRotate(event:Event):void{
  2.             _stage.removeEventListener(Event.MOUSE_LEAVE, onMouseLeaveRotate);
  3.             dispatchFakeMouseUpEvent();
  4. }

Actually, the onMouseLeaveMove handler is slightly different since onReleaseMove() doesnt need a mouse event:

Actionscript:
  1. private function onMouseLeaveMove(event:Event):void{
  2.             _stage.removeEventListener(Event.MOUSE_LEAVE, onMouseLeaveMove);
  3.             onReleaseMove(event);
  4. }

I also added a line to the removeParentListeners() method to remove the onMouseLeaveMove handler:

Actionscript:
  1. _stage.removeEventListener(Event.MOUSE_LEAVE, onMouseLeaveMove);

That's just about it, just one more small tweak to the TransformItem class. You need to do the same routine for the TransformItem.onMouseDown() method: Check for Mac FF, if so add a MOUSE_LEAVE handler, and in the onMouseLeave() method just call the onMouseUp() method.

Flex 4 stuff up on labs

New releases of Flash Builder and the Flex SDK are up on Adobe Labs. I'm very excited about the new version of Flex, it seems to work out a lot of the issues I had with Flex 3. States actually look easy to use now, and skinning and styling looks much, much improved. There's a good read here at the Flex Developer Center with an overview about the main differences between Flex 3 & 4.

Have you checked out Adobe Labs recently?

I heard about Adobe Story this morning, so I headed over to Adobe Labs to check it out. While I was there I found a few more interesting projects I haven;t yet heard of:

  • Genesis : Genesis is the code-name for a new product initiative at Adobe with the objective of joining business applications, documents and the web on every knowledge workers desktop with integrated collaboration capabilities. Using the very intuitive interface of the Genesis desktop client (built on Adobe AIR) knowledge workers are able to create custom workspaces combining views into business applications, analytics, web sites and documents.
  • Wave : Adobe® Wave™ is an Adobe AIR application and Adobe hosted service that work together to enable desktop notifications. It helps publishers stay connected to your customers and lets users avoid the email clutter of dozens of newsletters and social network update messages. Adobe Wave is a single web service call that lets publishers reach users directly on their desktop: there's no need to make them download a custom application or build it yourself.
  • Patch Panel: Adobe is pleased to offer our third-party developers and the larger Adobe Flex® development community this preview of PatchPanel, a first glimpse at combining the dynamic control of ActionScript™ with the power of Adobe’s Creative Suite®. Similar to Adobe’s ExtendScript environment for the Creative Suite, PatchPanel provides developers deep access into controlling the Creative Suite through independently-created scripts. PatchPanel provides the necessary link between the Flex development environment and the Creative Suite’s internal controls, allowing existing ActionScript developers the ability to apply their skills toward enhancing the creative process, as well as inviting a new generation of creative minds to explore the flexibility and automation possible with ActionScript.

    PatchPanel is a Flex library and set of services that make it possible for Shockwave® Flash® (SWF) files to work as Adobe Creative Suite CS3 and CS4 plug-ins. Flex developers can include this Flex library in their projects in order to create Flash plug-ins that access the ExtendScript Document Object Model (DOM) of Creative Suite applications through ActionScript objects.

There's a bunch more too....looks like we've got some pretty decently cool stuff on the way from Adobe. That's not even counting Flex 4, which looks like it's shaping up to be quite awesome!

Flash Builder

Everybody knows by now that Flex Builder is now Flash Builder, which i think is a great move. With all the chatter about it, one thought just keeps popping up for me: how much of a non-impact this is on my daily work and career. Yeah, I've gone through the whole thing about explaining flex to clients, but for the most part, I haven't really run into issues where clients/employers are confused over the IDEs.

I’ve starting tweeting

I've finally had enough of hearing about Twitter and not checking it out, so I went and signed up. You can follow me as flashape Any pointers for a twitter newb are appreciated...I'd like to integrate my blog and my tweets actually. Is there an adobe twitter aggregator or anything?

DockableFlex – Nice!

Wow, just came across DockableFlex:

DockableFlex is an open source component library based on Adobe Flex 3.
It provides basic dock support for the Panel Component.

Looks pretty slick, if you've ever tried dragging tabbed panels around in photoshop or in the Eclipse IDE, you get the idea.

TextMate Jump to Function

My personal battle between TextMate and Eclipse continues. In this case, I wanted to to see if it was possible to recreate the "jump to definition" functionality of Eclipse within TM...you know, when you control click a function name in eclipse will take you to that definition. Well, I found this post which pretty much re-creates this functionality, except using a key commmand instead of control-click, which is fine by me. I just need to add 'as' and 'mxml' to the list of file names to search through and it worked great. Currently it doesn't work for getters/setters, I'll see if I can hook that up as well.

Next up I'd like to see about jumping back and forth between edit locations in files (the option-apple-arrow key combos in eclipse on mac).

Burned by hoisting

A while back I read a post about variable hoisting in Actionscript , and remember thinking how it was weird how that was the first time I'd ever heard about that, and how I'd probably never need to know that if I hadn't until that point anyway. So today I get burned by it. When you declare a variable anywhere within a function, Actionscript 'hoists' that declaration to the top of the function. To quote the original article:

Any variable defined within a function scope, in any structure, at any location, is automatically moved at compile-time to the top of the scope. And it’s accessible anywhere in any of those scopes. In most languages, this would be a compile error.

This is what got me today. In this sample, mainUI and someArray are other properties of the object, but vo is not:

Actionscript:
  1. override public function execute():void {
  2.     var container:Canvas = mainUI.getContainer(vo.dataProvider);
  3.     var dp:ArrayCollection = container.dataProvider;
  4.  
  5.     for each(var vo:ItemVO in someArray){
  6.         doStuff(vo);
  7.    
  8.     }
  9. }

As you can see, in the first line of code I try to call vo.dataProvider, but it should not be defined yet. However, since I declare the var 'vo' in the for each loop, the compiler lifted the declaration to the top of the function, which means that as far as the compiler cares, the vo variable existed before my first line of code.

Safari 4 Beta Crash

Safari 4 Beta kept crashing on launch for me, turns out the Glims plugin was the culprit. Removing that solved the issue. Safari 4 looks pretty sweet...though the tabs on top thing is throwing me off a little.