AS3: DistortionTweener

View Example 1
View Example 2
View Example 3
View Documentation
Download Class & Example Files

The DistortionTweener allows you to distort four points of an object. It is an easy to way make distortions such as trapezoids on a movie clip.

The DistortionTweener uses Ruben Swieringa's DistortImage class and is based on a sample .FLA provided by Tam Ho on how to use DistortImage in Flash.

Actionscript:
  1. /**
  2. * The DistortionTweener allows you to distort four points of an object. It is an easy to way make distortions such as trapezoids on a movie clip.
  3. *
  4. * The DistortionTweener uses Ruben Swieringa's DistortImage class (http://www.rubenswieringa.com/blog/distortimage) and is based on a sample .FLA provided by Tam Ho (http://www.flashteam.com.au) on how to use DistortImage in Flash.
  5. *
  6. * @usage
  7. * <code>
  8. * <pre>
  9. import com.reintroducing.transitions.DistortionTweener;
  10. import fl.transitions.easing.Regular;
  11. var dt:DistortionTweener = new DistortionTweener(s, clip_mc, tl, tr, br, bl, 5);
  12. dt.addEventListener(Event.INIT, onDistortStarted);
  13. dt.addEventListener(Event.COMPLETE, onDistortFinished);
  14. dt.tweenTo(new Point(-50, -50), new Point(410, -50), new Point(310, 266), new Point(50, 266), Regular.easeIn, .5);
  15. // fired off when the distortion tween starts
  16. function onDistortStarted($evt:Event):void
  17. {
  18.     trace("Starting the distortion.");
  19. }
  20. // fired off whent he distortion tween ends
  21. function onDistortFinished($evt:Event):void
  22. {
  23.     trace("Finished the distortion.");
  24. }
  25. * </pre>
  26. * </code>
  27. *
  28. * @author Matt Przybylski [http://www.reintroducing.com]
  29. * @version 1.0
  30. */
  31.  
  32. package com.reintroducing.transitions
  33. {
  34.     import flash.display.Bitmap;
  35.     import flash.display.BitmapData;
  36.     import flash.display.MovieClip;
  37.     import flash.display.Shape;
  38.     import flash.events.Event;
  39.     import flash.events.EventDispatcher;
  40.     import flash.geom.Point;
  41.    
  42.     import org.flashsandy.display.DistortImage;
  43.    
  44.     import fl.transitions.Tween;
  45.     import fl.transitions.TweenEvent;   
  46.  
  47.     public class DistortionTweener extends EventDispatcher
  48.     {
  49. //- PRIVATE & PROTECTED VARIABLES -------------------------------------------------------------------------
  50.  
  51.         private var _holder:*;
  52.         private var _mc:MovieClip;
  53.         private var _mcWidth:Number;
  54.         private var _mcHeight:Number;
  55.         private var _bmd:BitmapData;
  56.         private var _bmp:Bitmap;
  57.         private var _container:Shape;
  58.         private var _tl:Point;
  59.         private var _tr:Point;
  60.         private var _br:Point;
  61.         private var _bl:Point;
  62.         private var _distortion:DistortImage;
  63.         private var _tweenFunc:Function;
  64.         private var _tweenTime:Number;
  65.         private var _precision:uint;
  66.        
  67.         // tweens
  68.         private var _tlXTween:Tween;
  69.         private var _tlYTween:Tween;
  70.         private var _trXTween:Tween;
  71.         private var _trYTween:Tween;
  72.         private var _brXTween:Tween;
  73.         private var _brYTween:Tween;
  74.         private var _blXTween:Tween;
  75.         private var _blYTween:Tween;
  76.        
  77. //- PUBLIC & INTERNAL VARIABLES ---------------------------------------------------------------------------
  78.        
  79.         public static const DEFAULT_NAME:String = "com.reintroducing.transitions.DistortionTweener";
  80.        
  81. //- CONSTRUCTOR -------------------------------------------------------------------------------------------
  82.    
  83.         /**
  84.          * Creates a new instance of the DistortionTweener class.  The point values are relative to the holder clip, NOT the stage.
  85.          *
  86.          * @usage <pre><code>var dt:DistortionTweener = new DistortionTweener($holder, $mc, $tl, $tr, $br, $bl, $precision);</code></pre>
  87.          *
  88.          * @param $holder The DisplayObject that will be used to hold your distorted bitmap
  89.          * @param $mc The source movie clip that will be used to copy into the bitmap that will be distorted
  90.          * @param $tl The top left point to use in the distortion
  91.          * @param $tr The top right point to use in the distortion
  92.          * @param $br The bottom right point to use in the distortion
  93.          * @param $bl The bottom left point to use in the distortion
  94.          * @param $precision A uint representing the value to use as the precision in the DistortImage class
  95.          */
  96.        
  97.         public function DistortionTweener($holder:*, $mc:MovieClip, $tl:Point, $tr:Point, $br:Point, $bl:Point, $precision:uint):void
  98.         {
  99.             this._holder    = $holder;
  100.             this._mc       = $mc;
  101.             this._mcWidth   = this._mc.width;
  102.             this._mcHeight  = this._mc.height;
  103.             this._tl       = $tl;
  104.             this._tr       = $tr;
  105.             this._br       = $br;
  106.             this._bl       = $bl;
  107.             this._precision = $precision;
  108.            
  109.             this.init();
  110.         }
  111.        
  112. //- PRIVATE & PROTECTED METHODS ---------------------------------------------------------------------------
  113.        
  114.         private function init():void
  115.         {
  116.             this._mc.visible = false;
  117.            
  118.             this._bmd     = new BitmapData(this._mcWidth, this._mcHeight, true, 0x00FFFFFF);
  119.             this._bmd.draw(this._mc);
  120.            
  121.             this._bmp     = new Bitmap(this._bmd);
  122.             this._container = new Shape();
  123.            
  124.             this._holder.addChild(this._container);
  125.            
  126.             this._distortion = new DistortImage(this._mcWidth, this._mcHeight, this._precision, this._precision);
  127.             this._distortion.setTransform(this._container.graphics, this._bmp.bitmapData, this._tl, this._tr, this._br, this._bl);
  128.         }
  129.  
  130. //- PUBLIC & INTERNAL METHODS -----------------------------------------------------------------------------
  131.    
  132.         /**
  133.          * Tweens the distortion. As with the constructor, the point values are relative to the holder clip, NOT the stage.
  134.          *
  135.          * <p>
  136.          * The tweenTo method dispatches two events:
  137.          * <ul>
  138.          * <li>Event.INIT: Dispatched when the tweening begins</li>
  139.          * <li>Event.COMPLETE: Dispatched when the tweening ends</li>
  140.          * </ul>
  141.          * </p>
  142.          *
  143.          * @usage <pre><code>dt.tweenTo(new Point(-50, -50), new Point(410, -50), new Point(310, 266), new Point(50, 266), Regular.easeIn, .5);</code></pre>
  144.          *
  145.          * @param $tl The top left point to end the tween at
  146.          * @param $tr The top right point to end the tween at
  147.          * @param $br The bottom right point to end the tween at
  148.          * @param $bl The bottom left point to end the tween at
  149.          * @param $tweenFunc The easing function to use in the tween
  150.          * @param $time The duration, in seconds, of the tween
  151.          *
  152.          * @return Nothing
  153.          */
  154.        
  155.         public function tweenTo($tl:Point, $tr:Point, $br:Point, $bl:Point, $tweenFunc:Function, $time:Number):void
  156.         {
  157.             this.dispatchEvent(new Event(Event.INIT));
  158.            
  159.             this._tweenFunc = $tweenFunc;
  160.             this._tweenTime = $time;
  161.            
  162.             // top left tweens
  163.             this._tlXTween = new Tween(this._tl, "x", this._tweenFunc, this._tl.x, $tl.x, this._tweenTime, true);
  164.             this._tlYTween = new Tween(this._tl, "y", this._tweenFunc, this._tl.y, $tl.y, this._tweenTime, true);
  165.            
  166.             // top right tweens
  167.             this._trXTween = new Tween(this._tr, "x", this._tweenFunc, this._tr.x, $tr.x, this._tweenTime, true);
  168.             this._trYTween = new Tween(this._tr, "y", this._tweenFunc, this._tr.y, $tr.y, this._tweenTime, true);
  169.            
  170.             // bottom right tweens
  171.             this._brXTween = new Tween(this._br, "x", this._tweenFunc, this._br.x, $br.x, this._tweenTime, true);
  172.             this._brYTween = new Tween(this._br, "y", this._tweenFunc, this._br.y, $br.y, this._tweenTime, true);
  173.            
  174.             // bottom left tweens
  175.             this._blXTween = new Tween(this._bl, "x", this._tweenFunc, this._bl.x, $bl.x, this._tweenTime, true);
  176.             this._blYTween = new Tween(this._bl, "y", this._tweenFunc, this._bl.y, $bl.y, this._tweenTime, true);
  177.            
  178.             this._blYTween.addEventListener(TweenEvent.MOTION_CHANGE, render);
  179.             this._blYTween.addEventListener(TweenEvent.MOTION_FINISH, onFinished);
  180.         }
  181.        
  182.         /**
  183.          * Resets the bitmap to the specified points.
  184.          *
  185.          * @usage <pre><code>dt.reset(new Point(0, 0), new Point(clip_mc.width, 0), new Point(clip_mc.width, clip_mc.height), new Point(0, clip_mc.height));</code></pre>
  186.          *
  187.          * @param $tl The top left point to use in the distortion
  188.          * @param $tr The top right point to use in the distortion
  189.          * @param $br The bottom right point to use in the distortion
  190.          * @param $bl The bottom left point to use in the distortion
  191.          *
  192.          * @return Nothing
  193.          */
  194.        
  195.         public function reset($tl:Point, $tr:Point, $br:Point, $bl:Point):void
  196.         {
  197.             this._tl = $tl;
  198.             this._tr = $tr;
  199.             this._br = $br;
  200.             this._bl = $bl;
  201.            
  202.             this._container.graphics.clear();
  203.             this._holder.removeChild(this._container);
  204.            
  205.             this._container = null;
  206.             this._container = new Shape();
  207.            
  208.             this._holder.addChild(this._container);
  209.         }
  210.        
  211.         /**
  212.          * Cleans up the DistortionTweener for garbage collection.
  213.          *
  214.          * @usage <pre><code>dt.destroy();</code></pre>
  215.          *
  216.          * @return Nothing
  217.          */
  218.        
  219.         public function destroy():void
  220.         {
  221.             this._bmd.dispose();
  222.            
  223.             this._container.graphics.clear();
  224.             this._holder.removeChild(this._container);
  225.            
  226.             this._bmd = null;
  227.             this._bmp = null;
  228.             this._container = null;
  229.             this._holder = null;
  230.             this._distortion = null;
  231.         }
  232.    
  233. //- EVENT HANDLERS ----------------------------------------------------------------------------------------
  234.    
  235.         // Dispatched during the MOTION_CHANGE event to update the distorted graphics.
  236.         private function render($evt:TweenEvent):void
  237.         {
  238.             this._container.graphics.clear();
  239.             this._distortion.setTransform(this._container.graphics, this._bmp.bitmapData, this._tl, this._tr, this._br, this._bl);
  240.         }
  241.        
  242.         // Dispatches a COMPLETE event when the distortion is finished.
  243.         private function onFinished($evt:TweenEvent):void
  244.         {
  245.             this._blYTween.removeEventListener(TweenEvent.MOTION_CHANGE, render);
  246.             this._blYTween.removeEventListener(TweenEvent.MOTION_FINISH, onFinished);
  247.            
  248.             this._tlXTween = null;
  249.             this._tlYTween = null;
  250.             this._trXTween = null;
  251.             this._trYTween = null;
  252.             this._brXTween = null;
  253.             this._brYTween = null;
  254.             this._blXTween = null;
  255.             this._blYTween = null;
  256.            
  257.             this.dispatchEvent(new Event(Event.COMPLETE));
  258.         }
  259.    
  260. //- GETTERS & SETTERS -------------------------------------------------------------------------------------
  261.    
  262.        
  263.    
  264. //- HELPERS -----------------------------------------------------------------------------------------------
  265.    
  266.         public override function toString():String
  267.         {
  268.             return "com.reintroducing.transitions.DistortionTweener";
  269.         }
  270.    
  271. //- END CLASS ---------------------------------------------------------------------------------------------
  272.     }
  273. }

If you found this post useful, please consider leaving a comment, subscribing to the feed, or making a small donation.

55 Comments

[...] as3httpclient – AS3 классы, расширяющие HTTP/HTTPS API в Flash Player 9. DistortionTweener ascanvas – адаптер (?) HTML Canvas и fl.display.Graphics. dopplr-as3 – AS3 код [...]

lets swing with the keyboard... 🙂
Thank's for this tutoriaal.

I'm impressed, I must say. Rarely doo I come across a blog that's both
educative and amusing, and withoit a doubt, you have hit the
nail on the head. The issue is something that nnot enjough folks are speaking intelligently about.

I'm very happy that I came acrosss this during my hunt for
something relating to this.

[...] AS3 классы, расширяющие HTTP/HTTPS API в Flash Player 9.DistortionTweenerascanvas – адаптер (?) HTML Canvas и fl.display.Graphics.dopplr-as3 – AS3 код [...]

I was excited to discover this page. I wanted to thank you for ones time for this
particularly wonderful read!! I definitely really liked every bit of it and i also have you saved as a favorite to look at new things on your site.

Leave a comment

(required)

(required)