Archive for 'Flex'

Aug200925

0

Sony Quantum Code Award Wrap-up

This will be my last post on this – I promise. :)

While at my previous role at Massive, I had the privilege to work with some incredibly talented people on some fairly heavily-awarded projects, such as V8 Supercars, the Sydney to Hobart Yacht Tracker and the BigPond Movies Viiv application.

After leaving Massive I didn’t think I could top that, but one of the first projects I worked on at Euro late last year has come pretty close. Here’s what we’ve picked up to date (I might be missing a few more):

Awards

Nominations

Apr200922

0

Quantum Code Nominated for a Webby

Another (potential) success for Euro & Sony’s Quantum Code campaign – nominated for a Webby in the Integrated Mobile Experience category.

You can choose your pick for best of the Net by voting at the Webby People’s Voice site.

Mar200931

6

Flash Smoke Effect using DisplacementMapFilter

Inspired by David Lenaerts’ awesome smoke simulation using Alchemy, I wondered if a similar effect – pushing smoke around with the mouse – could be achieved using Flash’s DisplacementMapFilter. As with David’s simulation, click to add smoke and move the mouse to create wind.

displacement_smoke

There’s a great explanation of how DisplacementMapFilter works over at Emanuele Feronato’s blog, so I won’t repeat it here. The smoke effect is on the left, and on the right is the displacement bitmap that gets applied to the smoke image on each frame. To simulate wind, as the mouse is moved I add or subtract from the red and green channels using ColorTransform. The faster the mouse is moved, the more I add or subtract. To simulate the wind settling down, I apply a BlurFilter and another ColorTransform to cause the displacement map to converge towards 0x80C000 (no horizontal movement, slight upwards movement).

While not nearly as impressive as David’s more realistic simulation, I’m pretty happy with what can be achieved with simple bitmap displacement. I experimented with adding Perlin noise to prevent the smoke from getting too static when the mouse isn’t moving and got some really cool results, but have decided to keep things simple for now. Maybe in a future post.

Here’s the source. It was built in FlexBuilder as an ActionScript project, but wouldn’t be hard to convert to compile in the Flash IDE.

package
{
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.filters.BlurFilter;
    import flash.filters.DisplacementMapFilter;
    import flash.geom.ColorTransform;
    import flash.geom.Point;
    import flash.geom.Rectangle;

    [SWF(width='1024', height='512', frameRate='30')]
    public class DisplacementSmoke extends Sprite
    {
        internal static var BITMAP_WIDTH:Number = 512;
        internal static var BITMAP_HEIGHT:Number = 512;
       
        internal static var WIND_SIZE:Number = 80;
        internal static var SMOKE_SIZE:Number = 10;
       
        internal var smokeBitmap:Bitmap;
        internal var displacementBitmap:Bitmap;
        internal var drawing:Boolean = false;
        internal var xPos:Number;
        internal var yPos:Number;
        internal var displacementFilter:DisplacementMapFilter;
        internal var blurFilter:BlurFilter = new BlurFilter(3, 3, 1);
        internal var windColorTransform:ColorTransform;
        internal var smokeColorTransform:ColorTransform = new ColorTransform(1, 1, 1, 1, 20, 20, 20);
        internal var dampingColorTransform:ColorTransform = new ColorTransform(.97, .96, 0, 1, 5, 9, 0, 0);
        internal var heatColorTransform:ColorTransform = new ColorTransform(1, 1, 1, 1, 0, 2, 0, 0);
        internal var bitmapRect:Rectangle = new Rectangle(0, 0, BITMAP_WIDTH, BITMAP_HEIGHT);
        internal var rect:Rectangle;
        internal var p:Point = new Point(0, 0);
       
        public function DisplacementSmoke()
        {
            smokeBitmap = new Bitmap(new BitmapData(BITMAP_WIDTH, BITMAP_HEIGHT, false, 0x000000));
            displacementBitmap = new Bitmap(new BitmapData(BITMAP_WIDTH, BITMAP_HEIGHT, false, 0x80C000));
           
            addChild(smokeBitmap);
            addChild(displacementBitmap);
            displacementBitmap.x = BITMAP_WIDTH;
           
            stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
            stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

            displacementFilter = new DisplacementMapFilter(displacementBitmap.bitmapData, p, 1, 2, 5, 5);
            smokeBitmap.filters = [displacementFilter];

            addEventListener(Event.ENTER_FRAME, enterFrameHandler);
        }
       
        internal function mouseDownHandler(event:MouseEvent):void
        {
            drawing = true;
        }
       
        internal function mouseUpHandler(event:MouseEvent):void
        {
            drawing = false;
        }
       
        internal function enterFrameHandler(event:Event):void
        {
            var i:Number;
            var j:Number;

            var mx:Number = stage.mouseX;
            var my:Number = stage.mouseY;
                       
            var dx:Number = mx - xPos;
            var dy:Number = my - yPos;
            var d:Number = Math.sqrt(dx*dx + dy*dy);
            var step:Number = .6 - Math.min(.5, d/100);
           
            var xp:Number;
            var yp:Number;
           
            windColorTransform = new ColorTransform(1, 1, 1, 1, -dx*.5, -dy*.5);
           
            for(i=0; i<1; i+=step)
            {
                xp = xPos + dx*i;
                yp = yPos + dy*i;
               
                xp = Math.max(xp, WIND_SIZE/2);
                xp = Math.min(xp, BITMAP_WIDTH - WIND_SIZE/2);
               
                yp = Math.max(yp, WIND_SIZE/2);
                yp = Math.min(yp, BITMAP_HEIGHT - WIND_SIZE/2);
               
                if(!(xPos==0 && yPos==0))
                {              
                    rect = new Rectangle(xp - WIND_SIZE/2 + Math.random()*10-5, yp - WIND_SIZE/2 + Math.random()*10-5, WIND_SIZE, WIND_SIZE);
                    displacementBitmap.bitmapData.colorTransform(rect, windColorTransform);
               
                    if(drawing)
                    {
                        displacementBitmap.bitmapData.colorTransform(rect, heatColorTransform);
                       
                        for(j=0; j<4; j++)
                        {
                            rect = new Rectangle(xp - Math.random()*SMOKE_SIZE, yp - Math.random()*SMOKE_SIZE, SMOKE_SIZE, SMOKE_SIZE);
                            smokeBitmap.bitmapData.colorTransform(rect, smokeColorTransform);
                        }
                    }
                }
            }
           
            displacementBitmap.bitmapData.colorTransform(bitmapRect, dampingColorTransform);
            displacementBitmap.bitmapData.applyFilter(displacementBitmap.bitmapData, bitmapRect, p, blurFilter);          
           
            xPos = mx;
            yPos = my;
           
            smokeBitmap.bitmapData.draw(smokeBitmap);
        }
    }
}

Mar200917

1

Euro RSCG & Sony Win Two AIMIA Awards

Euro AIMIA Awards

Hooray! Not much more to add to my previous post on the nominations, except to reiterate – well done to everyone involved at Euro and Sony.

It was the first time I’ve actually attended an AIMIA Awards night and I had a great time – caught up with some old friends, and met a few new acquaintances as well. Woke up with a spectacular hangover the next morning too.

Congratulations also to all the other award winners.

Update: Just added a few photos from the night.

Euro & Michelle/Sony with the first award

On stage receiving the second award

Second award with the presenter

Euro & Michelle

Feb200910

1

Euro’s “Quantum Code” Campaign Nominated for 5 AIMIAs

The Quantum Code

Euro RSCG Australia has been nominated for five AIMIA awards for our work on “The Quantum Code” – the Quantum of Solace promotion for Sony. We entered the Bond promotion in the following five categories, and have been short-listed in all five:

  • Best Advertising or Marketing
  • Best Cross-Platform Content or Content Integration with an Offline Advertising Campaign
  • Mobile Advertising or Marketing
  • Best Use of Social Media
  • Best Word of Mouth, Peer-to-peer or viral

The campaign was a cross-platform, cross-media alternate reality game (ARG) which utilised the web, online & mobile video, QR codes, social media sites (YouTube, Facebook), print and real-world locations. More info on Gizmodo and Euro’s website.

Clue Confirmer

All up, there were 51 people who contributed towards the campaign across the agency. My involvement on the project was to manage development of all web & mobile content, and to develop the “Clue Confirmer” Flex/AIR application which was running in-store at the Sony Centre in Sydney, and allowed players to check their progress in the game.

I also led development of the 007 Bond Adventures site which the campaign promoted. However, credit must be shared with the rest of the UX Team, who worked tirelessly until the wee hours of the morning for several days in order to get everything over the line. Considering that this was the UX Team’s first exposure to Flex, it was a real accomplishment. Fingers crossed for the 13th March!