RAINBOW EFFECT WITH TEXT USING ACTIONSCRIPT

 

This effect uses text class to format a dynamic text field in a definite interval to create a rainbow effect with text field. Normally, text effects are bit hard for us to make it out of frames.Here this tutorial deals with the creation of such effects with ease by actionscript .This tutorial can also guide you in creating more enhanced text effects with actionscript.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.
  • Now Click on the first frame of the movie.
  • Open the actions panel(F9) to add the following code to that frame.

//setting variables for new texformats
simple=new TextFormat();
transition=new TextFormat();
violet=new TextFormat();
indigo=new TextFormat();
blue=new TextFormat();
green=new TextFormat();
yellow=new TextFormat();
orange=new TextFormat();
red=new TextFormat();
//setting colors for each of the textformats
simple.color=0x000000;
violet.color=0x9F5AFE;
indigo.color=0x5A01D3;
blue.color=0x0000FF;
green.color=0x00FF00;
yellow.color=0xFFFF00;
orange.color=0xFF5900;
red.color=0xFF0000;
//setting an interval
var inteval=setInterval(fun,50)
var di=0;
//function that repeats in the interval
function fun(){
mytext.setTextFormat(0,di,transition);
mytext.setTextFormat(0,di-1,violet);
mytext.setTextFormat(0,di-2,indigo);
mytext.setTextFormat(0,di-3,blue);
mytext.setTextFormat(0,di-4,green);
mytext.setTextFormat(0,di-5,yellow);
mytext.setTextFormat(0,di-6,orange);
mytext.setTextFormat(0,di-7,red);
mytext.setTextFormat(0,di-8,transition);
mytext.setTextFormat(0,di-9,simple);
di++;
updateAfterEvent();
if(di>mytext.length+9){
di=0;
}
}

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

simple=new TextFormat();
transition=new TextFormat();
violet=new TextFormat();
indigo=new TextFormat();
blue=new TextFormat();
green=new TextFormat();
yellow=new TextFormat();
orange=new TextFormat();
red=new TextFormat();

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

Setting color for each text format

simple.color=0x000000;
violet.color=0x9F5AFE;
indigo.color=0x5A01D3;
blue.color=0x0000FF;
green.color=0x00FF00;
yellow.color=0xFFFF00;
orange.color=0xFF5900;
red.color=0xFF0000;

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 fun(){
mytext.setTextFormat(0,di,transition);
mytext.setTextFormat(0,di-1,violet);
mytext.setTextFormat(0,di-2,indigo);
mytext.setTextFormat(0,di-3,blue);
mytext.setTextFormat(0,di-4,green);
mytext.setTextFormat(0,di-5,yellow);
mytext.setTextFormat(0,di-6,orange);
mytext.setTextFormat(0,di-7,red);
mytext.setTextFormat(0,di-8,transition);
mytext.setTextFormat(0,di-9,simple);
di++;
updateAfterEvent();
if(di>mytext.length+9){
di=0;
}
}

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 + 9 ,here the text length for CYBERCITY is 9 and 9+7 is 18 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.

 
 
   

©2007 flashhelp.110mb.com