That said, the original (Flex 3) chapters are now up in the Rough Cuts section on O’Reilly’s Safari digital book service. I’m not sure what will happen to these original Flex 3 chapters once I’ve finished the book – I don’t know whether I’ll be able to release them as PDFs or not – due to contracts and the like, but if I can I’ll add them to the site.

It can now be ordered from Amazon if you want to get in before the rush :p. As I mentioned if you have a Safari account you can buy or access (depending on your account type) the rough cut chapters as they are updated.

If you like the video please head over to Adobe TV and rate it.

If you think about it, it is obvious why; the documentation and functionality regarding masks in general is quite explicit. You can only have one mask applied and active on a specific target any any one time. If you were to apply another mask the new mask is applied and the old one is deactivated. So with that in mind I started to play around with the masks and various resize and move effects to try and achieve what I wanted to do.

So while sitting on the train heading home one evening I came up with the following effects below. Obviously these are a variation on a theme, but they were what I was after. If you think they would be useful in a Flex project you are doing feel free to download them from my dev site

That said this year at Flash on the Beach I did a session entitled “Things To Make And Do”. It was a talk about the Flex framework from the perspective of component development and how an understanding of how the component framework in Flex works will provide you with a good grasp of how the overall Flex framework flows.

So without further ado, here are the links to download my session notes and the example code used in the presentation. I’ve added some detail to the slide notes, (you’ll need to download the version with the notes – not the one below). That said I may record the session again via Screenflow so it is useful for everyone. I’ve also shared it via Adobe Share and embedded the slide deck below

Download Files

• Slide Deck (No notes)
• Slide Deck (Notes included)
• Session Example Skinning Files

As most of my close friends know, I have a bit of a thing for components. So it will come as no surprise that I have a few new ones to release. The first of these is a video playback component that I have shamelessly called FLVPlayback after the similar component of the same name in Flash.

It is currently quite simple in its operation – it only has a play / pause and mute button, plus a set of progress bars for both playback and loading and a simple display showing the time elapsed (you can see it all in the image below, Tekzilla video shown to give a bit of context).

The control bar automatically fades out once the user rolls off of it, however, if you wanted to have it persist there is a flag to make it operate in that manner.

The component supports skinning and styling (there is a Flash based skin template available for download as well).

The original premise for this control came about from a conversation with Andrew Shorten and the Adobe UK marketing people in regards to providing a simple set of classes and examples that would allow people who were developers or designers not already using Flex to get to grips with Flex a little faster than just downloading the trial and figuring it out from there.

Plus as there seemed to be a bit of a gap in the Flex component set for a video component that actually had controls (as opposed to the VideoDisplay component that is just a box to load video into). So this component was created and formed part of the kit that was distributed on Monday 25th to conicide with the launch of Flex 3 and AIR.

This is just the initial release, I’m currently working on adding in more functionality and additional controls, so if you want to try it out, post a feature request or a bug. Or you would like to download the source to have a look, you can do it all here: FlashGen.Com Dev Server.

Obviously in the true style of Blue Peter there will be a bit of prep and code for the talk is available for download before hand (see links at the bottom of this post).

However the point of the talk is not to stand and lecture on how you can build better faster applications in Flex 2, nor is it to watch me type for an hour! It’s to allow those who like the idea of Flex get involved and have a go as well. So if you have a laptop, a copy of Flex Builder 2 (or the beta of Flex Builder 3) and want to join in this is for you. If you don’t then don’t worry, participation is not mandatory.

What are we going to make… Well let’s keep that a surprise.

Project files for Flex Builder 2
Project files for Flex Builder 3

Once you have downloaded the zip just import it into Flex Builder using the following steps:

1. Right click in the Navigator pane (top left hand side)
2. Select Import (or File > Import)
3. Choose General > Existing Projects into Workspace from the dialog that opens
4. Choose the “Select archive file” option and browse to the zip file
5. Follow the prompts
6. That’s it

This isn’t a definitive guide, but might prove useful for some :D

The first part can be found here.

So, given the title this obviously has something to do with MXML tags. Which it does.

So what about them?
Well I’m refering to is the functionality that allows you to load and review the actual classes that are defined by the tags in Flex Builder 2.0.

To do this open up Flex Builder and create a new MXML file. The default code that is generated will do so you should see the following in your ’source’ view.

[Thanks for the update Rob]Now with your mouse pointer click at the beginning of the <mx:Application… this should highlight that entire row, as you can see in the image mine highlights in blue. Now hold down CTRL on Windows or CMD (The Apple key :p) on OS X and hover your mouse over the word Application. What should happen is that it will underline and allow you to click it.

When you click this new link the Actionscript 3.0 class for that tag will open in the IDE for you to look through. Apologies if I’m posting ‘money for old rope’ style information but it is so easily missed if you haven’t heard or seen it before…

For those that haven’t I hope it proves useful :)

As with my first post on component development with MXML I thought I’d take the same code but re-engineer it in to AS 3.0 code so we can see the difference.

So first of all let’s briefly review the MXML code of our extended ComboBox:

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:dataProvider>
		<mx:String>Miss</mx:String>
		<mx:String>Mrs</mx:String>
		<mx:String>Mr</mx:String>
		<mx:String>Dr</mx:String>
	</mx:dataProvider>
</mx:ComboBox>

As you can see it ha all the elements you’d expect but how would we reproduce it in AS 3.0? Well first of all it would make sense to include the package path as this will have more relevance as we move on. So for the component above it is called FGComboBox.mxml and it is located in com.flashgen.components.flex.controls. When we just create the initial Actionscript 3.0 class you’ll see why this matter.

// Remember the package name is now external to the class identifier.
package com.flashgen.components.flash.controls {
	// Import our classes we need to create our component
	import mx.controls.ComboBox;
 
	// Declare our class and provide the inheritance and interfaces 
	public class FGComboBox extends ComboBox
	{	
		private var _data	:Array = ["Miss", "Mrs", "Mr", "Dr"];	
 
		// Define the constructor
		public function FGComboBox()
		{
			// Call our parent
			super();
			applyData(_data);
		}
 
		protected function applyData(elements:Array):void
		{
			// Set the dataProvider for the component
			this.dataProvider = elements;
		}
	}
}

If you want to try it out here is the MXML application file:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:fgx="com.flashgen.components.flex.controls.*" xmlns:fgc="com.flashgen.components.flash.controls.*" viewSourceURL="srcview/index.html">
	<fgx:FGComboBox id="fgxCombo" x="0" y="0" />
	<fgc:FGComboBox id="fgcCombo" x="100" y="0" />
</mx:Application>

Now this is purely an example piece of code so it is unlikely you would really implement a component in this manner.

It will run and it has the same default values as the MXML version above it. The interesting thing to note is that once compiled you cannot tell the difference between the two versions. I know it is a very obvious thing to say but I thought I would be explicit.

Hopefully this has given a basis of comparison between the MXML and Actionscript 3.0 component development – albeit on the simple side.

Blatant Plug
Catch my talk on Flex 2 and Actionscript 3.0 component development at Flash on the Beach
December 4th-6th 2006, Brighton, UK

To begin with let’s recap on the core methods for UIComponent in the Actionscript 2.0 v2 framework.

Actionscript 2.0 Specific

• init() – Here we create the initial references to our component and make sure that our parent class has instantiated by calling super(); (If you don’t call super() you cannot take advantage of enabling / diabling your component as a Watch is applied for just this purpose in the UIComponent init() method.
• createChildren() – Pretty self explanatory really. Watch out for parameter setting in the optional initObj of a nested component.
• size() – Again it pretty much does what it says on the tin. This is the first time a component knows it’s actual size.
• draw() – Our last method, draw() does just that, it draws the visual elements on the screen.

Compare this to the Actionscript 3.0 framework. First of all not all of the methods from the v2 framework are carried over and those that are have been re-engineered. In my opinion this is a good thing as most were a little convoluted as to their actual purpose and what order they were actually processed in (having access to the source code wasn’t that beneficial and only served as a solution due to the shockingly poor documentation for component development.

With AS3.0 we now have an actual use for the constructor and we lose init(). It’s a like for like trade. createChildren() stays, but size() and draw() get replaced with measure() and updateDisplayList(). We also get a couple of extra methods to make our life easier – layoutChrome() and commitChanges(). So what do these do differently to the old methods we had in the v2 framework?

Actionscript 3.0 Specific

• createChildren() – This method still does pretty much the same job as in the v2 framework.
• measure() – Again this is similar in nature to size(). Providing the default width and height of the components. It also provides the default minimum size this particular component can be. So no more design view flaws where a user can make the component smaller than is functionally usable.
• updateDisplayList() – Like measure(), this is pretty similar to the old draw() method. However it does have the ability to do sizing of any child elements as well as the positioning within the component operational area. It also deals with the application of skins and graphics as required by the component. This is not the same as layoutChrome() though.
• layoutChrome() – This method deals with the application of any border area of a component. You will generally only use this when subclassing from Container components / classes or creating a custom component that is a type of container or holder.
• commitChanges() – This method deals with the application of property changes within the component itself – either by internal or external intervention. You can either get all changes to invoke at the same time or define a specific order.

So we have the initial methods used to create our core component framework, but what about the old redraw(), invalidate() and setSize() from v2? As most are aware these were part of the public API to allow for the re-rendering / resizing of the component and it’s visual elements. Iin the case of invalidate() that would be the next available frame interval or if redraw(true) the current frame. setSize() deals with manipulating the size method by providing an interface to set the components new width and height values then calling size().

In Actionscript 3.0 we lose all of these and in their place we have the following:

• invalidateDisplayList() – This marks the component so that it’s updateDisplayList() and layoutChrome() methods are called on the next screen update.
• invalidateProperties() – If our component has received a data change or it’s properties have been updated via a specific mechanism we can invoke this method to make sure that commitChanges() gets called during the next screen update.
• invalidateSize() – This one is obvious compared to the other two, it marks the component so that it’s measure() method is called in the next screen update.

Hopefully this will make everyones life a lot easier when developing components for both Flex 2 and eventually Flash 9. If you want to find out more then feel free to pop back here from time to time. Alternatively see the blatant plug below :p

Catch my talk on Flex 2 and Actionscript 3.0 component development at Flash on the Beach
December 4th-6th 2006, Brighton, UK