Creating a Scrolling Flash Calendar

Hopefully, by now, you've noticed that the GEC Computers in the Classroom website has been made over to make things consistent and a little easier to navigate. One of the things that I did include was a Fall calendar of events that scrolls around the screen.

I had a number of people notice and ask how I did it. With the Ministry licensed Flash MX, it was pretty easy.

1) Create a new Flash document and set the stage to the desired size. In this case, I chose 100 x 200 pixels.

2) Off the stage at the bottom, enter the text that you want. Make sure that it's as wide as the stage. Format the text so that it looks nice. In my case, I alternated black and teal text. Label the layer accordingly.

3) Insert a keyframe well down the timeline and move the text to its final position. In my case, I entered the keyframe at frame 160.

4) Create a motion tween and check it out. The text scrolls nicely from bottom to top.

Now, lets add a new feature to the scrolling text. When the user moves her mouse over the movie, we're going to stop the scrolling so that readers can examine what's on the screen. We do that with a button action.

5) Using the rectangle tool, draw a rectangle that completely covers the stage. Label it appropriately. In the timeline, make sure that this new layer is on the bottom. (Otherwise, you won't be able to see your text.) Layers can be moved just by clicking and dragging them to the appropriate place.

6) Next, we want to need to make this rectangle a button. Click anywhere on the rectangle to select it. From the Insert Menu, choose "Convert to Symbol" and make this a button. Label it appropriately. Short cuts to do this include pressing F8 or right clicking to bring up a context menu. All will let you convert the selection to a symbol.

7) Make sure that your rectangle is selected and open the Actions window from the Windows menu. There is a huge collection of actions that can be programmed into your Flash document. We're going to use the one that controls mouse events.

8) If it's not open, click once to open the Movie Control collection. Flash MX lets you program just by clicking on the desired action. In this case, double click "On" and then select "Roll Over" and de-select "Release". This literally tells Flash that when your mouse is over your rectangle button to do something. What to do? How about just selecting "Stop" from the list of Movie Controls.

9) Finally, what to do when our user moves the mouse off the calendar? Let's add another mouse event. Select "On" and then "Roll Out". De-select "Release" once again. This time, when the mouse moves off the button, we'll "Play" the movie.

10) You're done. Test your movie from the Control Menu. If it works as it should, from the File Menu, "Export" your movie to a SWF file and insert it into your webpage.

 

 

 

2 3 4 5 6 7 8 9 10 11 12