»

Purple Powder

O2 BlackBerry Curve MPU in action

O2 BlackBerry Curve MPU in action

O2 BlackBerry Curve Banner

For the release of the purple BlackBerry Curve on O2 VCCP made a stunning and simple print ad. My role was to recreate and animate that in a set of banners.

 

The concept

I love it when things are this simple. The BlackBerry Curve is available in purple. The phone color is emphasised with an explosion of make-up powder. Awesome :-).

 

It’s all down to the explosion

The storyboard can be divided into three parts.

  1. The phone drops
  2. The powder explodes with the phone&rsquos; impact
  3. Show the end screen

The falling phone uses a simple Greensock tween. The fun really starts with the explosion. To get a realistic animation Flint is really useful.

 

If you are interested in code…

The Content class holds the whole composition together. This is where the PurplePuff is added.

protected var _puff:PurplePuff;
…
var ex:Number = _model.width/2;
var ey:Number = _model.height/2;
…
_puff = new PurplePuff(ex+_phoneHorizontalOffset, ey+_phoneOffset, _puffScale, 0.2, _freeze);
_puff.x = -ex;
_puff.y = -ey;
_holder.addChild(_puff);
…
// start purple explosion
_puff.init();

The PurplePuff class add a bunch of custom emitters and some randomly selected brush bitmaps I made in Photoshop and added to the Flash IDE library.

package uk.o2.banner.view 
{
  import …

  /**
   * @author ajbis
   */
  public class PurplePuff extends Sprite 
  {
    private var _renderer:BitmapRenderer;
    private var _blur:BlurFilter;
    private var _int:uint;
    private var _brush:Array = [];
    private var _shadow:Bitmap;
    private var _x:Number;
    private var _y:Number;
    private var _scale:Number;
    private var _friction:Number;
    private var _freeze:Number;

    public function PurplePuff(ex:Number = 0, ey:Number = 0, scale:Number = 1, friction:Number = 1, t:Number = 750)
    {
    	_x = ex;
    	_y = ey;
    	_scale = scale;
    	_friction = friction;
    	_freeze = t;
    	
    	addBrushes();
    	addShadow();
    	addRenderer();
    	addAllEmitters();
    }
    
    public function init():void
    {
    	for (var i:uint = 0; i<_renderer.emitters.length; i++)
    	{
    	  _renderer.emitters[i].addBlast(_scale, _friction);
    	  _renderer.emitters[i].start();
    	}
      _int = setTimeout(stopBlur, _freeze);
      addEventListener(Event.ENTER_FRAME, onEnterFrame);
    }
    
    private function addBrushes():void
    {
      _brush[0] = new Brush0();
      _brush[1] = new Brush1();
      _brush[2] = new Brush2();
      _brush[3] = new Brush3();
      _brush[4] = new Brush4();
    }
    
    private function addShadow():void
    {
      _shadow = new Bitmap();
      addChild(_shadow);
      
      var tran:Color = new Color();
      tran.setTint(0x3A1392, 1);
      _shadow.transform.colorTransform = tran;
    }
    
    private function addRenderer():void
    {
      var model:Model = Model.getModel();
      _renderer = new BitmapRenderer(new Rectangle(-10*_scale, -10*_scale, model.width+(20*_scale), model.height+(20*_scale)), true);
      _blur = new BlurFilter(30*_scale, 30*_scale, 1);
      _renderer.addFilter(_blur);
      addChild(_renderer);
    }
    
    private function addAllEmitters():void
    {
      addEmitter(12, 200, 0.6);
      addEmitter(12, 150, 1);
      addEmitter(25, 100, 2);
      addEmitter(12, 200, 0.4);
      
      addEmitter(12, 200, 0.6);
      addEmitter(12, 150, 1);
      addEmitter(25, 100, 2);
      addEmitter(12, 200, 0.4);
      
      addEmitter(12, 200, 0.6);
      addEmitter(12, 150, 1);
      addEmitter(25, 100, 2);
      addEmitter(12, 200, 0.4);
      
      addEmitter(12, 200, 0.6);
      addEmitter(12, 150, 1);
      addEmitter(25, 100, 2);
      addEmitter(12, 200, 0.4);
    }
    
    private function addEmitter(p:uint, v:Number, s:Number, brush:Brush = null):void
    {
      var emitter:PinkPuffEmitter = new PurplePuffEmitter(p, v, s, brush == null ?  _brush[Math.floor(Math.random()*4)] : brush);
      emitter.x = _x;
      emitter.y = _y;
      _renderer.addEmitter(emitter);
    }
    
    private function stopBlur():void
    {
      clearTimeout(_int);
      for (var i:uint = 0; i<_renderer.emitters.length; i++) _renderer.emitters[i].stop();
      removeEventListener(Event.ENTER_FRAME, onEnterFrame);
    }
    
    public function reset():void
    {
    	alpha = 1;
    	visible = true;
    	_renderer.bitmapData.fillRect(_renderer.bitmapData.rect, 0);
    }
    
    private function onEnterFrame(event:Event):void 
    {
      _shadow.bitmapData = _renderer.bitmapData;
      _shadow.alpha = 0.4;
    }
  }
}

Finally, the custom emitter uses Flint’s Blast counter.

package uk.o2.banner.view
{
  import …

  /**
   * @author ajbis
   */
  public class PurplePuffEmitter extends Emitter2D
  {
  	private var _p:uint; // particles
  	private var _v:Number; // velocity
  	private var _s:Number; // size
  	private var _brush:Brush;
  	
    public function PurplePuffEmitter(p:uint, v:Number, s:Number, brush:Brush = null)
    {
      super();
      
      _p = p;
      _v = v;
      _s = s;
      _brush = brush;
    }
    
    public function addBlast(scale:Number, friction:Number):void
    {
      counter = new Blast(_p);
      addInitializer(new SharedImage(_brush));
      addInitializer(new ColorInit(0xFFD44FA3, 0x3A1392));
      addInitializer(new Position(new PointZone(new Point(0, 0))));
      addInitializer(new Velocity(new DiscZone(new Point(Math.random()*10-5, Math.random()*10-5), _v*2*scale, 50*scale)));
      addInitializer(new ScaleImageInit(0.05*scale, _s*scale));
      addInitializer(new Rotation(0, 360));
      addAction(new Move());
      addAction(new RandomDrift(3*scale, 3*scale));
      addAction(new Friction(_v*friction*(1/scale)));
    }
  }
}

 

All up the banner is 80k. Where possible the different formats share code. There’s a MPU, skyscraper, wide skyscraper, rectangle (180 x 150px), leaderboard and half banner. To squeeze a few extra kilobytes the supplied bubble bounce at the end was converted to code too. For those of you with Flash Player installed you can see the skyscraper and MPU.

Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>