Simple Rotating Images (As3)
In the last week of talking in various channels, at least a few people have asked for help with the code to dynamically rotate several images in a loop.
I’ll show you two different ways you can do this, both leading to the same result. You can look at the method i would use, (which includes the use of Tweener, and another way using Flash’s built in tween system.
If you want to follow along using my method, i have a pre-prepared file that you can start with at this link.
The images used in this tutorial are not my own, rather by one of my favorite digital artists Greg Martin.
1) My way, using Tweener.
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 | // import Tweener import caurina.transitions.Tweener; // imageNum will hold the current image we are viewing, // imgArray will store a list of all the images in use var imageNum:int = 0; var imgArray:Array = new Array(); /* create a for loop construct to iterate through all the display objects on the stage the code that loops takes each display object and stores it in our imgArray, and then changes the alpha value of each one to zero so nothing is visible on screen */ for (var i:int = 0; < this.numChildren; i++) { imgArray.push (this.getChildAt(i)); imgArray[i].alpha = 0; } // create a function called tweenImg. You can then call this function whenever we want the image to change function tweenImg () :void { var secondNum:int = 0; //define a variable to hold the index of the next image to be shown //tell Tweener to create a new tween which will wait 1.5 seconds and then set the alpha property of the current image to 0. Tweener.addTween(imgArray[imageNum], {delay: 2, alpha: 0, time: 1, transition:"easeOutCubic"}); //check if the current image is the last one in the list. If so, reset the index to 0, otherwise increase the index by 1. //tells the next image to fade in imageNum >= imgArray.length - 1 ? imageNum = 0 : secondNum = ++imageNum; Tweener.addTween(imgArray[secondNum], {delay:2, alpha: 1, time: 1, transition:"easeOutCubic", onComplete:tweenImg}); } // start the loop cycle by fading in the first image and calling the tweenImg function when it’s finished. Tweener.addTween(imgArray[0], {alpha: 1, time: 1, onComplete:tweenImg}); |
That’s all! You now have a series of images that all fade in and then out continuously. Finished files are available at this link.
2) The other way, using the bulit in tweening engine.
I wrote the alternative way of achieving the same result using flash’s own inferior tweening system.
I’m not going to post it here though, instead you’ll find the complete working files for this method, along with the one previously discussed at this link.
Good luck!
Comments (2)
2 Responses to “Simple Rotating Images (As3)”
hey razzz
im on your internets!
Hey, I really like this way of doing it. Is there anyway of incorporating xml to import the images? So the images could be located somewhere else.
Thanks