Category Archives: motion

Parallax Based on Y

By Zevan | March 6, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(backgroundColor=0x000000, frameRate=30)]
  2.  
  3. var elements:Array = new Array();
  4. for (var i:int = 0; i<200; i++){
  5.     var c:MovieClip= MovieClip(addChild(new MovieClip()));
  6.     c.x = Math.random()*(stage.stageWidth + 100) - 50;
  7.     c.y = Math.random()*stage.stageHeight;
  8.     with(c.graphics) lineStyle(2, 0xFFFFFF,3), drawCircle(0,0,2 + c.y / 20);
  9.     c.startX = c.x;
  10.     elements.push(c);
  11. }
  12.  
  13. var offset:Number = 0;
  14. var t:Number = 0;
  15.  
  16. addEventListener(Event.ENTER_FRAME, onLoop);
  17. function onLoop(evt:Event):void {
  18.     t+=.1;
  19.     offset = 200 * Math.cos(t);
  20.     for (var i:int = 0; i<elements.length; i++){
  21.        elements[i].x = elements[i].startX + offset / ((stage.stageWidth - elements[i].y) / 80);
  22.     }
  23. }

I wrote this snippet originally to automatically add parallax motion to a bunch of quick drawings I did within the flash IDE. Each movieClip in the elements array is moved from left to right based on it's y position. Clips with a higher y value will oscillate more from left to right than clips with lower y values.

Here is the original drawing I used this on.

And here is what the above snippet will create.

Posted in motion | Tagged , | 2 Comments

Animate Graphics.lineTo()

By Zevan | March 5, 2009
CLICK HERE TO COPY
Actionscript:
  1. // line thickness, line color, start point, end point, divisor, callback
  2. function animateLineTo( thick:Number, col:uint, sp:Point, ep:Point, div:Number=4, callback:Function=null):void {
  3.      var s:Shape  = Shape(addChild(new Shape()));
  4.      var ap:Point = sp.clone();
  5.      div = Math.max(2, div);
  6.      setTimeout(runLineAnimation, 1000/stage.frameRate, s.graphics , thick , col , sp , ep , ap, div, callback);
  7. }
  8.  
  9. function runLineAnimation(g:Graphics , thick:Number, col:uint, sp:Point, ep:Point, ap:Point, div:Number, callback:Function):void {
  10.      ap.x += (ep.x - ap.x) / div;
  11.      ap.y += (ep.y - ap.y) / div;
  12.       with(g){
  13.         clear();
  14.         lineStyle(thick, col);
  15.         moveTo(sp.x, sp.y);
  16.         lineTo(ap.x, ap.y);
  17.       }
  18.        if (Math.abs(ap.x - ep.x) <1 && Math.abs(ap.y- ep.y)  <1){
  19.            // done
  20.            if (callback!=null){
  21.                callback();  
  22.            }
  23.        }else{
  24.             setTimeout(runLineAnimation, 1000/stage.frameRate, g , thick , col , sp , ep , ap, div, callback);
  25.        }
  26. }
  27. //
  28. // test out the animateLineTo function:
  29. //
  30. var a:Point = new Point(100,100);
  31. var b:Point = new Point(150, 200);
  32. var c:Point = new Point(300, 190);
  33. var d:Point = new Point(280, 90)
  34.  
  35. animateLineTo(0, 0xFF0000, a, b, 4, line2);
  36.  
  37. function line2():void{
  38.     animateLineTo(0, 0xFF0000, b, c, 4, line3);
  39. }
  40.  
  41. function line3():void{
  42.     animateLineTo(0, 0xFF0000, c, d, 4, line4);
  43. }
  44.  
  45. function line4():void{
  46.     animateLineTo(0, 0xFF0000, d, a, 4);
  47. }

The above demos a function called animateLineTo() that will draw a line using zeno's paradox.

There are a couple weird/interesting tricks going on here. I'm using setTimeout() over and over rathaer than using setInterval(). This makes it so I don't need to store an interval id. I'm also using a delay of 1000/stage.frameRate, this attempts to cause the setTimeout() to run at the same frequency as an enter frame would. This is important because having a setTimeout()/setInterval() that is doing animation and attempting to run more frequently than the framerate can cause problems and is a waste of cpu power.

This snippet was spurned by a student question about how to animate a Graphics.lineTo() from point A to point B. Here is the original snippet, which is easier to read and more bare bones:

CLICK HERE TO COPY
Actionscript:
  1. var p0:Point = new Point(100,100);
  2. var p1:Point = new Point(400,200);
  3. var dp:Point = new Point(p0.x,p0.y);
  4.  
  5. var s:Sprite = Sprite(addChild(new Sprite()));
  6.  
  7. addEventListener(Event.ENTER_FRAME, onLoop);
  8. function onLoop(evt:Event):void {
  9.     s.graphics.clear()
  10.     s.graphics.lineStyle(0,0x000000);
  11.     s.graphics.moveTo(p0.x, p0.y);
  12.     s.graphics.lineTo(dp.x, dp.y);
  13.     dp.x += (p1.x - dp.x) / 4;
  14.     dp.y += (p1.y - dp.y) / 4;
  15. }

Posted in motion | Tagged , | 1 Comment

Snap to Grid

By Zevan | February 21, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 600, height = 400)]
  2.  
  3. // draw the same grid as yesterday
  4. var tileSize:int = 40;
  5. var cols:int = stage.stageWidth / tileSize;
  6. var rows:int = stage.stageHeight / tileSize;
  7. var grid:Sprite = Sprite(addChild(new Sprite()));
  8. grid.graphics.lineStyle(0,0x000000);
  9. var i:int = 0;
  10. for (i = 1; i<cols; i++){
  11.     var posX:Number = i * tileSize
  12.     grid.graphics.moveTo(posX, 0);
  13.     grid.graphics.lineTo(posX, stage.stageHeight);
  14. }
  15. for (i = 1; i<rows; i++){
  16.     var posY:Number = i * tileSize
  17.     grid.graphics.moveTo(0, posY);
  18.     grid.graphics.lineTo(stage.stageWidth, posY);
  19. }
  20.  
  21. //
  22. // -- add a circle that snaps to the grid when dragged
  23. //
  24. var circle:Sprite = Sprite(addChild(new Sprite()));
  25. with (circle.graphics) beginFill(0xFF0000), drawCircle(0,0,10);
  26. circle.x = circle.y =  tileSize * 3;
  27. circle.buttonMode = true;
  28.  
  29. circle.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
  30. function onDown(evt:MouseEvent):void {
  31.     addEventListener(Event.ENTER_FRAME, onRunSnapping);
  32. }
  33.  
  34. function onRunSnapping(evt:Event):void {
  35.     circle.x =  Math.round(mouseX / tileSize) * tileSize;
  36.     circle.y =  Math.round(mouseY / tileSize) * tileSize;
  37. }
  38.  
  39. stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  40. function onUp(evt:MouseEvent):void {
  41.     removeEventListener(Event.ENTER_FRAME, onRunSnapping);
  42. }

This builds on yesterdays post by adding a draggable red circle that snaps to the grid. This is the real trick:

CLICK HERE TO COPY
Actionscript:
  1. circle.x =  Math.round(mouseX / tileSize) * tileSize;
  2. circle.y =  Math.round(mouseY / tileSize) * tileSize;

Also posted in Graphics, UI | Tagged , | Leave a comment

Simple BlendMode Nav

By Zevan | February 15, 2009
CLICK HERE TO COPY
Actionscript:
  1. stage.frameRate=30;
  2. var nav:Sprite = Sprite(addChild(new Sprite()));
  3. nav.x=nav.y=150;
  4.  
  5. var cover:Sprite;
  6. var coverDest:Number=0;
  7. var spacing:int=4;
  8. var btnNum:int=6;
  9.  
  10. buildNav();
  11.  
  12. addEventListener(Event.ENTER_FRAME, onLoop);
  13.  
  14. function onLoop(evt:Event):void {
  15.     cover.x += (coverDest - cover.x) /4;
  16. }
  17.  
  18. function buildNav():void {
  19.     for (var i:int = 0; i<btnNum; i++) {
  20.         var b:Sprite=makeBox(50,50);
  21.         b.x = i * (b.width + spacing);
  22.         b.buttonMode=true;
  23.         b.addEventListener(MouseEvent.CLICK, onClick);
  24.     }
  25.     cover=makeBox(54, 60);
  26.     cover.blendMode=BlendMode.INVERT;
  27. }
  28.  
  29. function onClick(evt:MouseEvent):void {
  30.     coverDest=evt.currentTarget.x;
  31. }
  32.  
  33. function makeBox(w:Number, h:Number) {
  34.     var b:Sprite = new Sprite();
  35.     with (b.graphics) {
  36.         beginFill(0x000000),drawRect(-w/2,-h/2,w,h);
  37.     }
  38.     nav.addChild(b);
  39.     return b;
  40. }

This is something I do in my intermediate flash classes... the only difference is that we do the graphics in the flash IDE during class time instead of drawing them with ActionScript.

Posted in motion | Tagged , | Leave a comment