The Flex 4 SDK is an ever evolving thing, and the SDK team announced not too long ago that some not so trivial architectural changes still needed to happen in order for the old mx components and the new spark components could co-exist peacefully. The recent open iteration meeting showed that these measures are well underway. That being said, for those of you trying to keep on the up and up, cutting your teeth on the version of the SDK that comes with Flash Builder 4 by default can potentially lead you down a path no longer traveled. In basic terms, things are changing fairly rapidly in the SDK so unless you want to get left in the dust you need to be keeping an eye on the way things are changing. The best way to do this of course is to check-out the the bleeding edge SDK source direct from Subversion and configure Flash Builder 4 to use it in your sample projects.

The first thing you need to do is grab the SDK source. The means to do so is pretty clearly documented here at the Adobe Open Source Site

Once you have the edge build checked out, there’s one step that you need to complete before you point Flash Builder 4 at your new SDK. The open source SDK doesn’t include the java MXMLC libs that Eclipse needs to compile your project. You’ll need to find these in the Flex 4 SDK folder that ships with Flash Builder, which is in the application directory under the “sdk” folder.

Now copy these to the “libs” folder in your new SDK. Note that your Subversion client will see these as new files in the check-out but this won’t prevent you from updating the SDK.

Now back in Flash Builder, highlight your project, right click and select “Properties” and then go down to the “Flex Compiler” screen.

Then click the button at the top right of this screen that says “Configure Flex SDK’s”

Now you’ll just add a new SDK, name it “Bleeding Edge Flex4 SDK” or something similar, and point it at the edge SDK that you recently checked out.

Now you’re done! Just don’t forget to update the project properties on your existing projects so that they point to your new edge build.

ian Flex, News

One of our animators recently handed me some Flash built training animations (SWF) that were to be viewed in our Flex shell. In this case we needed playback controls like pause, play, next, back and so on to work with these animations. The pause functionality in this case was problematic. Sometimes this just requires a simple stop() action but more often than not animators build animations that are comprised of many smaller MovieClip animations that are re-used quite a bit on the stage. Issuing a stop() on the root level MovieClip doesn’t stop all sub-timlines as they operate independently from the root timeline and doesn’t result in a true pause. You’ll need issue a stop on all children of the MovieClip in this case to freeze everything in its place.

You might have handled this same thing in AS2 using a for loop:

for (var m in this){
 
    if (typeof(this[mov]=="movieclip"){
        this[mov].stop();
    }
 
}

All in all this worked nicely as it could grab the full hierarchy of children. Unfortunately this no longer works in AS3. The closest thing to it would be a for loop using the number of children in a DisplayObject.

for (var i:uint = 0; i < mc.numChildren; i++){
     if (typeof(this[mov]=="movieclip"){	
         mc.getChildAt(i).stop();
     }
}

The problem with this is it only gets the direct children of the DisplayObject and none of their children’s children – and so on. However, we can fix that by wrapping it in a recursive function.

private function stopAllMovieClips(mc:*) : void {
 
	 	trace("Stop: ", mc.name);
 
		 if(mc is MovieClip) mc.stop();
 
		 for (var i:int = 0; i < mc.numChildren; i++) 
		 if (mc.getChildAt(i) is MovieClip){
                      stopMovieClip(mc.getChildAt(i));
                 }
 
}
 
stopAllMovieClips(this);

Notice that you can’t strongly type the argument for this function because you’ll come across a different class types when sifting through all children (Sprite, MovieClip, Graphic, etc). Of course MovieClip isn’t the only type of object this will work on and you aren’t limited to stop(). Any descendant of DisplayObject that has children or Flex Container is fair game here and you can perform nearly any action you want.

ian Flex

Ok, I’m not sure how I missed this and if its common knowledge then forget I said anything, but I found out today that you can do this:

height="{ (dropDown.height > descriptorBox.height)
? (dropDown.height + 50) : (descriptorBox.height + 50) }” />

Doesn’t look like much but its a quick and dirty way to have conditional bindings without having to use a binding class or getter/setter method to handle the logic. Call me lazy, but I think this is pretty cool.

ian AS3.0, Flex, News

I had the pleasure of making it out to the Philadelphia branch of the Adobe AirBus tour last week, held at the Ben Franklin Institute of science. My friend and I managed to get there just as Ryan Stewart was giving his keynote speech, so we grabbed our free bag of swag and a t-shirt and went on in. All in all it was a very cool event, and even though I’ve been working with Flex and Air for a while now I walked away with a lot of great resources and ideas. The highlight of my evening was that I was able to speak with Mike Chambers during the intermission about how to do a few things in Air that I’d been struggling with. Mike is a super friendly guy and was very helpful. He even offered to throw together some examples for me while he was on the road. Thanks for the help Mike, and thanks to the rest of the tour members who came out to Philadelphia.

ian AS3.0, Air, Flex, News

Ok, so first off let me say that the iTunes playlist XML structure looks like it was designed by someone who doesn’t even know XML.

Take a look at this entry for a single song:

<dict>
<key>Track ID</key><integer>64</integer>
<key>Name</key><string>Episode 14</string>
<key>Artist</key><string>Gareth Emery</string>
<key>Album</key><string>The Gareth Emery Podcast</string>
<key>Genre</key><string>Podcast</string>
<key>Kind</key><string>MPEG audio file</string>
<key>Size</key><integer>64803919</integer>
<key>Total Time</key><integer>2700068</integer>
<key>Year</key><integer>2006</integer>
<key>Date Modified</key><date>2006-09-21T15:14:43Z</date>
<key>Date Added</key><date>2006-09-21T15:14:43Z</date>
<key>Bit Rate</key><integer>192</integer>
<key>Sample Rate</key><integer>44100</integer>
<key>Play Count</key><integer>22</integer>
<key>Play Date</key><integer>3264149297</integer>
<key>Play Date UTC</key><date>2007-06-08T16:08:17Z</date>
<key>Release Date</key><date>2006-09-21T11:00:00Z</date>
<key>Sort Album</key><string>Gareth Emery Podcast</string>
<key>Persistent ID</key><string>FE2067001E4F2C00</string>
<key>Track Type</key><string>File</string>
<key>Podcast</key><true/>
<key>Location</key>
<string>The%20Gareth%20Emery%20Podcast/Episode%2014.mp3</string>
<key>File Folder Count</key><integer>4</integer>
<key>Library Folder Count</key><integer>1</integer>
</dict>

The way they have this structured makes it impossible to do any E4X based XML processing of the playlist and consequently prevents your from using it in Flex or any other MVC based framework that allows you to easily hook an XML data source into components on the view layer.

So, as if you couldn’t guess, I wrote a class so that you can. You can use it to load in an iTunes XML playlist and turn it into something use-able that adheres to XML best practice where the structure is concerned.

Heres a sample of what it outputs:

<song>
  <Track_ID>511</Track_ID>
  <Name>Episode 34</Name>
  <Artist>Gareth Emery</Artist>
  <Album>The Gareth Emery Podcast</Album>
  <Genre>Podcast</Genre>
  <Kind>MPEG audio file</Kind>
  <Size>64804016</Size>
  <Total_Time>2700068</Total_Time>
  <Year>2007</Year>
  <Date_Modified>2007-07-24T16:29:57Z</Date_Modified>
  <Date_Added>2007-07-24T16:29:57Z</Date_Added>
  <Bit_Rate>192</Bit_Rate>
  <Sample_Rate>44100</Sample_Rate>
  <Release_Date>2007-07-19T22:00:00Z</Release_Date>
  <Sort_Album>Gareth Emery Podcast</Sort_Album>
  <Sort_Name>Gareth Emery Podcast - Episode 34</Sort_Name>
  <Persistent_ID>DFA5DE7CE96B0316</Persistent_ID>
  <Track_Type>File</Track_Type>
  <Podcast/>
  <Unplayed/>
  <Location>The%20Gareth%20Emery%20Podcast/Episode%2034.mp3</Location>
  <File_Folder_Count>4</File_Folder_Count>
  <Library_Folder_Count>1</Library_Folder_Count>
</song>

Much better, huh? Heres an example of how you can use it in your Flex/AS3.0 project.

var libraryPath:URLRequest = new URLRequest("testlibrary.xml");
 
	iTunesLibrary = new itunesXMLParser();
	iTunesLibrary.load(libraryPath);
 
	iTunesLibrary.addEventListener(Event.COMPLETE, loadHandler);
	iTunesLibrary.addEventListener(ProgressEvent.PROGRESS, progressHandler);
 
public function loadHandler(event:Event):void{
	trace("Library is done loading, lets do something cool with it");
 
	//trace(iTunesLibrary.playlistXML);
 
	trace("songs: "  + iTunesLibrary.playlistXML.song);
 
	var songList:XMLList = iTunesLibrary.playlistXML.song;
 
	//trace(songList);
 
	dg_mx.dataProvider = songList;
}
 
public function progressHandler(event:ProgressEvent):void{
	trace("progressHandler loaded:" 
        + event.bytesLoaded + " total: " + event.bytesTotal)</code>
}

Note that it listens on all the same events as the normal XML class. In the loadHandler function above theres an example of how to hook this into a datagrid component in flex.

Thats it. Right now it only grabs songs, I’ll be adding support for multiple playlists later.

Download the class file here

Download the example flex project here

ian AS3.0, Flex, News, Projects

One of things that I’ve always found a bit odd is that you can’t double click on an .flv video file and have it open up in the Flash player like a .swf would. Instead you have to wrap it in a .swf and open that, which is a big hassle. Some FLV compressors like Sorenson Squeeze automatically generate the wrapper .swf for you, but lack playback controls. A better option is to use one of the many FLV players out there. Unfortunately I’ve found that where most them have playback controls they don’t really give any of the juicy information about the video file that us developer types really need to get anything done.

Ideally when I’m working with FLV’s I’d like to be able to see what the position and duration is at all times so that I can easily determine timing for cue points I want to create. I also want to know the display dimensions and the file size, and for all of it I want the option to see the units in a number of different conversions. I also want to be able to drag and drop FLV files so I can very quickly preview them without having to dig 10 directories deep for a folder I already have open.

So, you guessed it, I went ahead and made an AIR application to do just this. Its called FLVinspector. Heres a summary of the features:

• Drag and drop FLV videos onto the application window
• Browse and load FLV videos from the local filesystem
• Reports display size, file size, position and duration
• Change the time and size units settings in the preferences (ms, s, m, B, KB, MB)

Click here to Install FLVinspector 1.0Beta2

*update: currently there is a bug with getting the filesize on FLV’s that have been dragged in. I’ll post an updated version when I get the chance. (FIXED, version is now 1.0Beta2)

ian Air, Flex, Projects