Sorry – I just realised……. Will fix soon as!

…..or is it?

Completely forgot that I had this picture.  I got this little Linux Penguin squeezy figure at a conference, and Charlie took a shine to it.  He was happily playing away with the penguin and then I turned my back for a second and this act of vandalism was committed.  Mind you it did say unbreakable……

I’m putting together a video player and I wanted to test the scrubber (the little button you use to drag the playback) was working.  More importantly I wanted to test it couldn’t be dragged further than the video had downloaded.  So I uploaded an flv to my site and tested the player.  This was fine the first time and then the stand alone player cached the flv, so I couldn’t test it anymore.  A quick google and I found this really handy tip.

I’ve started using Last.fm and it is fantastic!  I was listening to some Armand Van Burien when I scrolled down to see what other people thought about it.  As I was scrolling down my mouse rolled over one of the images as i was using firefox it displayed the alt (caption) text as flyout text.  In the case of Last.fm this turns out to be a description of the users details.

r34c7 – you are busted.

Had this quick gotcha the other day with flex builder and I thought I’d share – mainly for myself as I’ll no doubt forget this before too long.

I was working on a Flex Library Project.  Really cool you can work on classes in the Library project and as you save them they are compiled into a SWC file in the bin directory (as long as you have Build Automatically checked in the Project Menu, that’s another gotcha that drove me made for a bit when I turned it off as I was working on a large app and couldn’t be arsed to wait the 5 mins after each save whilst the compiler built the project.  Forgetting to turn it on or build the project gave me heartfailure when I launched the swf to test it was working.)  Anyway – back to Flex Library Projects generating SWCs.  Nice.  I can then share this, or just link to it and speed stuff up by using common code.

However I’d just added another folder and a few more classes to the Library project, saved them and then went off to the flex app I was building and started coding happily away.  Rather quickly I realised I wasn’t picking up the new classes I’d added to the SWC.  I checked in the Library Project, they were there.  I saved them again – thinking that sometimes maybe the SWC doesn’t compile.  I checked that Build Automatically was turned on (see above) it was.  I deleted the SWC and resaved the new classes.  Nothing happened.  Shit – I must have corrupeted somehow!  I decided to check on of the original classes – all fine, I saved it again and – hang on – there’s the SWC.  All compiled lovely.  Great!  Back to the flex app.

Nope – it still hasn’t compiled the new classes and packages into it and I have no access.  Right now I’m ready to throw the computer out of the window when I right click on the Library project, select Properties and then Flex Library Build Path.  Aha.  Even though I’ve added files and folders they ARE NOT added to the build path.  Click on them to select them, save – and there we go.  All sorted.

So long story short – if you’re compiling a swc using a Flex Library project and it’s missing packages and classes you know should be there, check the build path.

P.S.  I think I may be going bald with all the hair I’ve pulled out.

Ok, this morning on the way to work I stopped at my normal coffee place, grabbed my coffee and sat outside so i could have a ciggarette and wake up before a hard days coding (note that employers – a HARD DAY’s CODING).

I was watching the world go by and enjoying the Diggnation podcast when a deliver truck pulled up.  The blokie driving got out and walked round to the back smoking a fag himself (note to American readers this mean having a ciggarette, not shooting someone who’s made a different lifestyle choice) and when he got round to the back of the van he pocked the half smoked ciggarette up the exhast pipe for later while he made the delivery.  OK, I suppose it wasn’t high tar enough.  However the next bit really confused me – to make clear this guy was a normal bloke, wearing normal clothes, I’m pointing this out so you understand he had pockets.  He had his lighter in his hand.  Obviously like the ciggarette he needed to put it somewhere so he could load up the little trolley for his delivery.  So he stuck it in his shoe.  Not down the side next to his foot, in the sole…….. What sort of mental gymnastics do you make to decide that this is logically the best place to put it, bypassing all pockets on the way down?

Anyway – thought I’d share.

(Also had a wierd dream that Tor (the wife) died Charlie’s (the baby) hair and it all fell out.  It’s been a strange start to a Friday)

We’ve covered an overview of the MVC pattern and how it relates to Cairngorm and we’ve set up the environment and we’ve set up the environment so we can finally start to play with some code.  Nearly.

There is one last concept to go over before we move on, Singletons,  I’m sure that most of you are happy with this concept, but for those who don’t here we go.

A singleton is a class that there can only be one of.  Ever.  To borrow a joke from someone else – like Highlander there can be only one (though this analogy doesn’t quite add up as initially there were loads of them, then they had to fight each other to whittle the numbers down to one.  However the sequals made a mockerly of this idea as ‘aliens’ got involved in a typical WTF can we do now idea to make more money out of this clearly dead horse – and ruined a fantastic film.  So to relate this to a design pattern is actually quite misleading.) (Don’t get me started on the Matrix sequals – he had clearly won at the end of the first one, why didn’t you stop there?)

Right, sorry I do tend to digress a bit (Star Wars prequals!  WTF were they all about?  On a side note when I was an actor in the London Dungeon, long story but safe to say the acting career when fantastically well , I actually made the little boy who played Anakin Skywalker cry.  So I made Darth Vader cry – sort of.  Beat that!)

I did it again, concentrate – back to singletons.  Like I said a singleton is a class that there can be only one of.  Why is this helpful?  Well if there is only one then everytime you access the class you have exactly the same data stored within t.  They can be thought of as silos of data, or memory.  They can also be bound to view components and this is where the concept of changing the model to change the view works.  This is why they are used as a major part of the Cairngorm framework.  (Lots of people don’t like singletons, and I’m still not entirely sure why)

Here is an example of a Cairngorm singleton : -

package com.worthyashes.simpleCairngorm.model
{
        import com.adobe.cairngorm.model.IModelLocator;
        [Bindable]
        public class MemoryModelLocator implements IModelLocator
        {
         //Singleton code
         private static var _instance:MemoryModelLocator;

         public function MemoryModelLocator(enforcer:SingletonEnforcer)
         {
         if (enforcer == null)
             {
              throw new Error("Like at the end of Highlander, before the crap sequal, there can be only one");
             }
         }

          public static function getInstance():MemoryModelLocator
          {
           if (_instance == null)
            {
                _instance = new MemoryModelLocator(new SingletonEnforcer());
              }
            return _instance;
            }
            //End of singleton code

           //Pop your vars into the model from here on
      }
}
class SingletonEnforcer{}

Lets go through the code

[Bindable]

public class MemoryModelLocator implements IModelLocator

The [Bindable] keyword makes this class available for flex bindings so it is possible to directly bind the ModelLoactor and it’s subsequent variables to the view components as discussed above.

A Cairngorm Singleton is also known as a ModelLoactor and implements the IModelLocator interface. (For a discussion of interfaces you’re going to have to do a bit of a google.  I understand them, understand how and why to use them, but for the life of me I can’t actually put into words why – I’ll have a go at a later post)

Now for the slightly mind bending bit, once you’ve got the hang of this it will all become clear.

private static var _instance:MemoryModelLocator;

This variable _instance, the underscore is there to indicate it is a private variable (the private keyword does that really, the underscore is more a visual reminder in the code), holds a reference to the MemoryModelLocator class.  Which is the class that it is in.  So it holds a reference to itself, in itself.  Which you’d imagine would have another _instance variable, but the keyword static indicates that this variable is always the same in every single instance of this class.  So every time you access the Singleton after it has initially been instantiated you are getting the same class back.  I’ve just re-read that, I think it makes sense – if not then send me a mail and I’ll re-work that paragraph.

Now onto the constructor.  In order for a singleton to work we need to only ever create one at any time.  This means we DON’T want to be able to call the constructor directly, as this would instantiate a new class.  By convention we call a static function called getInstance() (It doesn’t have to be called this, but as it’s a convention I recommend you stick to it) that returns an instance of the class.

Singletons in AS2 were easier to do.  This was because it was allowed to create a class and set the constructor to be private.  So you’d write something like : -

private function MemoryModelLocator()
{
}

However you can’t do this in AS3.  So we have a hack.  The Cairngorm team have acknowledged it as a hack, so I’ll say it too, hack, hack, hack.  To understand how this hack works we need to look at the new package structure of AS3.  In this case : -

package com.worthyashes.simpleCairngorm.model
{
//The class goes in here
}

Now if I put another class in this package (folder) I would be able to instantiate the MemoryModelLocator class without importing it and use the functions within it.  I could create an instance of the class without any bother at all, and we want to stop this.  So we create a class outside the package declaration.

//End of class
}
class SingletonEnforcer{}

This class is outside the curly brackets that close off the package, and is not available to ANY class except for the MemoryModelLocator class.

So if we pop an instance of this Singleton enforcer class into the constructor of the MemoryModelLocator class then we can force the MemoryModelLocator class to only ever be instantiated by itself through the getInstance() function.

So the constructior is : -

public function MemoryModelLocator(enforcer:SingletonEnforcer)
{
if (enforcer == null)
{
throw new Error("Like at the end of Highlander, before the crap sequal, there can be only one");
}
}

and the getInstance() function looks like this.

public static function getInstance():MemoryModelLocator
{
if (_instance == null)
{
_instance = new MemoryModelLocator(new SingletonEnforcer());
}
return _instance;
}

To go through this and explain it, remember that the _instance variable is static and therefore will be the same every time this class is accessed.  What we do with the getInstance() call is to first of all check if the _instance variable exists.  If not then we create it by calling the constructor with an instance of the SingletonEnforcer class.  This can be accessed by the getInstance() function as it is in the MemoryModelLocator class.  Then we return the _instance variable.  So if we make the call to the getInstance() function in the MemoryModelLocator we will ALWAYS get the same Singleton.  As it is a static function (which it has to be so we can call it and return a static variable) we use it slightly differently, like this : -

var model:MemoryModelLocator = MemoryModelLocator.getInstance();

Right – hopefully that all made sense.  It’s a bit confusing, but hopefully once you see the ModelLocator in action it’ll all be made clear!

OK – so they forgot to tell me it was for flash player 8.  Oh well.  So I’ve done it for ActionScript 2 with some controls for testing.

Papervision 3d AS2

Have fun!

OK, not much to write home about, but as a first go I’m quite pleased with myself.

Have a butchers!

In Part Four we tidied up the code a bit with another class I’ve called CustomPreloader to extend the DownloadProgressBar class and hold the required functions for CustomPreloaders.  Now if we extend the CustomPreloader class all we need to do is override the listener functions to control our preloader.  So lets have a look at another example.

In this case we are going to use the timeline on the MovieClip to display the download time.  All I’ve done is create a Flash File and a preloader MovieClip within it.  Then in the preloader MovieClip i made it have 100 frames and on each frame I put the text “Frame 1″, “Frame 2″ etc.  You can get the example from here -> Timeline Preloader FLA

Now the code.

package com.worthyashes.preloaders
{
	import flash.display.MovieClip;
	import flash.events.ProgressEvent;

	public class TimelineCustomPreloader extends CustomPreloader
	{
		private var preloadMovieClip:MovieClip

		[Embed(source="assets/swf/timeline.swf",symbol="preloader")]
		private var PreloadAssets:Class;

		public function TimelineCustomPreloader()
		{
			super();
			preloadMovieClip = new PreloadAssets();
			addChild(preloadMovieClip);
			preloadMovieClip.gotoAndStop(1);
		}

		private function centrePreloader():void
		{
			x = (stageWidth/2) - (preloadMovieClip.width/2);
			y = (stageHeight/2) - (preloadMovieClip.height/2);
		}

		override protected function preloadStarted():void
		{
			centrePreloader();
		}

		override protected function downloadProgress(event:ProgressEvent):void
		{
			var percent:int = Math.floor(event.bytesLoaded/event.bytesTotal*100);
			preloadMovieClip.gotoAndStop(percent);
		}

	}
}

And we change the code on the Application tag in the MXML to be

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”horizontal”
preloader=”com.worthyashes.preloaders.DynamicPreloader”>

So we are pointing to the correct class.  Lets quickly go through the code, as it is quite straightforward.

public function TimelineCustomPreloader()
{
super();
preloadMovieClip = new PreloadAssets();
addChild(preloadMovieClip);
preloadMovieClip.gotoAndStop(1);
}

The only change we have here is we need to stop the preloader playing as soon as it is instantiated.

override protected function downloadProgress(event:ProgressEvent):void
{
var percent:int = Math.floor(event.bytesLoaded/event.bytesTotal*100);
preloadMovieClip.gotoAndStop(percent);
}

As we go through the download as we work out the percentage downloaded we round off the figure and then tell the clip to display (and stop at) that frame.

Click here to have a look.

Right – well that should give you a good idea how you can use a Falsh MovieClip in a swef as a preloader for flex and how to control it.  What about somethign a bit more interesting?  What if you wanted to create a preloader but not use any Flash assets at all, and do it totally dynamically?  OK – lets have a go.

Lets look at the DynamicPreloader.as

package com.worthyashes.preloaders
{
	import flash.events.ProgressEvent;

	public class DynamicPreloader extends CustomPreloader
	{
		private var preloadSprite:DynamicPreloadDisplay;

		public function DynamicPreloader()
		{
			super();
			preloadSprite = new DynamicPreloadDisplay();
			addChild(preloadSprite);
			trace("New dynamic preloader");
		}

		private function centreSprite():void
		{
			x = (stageWidth/2) - (preloadSprite.width/2);
			y = (stageHeight/2) - (preloadSprite.height/2);
		}

		override protected function preloadStarted():void
		{
			centreSprite();
		}

		override protected function downloadProgress(event:ProgressEvent):void
		{
			preloadSprite.displayDownload(event.bytesLoaded/event.bytesTotal*100);
		}

	}
}

Lets go through the code – it won’t take long .

First look at the variables

private var preloadSprite:DynamicPreloadDisaply;

This is the preloader that we will dynamically create.  We instantiate it in the DynamicPreloader constructor. (NOTE: I left the trace in so if you run this code through the debugger it will trace to the console even though flex hasn’t started properly yet)

Finally we need to send the percent downloaded to the DynamicPreloadDisplay class, so we trigger a function I’ve called displayDownload

override protected function downloadProgress(event:ProgressEvent):void
{
preloadSprite.displayDownload(event.bytesLoaded/event.bytesTotal*100);
}

Lets now look at the DynamicPreloadDisplay.as

package com.worthyashes.preloaders
{
	import flash.display.Sprite;
	import flash.filters.BevelFilter;
	import flash.filters.DropShadowFilter;
	import flash.filters.GlowFilter;
	import flash.text.TextField;

	public class DynamicPreloadDisplay extends Sprite
	{
		private var percentText:TextField;
		private var line:Sprite;
		private var totalLineWidth:int = 260;

		public function DynamicPreloadDisplay()
		{
			drawBackground();
			addText();
			addLine();
			createFilters();
		}

		private function drawBackground():void
		{
			graphics.beginFill(0x666666,1);
			graphics.drawRoundRect(0,0,300,100,10,10);
			graphics.endFill();
		}

		private function createFilters():void
		{
			var bevel:BevelFilter = new BevelFilter();
			this.filters = [bevel];
		}

		private function addText():void
		{
			percentText = new TextField();
			percentText.width = 300;
			percentText.x = 20;
			percentText.y = 20;

			var glowFilter:GlowFilter = new GlowFilter();

			percentText.filters = [glowFilter];

			addChild(percentText);
		}

		private function addLine():void
		{
			line = new Sprite();
			line.x = 20;
			line.y = 40;

			addChild(line);
		}

		public function displayDownload(percent:int):void
		{
			line.graphics.clear();
			line.graphics.lineStyle(2,0x00ff00,1);
			line.graphics.beginFill(0xffffff,1);
			var lineWidth:int = totalLineWidth*percent/100;
			line.graphics.drawRect(0,0,lineWidth,15);
			line.graphics.endFill();

			var dropShadowFilter:DropShadowFilter = new DropShadowFilter();
			line.filters = [dropShadowFilter];

			percentText.text = percent.toString() + "% Downloaded";
		}

	}
}

Again lets go through the code.  The DynamicPreloadDisplay extends the Sprite class.  This gives us access to the drawing api and a sprite to display the preloader in.

Constructor : -

public function DynamicPreloadDisplay()
{
drawBackground();
addText();
addLine();
createFilters();
}

When I’m coding I like to pull things out into individual functions that do one thing (well that’s what i try to do) this means that if I need to fix something I’m normally only looking at one specific problem at a time.

Draw Background function

private function drawBackground():void
{
graphics.beginFill(0x666666,1);
graphics.drawRoundRect(0,0,300,100,10,10);
graphics.endFill();
}

This merely draws the background.

Add Text

I want to have a text field to display the percentage downloaded so I create one on the fly.  Note that we create this after the background.  If we did it the other way round the background would be on top of the textfield.

private function addText():void
{
percentText = new TextField();
percentText.width = 300;
percentText.x = 20;
percentText.y = 20;
//Add a filter for a laugh
var glowFilter:GlowFilter = new GlowFilter();

percentText.filters = [glowFilter];

addChild(percentText);
}

Now I want to create a line to display how much has been downloaded visualy

private function addLine():void
{
line = new Sprite();
line.x = 20;
line.y = 40;

addChild(line);

}

The line is another sprite held by the DynamicPreloadDisplay sprite.

Finally – and this is just to demonstrate that this is possible – I’ve added a filter to the background.

private function createFilters():void

{

var bevel:BevelFilter = new BevelFilter();

this.filters = [bevel];

}

The last function to look at is the displayDownload function

public function displayDownload(percent:int):void

{

line.graphics.clear();

line.graphics.lineStyle(2,0x00ff00,1);

line.graphics.beginFill(0xffffff,1);

var lineWidth:int = totalLineWidth*percent/100;

line.graphics.drawRect(0,0,lineWidth,15);

line.graphics.endFill();

var dropShadowFilter:DropShadowFilter = new DropShadowFilter();

line.filters = [dropShadowFilter];

percentText.text = percent.toString() + "% Downloaded";

}

We clear the graphics from the line sprite.  Then we define the line style and fill.  If you want to understand this a bit better then please look at the Flash Drawing API.  Again I’ve applied filters just for the sake of it.

Finally we set the percentText to the percent downloaded.

Click here to see it working.

Well – I apologise for the shocking design but I hope this has given you a good overview of how to implement and create custom preloaders for Flex.  Have fun!