You may have a need to add in some scrolling text to your flash animation. I add this functionality to a lot of musician websites where I scroll the currently playing music track, but it can easily be used to display content such as blog posts or news headlines - really anywhere you want to display a larger amount of information than you have space for. The very simple example is below:

For this example I created a new flash document and then created a new movie clip symbol which I called scoller_mc. Here I created some static text and placed it on the stage. Selecting it, I hit F8 to convert it to a graphic symbol so I can easily add motion tweening to it.

Next I create a new layer in the movie clip above the first layer with the text graphic symbol placed on it (I’ve renamed this first layer to text and name the new layer I’ve created to mask - thats right we’ve dealing with the dreaded masking options!). In this new mask layer I created a rectangle using the drawing tools and placed it right over my text. I hit F5 out around the 90th frame of the mask layer to extend the length of this movie clip.

 I then insert some keyframes on the text layer. The first one is about 40 frames out, with subsequent keyframes at 65,66 and 90. At the 65th frame I move my text right horizontally so that it is no longer covered up by the rectangle on the mask layer. In the 66th frame I move the text left horizontally again so that it is not covered by the rectangle but this time on the other side. The 40th and 90th frame I do not touch.

I then add motion tweens between the 40th and 65th frame and 66th and 90th frame. Scrubbing the timelime shows the text stay hidden under the rectangle for awhile, then move out from under it to the right, then back under it from the left. Now is where the mask comes into play - I right click on the mask layer and select the mask option. This makes many changes to timeline namely nesting the text layer under the mask layer and locking them both. For those unfamiliar with masks, any content on a mask layer acts as a sort of template for the content beneath it - only content beneath it that is covered by content in the mask layer is visible in the rendered animation.

Next go back to your main movie and drag an instance of this scrolling text movie clip to the stage and test your movie - you should have a similar effect to above.

Now this is obviously a pretty simple effect - how can we make more out of it? Well there are lots of options! You can convert the text from static to dynamic and add an instance name to it. Then you can dynamically change the text displayed in the scroll using actionscript (for example you could parse a blog rss feed and scroll the latest blog headlines). You can add additional shapes to the mask layer to create different effects as the text moves off (consider checkerboards on the edges for example). You can add actionscript to the movie clip for the onRollOver method of the clip to pause it so the text stays in place. You can add a link to the text that scrolls so your users can click it to go to that particular blog entry or news headline (this requires updating the links each time you update the dynamic text of course).

Please drop a comment if you have thoughts or ideas on this concept. Thanks for reading!

Download Flash Simple Scroll Animation Sample FLA Files