For my session at Flash Camp Birmingham I wanted to introduce people to declarative skinning within Flex. I was skinning Flex applications back in Flex 2 and to get the right visual appeal it was quite a tricky thing to get right. There was a reliance on heavy external assets brought into Flex and scaled using Scale9 techniques. There were many times I wanted to have better control of the UI I was creating through not only a more advanced CSS capability but without having to resort to creating skins from scratch directly with the Flash drawing API.

Degrafa is a declarative graphics framework for Flex (and soon for pure ActionScript projects). It makes sense using MXML like syntax for creating your graphical skins. The work the Degrafa team have done is amazing, I had a very good email conversation with Jaun Sanchez of Effective UI before my talk so that I could clarify a few things and get an insight into the future of Degrafa, especially with Flex 4 and FXG from Adobe going into public beta.

FXG is a graphical interchange format developed by Adobe and is similar in many ways to SVG. Adobe are building future tooling to take advantage of this format and enable rich graphics to be transferable between developer and designer tools. FXG is also similar in approach to Degrafa the syntax is very alike. Both have their place and advantages and disadvantages depending upon your toolset choice and project requirements.

Flash Camp session slides

Here are my session slides for Flash Camp Birmingham (UK), 16th June 2009. Taking an introductory look at Degrafa and FXG I demonstrated the code for skinning a simple UI in both implementations. The skin is part of a project i’m working on for creating a Palm Pre looking skin for Flex 3 with Degrafa and Flex 4 with FXG.

As you can see in the examples further down the page they are very visually close! The full skin will be available soon but for now take a look at the code and I welcome any comments or suggestions on my implementation.

Degrafa skin

For this skin I’m using Flex 3 and a CSS file to target the skin classes for the components. To get a Degrafa skin to match the width and height of the component you no longer need to override the updateDisplayList() method. There are two exposed variables called skinWidth and skinHeight that you should use.

The MXML structure for this Flex 3 example is simply:

	<?xml version="1.0" encoding="utf-8"?>
	<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:degrafa="http://www.degrafa.com/2007" viewSourceURL="srcview/index.html">
 
		<mx:Style source="default.css"/>
 
		<mx:TabNavigator verticalCenter="0" horizontalCenter="0" width="250" height="380">
			<mx:VBox label="Menu item 1" verticalGap="15">
				<mx:HBox>
					<mx:Button label="Button A"/>
					<mx:Button label="Button B" selected="true"/>
				</mx:HBox>
				<mx:HBox width="100%" height="50" verticalAlign="middle" styleName="preItem">
					<mx:Text text="Some Text"/>
				</mx:HBox>
				<mx:HBox width="100%" height="50" verticalAlign="middle" styleName="preItem">
					<mx:Text text="Some Text"/>
				</mx:HBox>
				<mx:Box width="100%" height="50" verticalAlign="middle" styleName="preItem">
					<mx:Text text="Some Text"/>
				</mx:Box>
			</mx:VBox>
		</mx:TabNavigator>
	</mx:Application>

Then the Degrafa button is skinned as follows (refer to the source in the download for full code):

	<?xml version="1.0" encoding="utf-8"?>
	<GraphicBorderSkin xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://www.degrafa.com/2007">
 
		<!-- use skinWidth and skinHeight for setting component dimensions -->
 
		<fills>
			<LinearGradientFill id="topHighlight" angle="90">
				<GradientStop color="#FDFDFD" ratio="0" alpha="0.8"/>
				<GradientStop color="#FDFDFD" ratio="0.2" alpha="0"/>
			</LinearGradientFill>
			<LinearGradientFill id="upFill" angle="90">
				<GradientStop color="#8A8A8A" ratio="0" alpha="0.8"/>
				<GradientStop color="#595957" ratio="0.45"/>
				<GradientStop color="#4E4E50" ratio="0.55"/>
				<GradientStop color="#686B6B" ratio="1"/>
			</LinearGradientFill>
			<LinearGradientFill id="overFill" angle="90">
				<GradientStop color="#8AA2BE" ratio="0" alpha="0.8"/>
				<GradientStop color="#525C68" ratio="0.45"/>
				<GradientStop color="#464E58" ratio="0.55"/>
				<GradientStop color="#6A7686" ratio="1"/>
			</LinearGradientFill>
		</fills>
 
		<strokes>
			<SolidStroke color="#676767" id="upStroke" weight="0.5"/>
			<LinearGradientStroke id="highlightStroke" angle="90">
				<GradientStop color="#FDFDFD" ratio="0" alpha="0.6"/>
				<GradientStop color="#FDFDFD" ratio="0.3" alpha="0"/>
			</LinearGradientStroke>
		</strokes>
 
		<geometry>
			<GeometryComposition>
				<RoundedRectangle id="buttonRect"
								  width="{skinWidth}"
								  height="{skinHeight}"
								  cornerRadius="15"
								  fill="{upFill}"
								  stroke="{upStroke}"/>
				<RoundedRectangle width="{skinWidth-1}"
								  x="1"
								  y="1"
								  height="{skinHeight}"
								  cornerRadius="15"
								  stroke="{highlightStroke}"/>
			</GeometryComposition>
		</geometry>
 
		<filters>
			<mx:DropShadowFilter color="#676767"
								 blurX="5"
								 blurY="5"
								 angle="90"
								 distance="2"
								 alpha="0.8"/>
		</filters>
 
		<states>
			<State name="upSkin">
				<SetProperty target="{buttonRect}" name="fill" value="{upFill}"/>
			</State>
			<State name="overSkin">
				<SetProperty target="{buttonRect}" name="fill" value="{overFill}"/>
			</State>
			<State name="downSkin">
				<SetProperty target="{buttonRect}" name="fill" value="{overFill}"/>
			</State>
			<State name="selectedUpSkin" basedOn="downSkin"/>
			<State name="selectedOverSkin" basedOn="downSkin"/>
 
		</states>
 
	</GraphicBorderSkin>

Download the Flex 3 source here.

FXG skin

The MXML is slidghtly different here because of Flex 4 using the new Spark components. Not all components have been created in Spark so elements like tabNavigator are still Halo components. This is not an issue as you can mix and match Halo and Spark components with certain rules like a Halo navigator can only have a Halo container as it’s first child. Inside that container you can then place Spark components.

Looking around the Flex 4 SDK there is a set of Spark skins for Halo components so that is the technique I have used here. SparkSkin is the base class for these skins so I was able to skin the tabNavigator using FXG.

Using skinnableComponent you can then hang Spark skins off them as they support skinning (obviously!). So the simple MXML structure we have is:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" backgroundColor="#333333" viewSourceURL="srcview/index.html">
 
	<fx:Style source="styles/default.css"/>
 
	<mx:TabNavigator verticalCenter="0" horizontalCenter="0" width="250" height="380">
		<mx:VBox label="Menu item 1" verticalGap="15">		
			<s:HGroup>
				<s:Button styleName="preSkin" label="Button A"/>
				<s:Button styleName="preSkin" label="Button B"/>
			</s:HGroup>
			<s:SkinnableContainer width="100%" height="50">
				<s:SimpleText text="Some Text" verticalCenter="0" verticalAlign="middle"/>
			</s:SkinnableContainer>
			<s:SkinnableContainer width="100%" height="50">
				<s:SimpleText text="Some Text" verticalCenter="0" verticalAlign="middle"/>
			</s:SkinnableContainer>
			<s:SkinnableContainer width="100%" height="50">
				<s:SimpleText text="Some Text" verticalCenter="0" verticalAlign="middle"/>
			</s:SkinnableContainer>
		</mx:VBox>
	</mx:TabNavigator>
</s:Application>

Then as an example the skin for the button in FXG is:

	<?xml version="1.0" encoding="utf-8"?>
	<s:Skin xmlns:s="library://ns.adobe.com/flex/spark"
			xmlns:fx="http://ns.adobe.com/mxml/2009"
			xmlns:ai="http://ns.adobe.com/ai/2008"
			xmlns:d="http://ns.adobe.com/fxg/2008/dt"
			minHeight="35"
			minWidth="25">
		<s:states>
			<s:State name="up"/>
			<s:State name="over"/>
			<s:State name="down"/>
			<s:State name="disabled"/>
		</s:states>
 
		<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
 
		<s:Rect id="upFill"
				top="1"
				right="1"
				left="1"
				bottom="1"
				radiusX="15"
				radiusY="15">
			<s:fill>
				<s:LinearGradient rotation="90">
					<s:GradientEntry color="#8A8A8A" color.over="#8AA2BE" ratio="0" alpha="0.8"/>
					<s:GradientEntry color="#595957" color.over="#525C68" ratio="0.45"/>
					<s:GradientEntry color="#4E4E50" color.over="#464E58" ratio="0.55"/>
					<s:GradientEntry color="#686B6B" color.over="#6A7686" ratio="1"/>
				</s:LinearGradient>
			</s:fill>
			<s:stroke>
				<s:SolidColorStroke color="#676767" weight="0.5"/>
			</s:stroke>
		</s:Rect>
 
		<s:Rect id="highlightFill"
				top="2"
				right="2"
				left="2"
				bottom="2"
				radiusX="15"
				radiusY="15">
			<s:stroke>
				<s:LinearGradientStroke rotation="90" weight="1">
					<s:GradientEntry color="#FDFDFD" ratio="0" alpha="0.6"/>
					<s:GradientEntry color="#FDFDFD" ratio="0.2" alpha="0"/>
				</s:LinearGradientStroke>
 
			</s:stroke>
		</s:Rect>
 
		<s:SimpleText id="labelElement"
					  color="#FFFFFF"
					  right="20"
					  left="20"
					  verticalAlign="middle"
					  horizontalCenter="0"
					  verticalCenter="1"/>
 
		<s:filters>
			<s:DropShadowFilter color="#676767"
								blurX="5"
								blurY="5"
								angle="90"
								distance="2"
								alpha="0.8"/>
		</s:filters>
 
	</s:Skin>

Download the Flex 4 source here.

What’s next

I’m looking to release the skins very soon and hopefully the guys at Degrafa will add it to the samples page.

If you have any feedback please leave them in the comments and please Tweet out this post.

Flash Camp Birmingham (UK) organised by the Flash Midlands user group. After a very good Flash Camp London it was always going to be interesting to see how the format would work outside of London. The answer very well!

For those of you who are not familiar with a Flash Camp it’s basically a free event run by the community for people working with or interested in the Adobe Flash Platform. It’s not a marketing event, although Adobe help with sponsorship, where prominent members of the community forego their time to come and give presentations and demos on the latest happenings with the Flash platform. And it costs nothing, how fantastic is that.

The sessions were 45 mins in length so long enough to give an insight into a particular topic kind of whetting you appetite for your own further study, yet short enough that it’s not too long until the next session.

So Birmingham it was at the Central Library theatre which was surprisingly good. A large screen and an auditorium that seated 250, the only thing that was lacking was a decent sized breakout area for mingling. There were some great sponsors, usability experts Bunnyfoot were showing off their eye tracking system and it was great to see ex colleagues Jon and Mark again. In fact it was like a mini reunion for quite a few people who I used to work with plus a good friend of mine Richard from the Birmingham Conservatoire made the event a really sociable affair.

So after a few network niggles the day started off with Adobe’s Enrique Duvos EMEA Evangelist manager introducing the latest product updates like Flash Builder, Flex 4, Catalyst and Flash player penetration rates. Enrique did a great job of setting the scene for later presentations.

The sessions

Simon Bailey was the first of us Community Experts to hit the stage on PureMVC. Great delivery but possibly a bit over the heads of some of the audience! It was a great introduction and I certainly picked up a few tips and will be heading across to his blog for more PureMVC stuff in the future.

A short break ensued before the infamous Mike Jones aka Flashgen hit the stage with a session on Flex components and a comparison between the new Spark components in Flex 4 and the old Halo components from Flex 2 & 3. Really informative session on some of the core differences between Spark and Halo right down to how the component and skinning lifecycles differ.

Adobe have really gone down the correct path on the new Spark model. It addresses many of the concerns and limitations of the old Halo model by separating out the behaviour, layout and skin of components. Mike also takes the prize of phrase of the day for “datagrids are the Marmite of the component family…” thanks to Elsa for making this public on Twitter!
Mikes session was a good precursor to my session on skinning Flex.

So I was up next with my session entitled “Skinning Flex”. I wanted introduce declarative graphics and take a look at what people can use today in their Flex 3 projects using Degrafa, then introduce FXG that arrives in Flex 4, the Creative Suite and of course Flash Catalyst. After an introduction to the basics I demoed an example using a sample from my Palm Pre esque skin. One version was done in Flex 3 and Degrafa the other Flex 4 and FXG the results were virtually indistinguishable and showed how easy both are to work with. I didn’t get to show any Flash Catalyst due to time but the later Adobe OnTour session from Adobe by Enrique showed a detailed CS > Catalyst > Flex 4 & Flash Builder demo.

Lunchtime followed and everyone was beginning to feel the heat inside the auditorium so the timing was perfect. Time for a chat and sandwich with old friends and we were back on again with Rob Bateman from Away3D up next.

I’m always very inspired and taken back by some of the Flash 3D demos I have seen (like Seb Lee-Delisle Papervision demos) and this was no exception. Many people don’t know that Away3D started life as a Papervision branch back in the day. The speed and advancement of the features always amazes and Rob is always a step ahead of the game with the vision for Away3D. I’m not a 3D expert by any means and I wished I had the time to delve into it more. Some great demos were shown and I’m sure many were left very inspired.

I didn’t catch the session on mobile and FLash Lite from Anthony and Jerome Ribot unfortunately although I heard it was an interesting session. Always good to get some mobile stuff to be shown.

After a short break the last session at Flash Camp Birmingham was a panel ready to answer questions on freelancing, contracting and how to break away from the company man. The entertaining panel consisted of Mike Jones (Flashgen.com), Stefan Richter (Muchos Media), Simon Bailey (Newtricks.com) and Ross Flemming from specialist recruitment company TEK Systems. Even the intros were great talking points hearing about how the panellists got into Flash Platform development. A few good questions were raised and answered. I personally think that having panels for open questions and discussion offer a interesting alternative to one way presentations and sessions that are usually delivered.

What followed was the prize giving and raffle. Jodie I think you have a new career if all of this Flash stuff collapses! Very reminiscent of the end of Flash on the Beach many attendees had left already to catch transport home or just to get a breath of fresh air. Of the O’Reilly books being raffled out it was obvious that the Web 2.0 book by Duane Nickull was going to be the last on on peoples wish list no offense Duane! My ex colleague Greg (part of the Away 3D team) won a copy of Flash Builder and a couple of other lucky attendees got full passes to this year Flash on the Beach courtesy of FOTB’s John Davey.

So wrapping up another great Flash Camp for me again after London. I enjoyed my session on Degrafa and FXG and looking at some tweets afterwards the audience enjoyed it too. A bog thank you has to go to all the behind the scenes help from everyone involved that made this event flow smoothly and feel organised. Thanks also to the sponsors for making it happen and keeping free for the attendees. Until the next time happy coding.

Photos

Here are some photos by Elsa from Flickr:

Videos

Here are some videos that I took with my Flip MinoHD. A great camera but in HD it picks up every little shake of your hand so apologies for the shaky cam effect it was not intentional!

See my next post for my presentation notes and code examples.

Here we go it’s Flash Camp time again but in my area of the UK the Midlands!

There is a great mix of sessions to be had by some fantastic speakers so there should be something for all including designers, developers and general others. There are some great sponsors too so come down on the 16th June but remember to register today as places are limited. Also did I mention it’s FREE!

I’m excited to be giving a session on Flex UI skinning. Always a hot topic and with many ways to enhance the engagement and appearance of your Flex applications I will cover techniques you can implement today with the fantastic Degrafa framework. While taking a peek at what will be arriving in Flex 4 and Flash Catalyst with FXG. Oh yes baby!

So please come and say hi and collect a Moo card, I’ll be happy to help with any AIR or Skinning questions you may have or even just to talk about the weather.

Yes there is life outside of London in the Flash, Flex and RIA community. So sign up now for a hedonistic day of Flash Platform activity, cool sessions and the chance to meet other great people. I’m really interested to meet others from the Midlands area who are working on interactive projects using the Flash Platform. There appears to be quite an underground scene going on with many small agencies and freelancers that I’m only just discovering on my doorstep.

Register now at Flash Camp (UK)

As part of last month’s Flash Camp in London, I took part in a round table discussion on the Flash Platform for .NET magazine (Practical Web Magazine in the USA). The NET mag issue 188 is out now in the UK and will be worldwide very soon.

The discussion was chaired by Adobe Evangelist Andrew Shorten and some key Flash platform people from the UK. Attending was myself, Mike Jones (aka Flashgen), Dave Williamson, Stefan Richter and Bola Rotibi from city analyst firm MDW Advisors.

Having had a horrendous delayed train journey down from the Midlands (thanks to Virgin Trains…) I arrived with seconds to go. The location was fabulous thanks to Chester Chipperfield lending us his apartment, even with the squeaky floor boards that you can hear on the video!

It was a wonderful experience and it’s great to be featured in the magazine, so thanks to everyone at Adobe and .NET mag.

The whole hour long discussion was recorded in HD by Adobe Evangelist Serge Jespers, some great editing on this too. Quite odd watching yourself on video…

I was super excited to give a session at Flash Camp London today to Flash creatives from around the UK.

The camp was aimed more at the designer and creative side of Flash and we wanted to show some of the new and shiny features of Flash CS4. Some great speakers attended and I was honored to have presented on the same bill as some of the most renowned and respected individuals in the Flash scene.

My session was to show how easy it is to create a cross platform desktop application using the new AIR features of Flash CS4, then how to seamlessly deploy the application using the installer badge on a webpage.

AIR applications are super easy to do now in Flash which leaves you more time to work on the creative and interactive side of your AIR apps.

I cover building a simple chromeless AIR application called ‘Flash Camp Chatter’ that gets the last 4 tweets about Flash camp from Twitter and displays them in floating clouds, not exactly going to set the world alight but fine for a quick demo. You can try the application using the installer badge at the end of this post.

The application is simple and it’s left up to the reader to add extra features like animation, effects, more error handling etc. The application is shown merely as a proof of how to create a custom chrome AIR applications quickly in Flash CS4.

As the session was only 30 minutes long it was always going to be difficult to squeeze in all of the content I wanted to show. The slide deck here is more detailed than the one I used on the day.

Session slides

Demo files

Download a ZIP file containing all of the demo files.

You will have to create your own Digital Certificate and in order to re-export the AIR files from Flash CS4. To properly test the installer badge your AIR file must be located on a web server and the server must have the correct MIME type for AIR (see example below for Apache):


AddType application/vnd.adobe.air-application-installer-package+zip .air


Install the final demo app

Unlike in my session this badge will re-launch the Flash Camp Chatter AIR application if you already have it installed.

Other sessions

The presentation material from other sessions will be available from the Flash Camp website.

Photos and reviews

Dan (@dansumption) has some great photos from Flash Camp London up on Flickr. Big thanks to Dan for permission to use his pictures for this blog post.

It makes mine look quite poor as I only took a measly 7 pics.

Marc Hibbins has done a sterling writeup of Flash Camp which you can read over on his blog.