AlecMcE.com

Just before I left for San Francisco, I was asked to work on the Mr Tayto website for Yomego. During my time at Yomego, I was mostly working on big projects, some of which never really saw the light of day. This was a bit of light relief.

The website was well received, Creative News attributing some of the success of the book to the website and the surrounding social media campaign.

The site itself was assembled in under two weeks by myself and Colin McKinney. The page turning mechanism was built from scratch in that time in order to guarantee integration with the initial animation sequence, the bookmark turn effects. More polish could have been applied with a longer time-frame, but this was not a bad effort, in the circumstances.

Some more programmatic snow:

This one is more simple, though the logic is exploded over multiple classes. You can get the source files here. I create a bunch of BitmapData objects with semi-transparent circles to represent snowflakes, called FlakeForms. Then, create a bunch of Flake objects which are essentially positions at which those formal flakes should be drawn. Each EnterFrame, wipe the BitmapData clean, update the flake positions and draw the formal flakes into the updated positions.

Read the rest of this entry »

I’ve started using Tweensy after realising that TweenMax requires a license fee for commercial use. Though my personal use is seldom commercial, why learn a library that’s useless to me when I am doing commercial work?

Firstly, a big nod to Shane McCartney, who has done the hard work of creating this new tweening library.

A new library means learning a new syntax. As I go, I will post a few things that I learn along the road, since as yet, Tweensy is not that widespread:

A Simple Tween

To tween an object’s position you can use a static method, like TweenMax:

Tweensy.to(myDisplayObject, {x:300, y:100});

It will tween over half a second, unless you add a third parameter indicating the duration of time. This is very close to TweenMax. The static method produces a TweensyTimeline, or you could just create a new TweensyTimeline and add the various properties to it.

A Color Tween

To tween an object’s color, you can create a TweensyGroup and add a colorTransformTo call to it.

var tween:TweensyGroup = new TweensyGroup();
var color:ColorTransform = new ColorTransform();
color.color = 0xFF0000;
tween.colorTransformTo(myDisplayObject, color);

A TweensyGroup I thought? I bet you can tween more than just one item simultaneously with that. And so you can:

Roll-over to trigger the tweens. Click outside when you’ve had enough! If for some odd reason you want the source then you can download it here.

A bit of API confusion

As yet, I’m not really clear what is the difference between a TweensyGroup and a TweensyTimeline. I’m sure it will become apparent. You can’t call TweensyTimeline.colorTransformTo though TweensyGroup.colorTransformTo returns a TweensyTimeline. My suspicion is that Shane spends longer at the chalk-face of creating his extremely impressive BitmapData effects than he does doing the dull-but-important job of ensuring that his API is clean and tidy. Alternatively, there may be a very good reason for the API decision, in which case I am extremely sorry for that supposition.

I am doing some work on isometry and wanted to check how primitive objects look if they are not rendered isometrically… so I changed my “metrics” object to a non-isometric renderer, and this is the result! (It has an identical code base to my ‘isometric fun’ with one class of about a dozen lines substituted in). It is both pretty, and architecturally elegant, so I thought I’d share it here.

Oh, and it qualifies as a non-unit test test case for my other “metrics” class – test driven development cannot always be done through a test runner.

Test Driven Development is a wonderful thing. When I am calm, not under the pressure of deadlines and working most effectively, I would argue that TDD is the optimal way of working. Unfortunately, UI testing does not sit easily within TDD. To really check that graphical code works, you need to see it.

I was working back through isometry logic that I did almost a year ago, revisiting and writing fresh libraries for a project that my company is working on. I found myself needing to visually test that rendering cuboids in isometric space works exactly as I expect it to. It’s one thing for ASUnit to ‘run green’ in the test cases that I could pre-calculate, and quite another to see all these lovely cuboids drawn out. These tests are useful additions to the suite of work, and I thought it was fun enough to share.

I had a lovely little distraction from normal work a couple of weeks ago: our designer Colin was creating some banner ads for Eircom’s Goal Machine game, and wanted a ’spinning football’ effect to go into an animation.

It’s a small thing, and not my day-to-day job by any means, but a bit of programmatic animation was a welcome change from the long haul of UI, MMO and avatars.

The football was created using a DisplacementMap. It’s unusual to find a DisplacementMap example that isn’t a map of the Earth, but it works in the same way as all of those others, with the container being rotated as it goes.

A tutorial will follow, but the Displacement Map is about the most complicated bit of Flash to follow, particularly if you’re not a mathematician, so it will take some time to explain clearly! Watch this space.

The designer Colin at our work uses the Flash IDE to create avatars and other animations, which we then import into applications and fiddle about with. He’s not very handy at working out where the registration point of a clip should go before he’s done the animation (for lots of good arty reasons), and we don’t really want him to nest an animation inside another MovieClip to correct the problem because it’s a bit messy to have to drill into the display list to find an animation.

If you have multiple frames of animation over multiple layers, there’s really no good way of moving all the elements in one go (or if there is, neither Colin nor I know about it), so I’ve created this little JSFL script wrapped into a Flash front-end for him.

This swf needs to be installed into your installation folder to function, which depends on your OS and Flash version. The paths for CS3 are:

• (WinXP) C:\Documents and Settings\[USER]\Local Settings\Application Data\Adobe\Flash CS3\[LANG]\Configuration\WindowSWF
• (OSX) /Users/[USER]/Library/Application Support/Adobe/Flash CS3/[LANG]/Configuration/WindowSWF

where [USER] is your username, and [LANG] is your language (probably “en”).

What it does is pretty simple: Whatever is on stage at the time will all get moved by the amount you specify. It will not respect locked layers, if it’s an element on stage, it’s getting moved!

Source FLA

You are welcome to inspect the source, compile it yourself, so-on and so forth. The source FLA is here. If you do download the file, you will note that I embedded the jsfl code into the fla, wrapped into an XML cdata tag. This is just because you’re not allowed to break Strings across lines in the Flash IDE Actions panel.