Tuesday, April 26, 2011

Simple Photo Viewer [part1]:Build a Button Effect with TimelineMax and TweenMax



In this tutorial we will be using GreenSock TimelineMax and GreenSock TweenMax to build a cool button.It can be easy to animate object which you want.You can download the latest version of those classes here.

Step 1: New File
Open Adobe Flash and create an ActionScript 3 Flash file.Save and name it "Main1.fla".



Step 2: Properties
Open the properties and set the FPS to 30 and the stage size to 800 x 400px



Step 3: Build a MovieClip
Build a MovieClip according to the image below:
(You can see how to do in the following steps)



Step 4: Square_mc
Create a gradient red(#E70735,#72051C) rectangle 50×50 px and with no stroke. Make it a movieclip symbol and call it "square_mc".Set a Instance name "square_mc" in the Properties panel.




Step 5: Btn_mc
Select square_mc and hit F8 and create a new movieclip called “btn_mc”.
(It contains square_mc)



Step 6: Title_txt and Reflex_mc Layers
Create two more layers inside btn_mc (besides the one already present with square_mc). Name them: "title_txt" and "reflex_mc".



Step 7: Reflex_mc
Create a transparent(alpha 0%~30%) red(#E70735) rectangle 50×30 px and with no stroke.Select the rectangle in the reflex_mc layer,hit F8 and create a new movieclip called "reflex_mc".Set a Instance name "reflex_mc" in the Properties panel.



Step 8: Title_txt
Create a dynamic text.Select the dynamic text in the title_txt layer.Set a Instance name "title_txt" in the Properties panel.



Step 9: ActionScript
create an ActionScript file.(BtnMC.as)


Step 10: Save with Main1.fla
Name it "BtnMC.as", save it in the same folder as your Main1.fla.



Step 11: BtnMC.as
BtnMC.as structure will be like this...
package {

    public class BtnMC extends Sprite {
 
        public function BtnMC()  {

        }

    } 

}


Step 12: Import Necessary Classes
Start by importing these Classes inside your package:
package {
import flash.display.MovieClip;  
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.text.TextField;
import com.greensock.TimelineMax;
import com.greensock.TweenMax;
import com.greensock.easing.*;


Step 13: Variables
Inside your class define these variables:
public class BtnMC extends Sprite {
        //use static property to record how many BtnMC instances was builded
        private static var _totalNum:int = 0;

        //record current BtnMC instance number
        private var _currentNum:int = 0;

        //new TimelineMax instance
        private var navTimeline:TimelineMax = new TimelineMax();

        //BtnMC instance contains square_mc,reflex_mc,title_txt
        public var square_mc:MovieClip;
        public var reflex_mc:MovieClip;
        public var title_txt:TextField;


Step 14: Constructor
The constructor is a function that runs when an object is created from a class.
public function BtnMC(){
    //when new BtnMC instance,_totalNum increase 1
    _totalNum++;
    //_countNum assigned to the title_txt 
    setNum();
    //set button's animation(navTimeline)
    setMove();
    //set addEventListener
    setBtn();
}


Step 15: setNum()
private function setNum():void {
    //let the current total number of generated assigned to _currentNum 
    _currentNum = _totalNum;
    //close title_txt receives mouse messages
    title_txt.mouseEnabled = false;
    //give the current BtnMC instance a current numbers and show it in the dynamic text
    title_txt.text = String(_currentNum);
}


Step 16: setMove()
private function setMove():void {
    //Set animation inside btn_mc
    navTimeline.insertMultiple([
    new TweenMax(this, .5, { glowFilter: { color:0xffffcc, alpha:1, blurX:15, blurY:15 },colorTransform: { tint:0xffffff, tintAmount:.5 }} ),
    new TweenMax(this.square_mc, .5, { y: -15 } ),
    new TweenMax(this.title_txt, .5, { y: -15 } ),
    new TweenMax(this.reflex_mc, .5, { y: 80 }) ]
    );
    //pause navTimeline animation at first
    navTimeline.pause();
}


Step 17: setBtn()
private function setBtn():void {
    //let square_mc show hand cursor
    square_mc.buttonMode = true;
    //associates the mouse events
    square_mc.addEventListener(MouseEvent.MOUSE_OVER, overSquare);
    square_mc.addEventListener(MouseEvent.MOUSE_OUT, outSquare);
}


Step 18: MouseEvent
Let's now handle the MOUSE_OVER and MOUSE_OUT MouseEvent:
private function outSquare(e:MouseEvent):void {
    //reverse navTimeline animation
    navTimeline.reverse();
}
  
private function overSquare(e:MouseEvent):void {
    //play navTimeline animation
    navTimeline.play();
}

Step 19: Getter
Let it can get more information from BtnMC instance.
public function get currentNum():int {
    return _currentNum;
}
  
public function get totalNum():int {
    return _totalNum;
}


Step 20: The Complete Code
Here's the full BtnMC.as code
package {  
    import flash.display.MovieClip;  
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.text.TextField;
    import com.greensock.TimelineMax;
    import com.greensock.TweenMax;
    import com.greensock.easing.*;
 
    public class BtnMC extends Sprite { 
        private static var _totalNum:int = 0;
        private var _currentNum:int = 0;
        private var navTimeline:TimelineMax = new TimelineMax();
        public var square_mc:MovieClip;
        public var reflex_mc:MovieClip;
        public var title_txt:TextField;
  
        public function BtnMC()  {
            _totalNum++;
            setNum();
            setMove();
            setBtn();
        }
  
        private function setNum():void {
            _currentNum = _totalNum;
            title_txt.mouseEnabled = false;
            title_txt.text = String(_currentNum);
        }
  
        private function setMove():void {
            navTimeline.insertMultiple([
            new TweenMax(this, .5, { glowFilter: { color:0xffffcc, alpha:1, blurX:15, blurY:15 }, colorTransform: { tint:0xffffff, tintAmount:.5 }} ),
            new TweenMax(this.square_mc, .5, { y: -15 } ),
            new TweenMax(this.title_txt, .5, { y: -15 } ),
            new TweenMax(this.reflex_mc, .5, { y: 80 }) ]
            );
            navTimeline.pause();
        }
  
        private function setBtn():void {
            square_mc.buttonMode = true;
            square_mc.addEventListener(MouseEvent.MOUSE_OVER, overSquare);
            square_mc.addEventListener(MouseEvent.MOUSE_OUT, outSquare);
        }
  
        private function outSquare(e:MouseEvent):void {
            navTimeline.reverse();
        }
  
        private function overSquare(e:MouseEvent):void {
            navTimeline.play();
        }
  
        public function get currentNum():int {
            return _currentNum;
        }
  
        public function get totalNum():int {
            return _totalNum;
        }
    } 
}



Step 21: Associate Class
Click right on the btn_mc in the library panel.Select properties and set them such as the image below:



Step 22: Use It
Now your can drag several btn_mc to stage in the library panel and publish it.
You will see how easy and cool to create a button by TimelineMax and TweenMax.

Conclusion
Thanks for reading!I hope you liked this tutorial.Here is cs4 and cs3 versions up on the zip file.I will complete the part2 tutorial as soon as possible.

CS3 version:
Simple_Photo_Viewer_part1_cs3.rar

CS4 version:
Simple_Photo_Viewer_part1_cs4.rar



.

5 comments:

  1. Hey how can i adress some code to change the boton text to something custom like

    myText_txt = "txt";

    ReplyDelete
  2. Hi!RAmon
    If you want to have a button with custom text.
    You need to give each button a instance name(myButton1...) in Properties panel.
    Then set text to each button in Main2 code(part2).
    For example:
    Nav_mc.myButton1.title_txt.text = "txt1";

    ReplyDelete