Flash Tutorials

XMLStyleMellowBlueMonkey

Scroller

Skill Level: Intermediate
Knowledge Needed: Movie Clips, Buttons, Labeling
Number of Steps: 9
The Movie
-----------------------------------------------

------------------------------------------------
Download Flash File
Learn how to make a simple scroller which can call a text or HTML file. Very useful for news updates, etc.

Spreadshirt
Picture 1
Step Start off by starting a new movie: File>New. Then go to Modify>Movie and change the width and height to whatever your prefference 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.

Picture 2
Step 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.

Picture 3
Step 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 rightclick 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 ();

Picture 4
Step 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".

Picture 5
Step 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);
(You can click on the left image to see a larger version:)

Picture 6
Step 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);
(You can click on the left image to see a larger version:)

Picture 7
Step 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 whereever 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 propert, name it "downtrigger".

Picture 8
Step 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 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 :)

Discuss this tutorial »
Written by: Akash Goel
Back to Flash TutorialsTop


Copyright © 2000-2008 Spoono, LLC. All rights reserved.
Network: Reseller Web Hosting by Spoono Host | Spoonloads | Absolute Cross
Terms of Service | Privacy Policy.

kdfj