AS3


1
Feb 10

Fireworks

I’ve written a simple particle system that abandons the use of display objects. A typical particle system in Flash would often use Sprites or MovieClips that have their properties updated by a single enter frame. This can usually result in performance issues if they are not removed properly afterwards. The particles in this example are drawn to a sprite (off stage) every frame, then the container is drawn to a bitmap. I’ve had about 5000 particles being drawn each frame, effortlessly.

Flash 10 Circles


21
Jan 10

Circles!

Ok, this post is a bit random. I was playing about with animating circle outlines using trig, then just went overboard making it scale and stuff. Then I remembered Seb Lee-Delisle wrote a simple drawing api for Flash 10, so then I made made a similar thing in 3D space.

Be patient with the 3D version, It does this cool wavy effect when it finishes.

Flash 10 CirclesWeird 2D Circles

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
    private var _startPoint:Point = new Point(0, 0); // The centre point of the circle.
    private var _circleTween:TweenMax; // Tween used for drawing the circle.
    private var _canvas:Sprite; // The container for the graphics.
    private var _maxLines:int = 400; // The maximum number of lines to draw.
    private var _lineCount:int = 0;      
   
    public function WierdCircles():void
    {
      _canvas = new Sprite();
      _canvas.x = stage.stageWidth/2;
      _canvas.y = stage.stageHeight/2;
      addChild(_canvas);
           
      TweenMax.to(_startPoint, 30, {x:Math.random()*stage.stageWidth, y:Math.random()*stage.stageHeight, ease:Quad.easeIn, overwrite:2});
      TweenMax.to(_canvas, 10, {scaleX:.2, scaleY:.2, yoyo:true, repeat:-1, ease:Quad.easeInOut, overwrite:2});
     
      _drawCircle(120, 150, .2, 80);
    }
   
    private function _drawCircle($angle:int, $rad:int, $increment:int, $totalFrames:int):void
    {
      _circleTween = TweenMax.to(_canvas, $totalFrames, {rotation:-360, useFrames:true, onUpdate:_circleStep, onUpdateParams:[$angle, $rad, $increment], onComplete:_circleComplete, onCompleteParams:[$angle, $rad, $increment, $totalFrames], ease:Linear.easeNone});
    }
   
    private function _circleStep($angle:int, $rad:int, $increment:int):void
    {
      if(_lineCount < _maxLines)
      {
        var nextX:Number;
        var nextY:Number;
        var angle:Number;
        var theta:Number = 0 * Math.PI/180;
     
        nextX = _startPoint.x + (Math.cos(theta) * ($rad + _lineCount));
        nextY = _startPoint.y + (Math.sin(theta) * ($rad + _lineCount));
       
        if(_lineCount == 0) _canvas.graphics.moveTo(nextX, nextY);
        else _canvas.graphics.lineStyle(3, 0xFF0000, 1);
     
        angle = 360 * (_circleTween.currentProgress);
        theta = angle * Math.PI/180;
     
        nextX = _startPoint.x + (Math.cos(theta) * ($rad + _lineCount));
        nextY = _startPoint.y + (Math.sin(theta) * ($rad + _lineCount));
     
        _canvas.graphics.lineTo(nextX, nextY);
     
        _lineCount++;
      }
    }
   
    public function _circleComplete($angle:int, $rad:int, $increment:int, $totalFrames:int):void
    {    
      _drawCircle($angle, $rad, $increment, $totalFrames);
    }

17
Jan 10

Floating PV3D Planes

Here is something I made a while back. I was mimicking a sequence from a TV ad which meant splitting up a 2D image and mapping them onto 3D planes for animation. This idea was abandoned in the end for something more substantial. It was cool to accomplish it, at least.

So here’s how its done:

  • Get the size of the image and break it up into segments depending on the number of rows and columns you want.
  • Apply each segment of the bitmapdata onto its own bitmap material, then apply it to a primitive plane.
  • Calculate the target x/y position depending on where the top left corner of the image should sit.
  • Cue all 3D planes from scale 0, and the start xy position.
  • Create a bezier path for the tween on the XYZ axis.


31
Oct 09

FP10 Triangles / UV Mapping

I was quite excited when I did this. I’ve never really played much with many of FP10′s new features. This is a quick demo of basic UV mapping onto Triangles in Flash 10.


3
Aug 09

Green Santa

Here is the Green Santa website I worked on for Christmas 2008. Help get the word around and add the Facebook App. I know it’s not Christmas anymore, but there is always this year.

www.Green-Santa.com - Help Santa Save Christmas
www.Green-Santa.com - Help Santa Save Christmas


7
May 09

Music Visualisations

Here’s an AS3 visualisation I made a while back whilst getting to grips with the SoundMixer class.