Fading Text in and Out using Action Script

  • mttew1
  • Newbie
  • Newbie
  • mttew1
  • Posts: 7

Post 3+ Months Ago

I'm trying to Fade Text in and out without using any tweens, just actionscript. However, i'm pretty new to this, but here is what I have so far...it just doesn't really work the way that it should (the fades are different speeds). If someone could please give me some feedback or even let me know if this is possible, that would be awesome! Thanks!

Code: [ Select ]
//initializes some variables
x = 0;
arrIntervalTimers = new Array();
//calls function
ClipCreateText();
TextTimer = setInterval(ClipCreateText, 3000);


//this function creates the array's of text and creates the actual text
//field..then it sets the properties for it.
function ClipCreateText()
{
//the array elements
var tSayings = new Array;
tSayings[0] = "Welcome to Delta Media Group";
tSayings[1] = "Serving the Real Estate Community";
tSayings[2] = "Hello Matt";
tSayings[3] = "Hi There Shane";
tSayings[4] = "What's up other Shane Type Dude?";

        
    if (x > tsayings.length - 1)
    {
        x = 0;
    }
        //this creates and formats the text field    
        newTextName = "strange_fade_text-" + x;
        createTextField(newTextName, x, 0, (x*50), 500, 40);
        newText = eval(newTextName);
        //the text is the array
      newText.text = tSayings[x];
        newText.embedFonts = true;
        newText.selectable = false;
        newText.type = dynamic;
        newText.textColor = '0x000000';
        newText.size = 26;
        newText._alpha = 0;
        trace("In Clip Funtion: " + newText._alpha);
    
        //the formatting
        format = new TextFormat() ;
        format.font = "Arial";
        format.size = 26;
        format.bold = false;
        format.align = "center";
    
        newText.setTextFormat(format);


        
        arrIntervalTimers[x] = setInterval(FadeTextIn, 20, 100, x, newText);
        x++;
        
}


    
    
//function to Fade In    
function FadeTextIn(targetin_alpha, timer_number, fade_object)
{
    
    var fadeinspeed = 1;
        if (fade_object._alpha < targetin_alpha)
        {
            var TempAlpha = Math.round(fade_object._alpha + 1);
            trace("TempAlpha: " + TempAlpha);
            fade_object._alpha = TempAlpha;
        }
        else
        {
            clearInterval(arrIntervalTimers[timer_number]);
            arrIntervalTimers[timer_number] = setInterval(FadeTextOut, 20, 0, timer_number, fade_object);            
        }
};

//function to Fade Out
function FadeTextOut(targetout_alpha, timer_number, fade_object)
{
        var fadeoutspeed = 2;
        if (fade_object._alpha > targetout_alpha)
        {
            TempAlpha = fade_object._alpha - fadeoutspeed;
            fade_object._alpha = Math.round(TempAlpha);
        }
        else
        {
            //we need to turn off the timer
            clearInterval(arrIntervalTimers[timer_number]);
        }
        
};
  1. //initializes some variables
  2. x = 0;
  3. arrIntervalTimers = new Array();
  4. //calls function
  5. ClipCreateText();
  6. TextTimer = setInterval(ClipCreateText, 3000);
  7. //this function creates the array's of text and creates the actual text
  8. //field..then it sets the properties for it.
  9. function ClipCreateText()
  10. {
  11. //the array elements
  12. var tSayings = new Array;
  13. tSayings[0] = "Welcome to Delta Media Group";
  14. tSayings[1] = "Serving the Real Estate Community";
  15. tSayings[2] = "Hello Matt";
  16. tSayings[3] = "Hi There Shane";
  17. tSayings[4] = "What's up other Shane Type Dude?";
  18.         
  19.     if (x > tsayings.length - 1)
  20.     {
  21.         x = 0;
  22.     }
  23.         //this creates and formats the text field    
  24.         newTextName = "strange_fade_text-" + x;
  25.         createTextField(newTextName, x, 0, (x*50), 500, 40);
  26.         newText = eval(newTextName);
  27.         //the text is the array
  28.       newText.text = tSayings[x];
  29.         newText.embedFonts = true;
  30.         newText.selectable = false;
  31.         newText.type = dynamic;
  32.         newText.textColor = '0x000000';
  33.         newText.size = 26;
  34.         newText._alpha = 0;
  35.         trace("In Clip Funtion: " + newText._alpha);
  36.     
  37.         //the formatting
  38.         format = new TextFormat() ;
  39.         format.font = "Arial";
  40.         format.size = 26;
  41.         format.bold = false;
  42.         format.align = "center";
  43.     
  44.         newText.setTextFormat(format);
  45.         
  46.         arrIntervalTimers[x] = setInterval(FadeTextIn, 20, 100, x, newText);
  47.         x++;
  48.         
  49. }
  50.     
  51.     
  52. //function to Fade In    
  53. function FadeTextIn(targetin_alpha, timer_number, fade_object)
  54. {
  55.     
  56.     var fadeinspeed = 1;
  57.         if (fade_object._alpha < targetin_alpha)
  58.         {
  59.             var TempAlpha = Math.round(fade_object._alpha + 1);
  60.             trace("TempAlpha: " + TempAlpha);
  61.             fade_object._alpha = TempAlpha;
  62.         }
  63.         else
  64.         {
  65.             clearInterval(arrIntervalTimers[timer_number]);
  66.             arrIntervalTimers[timer_number] = setInterval(FadeTextOut, 20, 0, timer_number, fade_object);            
  67.         }
  68. };
  69. //function to Fade Out
  70. function FadeTextOut(targetout_alpha, timer_number, fade_object)
  71. {
  72.         var fadeoutspeed = 2;
  73.         if (fade_object._alpha > targetout_alpha)
  74.         {
  75.             TempAlpha = fade_object._alpha - fadeoutspeed;
  76.             fade_object._alpha = Math.round(TempAlpha);
  77.         }
  78.         else
  79.         {
  80.             //we need to turn off the timer
  81.             clearInterval(arrIntervalTimers[timer_number]);
  82.         }
  83.         
  84. };
[/code]
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Welcome to Ozzu mattew1 :D
This just came up recently & with Ozzu's search function *hint, hint*I was able to dig it up for you :D
You may want to start reading from "lostinbeta's" original post. It gets pretty interesting from there.

http://www.ozzu.com/flash-forum/how-reduce-aplha-value-movie-clip-using-code-t26942.html&hi ... ype+fadeto
  • mttew1
  • Newbie
  • Newbie
  • mttew1
  • Posts: 7

Post 3+ Months Ago

Thanks joebert, i'll take a look at that and see if I can figure it out!
  • mttew1
  • Newbie
  • Newbie
  • mttew1
  • Posts: 7

Post 3+ Months Ago

my problem is not the fading...I can fade in and out all day long...that is easy. My issue is loading different lines of text from an array...having them fade in...pause...fade out...then go to the next line. I guess that I should have been more specific in my first post. If you can help, please let me know!

Thanks!
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Sorry about the misunderstanding :oops:

Fading textBoxes themselves is where you will run into a problem, The work around I know of is fading a cover created with createEmptyMovieClip() and setting the width and height of that cover to the width and height of the textBox.

Is this about what your looking for ? (copy,paste,save,testMovie)

Code: [ Select ]
//variables/objects
Q=0;
I=0;
format = new TextFormat();
with(format){font = "Arial"; size = 26; bold = false; align = "center";}
tSayings = ["Welcome to Delta Media Group", "Serving the Real Estate Community", "Hello Matt", "Hi There Shane", "What's up other Shane Type Dude?"];

//Textbox & Cover Creation (x=unique id, bgColor=hex of color behind the text)
function ClipCreateText(x,bgColor){
    // Creates textfield
    createTextField(["sFT"+x], x, 0, (x*50), 1, 1);
        with(this["sFT"+x]){
            text = tSayings[x];
          type = "dynamic";
          selectable = false;
          textColor = "0x000000";
            setTextFormat(format);
            autosize = true;
        }
    //Creates Cover to fade in and out above textfield
    createEmptyMovieClip(["cover"+x],(x+100));
        with(this["cover"+x]){
            id = x;
            tF = this["sFT"+x];
            lineStyle(0,0,0);
            beginFill(bgColor,100);
            moveTo(tF._x, tF._y);
            lineTo((tF._x+tF._width), (tF._y));
            lineTo((tF._x+tF._width),(tF._y+tF._height));
            lineTo(tF._x,(tF._y+tF._height));
            lineTo(tF._x, tF._y);
            endFill();
        }
}
// Slightly modified version of Lostinbeta's fadeTo prototype (adds stipulation to delete onEnterFrame when aV gets stuck at 3)
MovieClip.prototype.fadeTo = function(value, speed) {
    this.onEnterFrame = function() {
        this.aV==3 ? (this._alpha=value, delete this.onEnterFrame) : null;
      this.aV = Math.floor(value-this._alpha);
      this.aV ? this._alpha += this.aV/speed : (this._alpha=value, delete this.onEnterFrame);
    }
}
//Patch setInterval to prototype for fadeIn
function fadeIn(){
    _root["cover"+Q].fadeTo(0,20);
    Q==tSayings.length ? (knockDown = setInterval(fadeOut,1000),clearInterval(setup)) : Q++;
}
//Patch setInterval to prototype for fadeOut
function fadeOut(){
    _root["cover"+I].fadeTo(100,10);
    I==Q ? clearInterval(knockDown) : I++;
}
//Loop through sayings array creating a textfield & cover for each item found
for(var j in tSayings){
    clipCreateText(j,'0xffffff');
}
//Tap the first domino
setup = setInterval(fadeIn,1000);
  
  1. //variables/objects
  2. Q=0;
  3. I=0;
  4. format = new TextFormat();
  5. with(format){font = "Arial"; size = 26; bold = false; align = "center";}
  6. tSayings = ["Welcome to Delta Media Group", "Serving the Real Estate Community", "Hello Matt", "Hi There Shane", "What's up other Shane Type Dude?"];
  7. //Textbox & Cover Creation (x=unique id, bgColor=hex of color behind the text)
  8. function ClipCreateText(x,bgColor){
  9.     // Creates textfield
  10.     createTextField(["sFT"+x], x, 0, (x*50), 1, 1);
  11.         with(this["sFT"+x]){
  12.             text = tSayings[x];
  13.           type = "dynamic";
  14.           selectable = false;
  15.           textColor = "0x000000";
  16.             setTextFormat(format);
  17.             autosize = true;
  18.         }
  19.     //Creates Cover to fade in and out above textfield
  20.     createEmptyMovieClip(["cover"+x],(x+100));
  21.         with(this["cover"+x]){
  22.             id = x;
  23.             tF = this["sFT"+x];
  24.             lineStyle(0,0,0);
  25.             beginFill(bgColor,100);
  26.             moveTo(tF._x, tF._y);
  27.             lineTo((tF._x+tF._width), (tF._y));
  28.             lineTo((tF._x+tF._width),(tF._y+tF._height));
  29.             lineTo(tF._x,(tF._y+tF._height));
  30.             lineTo(tF._x, tF._y);
  31.             endFill();
  32.         }
  33. }
  34. // Slightly modified version of Lostinbeta's fadeTo prototype (adds stipulation to delete onEnterFrame when aV gets stuck at 3)
  35. MovieClip.prototype.fadeTo = function(value, speed) {
  36.     this.onEnterFrame = function() {
  37.         this.aV==3 ? (this._alpha=value, delete this.onEnterFrame) : null;
  38.       this.aV = Math.floor(value-this._alpha);
  39.       this.aV ? this._alpha += this.aV/speed : (this._alpha=value, delete this.onEnterFrame);
  40.     }
  41. }
  42. //Patch setInterval to prototype for fadeIn
  43. function fadeIn(){
  44.     _root["cover"+Q].fadeTo(0,20);
  45.     Q==tSayings.length ? (knockDown = setInterval(fadeOut,1000),clearInterval(setup)) : Q++;
  46. }
  47. //Patch setInterval to prototype for fadeOut
  48. function fadeOut(){
  49.     _root["cover"+I].fadeTo(100,10);
  50.     I==Q ? clearInterval(knockDown) : I++;
  51. }
  52. //Loop through sayings array creating a textfield & cover for each item found
  53. for(var j in tSayings){
  54.     clipCreateText(j,'0xffffff');
  55. }
  56. //Tap the first domino
  57. setup = setInterval(fadeIn,1000);
  58.   
  • mttew1
  • Newbie
  • Newbie
  • mttew1
  • Posts: 7

Post 3+ Months Ago

joebert
I couldn't get that to work right...i did a trace in the different functions, and it's going into the functions, however, when I test it, nothing appears. Maybe you could sort of break some it down for me if it's not too much trouble. I appreciate your help. In the meantime, i'm going to try to figure it out.

Thanks!
  • mttew1
  • Newbie
  • Newbie
  • mttew1
  • Posts: 7

Post 3+ Months Ago

I messed around with it some and I got it to work. I believe that the main issue was that when you created the text field, the width and height was set to 1.

Now, all I need to do is make it so that one is fading out, the next is fading in...I may need your help on that.

thanks
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

I scrapped the fadeOut function & replaced fadeIn with this,

Code: [ Select ]
function fadeIn(){
  _root["cover"+Q].fadeTo(0,20);
  Q>1 ? (_root["cover"+I].fadeTo(100,10),I++) : null;
  I==tSayings.length ? (clearInterval(setup)) : Q++;
}
  1. function fadeIn(){
  2.   _root["cover"+Q].fadeTo(0,20);
  3.   Q>1 ? (_root["cover"+I].fadeTo(100,10),I++) : null;
  4.   I==tSayings.length ? (clearInterval(setup)) : Q++;
  5. }

Playing with FPS & and timings hopefully will produce what you are looking for. If not I'll see what I can dig up :D

Code: [ Select ]
Q>0 ? (_root["cover"+I].fadeTo(100,10),I++) : null;

The Q>0 ?, 0 is how many clips have started to fade in before fadeout starts.
I'm sure you know the deal with the timing in setInterval.
  • mttew1
  • Newbie
  • Newbie
  • mttew1
  • Posts: 7

Post 3+ Months Ago

joebert,
I appreciate you help very much. I guess what i'm struggling with is when to use actionscript and when to use tweens/timeline effects. Do the pro's do all actionscript for animations? I just want to go about this the correct and most effective way. Maybe you could share your input on this matter....

Thanks
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

There's really no right or wrong way to do anything with flash.
Not all pros use actionscript, some of the neatest animations are strictly tweens, while some are strictly actionscript, some are a well ballenced combination of both.

The most productive way is to complete a project using what you know well, then in your spare time try to accomplish the same with what you dont know so well. When you start to get the hang of what you don't know so well start blending it in with what you do know well, eventually you'll get a feel for what works better for different circumstances.

Personally I think the reason so many designers come and go is they loose interest in learning new things after a few successfull designs & since they have been thinking more about "business" then learning/designing they become stale & crumble away after resorting to revamping old works.
  • mttew1
  • Newbie
  • Newbie
  • mttew1
  • Posts: 7

Post 3+ Months Ago

thanks for the words of wisdom joebert
  • stinger
  • Graduate
  • Graduate
  • stinger
  • Posts: 157
  • Loc: San Jose, CA

Post 3+ Months Ago

Hello!!!

Well, I have a very simple flash file for you. It runs off of an array for the text, and then uses a movie clip for the transitions. This is a lot of fun to play around with!!!!

I have a more advanced clip, that actually prints each letter as it reads through a string.

you can download the swf, and fla from here:

LINK:
http://schwabino.com/ozzu/

You can view the simple 8k, swf file here:
http://schwabino.com/ozzu/text_fading_array.swf


After looking through all the posts to this subject, and being extremely troubled by reading all the complex code, I thought to myself. . . . "THERE MUST BE AN EASIER WAY!!!"

NOTE:

My fla file uses multiple movie clips embeded within eachother. I also did this last night at 5am, so ther structure and commenting is limited.

Any questions????
  • nornholdj
  • Novice
  • Novice
  • User avatar
  • Posts: 18

Post 3+ Months Ago

I'm currently trying to achieve this effect in Actionscript 3.0 and I know a few things have changed with keywords and such but I think I've converted the code properly and I am having a terrible time getting this to work. I understand the Actionscript (at least I think I do), but I'm not sure if I have to do anything special with frames or stage objects. I am trying to fade a specific instance of a MovieClip object. Also, I'm using Flash CS3 (If it matters).

Post Information

  • Total Posts in this topic: 13 posts
  • Users browsing this forum: No registered users and 16 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-2014. Ozzu® is a registered trademark of Unmelted, LLC.