Featured Flash FLA 11380 Flash Movies | 4 New Flash Movies Added What's New | Top 100 Featured FLA » Author: Wijdan Rohail » Title: Handwritten Masking Text Effect » Description: Today we are going to make a Flash Animation, in which you will see Hand written text. You can make Text Animation of Drawing Text quiet easily. Hopefully you will like it. You can also download Source FLA file in the last to check it » More by Wijdan Rohail Random FLAs | Add Flash Movie Featured Flash Site 5427 Flash Sites | 1 New Flash Links What's New | Top 100 Flash Site Featured Site » Posted in the Flash Kit Links section » Title: !!!!SONIC-OPTIONS » Description: Sounddesign for multimedia. Visit our buttonsound demo, and get some free sounds. Random Links | Add your own Flash Related Links

1387 Tutorials 7 New Tutorials Added! What's New | Top100 » Making an Interactive Anniversary Invitation Easily » Making Flash Cooking Recipes Photo Gallery with Interactive Thumbnails » Publishing an Animated Website for Youtube » Making Batch Publish Video With a Playlist Easily » Making Batch Publish Video With a Playlist Easily » Making Flash Halloween Photo Slideshow Easily » Building a Frontpage of a Simple Webstore » Creating Interactive Photo Slideshow for Android Platform » Making Flash Presentation using Auto Panning Easily » Unknown Tag: Title10 Random Tutorial | Add Site

Web Production Manager Targus US-CA-Santa Monica Post A Job | Post A Resume

Tutorials Home What's New Top Rated Submit myTutes Random!

Tutorials » Actionscripting/Basic

Building Easy Text or Images Scrolling with Flash MX 2004
Author: Oleg Lazarenko | Website: http://www.metamorphozis.com |

There are many websites in the Internet built using Macromedia Flash technology. You probably saw different types of scrolling on those websites. I would like to show you one of the easiest ways to create a scroll bar with the mask. It may be used not only for text scrolling but you may also put images into that scrolling. If you experience some difficulties while reading this tutorial it is recommended to read all the previous tutorials on http://www.metamorphozis.com written by me as some aspects might be discussed earlier.

1. Launch Flash MX 2004

2. Create new Flash file. Click File> New...

3. Select Flash Document in a new window

4. Create 2 blank layers. Name the first one "Buttons" and the second one "Mask and Content"

5. Select the "Mask and Content" layer and with the "Rectangle Tool" draw a simple rectangle shape. Set the shape color to black.

6. Select the "Buttons" layer and drag it to the top then with the "Pen Tool" draw up and down arrows.

7. Select the "Mask and Content" layer and with the "Rectangle Tool" draw a white rectangle within the black shape. Convert shape into the movie.

8. Type in the movie instance name to "text"

9. Above the "Buttons" layer create a new blank layer, call it "Control".

10. Press "Ctrl+F8" to create a new symbol. Call it "control". You will see the blank screen appear but do not worry. We will need this movie to hold an action script coding which will be used to calculate up and down the movement of our text layer.

11. Now create 2 blank layers in the "control" movie. Call them "Up" and "Down".

12. 12. Create 3 blank keyframes in the "Up" layer. Add the following action script code to the first frame of the "Up" layer:
stop();

13. Select the second frame and add action script code:
y = getProperty("_root.text.content", _y);
if (y>100) {
gotoAndStop(1);
} else {
setProperty("_root.text.content", _y, y+6);
}

14. Select the third frame and add the action script code:
gotoAndPlay(2);

15. Select the fourth frame of the "Down" layer and create a blank keyframe. Add the following action script code:
stop();

16. Create the fifth blank keyframe in the "Down" frame. Add the action script code:
y = getProperty("_root.text.content", _y);
if (y<-1600) {
gotoAndPlay(4);
} else {
setProperty("_root.text.content", _y, y-6);
}

17. Create 6th blank keyframe in the "Down" layer. Add the action script code:
gotoAndPlay(5);

18. Click the "Scene 1" label to return to the root scene of your movie. Select the blank keyframe in the "Control" layer and drag the "control" movie to the working area from the "Library" panel. Set the "control" movie instance name to "control"(pic.2)


Pic.2

19. Convert the up arrow in the "Buttons" layer to the button symbol. Do not forget the set up the "Hit" area! Add the following action script code to the new button in the "Action" panel:
on (rollOver) {
tellTarget ("control") {
gotoAndPlay(2);
}
}
on (rollOut, dragOut) {
tellTarget ("control") {
gotoAndStop(1);
}
}

20. Convert the down arrow to the button symbol and add the action script code:
on (rollOver) {
tellTarget ("control") {
gotoAndPlay(5);
}
}
on (rollOut, dragOut) {
tellTarget ("control") {
gotoAndStop(4);
}
}

21. Double click "text" movie in the "Mask and Content" layer to enter it. Rename the default layer with shape to the "Mask" layer.

22. Create the new blank layer, call it "Text". Place it under the "Mask" layer. Add some text to the "Text" layer. The text must be located so that text layer began right from the starting of the "Mask" layer. As you can see the text is not visible behind the "Mask" layer but we fix that in our next step.

23. Convert the "Text" layer to the movie clip and change the instance name to "content"

24. Select the "Mask" layer, make a right mouse click and select "Mask" option form the menu. After the option was applied the layers will look like pic.2


Pic.2

That’s it! We are done with this lo-o-o-o-ong tutorial! Press “Ctrl+Enter” As you may see the arrows functional but you need to adjust numbers mentioned in the step 13 and 16(100 and 1600) to achieve smooth scrolling.
On the example you can see adjusted scrolling.

Click here to download source fla file.

About the Author: Oleg Lazarenko
Production manager of
Metamorphosis Website Design Studio -
Custom design, Website Templates,
Web design Articles and Tutorials.

You may reprint this tutorial for free as long as the content, About the Author sections and all links remain unchanged.

» Forums
	More help? Search our boards for quick answers!

Please rate this tutorial, 10 is the top rating, you can also click the comments link to read/write a review.

10 9 8 7 6 5 4 3 2 1