genie effect

rkalexander1 · January 11, 2010

I'm trying to create the genie effect you see in Mac OS X. I found this cool class that does, but it uses betweenAS3. I am trying to replace that tween engine with your tweenMax, but I am a little lost at this point. Here is the class file:

/**
* Ginny Effect Modoki
* 
* 作ってしまいました。。。
* 
* Inspired by
* http://fladdict.net/blog/2009/09/flash-ginny-effect.html
* http://fladdict.net/exp/ginnyeffect/
* http://twitter.com/fladdict/status/3842965317
*
* Photo by 
* http://www.flickr.com/photos/88403964@N00/2662752839/ (by Yasu)
*
* 9/9(Wed) 04:00 first post　http://twitter.com/clockmaker/status/3845570478
* ※ Mac OS X の隠しエフェクトの「Suck」っぽい http://bit.ly/11vMDh
*/
package {
   import flash.display.*;
   import flash.events.*;
   import flash.geom.*;
   import flash.net.*;
   import flash.system.*;
   import org.libspark.betweenas3.BetweenAS3;
   import org.libspark.betweenas3.easing.*;
   import org.libspark.betweenas3.tweens.ITween;
   import com.bit101.components.*;

   [sWF(frameRate = 60)]
   public class Main extends Sprite {

       private const IMAGE_URL:String = "http://farm4.static.flickr.com/3190/2662752839_249c6642b1.jpg";
       private const IMG_W:int = 500;
       private const IMG_H:int = 375;
       private const SEGMENT:int = 20;
       private var loader:Loader;
       private var vertexs:Array;
       private var sprite:Sprite;
       private var isHide:Boolean = false;
       private var isShift:Boolean = false;

       public function Main():void {
           // init
           stage.quality = StageQuality.MEDIUM;
           graphics.beginFill(0x0);
           graphics.drawRect(0, 0, 465, 465);

           new Label(this, 360, 440, "PLEASE CLICK STAGE")

           // load
           var context:LoaderContext = new LoaderContext(true);
           loader = new Loader();
           loader.contentLoaderInfo.addEventListener(Event.COMPLETE, compHandler);
           loader.load(new URLRequest(IMAGE_URL), context);
       }

       private function compHandler(e:Event):void {
           sprite = new Sprite();
           addChild(sprite);
           vertexs = []
           for (var xx:int = 0; xx < SEGMENT; xx++) {
               vertexs[xx] = [];
               for (var yy:int = 0; yy < SEGMENT; yy++) {
                   vertexs[xx][yy] = new Point(xx * IMG_W / SEGMENT, yy * IMG_H/SEGMENT);
               }
           }
           draw();
           addEventListener(Event.ENTER_FRAME, draw);
           stage.addEventListener(MouseEvent.CLICK, clickHandler);
           stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);
           stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
       }

       private function clickHandler(e:MouseEvent):void {
           var tweens:Array = [];
           var xx:int, yy:int, delay:Number;
           var px:Number = SEGMENT * (mouseX / IMG_W);
           var py:Number = SEGMENT * (mouseY / IMG_H);

           if (!isHide) {
               for (xx = 0; xx < SEGMENT; xx++) {
                   for (yy = 0; yy < SEGMENT; yy++) {
                       vertexs[xx][yy] = new Point(xx * IMG_W / SEGMENT, yy * IMG_H/SEGMENT);
                       delay = Math.sqrt((xx - px) * (xx - px) + (yy - py) * (yy - py)) / 40;

                       tweens.push(
                           BetweenAS3.delay(
                               BetweenAS3.tween(vertexs[xx][yy], {
                                   x : px * IMG_W / SEGMENT,
                                   y : py * IMG_H / SEGMENT
                               },null, delay, Cubic.easeIn),
                               delay / 2
                           )
                       )
                   }
               }
           }else {
               // 重み付けが怪しい・・・
               var max:Number = 0;
               for (xx = 0; xx < SEGMENT; xx++) {
                   for (yy = 0; yy < SEGMENT; yy++) {
                       vertexs[xx][yy] = new Point(px * IMG_W / SEGMENT, py * IMG_H / SEGMENT);
                       delay = Math.sqrt((xx - px) * (xx - px) + (yy - py) * (yy - py))
                       max = Math.max(max, delay);
                   }
               }
               for (xx = 0; xx < SEGMENT; xx++) {
                   for (yy = 0; yy < SEGMENT; yy++) {
                       delay = (max - Math.sqrt((xx - px) * (xx - px) + (yy - py) * (yy - py))) / 40;
                       tweens.push(
                           BetweenAS3.delay(
                               BetweenAS3.tween(vertexs[xx][yy], {
                                   x : xx * IMG_W / SEGMENT,
                                   y : yy * IMG_H / SEGMENT
                               },null, delay + 0.05, Quad.easeOut),
                               delay / 2
                           )
                       )
                   }
               }
           }

           var itw:ITween = BetweenAS3.parallelTweens(tweens);
           if (isShift) itw = BetweenAS3.scale(itw, 5);
           itw.play();

           isHide = !isHide;
       }

       /**
        * drawTriangles でテクスチャを貼り付けるメソッド
        * 参考： http://wonderfl.net/code/e7e1e28a9f20d73f11f0bb02d3e4b5f512c7cc0f
        */
       private function draw(e:Event = null):void {
           var vertices:Vector. = new Vector.();
           var indices:Vector. = new Vector.();
           var uvtData:Vector. = new Vector.();

           for (var xx:int = 0; xx < SEGMENT; xx++) {
               for (var yy:int = 0; yy < SEGMENT; yy++) {
                   vertices[vertices.length] = vertexs[xx][yy].x
                   vertices[vertices.length] = vertexs[xx][yy].y
                   uvtData[uvtData.length] = xx / SEGMENT;
                   uvtData[uvtData.length] = yy / SEGMENT;
               }
           }

           for (var i:int = 0; i < SEGMENT - 1; i++) {
               for (var j:int = 0; j < SEGMENT - 1; j++) {
                   indices.push(i * SEGMENT + j, i * SEGMENT + j + 1, (i + 1) * SEGMENT + j);
                   indices.push(i * SEGMENT + j + 1, (i + 1) * SEGMENT + 1 + j, (i + 1) * SEGMENT + j);
               }
           }

           var g:Graphics = sprite.graphics;
           g.clear();
           g.beginBitmapFill(Bitmap(loader.content).bitmapData);
           g.drawTriangles(vertices, indices, uvtData);
           g.endFill();
       }

       /**
        * Shiftキーを押してるとスローモーションになる
        * macの挙動と同じように
        */
       private function keyUpHandler(e:KeyboardEvent):void {
           if(e.keyCode == 16) isShift = false;
       }

       private function keyDownHandler(e:KeyboardEvent):void {
           if(e.keyCode == 16) isShift = true;
       }
   }
}

I found this article on betweenAS3 here:

http://www.thetechlabs.com/tutorials/flash/getting-started-with-betweenas3/

GreenSock · January 11, 2010

I'm no expert on BetweenAS3, but from what I can tell, the GreenSock Tweening Platform can do anything BetweenAS3 can do plus a whole lot more. I took a quick peek at your code and I think it'd be simplified to this in TweenMax (although I'm not positive and haven't tested the code):

package {
import flash.display.*;
import flash.events.*;
import flash.geom.*;
import flash.net.*;
import flash.system.*;
import com.greensock.*;
import com.greensock.easing.*;
import com.bit101.components.*;

[sWF(frameRate = 60)]
public class Main extends Sprite {

	private const IMAGE_URL:String = "http://farm4.static.flickr.com/3190/2662752839_249c6642b1.jpg";
	private const IMG_W:int = 500;
	private const IMG_H:int = 375;
	private const SEGMENT:int = 20;
	private var loader:Loader;
	private var vertexs:Array;
	private var sprite:Sprite;
	private var isHide:Boolean = false;
	private var isShift:Boolean = false;

	public function Main():void {
		// init
		stage.quality = StageQuality.MEDIUM;
		graphics.beginFill(0x0);
		graphics.drawRect(0, 0, 465, 465);

		new Label(this, 360, 440, "PLEASE CLICK STAGE")

		// load
		var context:LoaderContext = new LoaderContext(true);
		loader = new Loader();
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE, compHandler);
		loader.load(new URLRequest(IMAGE_URL), context);
	}

	private function compHandler(e:Event):void {
		sprite = new Sprite();
		addChild(sprite);
		vertexs = []
		for (var xx:int = 0; xx 				vertexs[xx] = [];
			for (var yy:int = 0; yy 					vertexs[xx][yy] = new Point(xx * IMG_W / SEGMENT, yy * IMG_H/SEGMENT);
			}
		}
		draw();
		addEventListener(Event.ENTER_FRAME, draw);
		stage.addEventListener(MouseEvent.CLICK, clickHandler);
		stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);
		stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
	}

	private function clickHandler(e:MouseEvent):void {
		var tweens:Array = [];
		var timeline:TimelineLite = new TimelineLite();
		var xx:int, yy:int, delay:Number;
		var px:Number = SEGMENT * (mouseX / IMG_W);
		var py:Number = SEGMENT * (mouseY / IMG_H);

		if (!isHide) {
			for (xx = 0; xx 					for (yy = 0; yy 						vertexs[xx][yy] = new Point(xx * IMG_W / SEGMENT, yy * IMG_H/SEGMENT);
					delay = Math.sqrt((xx - px) * (xx - px) + (yy - py) * (yy - py)) / 40;

					timeline.insert( TweenMax.to(vertexs[xx][yy], delay, {x:px * IMG_W / SEGMENT, y:py * IMG_H / SEGMENT, delay:delay / 2, ease:Cubic.easeIn}) );

				}
			}
		} else {
			var max:Number = 0;
			for (xx = 0; xx 					for (yy = 0; yy 						vertexs[xx][yy] = new Point(px * IMG_W / SEGMENT, py * IMG_H / SEGMENT);
					delay = Math.sqrt((xx - px) * (xx - px) + (yy - py) * (yy - py))
					max = Math.max(max, delay);
				}
			}
			for (xx = 0; xx 					for (yy = 0; yy 						delay = (max - Math.sqrt((xx - px) * (xx - px) + (yy - py) * (yy - py))) / 40;

					timeline.insert( TweenMax.to(vertexs[xx][yy], delay + 0.05, {x:xx * IMG_W / SEGMENT, y:yy * IMG_H / SEGMENT, delay:delay / 2, ease:Quad.easeOut}) );

				}
			}
		}

		if (isShift) timeline.timeScale = 1 / 5;

		isHide = !isHide;
	}

	/**
	 * drawTriangles でテクスチャを貼り付けるメソッド
	 * 参考： http://wonderfl.net/code/e7e1e28a9f20d73f11f0bb02d3e4b5f512c7cc0f
	 */
	private function draw(e:Event = null):void {
		var vertices:Vector. = new Vector.();
		var indices:Vector. = new Vector.();
		var uvtData:Vector. = new Vector.();

		for (var xx:int = 0; xx 				for (var yy:int = 0; yy 					vertices[vertices.length] = vertexs[xx][yy].x
				vertices[vertices.length] = vertexs[xx][yy].y
				uvtData[uvtData.length] = xx / SEGMENT;
				uvtData[uvtData.length] = yy / SEGMENT;
			}
		}

		for (var i:int = 0; i 				for (var j:int = 0; j 					indices.push(i * SEGMENT + j, i * SEGMENT + j + 1, (i + 1) * SEGMENT + j);
				indices.push(i * SEGMENT + j + 1, (i + 1) * SEGMENT + 1 + j, (i + 1) * SEGMENT + j);
			}
		}

		var g:Graphics = sprite.graphics;
		g.clear();
		g.beginBitmapFill(Bitmap(loader.content).bitmapData);
		g.drawTriangles(vertices, indices, uvtData);
		g.endFill();
	}


	private function keyUpHandler(e:KeyboardEvent):void {
		if(e.keyCode == 16) isShift = false;
	}

	private function keyDownHandler(e:KeyboardEvent):void {
		if(e.keyCode == 16) isShift = true;
	}
}
}

rkalexander1 · January 15, 2010

Awesome dude! That works perfectly. I've attached a zip for anyone interested.

GreenSock · January 15, 2010

It won't compile for me. Looks like at least one class file is missing and the wrong one is set for the main FLA class. And please don't post a zip containing bonus classes

Could you fix the errors and repost? I'd love to see it.

Notifications

Messages

genie effect

Recommended Posts

rkalexander1

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

rkalexander1

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members