WebBuilder101 - Making the web happen!
Need Web Dev software? Here is the place to
Flash Point
TUTORIAL INFO
Version: 2.0
Level: Intermediate
DOWNLOAD
ZIP           SWI

SCROLLING TEXT (ON PRESS)

This is a step-by-step tutorial for creating a scrolling text box that responds to the users mouse remains pressed over a button.

Assumed Knowledge: Some familiarity with the Tell Target action and paths.

Note: This is the same tutorial as the Scrolling Text (On Roll Over) tutorial only the actions are different so if you have already done that tutorial, you can just open your file and skip ahead to the Adding the Actions section of this tutorial.

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.

9. Select both the text and shape objects and group as a Sprite (Modify | Grouping | Group as Sprite).

10. Select the Sprite Panel, Type ‘‘SCROLL’ into the Name edit box; deselect (uncheck) the Loop box and check the Masked box.

11. Return to the main Timeline to check that your text is scrolling properly and that the mask is working.

12. Return to the SCROLL Sprite’s timeline and put a stop action at frame 0 (this will keep your text from scrolling until it receives input from the user). Return to the main timeline.

Now that you have your scrolling text, all you have to do is get it to move up and down the page (or go to the next lines and the previous lines) when the user directs it to. As the Timeline only plays in one direction i.e., forward, you need to make it rewind. This is actually pretty simple, you only need to create buttons that tell it to go to the next frame(s) and go to the previous frame(s).

Creating the Buttons to Control the Scrolling:

13.While in the main timeline, create a shape for a button to go to the next frame (traditionally, this is an arrow pointing down), and convert it into a Button (Modify | Convert | Convert to Button).

14. This step is optional. Make any change(s) to the button’s Over and Down states from the Outline Panel.

15. Skip this step if your button has a square or rectangular shape. Select your shape from the button’s Up State, and Copy this shape (Edit | Copy Object). Select the Button’s Hit State and Paste (Edit | Paste) this shape into the Hit State, you should now have two shapes in the Hit State. Delete the Hit Rectangle shape so that the mouse will not react to areas outside of your Button‘s shape.

16. Select the Button panel and type in NEXT in the Name edit box.

17. Copy the Button and Paste a second instance of it (making sure that Scene 1 is selected in the Timeline or Outline Panel, as you cannot paste a button inside another button, and you do not want this button inside your SCROLL Sprite).

18. Select the Button panel and change NEXT to PREVIOUS in the Name edit box.

19. Select the Transform Panel, with the Uniform angle checkbox selected type 180° into the rotation edit box. This button should be pointing in the opposite direction of the NEXT button.

20. Place your buttons in the desired positions on the stage.

Adding the Actions:

The actions for this scroller may seem odd. The On Press event will not produce buttons that provide continuous feedback. You would need to continuously press the buttons or create a button that has the On Release event attached to it as well. The On Drag Over combined with the On Drag Out events will produce a buttons that provide continuous feedback without the On Release event, provided that the buttons track the movement of the mouse as a Menu.

21. In the Button Panel, check the Track as menu box for each of the buttons you have created.

22. 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.

23. 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.

24. Select the NEXT button. Copy and Paste (again making sure that you select Scene 1 from the Timeline or Outline Panel before pasting).

25. Select the PREVIOUS button. Copy and Paste a second instance of the button.

26. Select all four buttons and group as a Sprite (Modify | Grouping | Group as Sprite).

27. From the Sprite Panel type CONTROL in the Name edit box, and check the Loop box.

28. Layer the buttons so that the two NEXT buttons are on the two top rows in the timeline and the two PREVIOUS buttons are on the two bottom rows.

29. Select the first NEXT button and at frame 0 of that button’s row and add the Place effect. Select frame 1 and add the Remove effect.

30. Select the second NEXT button and at frame 1 of that button’s row add the Place effect.

31. Select the first PREVIOUS button and at frame 0 of that button’s row and add the Place effect. Select frame 1 and add the Remove effect.

32. Select the second PREVIOUS button and at frame 1 of that button’s row add the Place effect.

33. Return to the main timeline and test your buttons again.

Your text should now scroll in both directions without having to move your mouse over the button repeatedly.

If you would like to put this whole scroller into a Sprite, you can select both the SCROLL and the CONTROL Sprites and group as a Sprite. Just remember to give this new Sprite a unique name and change the Tell Targets for each of the buttons to /whatevernamesprite/SCROLL or ../SCROLL (See Scene 2 of the SWI).

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 and that your mask shape is the bottom layer of the Sprite i.e., behind the text.

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.

None of the buttons work:
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.

.

 

More Resources
Beginner Tutorials
Intermediate Tutorials
Advanced Tutorials
Examples [external link]
Built In Tutorials [external link]
Using SWiSH With Other Programs [external link]

Suggested Reading

Beginning Active Server Pages 3.0
JavaScript Bible
Red Hat Linux
Dreamweaver 3.0
HTML Bible



Download WB101 Wallpaper
• Web Builder 101 Wallpaper Get it!.
• Find out how to create your own Wallpaper Teach me!.
Sign up for our Newsletters
• Web Building Sign me Up!.
• Net Alert! Sign me Up!.
Need Help?
• Contact Support Click here.
• E-mail the Webmaster Click Here.
• Search Tips Click Here.

Webbuilder101.com © 1998 - 2003 Copyright and Terms of Use
Send mail to: webmaster@webbuilder101.com

» About » Support

» FAQ » What's New » MyLog

Web Builder 101 Web Builder 101 - Making the Web Happen Web Builder 101 - Making the Web Happen
.