A Flash Developer Resource Site

Results 1 to 8 of 8

Thread: Scrolling large amount of text through banner

  1. #1
    Junior Member
    Join Date
    Nov 2011
    Posts
    16

    Scrolling large amount of text through banner

    I have this banner that needs to have a several rows worth of paragraph text animate horizontally through it. Ideally, the text should also be possible to update from outside of flash. As for the scrolling text, working with that much text as one long row of letters doesn't seem feasible, so I'm wondering is there a standard way in Flash CS5 of working with large amounts of animated text? Not the user editable kind like text fields and such, but presentational text.

    Obviously it's not efficient to have one long string of text that extends several screens beyond the display, as is the case now. Editing just one letter can take several seconds of scrolling as the string is currently over 3000 px wide, and it's not even all the text that's going to be in the final animation.
    It'd be great if it was possible to type that text through some web based cms, and have it automatically transferred to the Flash banner, if not too advanced that is. Any help will help here.

  2. #2
    Prid - Outing Nig 13's Avatar
    Join Date
    Jul 2006
    Location
    Norway
    Posts
    1,864
    Make a dynamic textfield, by using Text Tool (T), and drawing a textfield, opening Properties Panel (CTRL+F3), and changing from Static Text to Dynamic Text, and also, where it says, Instance, type, banner_txt - Next thing to do, is to select the textfield, press F8, choose MovieClip, and press OK, to convert to movieclip. Click on this movieclip, open Properties Panel (CTRL+F3), and where it says, Instance, type, banner

    Now, click on your Frame, press F9 to open Actions Panel, and paste this code in there:

    Actionscript Code:
    banner.banner_txt.text = "THIS IS A TEXT, WITHIN A MOVIECLIP, HIDDEN OUTSIDE OF STAGE, AND ANIMATED WITH ACTIONSCRIPT!";
    banner.banner_txt.autoSize = true;

    speed = 5;
    originX = banner._x;

    banner.onEnterFrame = function(){
        if(banner._x+banner._width > 0){
            this._x -= speed;
        } else {
            this._x = originX;
        }
    }

    The first code is a string with the whole text, for this guide's purposes, please try this out to see if it's what you want, also, HERE IS THE FLA FILE FOR THE CODE ABOVE! autoSize is the key to the size of the textfield, as it will automatically resize the textfield as long as its content. Next thing we do, is to place the movieclip outside of stage, where it will slide in from, and hold that X position in a variable, and also the speed in a variable, for you to change easily to fit your needs. We then assign an onEnterFrame loop to keep executing the codes inside it, and we check if the banner's X position plus its Width, is greater than 0, and if it is, then it should slide from right to left, otherwise, if it's below 0, meaning that all the text has passed the screen, we set its X position to the original state, where it was hidden outside of stage, thus giving us a neverending loop with the banner text animation!

    You wanted to pull the text from a file. Let's say you have this TXT file, called myString.txt - which is on the same folder as the flash file, and contains the long string, then use this code on your frame instead of the above:

    Actionscript Code:
    loadFile = new LoadVars();
    loadFile.onData = function(txt){
        banner.banner_txt.text = txt;
        banner.banner_txt.autoSize = true;
        start = true;
    }
    loadFile.load("myString.txt");

    speed = 5;
    originX = banner._x;
    start = false;

    banner.onEnterFrame = function(){
        if(banner._x+banner._width > 0 && start == true){
            this._x -= speed;
        } else {
            this._x = originX;
        }
    }

    We use LoadVars to load the contents of a file into Flash, and in this case, from our txt file, and set that as the content of our textfield. We also make a variable set to FALSE, and only set to TRUE when the txt file has been loaded, and we execute the sliding animation once the txt file has been loaded. So, if start variable is set to TRUE, the onEnterFrame code for the sliding animation should be executed, but it's set to FALSE from the beginning, but is set to TRUE once the txt file has been loaded, to prevent the text from suddenly appearing admist the sliding animation!

    CLICK HERE TO DOWNLOAD THIS METHOD'S FLA FILE

    Hope this helps
    I am back, guys ... and finally 18 :P

    BRING BACK THE OLD DESIGN!! OR AT LEAST FIX THE AS TAGS

  3. #3
    Junior Member
    Join Date
    Nov 2011
    Posts
    16
    Good answer.


    Btw, are you moving the banner with that code? Or just the text. See, I have a static banner and need the text strip to move through it from right to left.


    The banner should remain stationary, with the text scrolling over it. So that would mean replacing the banner variable in your code with a placeholder for the text, correct? And then simply animate the placeholder, as well as make it transparent since I don't want it to obscure the banner graphic.



    Also to loop the text animation I would just need to insert a goto frame 1 code or similar (I can look it up) at the last frame right?


    Just finally, what does the 'start' variable of your example do?


    Thanks for your detailed answer.

  4. #4
    Prid - Outing Nig 13's Avatar
    Join Date
    Jul 2006
    Location
    Norway
    Posts
    1,864
    Seems like you didn't check those FLA files

    banner is the movieclip in which the textfield is inside, and is located abit outside of stage, where it should start scrolling in from. It's just a small textfield, but with autoSize set to TRUE, actionscript will automatically resize its length upon runtime, according to how long the text is. What the code does, is that it animates the banner movieclip with the textfield inside, with the text loaded, from right-side of screen, to left-side, and when it's all gone, meaning that the whole text has been scrolled to the left-side of the screen, it will be moved back to its original position and start animating again, meaning that it will scroll back from right-side to left-side, in a constant loop!

    You ask what the start variable does? Read the last paragraph of my previous post again! It simply prevents the animation from starting before the text from the external file has been loaded into Flash, otherwise, if it would start animating, and the text had been loaded into Flash after 2 seconds or something, depending on its size, the text would suddenly appear on stage!

    You want it from Left-side of screen to Right-side? Like it scrolls from the left-part of the screen, and slides to the right, to the right-part of the screen? How would you write the text then? If that's what you want, then last part of the text would start scrolling in for it to look proper!
    I am back, guys ... and finally 18 :P

    BRING BACK THE OLD DESIGN!! OR AT LEAST FIX THE AS TAGS

  5. #5
    Junior Member
    Join Date
    Nov 2011
    Posts
    16
    You're right, I didn't check the FLA file. I didn't even notice it, maybe dismissing it as some 'my website' link. That and I didn't expect such a high standard of answer that you gave, since it's rare.


    I wasn't very clear also, what I was thinking regarding the start variable was that since it's contained in the global scope that it wouldn't be reset to false once changed to true. But now I realize that since the code loops the start var will be read from the top thus read as false upon each loop.


    I thank you for your dedicated answers, and will go over them in detail, as you seem to know what you're doing .

  6. #6
    Prid - Outing Nig 13's Avatar
    Join Date
    Jul 2006
    Location
    Norway
    Posts
    1,864
    I didn't even notice it
    oh, lol :P

    That and I didn't expect such a high standard of answer that you gave, since it's rare.
    well, I tend to give full and thorough answers

    But now I realize that since the code loops the start var will be read from the top thus read as false upon each loop
    That's not true. Since the code is on a Frame, it will only be executed once, the code that is standalone, with no codes around it. Thus, this code will be executed first:

    Actionscript Code:
    speed = 5;
    originX = banner._x;
    start = false;

    and only once, so that start will be then declared with the value of FALSE, only once. It can only be executed again if we move to another frame and come back to this. Codes on a frame are only executed ONCE. While this code:

    Actionscript Code:
    loadFile = new LoadVars();
    loadFile.onData = function(txt){
        banner.banner_txt.text = txt;
        banner.banner_txt.autoSize = true;
        start = true;
    }
    loadFile.load("myString.txt");

    it will be executd once the file, myString.txt is 100% loaded, and that can take from 0.1 second to 2 seconds, depending on the file size, so it won't be executed instantaneously like the previous set of code, but after the text file has been loaded, this code, inside the onData function, will only be executed once!

    While, the last code:

    Actionscript Code:
    banner.onEnterFrame = function(){
        if(banner._x+banner._width > 0 && start == true){
            this._x -= speed;
        } else {
            this._x = originX;
        }
    }

    it will continuously execute the codes inside it, since it's an onEnterFrame loop, so it will keep checking if the movieclip with our textfield is fully out of stage or not, and if it is NOT, then move it to the LEFT, but if it is, then move it back to its original position, leaving it to be NOT outside the LEFT-part of the stage, so the first if code will then again be executed, and this will go on in a loop, forever

    Hope this helps
    I am back, guys ... and finally 18 :P

    BRING BACK THE OLD DESIGN!! OR AT LEAST FIX THE AS TAGS

  7. #7
    Junior Member
    Join Date
    Nov 2011
    Posts
    16
    Quote Originally Posted by Nig 13 View Post
    oh, lol :P



    well, I tend to give full and thorough answers
    Well, at least you learn better that way as well as helping others. How tedious to read answers that don't focus on the problem, but rather ask for your specs for the sake of it. The exception is those who mean to help based on it, but many don't once you've replied with your specs. I guess they're trolls of sorts.

    Quote Originally Posted by Nig 13 View Post
    That's not true. Since the code is on a Frame, it will only be executed once, the code that is standalone, with no codes around it. Thus, this code will be executed first:
    So, you're basically saying sort of that code on a frame is static, read only once, unlEss it's contained in an event handler or loop statement?

  8. #8
    Prid - Outing Nig 13's Avatar
    Join Date
    Jul 2006
    Location
    Norway
    Posts
    1,864
    Well, at least you learn better that way as well as helping others
    Yes, that's exactly my goal - to help others while increase my skills

    So, you're basically saying sort of that code on a frame is static, read only once, unlEss it's contained in an event handler or loop statement?
    Exactly! Though, if it's contained in an event handler, it will execute number of times depending on what event it is. Like LoadVars, for instance, it will only execute the codes in the onData function, but not at once the Frame loads, but when the text file has been loaded. Another event, like, onMouseDown, will execute whenver you press the mouse button down, while a loop, will continuously loop your codes, but that also depends on what kind of loop it is. For instance, onEnterFrame will loop your codes all the time, while a for loop will only be executed ONCE, it will loop your code the number of times as specified, but only once!
    I am back, guys ... and finally 18 :P

    BRING BACK THE OLD DESIGN!! OR AT LEAST FIX THE AS TAGS

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