Friday, November 18, 2005

Flash scrolling-Loop Image Bar

Well this is my first post and I am doing it because everywhere I looked for a tutorial on a flash scrolling-loop Image Bar with navigation, kept coming up short. I am also very impatient and searching gets on my nerves at times, but enough about my bad habits.

Below is an exmple of the .swf file. If it looks choppy it is because I reduced the site to fit in the blog.

The actual movie is used in the Laura Munder Website : One of my Client's

The creation of this flash movie was a joint effort of mine and one of my contractors. Our first version of the movie used tweening actions which were ok until it caused all the images to wiggle while scrolling. It also was a nuisence to edit the speed of the animation. You would have to extend the tweens and play around with the frames. To make a long story short, it was not very efficient and any future update or request would take more time then I wanted to.

So how did I do it? Well, I took my contractor's file stripped all tweenings and used all actionscript to control the animation. The movie consist of the following symbols.
  1. 15 Buttons (one for each image)
  2. 2 movie clips
    • photos
      This holds all the 15 button/images
    • mc_scrolling
      This holds two instances of the photos movie symbol, it is only one frame.
Now that we have all our symbols it only took a couple of lines of actionscript to make it all work. In my _root timeline on the first frame I wrote the following:
var mySpeed:Number;
var myCount:Number=0;
var keepMoving:Boolean;

_root.onEnterFrame = function(){
 if (myCount >= 2473){
  if (keepMoving){
   _root.thisBar_mc._x -= mySpeed;
   myCount+= mySpeed;  
So what does all this mean? Simple I will explain.
The first section of the script sets all my variables that I need so I can control all the actions for the movie.
mySpeed: Controls the speed of the movement of the clip
myCount: Lets me know the movie clip is currently on
keepMoving: A simple boolean vale to control the movement action
The second part takes care of the movement by utilizing onEnterFrame.
First I check if myCount is greater than or equal to 2473 (this is the total length of my movie clip in pixels). If it is what I do is set the current x position of the movie clip to -739 and set myCount to 739. This automatically places the clip back to the location where the images continue to loop. Why did I choose 739, well because my main movie's width is 738px.
If myCount is Less than to 2473 I just continue the motion of the clip and keep increasing the value of myCount.
At the end of the script there is a stop() action. THis keeps the movie from looping back to the preloading scene.
That's it, simple huh?!

I know, you are asking how do I stop the animation, well that is simple too. Within the photos movie clip every button has the following actionScript:
 on (rollOver) {
 on (rollOut) {
 on (release) {
Ok so here is the breakdown;
The first action on (rollOver) sets the keepMoving variable to false which if you look at the first chunk of code, there is a check if keepMoving is true. If keepMoving is true the movie clip will continue movement and the variable myCount continues to increase.
The second action on (rollOut) set the keepMoving variable to true, which allows for the movie to continue movement.
THe third action on (release) is where you set a url to go to.

You can download the source here, hope this was useful to some of you.

I know there are more things that I can do streamline it even more, like use only one image on the buttons and write the magnification in actionscript and create forward and backwards movement. Maybe that will be my next post.

Post a Comment