Archive for the tag 'TweenLite'

Getting Started With Scripted Tweening

April 6, 2008 in AS2, AS3 | Show Some Love | | 14 Comments »

Download Example Files

As someone who is a beginner starting out with developing in Flash, it’s not always easy to figure out how to tween things through code and what products to use. There are more than enough tweening engines out there to make your head spin and some are more well known than others. Here I hope to shed a bit of light on what tweening engines can do what and are best used in what situation. Read more »

Tags: , , , ,

AS3: Event Responsive Menu Extended

November 6, 2007 in AS3, FLAs | Show Some Love | | No Comments »

View Example
Download Example Files
Download Environment
Download TweenLite

Last time we looked at the Event Responsive Menu we made a menu system that responded to events based on what button was clicked. This was a working version but rather ugly/useless in the sense that we didn't add any actual functionality to it so now we are going to go ahead and load the button data from an XML file and then use TweenLite to "spruce" them up a bit with fades of color.

Let's take a look at the XML file we are going to use to store the button data:

PLAIN TEXT
XML:
  1. <menu>
  2.     <item name="Home" url="http://www.google.com" />
  3.     <item name="Portfolio" url="http://www.google.com" />
  4.     <item name="Services" url="http://www.google.com" />
  5.     <item name="About" url="http://www.google.com" />
  6.     <item name="Contact" url="http://www.google.com" />
  7. </menu>

Then here is the Main.as file:

PLAIN TEXT
Actionscript:
  1. /**
  2. * @author Matt Przybylski [http://www.reintroducing.com]
  3. * @version 1.0
  4. */
  5.  
  6. package com.reintroducing.menusystem
  7. {
  8.     import flash.display.Sprite;
  9.     import flash.events.Event;
  10.     import flash.net.URLLoader;
  11.     import flash.net.URLRequest;
  12.    
  13.     import com.reintroducing.debug.Environment;
  14.     import com.reintroducing.menusystem.events.MenuButtonEvent;
  15.     import com.reintroducing.menusystem.ui.MenuButton;
  16.    
  17.     public class Main extends Sprite
  18.     {
  19. //- PRIVATE & PROTECTED VARIABLES -------------------------------------------------------------------------
  20.  
  21.         private var _holder:Sprite;
  22.         private var _numButtons:int;
  23.         private var _menuData:XML;
  24.         private var _env:Environment;
  25.        
  26. //- PUBLIC & INTERNAL VARIABLES ---------------------------------------------------------------------------
  27.        
  28.         public static const DEFAULT_NAME:String = "com.reintroducing.menusystem.Main";
  29.        
  30. //- CONSTRUCTOR -------------------------------------------------------------------------------------------
  31.    
  32.         public function Main()
  33.         {
  34.             this._numButtons             = 5;
  35.             this._holder                = new Sprite();
  36.             this._holder.x = this._holder.y = 10;
  37.             this._env                  = Environment.getInstance();
  38.            
  39.             this._env.setPaths("../", "");
  40.            
  41.             this.addChild(this._holder);
  42.            
  43.             this.loadXML();
  44.         }
  45.        
  46. //- PRIVATE & PROTECTED METHODS ---------------------------------------------------------------------------
  47.        
  48.         private function loadXML():void
  49.         {
  50.             var xmlURL:String = this._env.basePath + "xml/menuData.xml";
  51.             var xmlLoader:URLLoader = new URLLoader();
  52.            
  53.             xmlLoader.addEventListener(Event.COMPLETE, createMenu);
  54.             xmlLoader.load(new URLRequest(xmlURL));
  55.         }
  56.        
  57.         /**
  58.          * Lays out the buttons on the stage and initializes them.
  59.          */
  60.         private function createMenu($evt:Event):void
  61.         {
  62.             var xPosition:int = 160;
  63.             var buttonURL:String;
  64.             var buttonName:String;
  65.            
  66.             this._menuData = new XML($evt.target.data);
  67.            
  68.             for (var i:int = 0; i <this._numButtons; i++)
  69.             {
  70.                 buttonURL = this._menuData.item[i].@url;
  71.                 buttonName = this._menuData.item[i].@name;
  72.                
  73.                 var mb:MenuButton = new MenuButton();
  74.                 mb.x = (i * xPosition);
  75.                 mb.create(("mb" + i), buttonName, i, buttonURL);
  76.                 mb.addEventListener(MenuButtonEvent.CLICKED, onMenuButtonClicked);
  77.                
  78.                 this._holder.addChild(mb);
  79.             }
  80.         }
  81.        
  82. //- PUBLIC & INTERNAL METHODS -----------------------------------------------------------------------------
  83.    
  84.        
  85.    
  86. //- EVENT HANDLERS ----------------------------------------------------------------------------------------
  87.    
  88.         /**
  89.          * Reacts when a button is clicked to set all the buttons to their proper state.
  90.          */
  91.         private function onMenuButtonClicked($evt:MenuButtonEvent):void
  92.         {
  93.             for (var i:int = 0; i <this._numButtons; i++)
  94.             {
  95.                 var mb:MenuButton = MenuButton(this._holder.getChildByName("mb" + i));
  96.                
  97.                 if ($evt.params.id == i)
  98.                 {
  99.                     mb.setDisabled();
  100.                 }
  101.                 else
  102.                 {
  103.                     mb.setEnabled();
  104.                 }
  105.             }
  106.         }
  107.    
  108. //- GETTERS & SETTERS -------------------------------------------------------------------------------------
  109.    
  110.        
  111.    
  112. //- HELPERS -----------------------------------------------------------------------------------------------
  113.    
  114.         public override function toString():String
  115.         {
  116.             return "com.reintroducing.menusystem.Main";
  117.         }
  118.    
  119. //- END CLASS ---------------------------------------------------------------------------------------------
  120.     }
  121. }

Here is the updated MenuButton.as file:

PLAIN TEXT
Actionscript:
  1. /**
  2. * @author Matt Przybylski [http://www.reintroducing.com]
  3. * @version 1.0
  4. */
  5.  
  6. package com.reintroducing.menusystem.ui
  7. {
  8.     import flash.display.MovieClip;
  9.     import flash.events.MouseEvent;
  10.     import flash.net.URLRequest;
  11.     import flash.net.navigateToURL;
  12.     import flash.text.TextField;
  13.    
  14.     import com.reintroducing.menusystem.events.MenuButtonEvent;
  15.    
  16.     import gs.TweenLite;
  17.    
  18.     public class MenuButton extends MovieClip
  19.     {
  20. //- PRIVATE & PROTECTED VARIABLES -------------------------------------------------------------------------
  21.  
  22.         private var _id:int;
  23.         private var _url:String;
  24.        
  25. //- PUBLIC & INTERNAL VARIABLES ---------------------------------------------------------------------------
  26.        
  27.         public static const DEFAULT_NAME:String = "com.reintroducing.menusystem.ui.MenuButton";
  28.        
  29.         // instances
  30.         public var bg_mc:MovieClip;
  31.         public var title_txt:TextField;
  32.        
  33. //- CONSTRUCTOR -------------------------------------------------------------------------------------------
  34.    
  35.         public function MenuButton()
  36.         {
  37.             super();
  38.            
  39.             this.init();
  40.         }
  41.  
  42. //- PRIVATE & PROTECTED METHODS ---------------------------------------------------------------------------
  43.        
  44.         private function init():void
  45.         {
  46.             this.buttonMode = true;
  47.             this.mouseChildren = false;
  48.             this.setEnabled();
  49.         }
  50.        
  51.         /**
  52.          * Resets the button to its original state.
  53.          */
  54.         private function reset():void
  55.         {
  56.             TweenLite.to(this.bg_mc, .25, {mcColor: 0x999999});
  57.         }
  58.        
  59.         /**
  60.          * Executed when you mouse over the button.
  61.          */
  62.         private function doMouseOver($evt:MouseEvent):void
  63.         {
  64.             TweenLite.to(this.bg_mc, .25, {mcColor: 0x333333});
  65.         }
  66.        
  67.         /**
  68.          * Executed when you mouse out of the button.
  69.          */
  70.         private function doMouseOut($evt:MouseEvent):void
  71.         {
  72.             this.reset();
  73.         }
  74.        
  75.         /**
  76.          * Executed on release of the button.
  77.          */
  78.         private function doClick($evt:MouseEvent):void
  79.         {
  80.             navigateToURL(new URLRequest(this._url));
  81.            
  82.             this.dispatchEvent(new MenuButtonEvent(MenuButtonEvent.CLICKED, {id: this._id}));
  83.         }
  84.        
  85. //- PUBLIC & INTERNAL METHODS -----------------------------------------------------------------------------
  86.    
  87.         /**
  88.          * Assigns the button a name and ID for later retrieval through events.
  89.          */
  90.         public function create($name:String, $title:String, $id:int, $url:String):void
  91.         {
  92.             this.name       = $name;
  93.             this._id          = $id;
  94.             this.title_txt.text = $title;
  95.             this._url       = $url;
  96.         }
  97.        
  98.         /**
  99.          * Allows the button to be clickable and functional.
  100.          */
  101.         public function setEnabled():void
  102.         {
  103.             this.enabled = true;
  104.             this.reset();
  105.            
  106.             this.addEventListener(MouseEvent.MOUSE_OVER, doMouseOver);
  107.             this.addEventListener(MouseEvent.MOUSE_OUT, doMouseOut);
  108.             this.addEventListener(MouseEvent.CLICK, doClick);
  109.         }
  110.        
  111.         /**
  112.          * Disables the button and kills its events.
  113.          */
  114.         public function setDisabled():void
  115.         {
  116.             this.enabled = false;
  117.            
  118.             this.removeEventListener(MouseEvent.MOUSE_OVER, doMouseOver);
  119.             this.removeEventListener(MouseEvent.MOUSE_OUT, doMouseOut);
  120.             this.removeEventListener(MouseEvent.CLICK, doClick);
  121.         }
  122.    
  123. //- EVENT HANDLERS ----------------------------------------------------------------------------------------
  124.    
  125.        
  126.    
  127. //- GETTERS & SETTERS -------------------------------------------------------------------------------------
  128.    
  129.         public function get id():int
  130.         {
  131.             return this._id;
  132.         }
  133.        
  134.         public function set id($val:int):void
  135.         {
  136.             this._id = $val;
  137.         }
  138.    
  139. //- HELPERS -----------------------------------------------------------------------------------------------
  140.    
  141.         public override function toString():String
  142.         {
  143.             return "com.reintroducing.menusystem.ui.MenuButton";
  144.         }
  145.    
  146. //- END CLASS ---------------------------------------------------------------------------------------------
  147.     }
  148. }

The MenuButtonEvent file has stayed the same so I won't post it for the sake of brevity. If you'd like to see anything else added to this example, let me know as I've probably taken it as far as it will go for the time being.

Tags: , , , ,

AS2 → AS3: Scripted Tweening

November 1, 2007 in AS2 to AS3, Beginner | Show Some Love | | No Comments »

Download Example Files
Download TweenLite

The Tween class hasn't changed at all since moving from AS2 to AS3, but there are some subtle differences in handling the events in it because of the new event architecture. Let's take a look at the code to tween a box diagonally down the stage in AS2:

PLAIN TEXT
Actionscript:
  1. import mx.transitions.Tween;
  2. import mx.transitions.easing.*;
  3.  
  4. var xTween:Tween = new Tween(box_mc, "_x", Regular.easeOut, 0, 500, .5, true);
  5. var yTween:Tween = new Tween(box_mc, "_y", Regular.easeOut, 0, 350, .5, true);
  6.  
  7. xTween.onMotionFinished = function():Void
  8. {
  9.     trace("Finished tweening the box.");
  10. };

Now here is that code in AS3:

PLAIN TEXT
Actionscript:
  1. import fl.transitions.Tween;
  2. import fl.transitions.easing.*;
  3. import fl.transitions.TweenEvent;
  4.  
  5. var xTween:Tween = new Tween(box_mc, "x", Regular.easeOut, 0, 500, .5, true);
  6. var yTween:Tween = new Tween(box_mc, "y", Regular.easeOut, 0, 350, .5, true);
  7.  
  8. xTween.addEventListener(TweenEvent.MOTION_FINISH, onMotionFinished);
  9.  
  10. function onMotionFinished($evt:TweenEvent):void
  11. {
  12.     trace("Finished tweening the box.");
  13. }

As you can see, not much has changed, and you still have to make a new tween for each property you want to tween. Enter TweenLite, Jack Doyle's AS3 lightweight tweening engine. I now use this for AS3 tweens and it gets the job done the way I like it. It's also nice that it's just one static call. Here is the code:

PLAIN TEXT
Actionscript:
  1. import fl.transitions.easing.*;
  2. import gs.TweenLite;
  3.  
  4. TweenLite.to(box_mc, .5, {x: 500, y: 350, ease: Regular.easeOut, onComplete: onMotionFinished});
  5.  
  6. function onMotionFinished():void
  7. {
  8.     trace("Finished tweening the box.");
  9. }

Much shorter code and the ability to tween multiple properties in one line!

Tags: , , , ,