WAVE EFFECT IN TEXT WITH ACTIONSCRIPT

 

This effect uses text class to format a dynamic text field in a definite interval to create a wave effect with text field. Normally text effects are bit hard for us to make it out of frames.Here this tutorial deal with the creation of such effects with ease by adding a simple script .This tutorial can also guide you in creating more enhanced text effects with script.So enjoy the tutorial now

DOWNLOAD SOURCE

  • Create a new Document in flash
  • Add a text field to the stage with the text field and Type something as i wrote CYBERCITY
  • Now with the text field selected go to the properties panel and check the settings as shown in the figure

  • Make the text field dynamic , add instance name as mytext and set the size to 40.
  • Now Click on the first frame of the movie.
  • Open the actions panel(F9) to add the following code to that frame.

    // setting variables used text formats
    simple=new TextFormat();
    transition=new TextFormat();
    transition2=new TextFormat();
    transition3=new TextFormat
    ();
    white=new TextFormat();
    //setting color styles for each Text format
    transition3.color=0x81DCFE;
    transition2.color=0x01B5F8;
    transition1.color=0x28B1FB;
    white.color=0x0000FF;
    simple.color=0x00FFFF;
    // setting size for each text format
    transition3.size=38;
    transition2.size=39;
    transition1.size=41;
    white.size=42;
    simple.size=40;
    // interval to update the text style of my text
    var inteval=setInterval(func,60)
    var di=0;
    // function that repeats in .060 seconds gap
    function func(){
    mytext.setTextFormat(0,di,transition3);
    mytext.setTextFormat(0,di-1,transition2);
    mytext.setTextFormat(0,di-2,transition1);
    mytext.setTextFormat(0,di-3,white);
    mytext.setTextFormat(0,di-4,transition1);
    mytext.setTextFormat(0,di-5,transition2);
    mytext.setTextFormat(0,di-6,transition3);
    mytext.setTextFormat(0,di-7,simple);
    di++;
    if(di>mytext.length+7){
    di=0;
    updateAfterEvent();
    }
    }

   

CODE EXPLANATION

  • First part of the code attach a textformat object to variables like simple transition transition2 etc

    simple=new TextFormat();
    transition=new TextFormat();
    transition2=new TextFormat();
    transition3=new TextFormat
    ();
    white=new TextFormat();

  • Second part set various values for each of the text format object

    Setting color for each text format

    transition3.color=0x81DCFE;
    transition2.color=0x01B5F8;
    transition1.color=0x28B1FB;
    white.color=0x0000FF;
    simple.color=0x00FFFF;

    Setting size for each text format

    transition3.size=38;
    transition2.size=39;
    transition1.size=41;
    white.size=42;
    simple.size=40;

     

  • The remaining part contains a function that repeats itself in certain interval which creates the wave effect in text by changing size and color of each substring of the text in definite intervals

    function func(){
    mytext.setTextFormat(0,di,transition3);
    mytext.setTextFormat(0,di-1,transition2);
    mytext.setTextFormat(0,di-2,transition1);
    mytext.setTextFormat(0,di-3,white);
    mytext.setTextFormat(0,di-4,transition1);
    mytext.setTextFormat(0,di-5,transition2);
    mytext.setTextFormat(0,di-6,transition3);
    mytext.setTextFormat(0,di-7,simple);
    di++;
    if(di>mytext.length+7){
    di=0;
    updateAfterEvent();
    }
    }

    Execution of the function

    The code mytext.setTextFormat applies the given text format to each sub string Its format is shown below

    textfieldinstancename.setTextFomat(startindex,endindex,textfomat to apply)

    For example for the word CYBERCITY if start index is 0 and end index is 3 the format will be applied to the letters C Y and B.

    Now go back to the function we have written .Firstly the value of local var di is 0 and format is applied to none of the letters.Now the code d++ increases the value of di and again it enters the function after the setinterval. Now value of di is 1 and the Format transition3 is applied to the first letter. Again value of di increases and now the format transition3 is applied to C and Y as end index value is 2 i.e. di..but the next line of code applies the textformat transition2 to the letter C , there start index is 0 and end index is 12 i.e. di-1.Similarly the text effect is applied to one text length above after the function block executes each time.Now the code block also contained a conditional statement to check the value of di and if its greater that the text length + 7 ,here the text length for CYBERCITY is 9 and 9+7 is 16 now check the last line before d++; the the value of end index will be 9 i.e. the text format simple is applied to the entire text.But the if condition goes correct after that and again value of di is made 0.You can change the wave height and color by changing the text format ........

 
 
   

©2007 flashhelp.110mb.com