Back to Browse

2021 Button with Scrolling Text

154 views
May 7, 2021
13:41

In this video lesson you will learn how to create a button with scrolling text. It requires two buttons, one is invisible and the other is for visibility. The scrolling text is in a movie clip. Here are the instructions: 1. Create a list of feelings (feel free to come up with your own, and make sure you skip a line), such as: I’m feeling Doodley. I’m feeling Googly. I’m feeling Creative. I’m feeling Wordy. I’m feeling Intelligent. I’m feeling Worldly. I’m feeling my age. 2. Create a Movie Clip by scrolling to Insert then click on New Symbol. Name it Scrolling Text and select Movie Clip. 3. In the bottom layer, use the text tool to paste your text, which you can copy from a Word document (step 1). Use 12-point Arial Black (you can use a color), align left and select Multiline. Make sure to Embed the font. 4. Insert a Classic Tween, and F6 (or insert a keyframe) at the end of the tween. Move the frame to frame 45, and insert a keyframe in frame 90. Lock the layer when done. 5. Add another layer, naming it Mask Text, and make it a mask layer by right-clicking. Create a rectangle (168 pixels by 37 pixels). Select the outline mode for the layer, and center the rectangle on the first set of words. Lock the layer when done. 6. Unlock the layer, and select the keyframe in frame 45. Hold down the shift key, and move the text symbol up until the last set of words are centered in the mask rectangle. You can see where to do this because you have the Outline mode selected. Scroll the Timeline playhead forward and backwards to see the result. 7. Select frame one, insert a Stop at this Frame Code Snippet. Confirm you still have frame one selected. Next, scroll to Event Handlers and insert a Mouse Over Event. You will need to replace Trace("Moused over"); with this.play(); for code snippet to work. 8. Now insert a new button symbol, naming it Scrolling Text_BTN. Use the Primitive Rectangle tool to create a rectangle with a corner radius of 20. Select a light gray for the fill color. F6 or duplicate the frame in the Over, Down and Hit frames. 9. Insert another button, naming it Invisible_BTN. Use the Primitive Rectangle tool to create a rectangle with a corner radius of 20. Select the Up frame and move it to the Hit frame. There should not be anything in Up, Over, and Down frames. Only having the rectangle in the Hit frame creates an invisible button. 10. Go back to the Scrolling Text movie clip and add a layer, naming it Invisible Button. Move it to the bottom. It does not matter if it’s masked. 11. In the Scene 1 Timeline, name the bottom layer Gray box; this is where you will place the Scrolling Text_BTN. Lock the layer. Add another the layer; name it Scrolling Text, and place the Scrolling Text movie clip. Lock the layer. Test out the animation. 12. Hold the Command and Return keys (CTRL and Enter keys on a PC), and scroll over the button. The words should scroll up and then down.

Download

1 formats

Video Formats

360pmp416.7 MB

Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.

2021 Button with Scrolling Text | NatokHD