Need help with vertical auto scrolling text

  • developer_new
  • Born
  • Born
  • developer_new
  • Posts: 2

Post 3+ Months Ago

I'm new to flash and got stuck trying to design an automatic vertical text scroller.

Here is what I set out to do:

- Have a news ticker like box through which text will be vertically scrolling.
- The textual content will come from an external text file.
- The text in the external file will also have click-able html links.
- When the mouse enters the content area, the scrolling would stop.
- If any link is visible in the content area at that time, the user will be able to click on it.
- When the mouse leaves the content area, the scrolling would continue.

Basically, it's an html marquee which you see in so many pages these days.

The following was my approach to solving the problem. Got very close and then got stuck :(

- I created a Dynamic Textbox and have it load from the external file. The dynamic textbox has multiline and autoSize set to true. So the size of it grows depending on the content from the external file.
- Next, converted the "textbox with external loading" into a movie clip and named it content_mc.
- Created a rounded rectangle (my viewing area) and converted that to a movie clip called mask_mc.
- On the stage, the content_mc is in one layer (content) and the mask_mc is in another layer (mask).
- Added another layer (action) and on the first frame of the main timeline, I entered the Action Script to set the mask_mc as the mask for content_mc.
- Also in this AS, I align the content_mc top with the mask_mc top so that the content is visible at the start.
- Then in the content layer, I inserted a movie clip "controller". This clip has two frames and all it does is it moves the _root.content_mc up by a fixed unit until the bottom of content_mc is over the mask_mc top. At that point, it sets the top of the content_mc back to the top of mask_mc.

Since I have little to no flash training, you can understand my excitement when the above steps worked and I got a fairly smooth scrolling text fitted in my viwing window. I could also click on all the links in my text. Yayyy!

Then I took on the task of making the scroll stop and resume on mouse enter and leave event. What I did was:

- In the action script on the action layer, I simply defined two content_mc.onRollOver and content_mc.onRollOut functions. In the first I stop the controller movie clip and in the second, I play the controller movie clip.

The above strategy also worked as I wanted but it created a new problem! Whenever the mouse enters the mask area, the mouse pointer turns into a clicking hand cursor (the one you use to click on links); and it doesn't allow me to click on any of the html links anymore! It's almost as if the content_mc movie clip has turned into a button!

Regardless to say, this is unacceptable in my case if I cannot click on the html links in the original text content. I have googled quite a bit and must admit that I haven't had much luck (why else would I be posting here and other places?). I desperately need someone's assistance with solving this. Some of the approaches I have seen on google wouldn't work for me. For example, having invisible buttons for the html links. Of course that wouldn't work since my text is coming from an external text file over which I have no control.

Any guidance in the right direction will be much appreciated. And of course, I have almost no time left to solve this. But since what I am trying to achieve is something so simple, I'm assuming the solution would not take prohibitively long.

Thanks in advance to all the nice and helpful people who will be pouring in with their suggestions.
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 483

Post 3+ Months Ago

Sorry if this is a bit crude I wrote it in about ten minutes. What i did was i loaded in a external text which contains a HTML (A) tag for the link. i then made a mask layer and made the text box scroll through the mask. i then did a hit test on the text box against the mask movie clip and if the text box leaves the mask i reset its position. from here i do another hit test on the mask against the mouse positions and wrap the scrolling if statement into a false case from the mouse hit test. I'm posting the code as well as the files i wrote.

The flash will need a dynamic multiline text box i gave mine an instance name of scroll_text and a mask movie clip i gave an instance name of mask_mc

Action Script for the flash
ACTIONSCRIPT Code: [ Select ]
// This will be the starting position of the textbox
var starting_ypos:Number;
// This will be has fast the text box will scroll
var scroll_speed:Number = .5;
// Make a load vars object
my_data = new LoadVars();
// Make my on load function
my_data.onLoad = function() {
   // Fix the double space issue
   var my_text = unescape(this.content).split("\r\n");
   my_text = my_text.join("\n");
   my_text = my_text.split("\r");
   my_text = my_text.join("\n");
   // Set the text in the text box
   scroll_text.htmlText = my_text;
   // Set the autosize
   scroll_text.autoSize = true;
   // Set the starting_ypos
   starting_ypos = scroll_text._y;
// Load the external text file
// Start the scrolling
this.onEnterFrame = function() {
   // Check for hit test with the mask and the mouse
   if(!mask_mc.hitTest(_root._xmouse, _root._ymouse)) {
      // Check to see if we are in the mask
      if(mask_mc.hitTest(scroll_text)) {
         // Move the textbox
         scroll_text._y -= scroll_speed;
      } else {
         // Reset the text box
         scroll_text._y = starting_ypos;
// Simple stop command
  1. // This will be the starting position of the textbox
  2. var starting_ypos:Number;
  4. // This will be has fast the text box will scroll
  5. var scroll_speed:Number = .5;
  7. // Make a load vars object
  8. my_data = new LoadVars();
  10. // Make my on load function
  11. my_data.onLoad = function() {
  13.    // Fix the double space issue
  14.    var my_text = unescape(this.content).split("\r\n");
  15.    my_text = my_text.join("\n");
  16.    my_text = my_text.split("\r");
  17.    my_text = my_text.join("\n");
  19.    // Set the text in the text box
  20.    scroll_text.htmlText = my_text;
  22.    // Set the autosize
  23.    scroll_text.autoSize = true;
  25.    // Set the starting_ypos
  26.    starting_ypos = scroll_text._y;
  28. };
  30. // Load the external text file
  31. my_data.load("my_text.txt");
  33. // Start the scrolling
  34. this.onEnterFrame = function() {
  36.    // Check for hit test with the mask and the mouse
  37.    if(!mask_mc.hitTest(_root._xmouse, _root._ymouse)) {
  39.       // Check to see if we are in the mask
  40.       if(mask_mc.hitTest(scroll_text)) {
  42.          // Move the textbox
  43.          scroll_text._y -= scroll_speed;
  45.       } else {
  47.          // Reset the text box
  48.          scroll_text._y = starting_ypos;
  50.       }
  52.    }
  54. }
  56. // Simple stop command
  57. stop();

Code: [ Select ]
content=Pagus <a href="123"><b>nulla vel quidne consequat</b></a> facilisi, inhibeo torqueo. Refoveo olim esca esse letatio consequat torqueo. Et exerci luctus capto quadrum, immitto. Accumsan nullus torqueo feugait consectetuer proprius cui appellatio. Molior natu commoveo, os refero tation, quod, plaga inhibeo, ut saepius dolus jus.

(13.25 KiB) Downloaded 965 times

  • developer_new
  • Born
  • Born
  • developer_new
  • Posts: 2

Post 3+ Months Ago

Thanks a lot for your help ScottG.

I actually did something similar to get around it.
What I did was add an event for onMouseMove in the main action script and checked if the mouse is within the boundary of my mask_mc movie clip. My script looked like:

Code: [ Select ]
content_mc._y = mask_mc._y;

this.onMouseMove = function() {
    if ( (_root._xmouse >= mask_mc._x) && (_root._xmouse <= (mask_mc._x + mask_mc._width)) && (_root._ymouse >= mask_mc._y) && (_root._ymouse <= (mask_mc._y + mask_mc._height)) ) {
    } else {;
  1. content_mc.setMask(mask_mc);
  2. content_mc._y = mask_mc._y;
  3. this.onMouseMove = function() {
  5.     if ( (_root._xmouse >= mask_mc._x) && (_root._xmouse <= (mask_mc._x + mask_mc._width)) && (_root._ymouse >= mask_mc._y) && (_root._ymouse <= (mask_mc._y + mask_mc._height)) ) {
  6.         controller.stop();
  7.     } else {
  9.     }
  10. };

However, I never liked the use of onMouseMove for this. To me, it seems like onMouseMove would carry a large overhead!

The solution you posted was great because it does not use the onMouseMove. I made a slight tweak to your solution to adapt to mine. I have noticed that using a textbox with a mask always lowers the readability of the actual text (not sure why though). So I converted my textbox with external file loading to a movie clip (like I did originally) and then set the mask in AS. Then used your strategy of onEnterFrame and HitTest. Got rid of my controller movie clip as well.

And the result rocks!

Thanks again!
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 483

Post 3+ Months Ago

No problem

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 2 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum

© 1998-2017. Ozzu® is a registered trademark of Unmelted, LLC.