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