SCROLLING TEXT (SCROLLBAR) This is a step-by-step tutorial for creating a scrolling text box with a scrollbar and slider that you can drag. Assumed Knowledge: Some familiarity with the Tell Target action and paths. Creating the Scrolling text: 1. Create a shape the to cover the area where you want your text to appear, and from the Shape Panel, type MASK into the Name edit box. 2. Create and align your text. 3. Place your text over the shape and position the top line of your text where you want it to appear before it is scrolled. 4. Select Frame 0 of the text object’s row on the Timeline and add the Place effect. 5. Select Frame 1, and add the Move effect. Try setting the duration to 40 to begin, longer if you have many lines of text. 6. Click on the last frame of the Move effect (this will put you in Preview Frame mode) and drag your text up to where you want the bottom line to appear after the text is scrolled. 7. From the Move Settings dialog box, change any value for the X Position in the Motion Tab to Unchanged (this will keep your text from scrolling off to the side). 8. Press the Play button to see that your text scrolls at an acceptable rate, adjusting the duration of the effect as needed. Creating the Scrollbar 10. Create a rectangle to use as the track (this should be the same height as the shape you created for your text) and position. 11. Send this shape to the back, select this shape and the rectangle that you made for your text, and group as a shape (Modify | Grouping | Group as Shape). From the Shape Panel type MASK into the Name edit box for this Merged Shape. 12. Create an arrow/rectangle for one button. Copy and Paste a second instance of this shape, and from the Transform panel with the Uniform angle box checked, change the rotation to 180° . Position these over the track, placing one arrow at the top of the track and the other arrow at the bottom of the track. 13. Create a rectangle to use as the slider, and position over the track just under the top arrow. Creating the Buttons to control the Scrollbar: Now you need to create your buttons, as the arrows and slider shapes you created don’t actually do anything. What you are actually dragging on and pressing are two long invisible buttons. They are those red and blue rectangles in the image below. What you cannot see, is that these buttons meet almost in the center of the slider. 14. Create a rectangle that is approximately the same size as the track. Convert it into a button. 15. Select the Button panel and type in NEXT into the Name edit box, and check the Track as menu box. 16. Copy the button and Paste a second instance of your button, make sure that the Scene 1 is selected in the Timeline or Outline Panel before pasting. 17. Select the Button panel and change the name for this button from NEXT to PREVIOUS in the Name edit box. 18. Position the PREVIOUS button over the top half of your slider, and the NEXT button over the bottom half of your slider, leaving a small gap in between. 19. Select your slider and bring it to the front. 20. Select the slider, the NEXT button, and the PREVIOUS button and group as a Sprite. 21. Select the Sprite Panel and type DRAG into the Name edit box. 22. Hide your NEXT and PREVIOUS buttons (click on the eye icon for each in the Outline Panel), and return to the main timeline. 23. Add the Place effect at frame 0 for the DRAG Sprite. 24. At frame 1, add a Move effect that has the same duration as the Move effect you created for your scrolling text, then drag the Sprite down and position so that the slider is just above your bottom arrow. 25. From the Move Settings dialog box, change any value for the X Position in the Motion Tab to Unchanged. Press the Play button to test. Your text should move up while your slider moves down. 26. Select all objects (including the DRAG Sprite) and group as a Sprite. The only object on the main timeline now, should be this one Sprite. 27. Select the Sprite Panel and type SCROLL into the Name edit box, uncheck the Loop box, and check the Masked box. 28. Put a Stop action at frame 0 in the SCROLL Sprite’s timeline (this will keep your text and slider from moving until it receives input from the user). Adding the Actions: Return to the Drag Sprite’s timeline. 29. Select the NEXT button (make sure that none of this button’s states are selected) and add the following actions: ‘On (Drag Out Drag Over)’ Tell Target’ ‘/SCROLL’, Goto Frame Next. Deselect the Play checkbox. 30. Copy and Paste a second instance of this button. 31. For the first NEXT button, add the Place effect at frame 0 and the Remove effect at frame 1. For the second NEXT button, add the Place effect at frame 1. 32. Select the PREVIOUS Button (make sure that none of this Buttons states are selected) and add the following actions: ‘On (Drag Out Drag Over)’ Tell Target’ ‘/SCROLL’, Goto Frame Previous. Deselect the Play checkbox. 33. Repeat steps 30 and 31 for the PREVIOUS button. 34. Select the two NEXT buttons and group as a Sprite. 35. From the Sprite Panel type NEXT in the Name edit box, and check the Loop box. 36. Select the two PREVIOUS buttons and group as a Sprite. 37. From the Sprite Panel type PREVIOUS in the Name edit box, and check the Loop box. 38. Return to the main timeline and test your buttons. Your text should scroll when you drag the slider and press the arrows . Troubleshooting Common Errors: Your text scrolls before the user has had a chance to interact with it. Check to see that there is a stop action at frame 0 in the timeline of the sprite that contains the scrolling text. The mask isn’t working: Check that the Mask feature is selected in the Sprite Panel for the SCROLL Sprite, and that your MASK shape is the bottom layer of the Sprite. The text slides to the right or left when scrolling. Check that the Move effect that scrolls the text has the Position: X=Y unchecked and that the Position: X is set to Unchanged in the Move Settings dialog box. The buttons and slider are not working: Check your Tell Targets making sure that you have the correct path entered/selected. Check the actions for all buttons. Check that each button has the Track as menu option selected in the Button Panel.