Written by: Jim Durand, durand AT iinet DOT net DOT au
Difficulty Level: Beginner
Requirements: Flash 5
Topics Covered: instances and masking
Assumed knowledge: none.

Download the source file here.

I can't remember where I found the first tutorial that I got this idea from so I don't know who to give credit to. I wrote this because most continuous scrolls require that you put two identical graphics side by side and just repeat the movement. With this one you can put your graphics anywhere on the stage. This is a scalable continuous scrolling newsreel.

We start with 5 small strips but can add as many as we like by changing 1 line of code. It has a bit of masking and 3d effect and scripting that allows you to put your movie strips anywhere on the stage for ease of use. This tutorial puts the swf at 0,0 but if you follow the (soon to be released)advanced tutorial you can put the first slide anywhere on the stage and everything else will be automatically put in place.

Ok, let's start.

Create layers called: action, fade, mask, and movie strips and keep them in that order.

All the code goes in frame 1 of the action layer.

On the Movie strips layer, create a 200 x 80 shape, with coordinates of 0,0

We are going to convert this to a movie clip but we have make sure that our coordinates inside the movie stay at 0,0. We can edit after we convert or just make sure the shape is at 0,0 and tick the upper left box on the registration point dialog in the advance button when we convert.

Hit F8 and convert it to a Movie Clip called reel_1(see picture)

It is very important that the registration point is top left. I think it has something to do with referencing the _x value of a Movie Clip. Because it references it relative to the main timeline.

Ok, I hate to repeat myself but you get unexpected results if this isn't correct. Edit the Movie reel_1 and make sure the shape is at 0,0.

You could create 5 instances of reel_1 on the stage and give them instance names from slide_1 to slide_5, but then you couldn't have different stuff on each slide. Sooo? duplicate the Movie clip ?reel_mc? 4 times so you have 5 Movies in the library.(control+L to open library, then right click on reel-mc.)

Make sure you have one of each on the stage.

For the purpose of this exercise, edit each movie clip and add something

Distinguishing to each one

As you can see, it doesn't matter where I put the rest of the slides.

It is not within the scope of this tutorial, but obviously you could edit these movie clips and add buttons, movies etc.

OK, give them instance names slide_1 to slide_5

OK, let's look at the code:

I have pasted it from here to the first frame in the actions layer of the main timeline and it works. Just remember to have your movie instance names correct. That is slide_1 slide_2 slide_3 slide_4 and slide_5

//slide_number is the total number of slides on the stage.
//This is the one you change if you add or delete slides
slide_number = 5;
//this controls how fast the reel scrolls
reel_speed = 3;
//slide_count always starts at 3, because
// Slide's 1 and 2 are already in place from the
// following lines
slide_count = 3;
m1 = _root.slide_1;
m2 = _root.slide_2;
m1._x = 0;
m1._y = 0;
m2._x = 200;
m2._y = 0;
//You will notice above movie 2 starts at 200.
// This is because our clips are 200 wide.
//this calls the function below it every frame
this.onEnterFrame = function() {
        _root.moveLeft(reel_speed);
};
//Ok, this function moves the movies left until
//they move 200 pixels, then loads the next slide in line.
// There always has to be two clips moving side
//by side so that when we mask this it will
//look continuous.
function moveLeft(nPixels) {
        m1._x -= nPixels;
        m2._x -= nPixels;
        //Ok, these if statements basically say
        //"I'm done with that slide, give me the next
        //one in line and I'll put it next to the one that is
        //still scrolling.
        //Once the number of slides is reached
        //the IF returns the count to the beginning.
        //and slide_1 starts again
        if (m1._x<-200) {
                m1 = _root["slide_" + slide_count];
                slide_count = slide_count += 1;
                if (slide_count > slide_number) {
                        slide_count = 1;
                }
                //Ok, this is a grey area. There seems to be some
                //kind of latency between the time the movie is told
                //to load(onEnterFrame) and when it appears on screen. If anyone
                //can explain this to me that would be great.
                //If you speed the reel up, or scale the slides up,
                //you need to play with this. What I'm doing is putting the
                //next slide in 6 pixels shorter on the _x because the delay
                //shows gaps in the reel. You could put a background behind
                //the reel and not worry about the little gaps. This seems
                //to fix the problem though.
                m1._x = 194;
                m1._y = 0;
        }
        //Same as above, only with the alternative slide
        if (m2._x<-200) {
                m2 = _root["slide_" + slide_count];
                slide_count = slide_count += 1;
                if (slide_count > slide_number) {
                        slide_count = 1;
                }
                m2._x = 194;
                m2._y = 0;
        }
}

Test the movie and you should see how it works.

That's it for the code. Now we have a bit of masking to do.

On the mask layer, drag another instance of reel_mc onto the stage and break it up(modify->Break apart) then convert it(F8) to a graphic called mask. It doesn't matter about the registration point because it doesn't move. Just make sure you place it at 0,0

Right click on the mask layer and click mask.

Test the movie again.

All that's left now is the background colour and a gradient fill graphic for a slight 3d effect.

Change the background to your favourite colour.

On the fade layer, drag an instance of the mask graphic and break apart and convert to a graphic called fade. Position it at (yes, you guessed it) 0,0

Open up the Color Mixer Panel. Edit the fade graphic. Select the shape and then select Linear in the color mixer panel.

Add 7 tabs(gradients).

From left to right I have gone:

Background color at 100% alpha

Background color at 90% alpha

Black at 35% alpha

White at 10% alpha

Black at 35% alpha

Background color at 90% alpha

Background color at 100% alpha

That's it.

Jim Durand