Posts Tagged image slider

Easing Image Slider with AS3

No Gravatar

This is a step-by-step guide for creating a sophisticated image slider using AS3. The alternative option would be to manually create tweens and loop them, but taking advantage of generating random numbers within a scope that works with your image is the “right” way to go about doing it.

This movie requires Flash Player 9

  • We will be using the Tweensy library. Make sure you download Tweensy and link it properly.
  • Create a new Actionscript 3.0 Document
  • Create a new layer on the timeline and name it “actions”
  • Select “Layer 1″ and go to File -> Import -> Import to Stage and select the image you would like to apply this effect to.
  • import to stage

    Image imported to stage on Layer 1

    Image imported to stage on Layer 1

  • Select your image on the stage, click the properties panel and note the height of the image. Decide the visible width of your flash document. Go to Modify -> Document and change the height to your noted image height and change your width as preferred.
  • Change your Document Properties

    Change your Document Properties

  • Make sure your image is selected and go to Modify -> Convert to Symbol. Name your symbol and choose “Movie Clip” from the drop-down menu. Make sure your registration is top left as show in the image:
  • create_pan_mc

  • With your pan Movie Clip selected, click the Properties Panel and give your Movie Clip an instance name “pan”. Change the X and Y values to zero.
  • change movie clip properties

  • Select the keyframe on the “actions” layer and go to Window -> Actions.
  • modify actions

  • Copy this code into your actions area. The comments explain most of the logic.
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    
    // AS3 Easing Image Slider
    // Timothy Stepp - DesignWorks Group
     
    import fl.transitions.*;
    import fl.transitions.easing.*;
     
    // Tweensy is required for this all to work. Link is on the blog page.
    import com.flashdynamix.motion.Tweensy;
     
     
    stop();
     
     
    /*
    Create min and max values for the x-position of the image.
     
    Minimum value (image moves left):
    The minimum x-position is determined by subtracting the stage width from the image width.
    This value is then multiplied by -1 since the left movement is a negative x-direction.
    If you are trying to avoid having the image shift too far to the left, you cannot have the image
    position itself at an x-value that exposes the canvas behind your image. 
     
    Maximum value (image moves right):
    The maximum x-value is zero because if the image moves any further right, the canvas behind 
    the image, on the left side will be exposed.
     
    */
    var minX:Number = ( - ( pan.width - stage.stageWidth ) );
    var maxX:Number = 0;
     
     
    /*
    Create minimum and maximum values for time length of each tween.
    */
    var minTime:Number = 20;
    var maxTime:Number = 23;
     
    /*
    Create minSlide variable
     
    The minSlide variable defines the minimum change of each sliding occurance. This is necessary 
    to maintain a smooth presentation. If a random number is generated and happens to be five pixels
    away from the current X position, think about how unfitting a ten second tween would look - the
    image would move only a centimeter in ten seconds.
    */
    var minSlide:Number = 200;
     
    // Run first tween.
    createTween( );
     
     
    function createTween():void{
    	Tweensy.to( pan, { x:randomX( ) }, randomNumber( minTime, maxTime ), Strong.easeOut, 0, null, newTween );
    }
     
    function newTween( ):void {
    	createTween( );
    }
     
     
    /*
    Generate the function that produces a random number within your scope and that respects the
    minSlide variable
    */
     
    function randomX( ):Number{
    	// Check if current x is too far right
    	if( currentX( ) > maxX ){
    		trace( "X-position exceeded maximum bound" );
    	}
     
    	// Check if current x is too far left
    	else if ( currentX( ) < minX ){
    		trace( "X-position exceeded minimum bound" );
    	}
     
    	/*
    	In order to respect the minSlide variable, create two statements that
    	guide the pan element accordingly if the current x-position is too close to the left or right.
    	*/
    	else if( ( currentX( ) - minX ) < minSlide ){
    		return randomNumber( ( currentX( ) + minSlide ), maxX );
    	}
     
    	else if( ( maxX - currentX( ) ) < minSlide ){
    		return randomNumber( minX, ( currentX( ) - minSlide ) );
    	}
     
    	/*
    	If the x-position is not within +/- minSlide away from minX and maxX, it is in the middle area.
    	A switch randomly chooses to pitch the pan left or right.
    	*/
    	else if ( currentX( ) >= ( minX + minSlide ) && currentX( ) <= ( maxX - minSlide ) ){
    		switch( Math.round( Math.random( ) ) ){
    			case 0: return randomNumber( minX, ( currentX( ) - minSlide ) );
    			case 1: return randomNumber( ( currentX( ) + minSlide ), maxX  );
    		}
    	}
     
    	else {
    		trace( "There was an unexplained error" );
    	}
     
    	trace( "Error: returning zero" );
    	return 0;
    }
     
    function currentX( ):Number {
    	return this.pan.x;
    }
     
    /*
    Function for generating a random number
    */  
    function randomNumber( low:Number = NaN, high:Number = NaN ):Number{
    	var low:Number = low;
      	var high:Number = high;
     
      	if( isNaN( low ) ){
        	throw new Error( "low must be defined" );
      	}
     
      	if( isNaN( high ) ){
    		throw new Error( "high must be defined" );
      	}
     
      	return Math.round( Math.random( ) * ( high - low ) ) + low;
    }
  • Links
  • , , , , , , ,

    No Comments