Scott Morgan

My former peeps over at Yahoo just released 10 more components, 3 Flash and 5 Flex components. The also fixed some of the bugs that the community reported in the existing components.

For the Flash world Astra now contains an AlertManager, an AudioPlayback component, and a MenuBar component that works with the existing Menu component released in Astra 1.0.

For the Flex folk the kind gents on the Yahoo Flash Platform team have created an AutoCompleteManager, a few different ColorPickers, an IPV4AddressInput, a TimeInput component, and a TimeStepper component.

Nice work guys, and now that I am not part of the team and a user of Astra I say thank you for all your hard work.

Tags: astra, Flash, Flex

Well it’s a new year and I have held off posting anything. I didn’t really have a lot to say and I am not one to blog about nothing. A TV show about nothing was a huge success, but I can’t see a blog about nothing doing as well.

The past year has been a roller coaster for me and my family to say the least. We moved twice (4 times if you count corporate housing stops), one move was into a completely different country, I started 2 new jobs (Yahoo! and now Disney), my son went to 2 different schools, and somehow my wife found the time to get pregnant with our third child. So that means we won’t be resting anytime soon.

Looking back I wouldn’t of changed a thing as crazy as everything was. I learned so much professionally and personally. Professionally I have grown, my coding has improved greatly, for the most part I have been strictly working in AS3 and have absolutely no desire to turn back, unfortunately legacy code exists and AS2 will never go away, not for a long time anyway.

One of the best things of last year was working with Papervision, it has opened up a whole new world (or dimension) to me. I am a developer but I do have a creative side and being able to merge both halves of my brain using something like Papervision is truly amazing. Introducing the third dimension into interface design improves user experience because as humans we are trained to work with objects in 3D space and building everyday metaphors into the UI of our apps will make them that much better. Now if we could just get rid of the keyboard and mouse it would make obtaining those metaphors a lot easier. I think we are going to see a lot more 3D in the RIA space in 2008.

Last year we were all introduced to the iPhone, I am not going to drone on about it, but it truly is a great piece of hardware and software. Sure it is missing a few key things, but it is only a first release. Early this year Apple is releasing the iPhone SDK, you know engineers will be all over this SDK and it will only be a matter of time before some really cool apps and extensions are released for the iPhone. There is already a GPS extension in the works, GPS is the only thing I miss about my old LG phone.

So what else do I see happening in 2008. This is not a political blog so I won’t go into how I see the global economy switching from the U.S. dollar to the Euro, and I won’t go into the recession that everyone seems to be poo pooing which personally I think has already started. I also won’t go into how the Big 3 American car companies are digging their own graves and how the auto Unions are holding the biggest shovel. My all Chrysler employed family may disown me if I talk down the unions, oh wait, I think I just did.

2008 should be an interesting year from an RIA standpoint. There is a lot coming down the pipe. AIR is the first thing that comes to mind. Adobe has done a great job with AIR, I am just not sure how well it is going to take off out of the gate. In its current state it is a cool toy. I don’t think it is going to flop, I just think it will take a little time to fly, and maybe another major release. Personally I don’t agree with the whole AIR run time. I have used both mProjector and Zinc in the past to wrap swfs and create desktop applications. Both of these products allow you to create cross platform (Mac and PC, no Linux love) stand-alone apps with the Flash player included in the executable (if need be). These products had more hooks into the OS and file system, what they didn’t have was an embedded version of Webkit and a JS API. They also didn’t have the ability to interact with PDFs. So yes, AIR has it’s advantages, I just don’t agree with the runtime, it just adds a level of unnecessary complexity and doesn’t easily allow for easy deployment. IMHO. The apps should be stand alone so you can burn them on a CD and have them just work.

I mentioned the iPhone SDK already, this will be huge, of course people are going to try and monetize off of this, why wouldn’t they. What I am really hoping, as are most who are reading this blog, is the iPhone Flash Player we’ve been all dreaming about. There are rumors, lots of them, unfortunately only one guy (and probably a few hundred others) know for sure, Mr. Jobs, please enlighten us. The Internet on your phone is still a little watered down, you promised me the real internet in your ads, where is it? I know there would be memory issues, let’s face it, there are some very heavy flash sites out there. Already I have seen Safari on the iPhone close/crash when an image heavy page is loaded. By now I am sure most of you have heard about QVM or tamarin-tracing, could this be the beginning of something huge?

What else, Flex 3, all I have to say is wow. If you haven’t played with the beta do so now. The profiling and refactoring alone will blow you away. Flex has taken off big time, the one thing that puzzles me though is the number of recruiters who contact me with Flex work yet I still don’t see a ton of it out there in the tubes. Some of the jobs are with Fortune 500 companies. Either they are taking their sweet time to launch their “next big thing” or they gave up on using Flex because they couldn’t find the talent.

This year we will also see the Flex framework fully open sourced. Thank you Adobe, this is really going to change the landscape. Maybe we’ll finally see an AS3 decompiler.

EcmaScript 4, this is going to be an interesting one to watch. There has been a lot of rumblings from a few of the big players. Microsoft doesn’t like it. Once again, Microsoft and Adobe will be at each others throats.

IE8 will be released, yawwwwwwn.

Thermo, Astro, Buzzword oh my. H.264, Google Gears, WPF, it’s shaping up to be a good year. I have even heard some rumblings from the Cold Fusion camp, sounds like there is going to be some cool stuff coming from them.

I am not one to make resolutions, I believe if you have to wait till the beginning of the year to make a resolution you’re not very motivated. But this year I want to expand my horizons. I want to get into other technologies, I have played with a lot of things but I want to go beyond playing. Things like Ruby, Gears, Python. I want to get dirty with SQLlite. I also want to contribute more to the Open Source community. I also don’t want to move, don’t want to start a new job and maybe want to take a vacation for the first time in 4 years. We’ll see how much of this list I get to, with a third child on the way it could be tricky.

In closing, Happy New Year to all, I hope you and your families have a great 2008.

Tags: 2008, Actionscript 3, Adobe, Flex, resolutions, Technology

Josh Tynjala and I were speaking today, well actually typing over IM. We were discussing a problem we both ran into recently, the fl.transitions.Tween class was not dispatching events consistently. Sometimes the TweenEvent.MOTION_FINISH event would be broadcasted, other times it would not. Sometimes our programmatic tweens were visually completing, other times they would not, in a few cases they wouldn’t even start. After a little debugging we realized that the AS3 Garbage Collection was killing the tweens. You may be asking why would the garbage collection be doing this? Let’s start out by looking at some example code.

var len:int = _model.getNumberOfItems();
for (var i:int = 0;i<len;i++)>
     var clip:MovieClip = _scope.getChildByName('button'+i);
     var myTween:Tween = new Tween(clip, 'alpha', Regular.easeOut, 0, 1, 0.5, true);
     myTween.addEventListener(TweenEvent.MOTION_FINISH, buttonAnimationComplete);
}

Pretty simple code, in my AS2 days I used code similar to this a million times and never had a problem. All I am doing is looping through a set number of MovieClips and fading them up from 0 to 100%. Most times this worked fine, but a few times the tweens never completed and buttonAnimationComplete was not called. This is because the AS3 Garbage Collection was deleting the Tweens just like it should be. What? The tweens should be deleted? Yes.

Notice that I am storing the reference to my tween in a local variable that gets overridden in every iteration of the loop. This means there is no real reference to the object and when there is no reference to an object it is flagged for removal by the garbage collector. Since there is no real way to know when the garbage collection cycle is going to run the tweens were completing some of the time and other times were being thrown into the back of the big garbage truck that slowly creeps around your code.

The best way to ensure that this doesn’t happen is to store your reference in a class level member. I ended up storing all of my tween references in a class level array. Once all of the tweens were complete I cleared the array. Here is the updated code that I used, the entire class is not shown here, trust me your scroller will thank me.

private var _buttonTweens:Array = new Array();
private var _buttonTweenCompleteCount:int;

private function animateButtons():void {
     var len:int = _model.getNumberOfItems();
     for (var i:int = 0;i<len;i++)>
          _buttonTweens.push(new Tween(clip, 'alpha', Regular.easeOut, 0, 1, 0.5, true));
          _buttonTweens[_buttonTweens.length - 1].addEventListener(TweenEvent.MOTION_FINISH, buttonAnimationComplete);
     }
}

private function buttonAnimationComplete(e:TweenEvent):void {
     buttonTweenCompleteCount++
     if (buttonTweenCompleteCount == _model.getNumberOfItems()) {
          _buttonTweens = [];
          dispatchEvent(new Event('buttonsReady'));
     }
}

I am just using Tweens as an example, but you can run into this same issue with any object that has local references that are overridden. For example, I had a Timer event set to iterate every 100 milliseconds and it called loadAsset(), a method that did just what it says, it loaded an asset.

private function loadAsset():void {
     _currentItemToLoad++;
     var myLoader:Loader = new Loader();
     myLoader.addEventListener(Event.COMPLETE, assetLoaded);
     myLoader.load(new URLRequest('images/galleryImage' + currentItemToLoad + '.jpg'));
}
private function assetLoaded(e:Event):void {
     var holder:Sprite = new Sprite();
     holder.visible = false;
     holder.addChild(e.target.content);
     _scope.addChild(holder);

     e.target.removeEventListener(Event.COMPLETE, assetLoaded);
}

Just like the Tween example above my Event.COMPLETE event was not firing all the time. This is because I was storing the reference to the Loader in a local variable that was overridden each time the loadAsset method was called. To get around this I stored all my references in a class level member (an object or an array work nicely).

Hopefully this helps you figure out why you are not seeing certain events in your code, it had me stumped for a bit. Now you know, and as G.I. Joe said “knowing is half the battle”.

Tags: actionscript 3.0, Flash, Flex, Garbage Collection

I have seen a lot of posts lately with people asking how they can access variables and methods in an external swf that is loaded at runtime using AS3. This isn’t a difficult task, but it is much different than AS2/AS1 where you could just call directly into the loaded swf using the instance chain if you were in the same security sandbox.

First off, lets create our swf that wil be loaded in at runtime. Open up your favourite actionscript editor and create a new class with the following code.

package com.scottgmorgan {
     import flash.external.ExternalInterface;
     import flash.display.Sprite;
     public class ExternalMovie extends Sprite {
          public function ExternalMovie():void {
               //nothing in our constructor right now.
          }
          public function alert(msg:String):void {
               trace(msg);
               ExternalInterface.call('alert', msg);
          }
     }
}

Now create a new FLA and set the above class as the document class. If you are not sure how to do this simply enter the class path (com.scottgmorgan.ExternalMovie) into the document class textfield found in the property panel. Lather, rinse, repeat, compile.

Next we will create the swf that will load our ExternalMovie swf we just created. Let’s jump back to our favourite actionscript editor and create a new class with the following code.

package com.scottgmorgan {
     import flash.display.Loader;
     import flash.net.URLRequest;
     import flash.events.Event;
     import flash.display.LoaderInfo;
     import flash.display.Sprite;
     public class SourceMovie extends Sprite {
          public function SourceMovie():void {
               var loader:Loader = new Loader();
               loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
               loader.load(new URLRequest('ExternalMovie.swf'));
          }
          private function onLoadComplete(e:Event):void {
               var loaderInfo:LoaderInfo = e.target as LoaderInfo;
               addChild(e.target.content);
               var swf:Object = loaderInfo.content;
               swf.alert('Hello World');
          }
     }
}

That’s it, LoaderInfo saves the day. LoaderInfo.content connects you with the document class of the externally loaded swf. Lets create a new FLA, assign the SourceMovie class as the document class and compile. Make sure the SourceMovie.swf and ExternalMovie.swf are in the same directory. The as files should be in /com/scottgmorgan/. Let’s compile the SourceMovie and you should see “Hello World” in the output window if you run the swf inside the IDE, if you run it from a browser you should see an alert dialog with “Hello World”.

Another option you have is to use the ApplicationDomain class. Using the ApplicationDomain class you can add the classes from the ExternalMovie to the SourceMovie’s ApplicationDomain. This is a great way to load in code libraries at runtime.

Lets pretend we have a large application with multiple levels of security, maybe we are creating a content management system and we need multiple permission levels. User A can only update content, User B can update content and update the site map, User C is an administrator and can do everything User A and B can do but can also access tracking information, edit user profiles, update permissions, etc. When User B logs in the application loads the site map code library (sitemapadmin.swf) and adds its classes to the main ApplicationDomain. When User C logs in the sitemapadmin.swf classes would be added to the main ApplicationDomain, for this user the application would also load the trackingadmin.swf, and useradmin.swf code libraries and add all the included classes to the main ApplicationDomain.

Let’s update our SourceMovie.as file and add the ExternalMovie class to SourceMovie’s ApplicationDomain.

package com.scottgmorgan {
     import flash.display.Loader;
     import flash.net.URLRequest;
     import flash.events.Event;
     import flash.display.LoaderInfo;
     import flash.display.Sprite;
     import flash.system.ApplicationDomain;
     public class SourceMovie extends Sprite {
          public function SourceMovie():void {
               var loader:Loader = new Loader();
               loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
               loader.load(new URLRequest('ExternalMovie.swf'));
          }
          private function onLoadComplete(e:Event):void {
               ApplicationDomain.currentDomain.getDefinition("com.scottgmorgan.ExternalMovie");
               var myExternalMovie:ExternalMovie = ExternalMovie(e.target.content);
               myExternalMovie.alert('Hello World');
          }
     }
}

There you have it. One thing you will notice is you don’t have to add the loaded swf to the display list to access its classes. Hopefully you will be able to use these techniques in future projects.

Tags: actionscript 3.0, Flash, Flex

It amazes me that people don’t know about describeType(). If you’re lazy, or as some developers call it, efficient, you always don’t have time, or really don’t feel like digging through half assed completed documentation to see what parameters a classes constructor accepts. Sounds like the perfect time to combine forces, trace() meet flash.utils.describeType(). The describeType() method returns an xml dump that contains all the details you’d ever need to know about any object that is passed in as a parameter.For example, let’s pretend this is our first time working with Flash (of course you could be working in Flex too), lucky us, we never had to use AS2 or AS1, we only heard our cubicle neighbors groaning about spaghetti code, and hidden code attached to buttons. Since this is our first time using Flash we don’t even know what a MovieClip is or what methods are available to us. One simple line of code will solve our ignorance.

trace(flash.utils.describeType(flash.display.MovieClip));

This one little line of code returns this to us in our output window (shortened for your scroll wheels sake):

<type name="flash.display::MovieClip" base="Class" isDynamic="true" isFinal="true" isStatic="true">  <extendsClass type="Class"/>  <extendsClass type="Object"/>  <accessor name="prototype" access="readonly" type="*" declaredBy="Class"/>  <factory type="flash.display::MovieClip">    <extendsClass type="flash.display::Sprite"/>    <extendsClass type="flash.display<::DisplayObjectContainer"/>    <extendsClass type="flash.display::InteractiveObject"/>    <extendsClass type="flash.display::DisplayObject"/>    <extendsClass type="flash.events::EventDispatcher"/>    <extendsClass type="Object"/>    <implementsInterface type="flash.display::IBitmapDrawable"/>    <implementsInterface type="flash.events::IEventDispatcher"/>    <accessor name="scenes" access="readonly" type="Array" declaredBy="flash.display::MovieClip"/>    <method name="stop" declaredBy="flash.display::MovieClip" returnType="void"/>    <method name="nextScene" declaredBy="flash.display::MovieClip" returnType="void"/>    <method name="play" declaredBy="flash.display::MovieClip" returnType="void"/>    <accessor name="currentScene" access="readonly" type="flash.display::Scene" declaredBy="flash.display::MovieClip"/>    <accessor name="currentFrame" access="readonly" type="int" declaredBy="flash.display::MovieClip"/>    <accessor name="trackAsMenu" access="readwrite" type="Boolean" declaredBy="flash.display::MovieClip"/>    <method name="gotoAndStop" declaredBy="flash.display::MovieClip" returnType="void">      <parameter index="1" type="Object" optional="false"/>      <parameter index="2" type="String" optional="true"/>    </method>    <accessor name="currentLabels" access="readonly" type="Array" declaredBy="flash.display::MovieClip"/>    <method name="willTrigger" declaredBy="flash.events::EventDispatcher" returnType="Boolean">      <parameter index="1" type="String" optional="false"/>    </method>  </factory></type>

The output window never looked so good. Methods, paramaters, superclasses, accessors, the amount of information that is returned is beautiful. I don’t know how many for in loops I wrote in AS2 just to try and figure out what methods were available in a custom class.One thing to note is that describeType() only shows public properties and methods, and will not show properties and methods that are private, package internal or in custom namespaces.If you have never looked at the flash.utils.* package, I suggest you do, there are some handy little utilities in there.

Tags: actionscript 3.0, debugging, Flash, Flex

Google defines Thermo as “Two bars or wires of dissimilar metals joined at one extremity which Couple develop a current (thermoelectric current) when heated.” I define it as a major accomplishment for Adobe that is reinventing the term “Deseloper“. Aral Balkan has posted videos from the sneak peak at Max, too cool.

This is a very early sneak peak, possibly even some smoke and mirrors, but still, Adobe has hit the nail on the head and may have finally beat the Flex Project workflow issues. Watching these videos do bring up a few questions.

Are Thermo projects bound to the original assets? If the developer are working on a project together and the designer changes something in the design will Thermo automatically update the MXML. Obviously within reason, but say the designer moved the Favorites album list above the top list. Whould Thermo recognize this and make the change without the developer intervention?

All of the styles appear to be inline in the demo, can they be extracted into CSS for runtime styling? For larger applications this is mandatory for projects that are multilingual or are available under multiple brands.

What about working the other way? Open MXML in Photoshop? I don’t know how many times I have had designers take a screengrab of something I am working on, hack it apart in Photoshop just to show me what they want. Obviously they could do some of this in Thermo but I doubt Thermo will have every tool that is available in Photoshop and if it is a quick change a designer doesn’t need to learn Thermo, they can make the change, hit Save and the workflow isn’t interupted. This would also allow designers to skin existing components or even a prototype that a developer whipped together to show a concept.

With other WYSIWYG development tools the code output is usually something I wouldn’t want to hang on my fridge. MXML is pretty clean but there are optimizations that can be applied to ensure quicker compilation and easier access via Actionscript. I hope this will be considered. In the end it is all compiled so the output is usually not an issue but as a developer I have opened many files a designer has created with a WYSIWYG applications and have almost fallen out of my chair.

I am sure I will have more questions as I let this sink in. Coming from a design/creative background developer/designer workflows are something I have worked on at most companies I have worked at. I think this is a huge step in the right direction. As long as Adobe doesn’t create a visual tool for creating business logic my job will be secure when Thermo hits the market

Tags: Flex, MAX, Thermo, WYSIWYG

So how’s this for enterprise level Flex applications. Yahoo! Messenger launched their beta version of it’s web-based Flex Messenger application today. Currently the beta is only available in select parts of the world, rest of the world check back soon. Congratulations to all involved.

  The Messenger desktop application already has hundreds of millions of users, not only is this a huge win for Flex but it is a huge win for increasing the penetration rates of Flash Player 9 which are already at 84%.

This is just the beginning, stay tuned to see what else Yahoo! has up their sleeves.

Take that Silverlight

Tags: Flex, Web Messenger, Yahoo

As I mentioned in my presentation on Tuesday at 360 Flex pipes.yahoo.com have launched a wide open crossdomain file today. Flash Community rejoice! This is huge news for us. Not only does it mean we can load in manipulated aggregated data feeds, it also means we can load in feeds that normally we do not have access to because there is no crossdomain policy. Before you could do this with a php or any server side based page proxy file. But now you don’t have to worry about that. Log in to pipes, do a simple fetch, save it, and load in your pipe through pipes.yahooapis.com. Simple! If needed, you can manipulate the feed, remove unnecessary data and output it. No one wants to parse irrelevant data, especially client side! As some have already said, pipes is the future of the Internet and if we didn’t know it already flash is too!

One last thing, if you want to learn more about using pipes, there is a great video tutorial up on the Yahoo! Developer Network.

Thanks a lot pipes from the entire flash development community.

Tags: Actionscript, Flash, Flex, Mashups, Pipes, Yahoo

I am proud to announce the new Yahoo! AS3 Libraries that were released today on the Yahoo! Flash Developer Network. We timed this launch with the 360Flex conference in San Jose at the Ebay campus. I will be presenting the Yahoo! AS3 Maps Commuication Kit tomorrow morning. As a side note this is my first contribution to the Yahoo Developer Network since I started here a couple months ago. Let us know what you think, and what else you would like to see. We’re here to make your job easier. We don’t want you to worry about accessing all of our data, we want you to concentrating on creating the best application with our data.

Happy Mashing!

Tags: actionscript 3.0, apis, Flash, Flex, Yahoo

The FLEXifier allows you to experience Flex 2 for yourself, without needing to download or install anything. Of course, you really should download Flex Builder 2 to truly get a feel for Flex, especially if you want to save your project :). However, if you’re really cheap or lazy, you may use The FLEXifier to compile and run MXML and ActionScript code from anywhere, with an internet connection. Simply enter your code, and click the Try It! button. Use your own code, or use canned code that you can tweak and modify as you see fit. Enjoy! http://try.flex.org/

Oh yeah, almost forgot my mandatory shout out to Tim, another developer cohort.

Tags: Flex