Now that CS5 is available, the EMEA Evangelism team will be holding an Online Developer Week from 7th June – 10th June where we’ll be covering the entire design, develop and deploy workflow by building an application using Illustrator and Photoshop CS5 along side the Flash Platform suite of tools.

We’ll be focusing on Flash Builder, Flash Professional, Flash Catalyst and Flex 4 as well as the Flash Player 10.1 and AIR 2.0 runtimes. Starting with designs from Photoshop and Illustrator and each day adding more functionality to our application so that by the end of the week we will have a fully functioning solution on multiple devices. In the process we’ll also be looking at P2P in relation to Flash Player 10.1 as well as how to link up your application to server technologies like LiveCycle, Java and PHP.

My particular session is on creating components in Flash CS5 Professional and integrating them in to the application via Flash Builder, so if you’re interested in the new designer / developer workflow between Flash Professional CS5 and Flash Builder, and how you can harness both to create flexible component solutions then this session will be of interest. Actually all of the sessions are worth attending so be sure to sign up for the rest as you won’t be disappointed :p.

The full schedule is below and you can register HERE. Don’t delay as this will be an exceptional week of CS5 / Flash Platform goodness.

Schedule:

June 7th – 12:00 – 13:00 GMT Erase the Designer to Developer gap: Adding interactions to your design with Serge Jespers
June 7th – 15:00 – 16:00 GMT Connecting your design to PHP services with Mihai Corlan
June 8th – 12:00 – 13:00 GMT Connecting a web application to a J2EE backend using Flash Builder 4 with Michael Chaize
June 8th – 15:00 – 16:00 GMT Working with Flash CS5 components in your Flash Builder 4 project with Mike Jones (that’s me of course)
June 9th – 12:00 – 13:00 GMT Going multi-user with P2P in Flash Player 10.1 with Tom Krcha
June 9th – 15:00 – 16:00 GMT Developing multi-user applications with LiveCycle services with Tom Krcha
June 10th – 12:00 – 13:00 GMT Bringing web Applications to the desktop with AIR 2.0 with Piotr Walczyscyn
Jun 10th – 15:00 – 16:00 GMT Code once and run on multiple mobile devices with Mark Doherty

If you weren’t already aware I’ve been writing a book on Flex component development which will be published by Addison-Wesley, called Developing Flex Components: Using ActionScript 3.0 & MXML to Extend Flex and AIR Applications. Originally it was targeted at Flex 3; however, as Flex 4 in the soon to be “new kid on the block” I’ve decided to re-write it so it now focuses on the new “Spark” components that are present in the Flex 4 framework as opposed to the “Halo” components that Flex 3 uses.

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.

Back in August I was asked if I’d like to do a few “tips and tricks” style videos for Adobe TV. The first of which has just been posted. This video covers off how to take a custom component and create a live preview from it, so you can then distribute it to members of your team or to the general developer populous.

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

In my previous post I was looking at Flex effects and how to combine and target them. However watch out if you are using multiple mask based effects, like Wipe effects. If you are trying to get multiple wipe effects to run in parallel on the same target you aren’t going to get what you expect.

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

Another year another fantastic conference in Brighton – I’m obviously speaking about Flash on the Beach. What a fantastic conference, not only was it bigger and better but John announced that there would be a Flash on the Beach Miami in 2009. I’m pretty stoked by this as John had sworn me to secrecy over this new conference date. Plus he’d asked me if I’d like to present there…Hell yeah!

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.

Has he gone mad I hear you say. He did say 60 minutes. Yes 60 minutes to develop an application. This is the talk / participatory presentation I will be giving at the London Flash Platform user group tonight.

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

I’ve been playing around with the Item Renderers in Flex 2 recently (more than usual as it goes). So I thought I’d put my findings and “insights” down in a series of articles.

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

The first part can be found here.

This is probably common knowledge for most but I’m posting it as it just came up in conversation (as I demonstrated it to a colleague). Also for the budding component developers amongst us this be of use and even prove insightful.

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 :)

Over the past week or so I’ve been posting snippets on creating MXML based components, and will continue to do so. That said I thought I’d post some articles on creating components in Actionscript 3.0 so you can see where the crossover exists and provide information that will, hopefully, provide a rounded view on which method of development suits each individual.

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