Archive for category Actionscript 3
Easing Image Slider with AS3
Posted by timstepp in Actionscript 3, Programming on June 3, 2009
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


Change your Document Properties



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; } |
Actionscript 3, as3 image effect, as3 slider, ease, easing, image slider, random, random as3 x
-
You are currently browsing the archives for the Actionscript 3 category.
-
-
Blogroll
Creative
DesignWorks
Development
-
Archives
- November 2009 (2)
- October 2009 (1)
- September 2009 (4)
- June 2009 (2)
-
Meta
