You have a Flash app… its sweet, all working on every browser, every platform… until the client calls up and says “its crashing on Firefox Windows”. You do not believe the client. How can that be? Its Flash. Its supposed to be consistent across all browsers. But no… we have suffered DEEP nightmares with browser-specific issues in Flash recently.

This one is a quick fix.

If you are suffering crashes with your Flash app in Firefox Windows, or you have a textfield that is not responding to the PC input of the “@” symbol… but only to where the symbol would be on a Mac – ie. SHIFT-2, then check to see if your Flash app’s HTML container has the “wmode” parameter explicitly set. If it IS set, remove it. In our case, this fixed the app, and saved our day from a hellish and probably soul-destroying bug-hunt.

We are using SWFObject to embed the app. Here is the culprit:

Not working

var flashVars = { vars: "notShown" };

var flashParams = {
menu: "false",
allowScriptAccess: "sameDomain",
scale: "noscale",
wmode:"opaque" };

swfobject.embedSWF("app.swf", "flashContent", "950", "600", "9.0.0", "/assets/swf/expressInstall.swf",  flashVars, flashParams, {id:"appID"});

Working

var flashVars = { vars: "notShown" };

var flashParams = {
menu: "false",
allowScriptAccess: "sameDomain",
scale: "noscale" };
*** NOTE - wmode param removed ***

swfobject.embedSWF("app.swf", "flashContent", "950", "600", "9.0.0", "/assets/swf/expressInstall.swf",  flashVars, flashParams, {id:"appID"});

Over a short series of articles, I hope to shed some light on the reasons. To sum them up:

1. Every time you save a class, your app compiles in the background – meaning you NEVER need to wait for that “Exporting SWF Movie” dialogue box ever again. This alone is enough once you get into a big app…
2. SVN support – in layman’s terms, great version control. You work on a class, and when you are happy, you save (”commit”) a new revised version with comments as to what you’ve done. When your app reaches a stable state, you can save it all as a safe working version and press on. You can always compare old versions and retrieve them if need be.
3. Profiling your apps – if you’ve been used to relying on “trace” statements to debug your apps, you will not believe the precision with which you can dig into the performance of your apps. As well as realtime memory graphs, there are many excellent tools available. For example – loitering objects – take two snapshots of your app’s memory usage over time as it runs, and you can compare the two, seeing not only what objects are still hanging around, but where they came from in the first place – astonishing!
4. Testing in the browser – you get a much better feel for how things will really work
5. Creating Flex libraries – for many Flash devs, this is a bit of a nightmare at the beginning, as we’ve been used to setting one preference to give all projects access to whatever classes we like. Its a bit more complex in Flex, but once you’ve compiled your most useful classes, its a breeze to export and use them, and all makes sense

The aforementioned app is built in PureMVC, and is due pretty soon, so I don’t imagine I’ll have a chance to publish anything before then… but I do hope it will help people through the “banging head off wall” phase that I went through on the early days of trying to make the app work in Flex Builder.

Steve has done a few seminars for Apple, being a bit of an evangelist for their Logic Studio software, but showing MainStage is a new departure. He used it live when touring with French band AIR a couple of years ago, claiming it was a “dream come true” for live performance using a laptop.

Just launched a minimalist 3D Flash showcase site for a lifestyle store in London – Bermondsey 167.

The idea was to use “tags” behind the scenes so that various “rooms” could be generated easily and quickly without any limitations. Tags can be visible frontside or hidden – for example, everything tagged *init appears on the homepage but that tag is never actually visible to users. This allows a more organic browsing experience that you would have if you went into the shop – one second you are looking at the beautiful shirts of Michael McGrath’s label M2CG, but you turn round and you’re looking at his equally stunning mirror tables and units. Similarly a bright top on the site tagged with “colour” can be clicked to generate a ‘room’ with just colourful items from bookends to photos to a cotton slipover.

Its a quirky shop, with quirky owners and a quirky little dog running around… but that is all part of the character, and it was a lot of fun.

Technical Notes

The site was built using Papervision3D, PureMVC and CodeIgniter for the backend system. SWFAddress was employed for deep linking as we are now doing by default on every Flash project. Some old school 3D Studio Max skills were wheeled in courtesy of Lee (Ellis) to give an element of sheen not possible with PV3D yet.

This was Steve’s first ActionScript build using PureMVC and he had this to say about it:

“For apps and Flash sites on this scale, PureMVC is great – communications between modules becomes a lot easier, and despite the huge amount of casting involved (wrecking the poor old typing fingers) it was definitely worth using the framework for the B167 project. It seems to me that every framework has positives and negatives, but sometimes its just nice to know that there is an underlying architecture that makes scaling up easier should the need arise. Halfway through this build, the client wanted some deep changes to parts of the site, but there was no backtracking whatsoever… we just built a whole new section, plumbed it in and that was that.”

Weighing in at 84k its a pretty good example of writing a nice little Flash engine that can flex its muscles and just handles loads of data and information.

swfobject.embedSWF("darey_v2.swf", "flashContent", "100%", "100%", "9.0.0", "assets/swf/expressInstall.swf", null, params,null);

and it didn’t work… but I changed it to this:

swfobject.embedSWF("darey_v2.swf", "flashContent", "100%", "100%", "9.0.0", "assets/swf/expressInstall.swf", {}, params, {id: "dareysite"});

… and its all sweet – note the extra {id:"id_goes_here"} bit as the last argument to the static embedSWF function.

I’ve just been coding up a short script to crossfade video stills as you flick through using a navigator. I won’t go into the full code, but let’s suppose you have an array of display classes that hold images, and you are just looping through them. If you have a function called say 'showImage' with one parameter 'state' which is set to true or false – depending on whether you want to show or hide the image – then with TweenLite, you can do this:

public function showImage(state:Boolean) : void
{
  TweenLite.to(this, state?0.5:1, {alpha:Number(state), visible:state});
}

And that’s it. What that means is that if you call 'showImage(true)' on one of your objects, it will have its 'visible' property set to true, and fade to full visibility in 0.5 seconds. If you call 'showImage(false)' on one of your objects, it will fade to alpha zero in 1 second (causing a nice overlap), then have its 'visible' property set to false on completion. Nice one, Jack.

If you haven’t that many objects, and don’t want to have to load up your server with a stack of calls to reload images, this is a cool little routine. If you want source code, just comment… I’ll see what I can do.

Edit: following a comment by @Justin Flash I’ve found there is an even quicker way…

public function showImage(state:Boolean) : void
{
  TweenLite.to(this, state?0.5:1, {autoAlpha:Number(state)});
}

This assumes the “autoAlpha plugin” is activated in your TweenLite constructor.

We are delighted to be working with Suburbia Media again, this time for the launch of their stunning new magazine for Condé Nast – LOVE. When we saw the artwork, it was such a joy. Yet again, it was a case of trying to create something that transparently presented the excellent work of Stuart Spalding and Lee Swillingham without getting in the way. The guys like Flash, so we just created a slightly more involved slideshow with a liquid layout and fullscreen option.

Just delivered the beta version of Animals Are NOT Rubbish for Orion Children’s Books.

The idea behind it is a competition where children have to make models of animals from recycled rubbish. They have support from Waterstone’s booksellers and the Born Free Foundation so it should be a good campaign.

It was mostly done in straight HTML/CSS, but we thought it would be nice to actually make the recycled animals idea in an intro sequence where rubbish was whipped up and moved around to make some animals. The end result is fun, and quite hypnotic. Thanks to Jack Doyle for the excellent tweening engine TweenLite which we used on the project and recommend.

The artwork all came from books by Lauren St John whose site we did last year. The artist, David Dean, has commanded great respect from all at G-RAFF for such lovely attention to detail, which made it easy to recycle the work for a website.

First thing I noticed was that the API situation for Flash was pretty woeful, so I’m writing a bunch of new “TwitterService” classes right now – starting from scratch – and will “tweet” the URL to the ZIP of AS3 files when I’m done. If anyone else fancies jumping in to develop them, that will be cool.

G-RAFF ON TWITTER

Manically busy at the moment, hence the sorry lack of updates. Moving into a new office next week, writing a killer PureMVC/PaperVision3D app for a big company you all know, working on a lovely trio of sites for Nigerian superstar Dare Art Alade, microsite for Orion Books, a great new community-funded film site, new stuff for Suburbia Media as they launched LOVE magazine, just about to go live with Bermondsey 167… the list goes on.

We’re also looking for freelance Flash developers if anyone is around. Familiarity with PureMVC will be a good help. Please don’t even launch your email client unless you are serious.

EDIT: Now 00:10 on Sunday night (no, its not Monday morning until I wake up) and I have just launched FlashTwitter as an open-source beginning to a decent Flash API for Twitter. I’ve had fun during the day, and hope this will be of some use.

Suburbia Media are celebrating 20 issues of their seminal fashion magazine Pop. They asked us to deliver a simple Flash intro which shows all the covers from the issues. So here it is.

Slightly trickier than it looks, its a liquid layout that makes the most of the user’s browser window space, including a switch to full screen to see the covers at their best. The guys decided they wanted minimum acceptable sizes and margins, so all that needed to be thought out… but we’re used to such attention to detail so it was a nice smooth, enjoyable little project.