Geeking out at TechniqueNW Training Camp

Last weekend I had the pleasure of attending the TechniqueNW Training camp up in Morecambe to learn all about ActionScript3. I met some really great people at what was, in my eyes, a hugely successful event.

My tutor for the weekend was the very talented Seb Lee-Delisle from PluginMedia who taught me a lot about Particle systems, real-time easing and Papervision3D. As I’m primarily a .NET developer, it was really exciting to see how creative programming can be and how a little bit of A-Level maths (trigonometry, Pythagoras’ theorem) can produce some really spectacular effects.

So here are a few things I learnt over the few days I was at Technique. Big thanks to Seb for showing us all this great stuff.

Better class hierarchy in ActionScript3

ActionScript3 has introduced a new class hierarchy shown below. This is a much more sensible approach than in previous versions, with each subclass extending the one above it and having a clear use case and extra features. This separation of responsibilities really makes a lot of sense to me and made the transition from .NET to ActionScript, a lot smoother.

Easy does it…

Real-time easing is a technique you can use to produce simple movements with very little code. There is no need to import a large tweening library, so this helps to keep file size down and performance high.

Move your mouse around the stage to interact with the ball.

var ballTargetX:Number;
var ballTargetY:Number;
var velX:Number = 0;
var velY:Number = 0;
var differenceX:Number;
var differenceY:Number;

addEventListener(Event.ENTER_FRAME, enterFrame);

function enterFrame(e:Event)
{
  ballTargetX = mouseX;
  ballTargetY = mouseY;

  //reduce the velocity (the higher this is the more springy the movement gets. Should be < 1! )
  velX *= 0.7;
  velY *= 0.7;

  //find out the distance between where the ball is and where it's going
  differenceX = ballTargetX - ball.x;
  differenceY = ballTargetY - ball.y;

  //and multiply it by 0.15 (the higher this number, the faster it moves)
  differenceX *= 0.15;
  differenceY *= 0.15;

  // and add this to the velocity.
  velX += differenceX;
  velY += differenceY;

  // and add the velocity to the position
  ball.x += velX;
  ball.y += velY;
}

(code adapted from http://sebleedelisle.com/2006/10/simple-real-time-easing-in-flash/)

Papervision3D – Selective rendering with Viewport Layers

Some of the main performance issues with Flash projects occur when high quality assets are rendered and re-rendered on the stage. There are a few tricks that can increase performance when using Papervison3D, one of which is using Viewport Layers to selectively render objects every frame.

Selective rendering using Viewport Layers is great for when you are moving a small object around in a scene but the majority of the other elements are stationary.

By default, Papervision3D re-renders every element in a scene, every frame, even when the camera is stationary which can lead to poor performance and slow frame rates. With selective rendering, you can choose which elements sit on a particular layer and how these layers are stacked (z-indexed), then you can tell the renderer to only render the layer containing the moving object.

Fo further info check out;

http://www.adobe.com/devnet/actionscript/articles/actionscript3_overview.html

http://sebleedelisle.com/

http://www.papervision3d.org/

~Tony