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:
// PART 1 VARIABLES
var mySpeed:Number;
var myCount:Number=0;
var keepMoving:Boolean;
keepMoving=true;
mySpeed=1;

// PART 2 FUNCTION
_root.onEnterFrame = function(){
 
 // CHECK FOR RESTART
 if (myCount >= 2473){
 
  _root.thisBar_mc._x=-739;
  myCount=739;
 
 }else{
  
  // CHECK FOR MOVEMENT OF SCROLLING MOVIE
  if (keepMoving){
   _root.thisBar_mc._x -= mySpeed;
   myCount+= mySpeed;  
  }
 
 }
 
}
stop();
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) {
  _root.keepMoving=false;
 }
 
 on (rollOut) {
  _root.keepMoving=true;
 }
 
 on (release) {
  getURL("urlHere"); 
 }
 
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.
NOW THAT IS SIMPLE RIGHT!

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.

JC

26 comments:

  1. As Bex said, I too experienced the same problem. I think you have done it in Flash 8. I only have MX. Not yet upgraded.
    Well, I was searching for the code for a simple magnification in flash. Most of the magnification effects I got from the net was just masking; Not scripting. I want to have it as a tool which will work (ideally) in all swf files. Even over loaded movies. Just a simple magnifier. Please post a lesson in your blog on this.

    ReplyDelete
  2. Hey Bex,

    What version are you using and to answer Hackingtom, yes I did this in Flash 8.

    If you'd like I can create and older version. Please let me know and I will supply.

    ReplyDelete
  3. did anyone ever get one for mx? i would really love it. thank you!

    ReplyDelete
  4. Hello Everyone,

    I assume no one needs this by now and I apologize for never putting it up sooner. But an MX version of the source is available here for download. Again, I apologize for not getting it up sooner.

    ReplyDelete
  5. Anonymous9:58 PM

    Where does the 2473 come from? Photos MC appears to be 1765 and mc_scrolling is 3530. Maybe I failed math.

    ReplyDelete
  6. Anonymous5:10 PM

    I've found setting the clip and myCount back to 0 works better.

    So you have 2 instances of the Photos clip in mc_scrolling. After if scrolls through the first instance set the counter and x value back to 0

    ReplyDelete
  7. thanks mate great work

    ReplyDelete
  8. Anonymous2:02 AM

    I had to use 7zip to open it

    ReplyDelete
  9. Anonymous3:58 AM

    quick note, if you are going to use this (excellent btw) source and just modify to use your own buttons make sure your instance names are the same.

    Also from what i can tell you don't have to worry about the number counts too much if your scrolling display is going to be bigger than his.

    ReplyDelete
  10. Anonymous5:58 PM

    hi, the downloadable source worked perfectly, but i have replaced your images with with my own buttons that i would actually like to link to a different scene. is there anything particular to do for that to work?

    i have used this action:

    on (release) {
    gotoAndPlay("scene", 1);

    ReplyDelete
  11. Anonymous6:28 AM

    Can't open your file, mate. I use Flash 8.0, and i get the 'file format' error. Try saving it out to an earlier version of flash.

    ReplyDelete
  12. Anonymous9:03 PM

    Great script, my compliments! But I'm having some problems with the enlarged "popup" (I'm working with 100x100 and 200x200 px images). The enlarged images are overlapped on one side by the next small image...

    ReplyDelete
  13. Anonymous9:32 AM

    Hi. This is exactly what I was looking for, unfortunately I can't open either one of the files. Same as what Bex said, it says "unexpected file format". It seems like the file does not have a file extension.
    PS I work with Flash CS3

    ReplyDelete
  14. I wasn't able to get the roll over stop/start to work...
    So instead of putting the code on each button I just did this on the main timeline actions frame:

    _root.scrolling_mc.onRollOver = function() {
    _root.keepMoving=false;
    }

    _root.scrolling_mc.onRollOut = function() {
    _root.keepMoving=true;
    }

    (I used "scrolling_mc" to name my movie clip.) Works like a charm!

    ReplyDelete
  15. Anonymous6:08 AM

    Jena, could you open the file? I can't get it to work with just the code, so I would love to see it in the file...

    ReplyDelete
  16. Anonymous3:18 AM

    Well Done!
    I able to download and manipulate this file.

    Love it. Thanks For Sharing ;)

    ReplyDelete
  17. Anonymous8:51 AM

    Hi, I couldn´t open the file.

    Could you please make it available for Flash 8 again? Error says: unexpected file format.

    Thanks for sharing the code. I too spent some time finding no hints at all as how to solve this. Thanks again,

    Connie

    ReplyDelete
  18. Anonymous3:50 PM

    Hello I am trying to have a flash loop scrolling image bar. I am using your file as a template but it scrolls the whole way through the 1st time and the second, halfway and then back to the beginning.. The image width is 2587 px, which is pretty long. If you could be of some assistance I would really appreciate it, I have been doing this for a week now, 8 hours a day.

    ReplyDelete
  19. Anonymous8:32 PM

    Yes could you please make this avalible for flash 10 ^_^.

    ReplyDelete
  20. This worked great! Thank you so much!

    ReplyDelete
  21. hey am not able to download the source code can some upload it again..

    plss help me i desperately need it :)

    ReplyDelete
  22. Is there anyway that this can be re uploaded or if I can get a copy of this?

    ReplyDelete
  23. Hello Tom,
    I am sorry I have not kept up with my blog, I am currently at work but I will try to get this up sometime today. I moved my domain a long time ago and didn't move this zip file for download. I am steeping out for a lunch meeting but I get back I will get this up and post back.

    ReplyDelete
  24. I've updated the file on my server and now the download the source by clicking on the link above in the post or CLICK HERE TO DOWNLOAD

    ReplyDelete
  25. Anonymous4:47 PM

    Hi, I was wondering if it's possible to scroll in the opposite direction.
    Thanks!

    ReplyDelete