A Flash Developer Resource Site

Results 1 to 4 of 4

Thread: Scrolling Text Tutorial...READ :-)

  1. #1
    01000101
    Join Date
    Feb 2004
    Location
    Germantown, MD
    Posts
    35

    Scrolling Text Tutorial...READ :-)


    Hello,

    I asked how to do this in another forum, and eventually figured out a way to do it myself, so I thought I would post it here for anyone interested.

    This tutorial will allow you to scroll a mc back and forth, say for instance you want to scroll a text tween up and down like a scrollbar would do, without the scrollbar... with up and down arrows for instance. The most unobvious part of this,and the part I was asking about originally, was how to scroll the clip backwards. I have attached a file below for anyone to download if they want.

    I realize there are more elegant ways to accomplish this with actionscript, but for those not very versed in actionscript this tutorial will give a functional workaround. Thanks for reading.

    -----------------------------------------------------

    First create the text you want to scroll and hit F8 to convert it to a mc. Name the clip “textMC”, and make sure it has movie clip behavior selected. Go to the properties panel and name the instance "text". On the main timeline, create a new layer and call it "mask". Then create a shape on that layer and place it over the text where you want the text to be visible. Right click on the mask layer and select "mask" from the drop-down menu. This will lock both layers, so unlock the text layer and hide the mask shape by clicking the column under the eye.

    Next, create a new layer in the main timeline, name the layer "arrows" and create your arrow shape on that layer. Convert the shape into a mc with the button behavior, and then copy and paste another instance of the clip onto the stage. Place the buttons where you need them. Now select both arrow buttons and hit F8 to convert them to a mc. Name the instance “arrows” in the properties panel. Double click the mc, and create a new layer. Call the layer “actions” and put a stop action in frame one. Click frame two of the arrows layer and hit F6. Select the down arrow and hit F9 to open the actions panel. Delete all of the actions for the down arrow in the second frame of the timeline only. We’ll come back to why later on.

    Now we're going to create our text tween. Double click the text mc, click frame 20 (the closer to frame one, the faster your text will scroll), and hit F6. On the last frame, move the text to where you need it so that the last line is visible under the mask. Then right click on frame one and select "Create Motion Tween". Create a new layer, call it actions, and put a stop action in the first frame. Then go to the last frame and put a stop action there as well.

    It’s time to start making this all work. Double click the “arrows” mc, and select the down arrow instance in frame one, and hit F9. This will open the actions panel. Place this actionscript on the button:

    on (press) {
    _root.text.play();
    }
    on (release) {
    _root.text.stop();
    }


    Test the movie. The down arrow should scroll the text until the last frame, and then stop. You will notice however that when you release the button and then click it again, the text jumps back up to the first frame. Remember when we created the second frame with our arrow buttons in it and deleted the actionscript for the down arrow? That will fix this small but annoying problem. Go to the last frame of your actions layer inside of the “text” mc and hit F9 to open the actions panel. Put this actionscript below the “stop” action for that frame:

    if (this._currentframe == 20) {
    _root.arrows.gotoAndStop(2);
    }


    This code says that if the current frame of the mc you are inside of, “text”, is at frame 20, for the mc “arrows” to go to frame 2 and stop. And remember, we put a down arrow with no actionscript on it in frame 2 of the “arrows” mc, so there is just a functionless button in frame 2. Test the movie again and when you reach the end of the text, the down arrow should no longer cause the text to go back to frame one when it’s clicked. Then select frame 19, hit F6, and put this line of actionscript on the frame:

    _root.arrows.gotoAndStop(1);

    That will cause the “arrows” clip to go back to frame one once you click the up arrow, otherwise the down arrow would stop functioning if you scrolled back up after the first time you reached frame 20.

    Ok, all that’s left is to get the up arrow working, which is a little more complicated than getting the down arrow to play the text tween forwards, because the up arrow must play the text tween backwards, but we’re almost there.

    Let’s start by creating an empty mc. Hold ctrl and click F8. This will bring up the new symbol dialog. Name the mc instance “controllerMC” and make sure you select the movie clip behavior. Click ok and you will be taken inside the newly created mc. Click frame 2 and hit F6, then click frame 3 and do the same. Click frame 1 and hit F9 and insert a stop action. Click frame 2, then F9, and put this actionscript on that frame:

    _root.text.prevFrame();

    Then on frame 3 put this actionscript:

    gotoAndPlay(2);

    This will keep the empty clip on a continuous loop between frame 2 and 3 until a command tells it to go back to frame 1 and stop. Also, as there is a stop action on frame 1, this loop will not start until it is told to do so as well. We’ll take care of that now.

    Go to your text tween mc and create a new layer and name it “controller”. In frame 2 of the controller layer, drag an instance of “controllerMC” onto the stage. It can be placed anywhere on the stage, as it’s an empty clip and invisible.

    Double click your “arrows” mc and select the top arrow and place this actionscript onto it:

    on (press) {
    _root.text.controller.gotoAndPlay(2);
    }
    on (release) {
    _root.text.controller.gotoAndStop(1);
    }

    This is the command that tells the controller clip to go to frame 2, and that loop we created continuously moves “text” back one frame over and over again as it loops. The third and fourth lines tell the “controller” clip to go back to frame one on release, which stops the loop. All that’s left is to select the up arrow on frame 2 as well and paste the same code in.

    Test your movie.
    ----------------------------

    Please let me know of any errors. Any questions or comments are welcome.
    Attached Files Attached Files
    Last edited by alphapattern2; 04-15-2004 at 09:50 AM.

  2. #2
    Junior Member
    Join Date
    Apr 2004
    Location
    Eindhoven
    Posts
    4
    problem:
    I don't really use your whole tutorial, but only a part of it. I try to make MC with a button, when i push the button the movieclip has to gotoAndStop(4). use this:

    Code:
    on (release) {
    	_root.Micro.gotoAndstop(4);
    }
    but it doesn't work, why not?
    maybe it is my version of flash? I've got Flash MX: 7.0.1
    thx anyway!

  3. #3
    01000101
    Join Date
    Feb 2004
    Location
    Germantown, MD
    Posts
    35
    Do you have a button inside of a mc and the mc is named "micro" in the instance panel, or is the button seperate from the mc? If the button is inside of a clip called micro and in micro you have a keyframe at frame 4, it should work correctly.

    Make sure that you are targeting the mc correctly. I posted a file below.

    Adam
    Attached Files Attached Files

  4. #4
    Junior Member
    Join Date
    Apr 2004
    Location
    Eindhoven
    Posts
    4
    thx alot, it worked. this makes me very happy!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center