Projector issues in CS3

Working on a kids game now that we’ll deliver as a projector for both Mac and PC and thought I’d share a few Gotcha’s I’ve gotten in the process. These relate to unloading movieclips, FLV playback, Events, AS3 vs designers and Shared Objects. The game is a classic kids game with an animated story that ties together some 30 mini-games.

Sounds in MovieClips
In former versions, you’d just unload a movieclip to stop whatever it was doing. This does not apply to AS3. If a sound is playing inside a MovieClip, the new AVM will not dump this object from memory as planned - unless you actively stop all sounds playing. In the game, we have a framework that loads several SWFs into one of two Loader’s.

When a new clip is loaded, the old SWF will fade out and the new one fade in, but since all sounds need to be on the timeline (so the animators can sync the animation to it) we have no programmatic means of stopping sounds in the loaded SWFs. The problem is that since the SWF won’t unload, it may also start playing at the wrong time since some references are left behind. When you have 4-5 movieclips with sound playing on top of each other, it’ll really screw up the experience so we needed a way to stop all sounds exactly when the file was unloaded. By stopping the sound, the clip would unload as it should.

Our best option was to find a clever time to issue the SoundMixer.stopAll command. This was the solution we came up with:

function stopMovieClip(e:Event):void{
	SoundMixer.stopAll();
	if(mymovie){
		mymovie.gotoAndStop(1);
		mymovie.visible = false;
	}
}
mymovie.addEventListener(Event.REMOVED_FROM_STAGE,stopMovieClip);

This script will make Flash stop all sounds as soon as it unloads the animation movieclip (mymovie) fully.

FLV playback
The game has a 1024x768 pix resolution. We use Alpha transparent video to some extent as well as digitized clips from a TV show (768x540 pix resolution). For modern machines, TV resolution is not a problem, but if you use a 1024x768 alpha transparent video with a bunch of visual assets above and below the video layer, you are bound to run into problems.

There’s a few ways to solve this that we’ve applied. Firstly, crop the video as much as possible. We use the alpha for keying out a person, so unless there is movement all over screen, remove any areas where the person won’t be. This saves a lot of CPU since Flash then won’t need to render transparency for that area. The next trick is to combine all the static layers you may have behind and in front of the video. Then turn on Bitmap Caching for all these layers. That’ll boost performance incredibly! We went from 0.5 fps to full 25fps just by applying these tricks.

We also stumbled onto what is not a bug, but rather an incredibly poor decision. When playing back our projector, all video’s would layer on top of all other elements. We thought this was a bug in the FLVPlayer component but finally found this page that showed us the answer (thanks!). Some not-so-smart developer at Adobe must have loved FullScreen video so much that he/she figured that it had to be enabled by default. By just setting

FLVPlayerComponent.fullScreenTakeOver = false;

the problem was solved.

Events
Bubbling events will bubble from the Stage, through your hierarchy of objects until they reach the issuing object (i.e. a MovieClip or timeline). Keep that in mind and be sure you read carefully what events classes each asset supports. The Loader class is especially messy and you’ll need to listen to both the Loader itself and the Loaders “contentLoaderInfo”.

One thing that kept biting me was foolish things such as loading a file that added an event listener to the stage, but did not remove it upon unloading. Make sure all your classes clean up after themselves, or the objects may be stuck “in limbo”. The rule is: if you addEventListener, you have to removeEventListener - always. Use Event.REMOVED_FROM_STAGE to trigger the remove-events.

AS3 vs designers
I’m not 100% sure, but it seems that for designers that learned AS2, it’s more difficult to learn AS3? I think the AS3 way of doing things are more obvious, but all the animators on the project said that they “hate CS3” since it’s no longer easy for them to control simple things such as buttons and Movieclips. I do however think that this may have changed over the the project has progressed and they’ve gotten used to AS3 and especially how events work. Once you understand how flexible Events are, you’ll probably love them.

To make dispatching and receiving events as painless as possible, I made a custom Event class that I documented in a Wiki, so the designers could more or less cut and paste pre-made commands that would trigger stuff in the Framework. Worked like a charm.

Shared Objects
The game stores usernames, progress and more as Shared Objects. In former versions, these were really flexible and just “magically” worked no matter how you structured them. AS3 is different. My projectors would crash upon creating the Shared Objects, for no apparent reason. It took some time to find the solution and it wasn’t exactly obvious. First you’ll need to make a class that describes and stores your data so you can easily manipulate and instance it:

new GameUser(); 

This also makes it easy to Serialize the class/object using the command “registerClassAlias”. I found the solution on Tushar Wadekar’s blog and figured how to apply it to my project. After using this, the Projectors have been 100% stable.

PS: If you read this, you may wonder why I did this game using the standard projector tool in CS3 and not a third party wrapper app? It’s simple - there are no AS3 Projector tools as of today that could do the job. MDM’s Zinc supports it, but when running video the framerate was unacceptable. Working with Flex (and use Janus) was also out of the question since virtually all the assets are animation and the designers need CS3 for that. The workflow would be hard to solve and give a lot of extra work, so I used Flex just as a code editor and compiled all files in Flash CS3. Using AS2 was also impossible from a performance/feature perspective. I made a really sweet drawing program as part of the game and this required the speed of AS3. The cute dude at the top of the article is the color-picker in the game. You drag his arms and legs to change the color…