Scrolling

Step 1

Start off by starting a new movie: File » New. Then go to Modify » Movie and change the width and height to whatever your preference might be. The one I’m making is Width: 550 Height: 400. Then create the up and down arrows as it is on the left. Then select the Up Arrow and choose Insert » Convert to Symbol.Name the up arrow, “Arrow 1” and the bottom arrow, “Arrow 2”, both as behavior button.

Step 2

Alright, next you want to Start a new layer and call it “Text”. Then create a new blank keyframe in the first four frames by clicking on each frame and selecting Insert » Blank Keyframe. You also want to extend the frames of the arrow layer by right clicking on the fourth frame in the tipline and selecting Insert Frame so it looks like the figure to the left.

Step 3

Right Click on the first frame on the “Text” layer in the timeline and select Actions. Copy and paste the following line:

loadVariablesNum (“./text.txt”, 0);
where text.txt is the text or HTML file you want to call. (You must keep the ./ however). Remember your text file needs to begin with “text=”.

Go back to the timeline and right click the second frame on the “Text” layer and select Actions. On this frame Copy-Paste the following lines:

if (text ne “”) {
gotoAndStop (“end”);
}

Do the same for the third frame with the following line:
gotoAndPlay (“load”);

And finally have the fourth and last frame say:
stop ();

Step 4

Alright, on the second frame in the timeline on the “Text” layer, go to the Frame box and name it “load” as it is displayed on the figure on the left. Do the same thing for the fourth frame, except name is “end”.

Step 5

Click on the fourth frame on the text layer, and choose Insert » New Symbol and name it “uptrigger” with behavior as a Movie Clip. Once inside the movie clip, make three blank keyframes on the first three frames of the layer. Go to the first frame Actions like we did earlier in Step 3, and put in the following code: stop ();Go to the second frame Actions and place this:

/text:scroll = Number(/text:scroll)-1;

Finally on the last third frame, place this code: gotoAndPlay (2);

Step 6

Go Back to the main movie by clicking on the “Scene 1” text on the top left corner. Now, Click on the fourth frame on the text layer, and choose Insert » New Symbol and name it “downtrigger” with behavior as a Movie Clip.Once inside the movie clip, make three blank keyframes on the first three frames of the layer. Go to the first frame Actions like we did earlier in Step 5, and put in the following code:

stop ();

Go to the second frame Actions and place this:

/text:scroll = Number(/text:scroll)+1;

Finally on the last third frame, place this code:
gotoAndPlay (2);

Step 7

Alright, now go back to the main movie by clicking on the “Scene 1” on the top left and, while on the fourth frame, click on Window » Library to show the Library. You should see “Uptrigger” and “Downtrigger” in there. Click and Drag both of them onto the movie somewhere, it does not matter where. For all purposes, put the uptrigger by the up arrow, and down trigger by the down arrow. You should see a white dot wherever you placed them. Click on the “Uptrigger” white dot and go into the Instance Property and name it “uptrigger”. Then click on the “Downtrigger” dot and in the Instance property, name it “downtrigger”.

Step 8

Finally, click on the text tool, and click on where you want the top left text area to be. Then on the Text Property, set it up as it is on the left figure. After you have it set up like that, use the circle on the bottom right corner of the text area to drag it as big as you want it to be.

Step 9

Right click on your up arrow button and copy-paste this code:

on (press) {
tellTarget (“uptrigger”) {
gotoAndPlay (2);
}
}
on (release, releaseOutside) {
tellTarget (“uptrigger”) {
gotoAndStop (1);
}
}

And then go to the down Arrow and place this code:

on (press) {
tellTarget (“downtrigger”) {
gotoAndPlay (2);
}
}
on (release, releaseOutside) {
tellTarget (“downtrigger”) {
gotoAndStop (1);
}
}

One last thing, on the Text file, remember to start it off by saying “text=” and that it is in the same folder as the flash. Voila, you’re done :)

Tutorial resources

scroll.fla