Flash Tutorial - Matrix Special Effects
- Adapted text from many web versions & authors
Note: This tutorial has not yet been edited - so that I cannot be sure it is error free or that the instruction are easy to follow. It will be edited soon.
The aim of this tutorial is to learn how to create some Matrix special effects in Flash using simple ActionScript programming. If you do not know how to create a tween on stage or how to create movie clips and symbols you should do the previous tutorials first. The following steps produce best visual effect when the background colour is Black and the text colour is Green (Colour #00CC00 has been used for the text in the .fla file for this tutorial).
Step One : Creating randomly changing text
1. Create a new flash movie : File > New (Ctrl+N).
2. Go to : Insert > New Symbol (Ctrl + F8) to create a new movie clip.
3. Name the movie clip as characters and choose center point registration . Click on the OK button.
4. If the library window is not open, open it by going to : Window > Library (F11).
5. Use the Text Tool (T) and create a label at centre of the movie clip.
6. Change the text type to Dynamic Text in the Properties Inspector (Ctrl + F3) window.
7. In the Properties Inspector name the variable Var as letter. (Variable name is different from Instance name)
9. Select the text label and enter the following ActionScript in the Actions (F9) window for the text.
x = random (255);
this.letter = chr (x) ;
ActionScript Explained
The random(255) function will generate a integer between 0 and 255 in a random order. The chr(x) function is used to convert the integer generated into the corresponding ASCII character This random generation of numbers is what that is displayed in the swf as random characters. When a script executes, this references the movie clip instance that contains the script. The text in the label constantly keeps changing due to the second line of coding.
10. Return to the main stage by clicking on and create another movie clip.
11. Name the movie clip as character animate with a center point registration.
12. Place the following ActionScript in the Actions window for the first frame of character animate movie clip.
stop ();
13. Insert a blank keyframe Insert > Blank Keyframe in this layer of the movie clip.
14. Drag an instance of the character movie clip into this frame of the character animate movie clip.
15.If the Timeline is not visible go to Window > Timeline to view it. (Ctrl+Alt+T)
16. Insert a keyframe Insert > Keyframe in frame number 15.
17. Select the instance of character movie clip in frame number 15.
18. In the Properties Inspector for this movie clip set Brightness to -100% .
Choose the brightness option from the various options.
Click on the triangle next to the value and drag it down to -100%.
19. Select frame 2 in the time line and choose Insert > Create Motion Tween.
Step Two : Creating a shining background
1. Return to the main stage . Then create a new movie clip and name it Effects.
2. Use the Oval Tool (O) to draw a circle.
3. The diameter of the circle must be just equal to or greater than the height of the text used throughout this file.
4. Select the outline of the circle and delete it.
5. Now change the fill of the circle to a 3D fill colour similar to the colour of the text.
Step Three : Creating shining text
1. Return to the main stage by clicking on . Now create a new movie clip and name it with the character you are going to use in it. Let us name it w.
2. Create a text label using the Text Tool (T) and enter the alphabet w in it. Align the center of the text field and the center of the Movie Clip.
3. Select the label and choose Modify > Break Apart (Ctrl + B).
4. Return to the main stage to create a new movie clip and name it w animate.
5. Place the following ActionScript in Frame 1.
stop ();
6. Insert a blank keyframe Insert > Blank Keyframe in this layer of the movie clip.
7. Drag an instance of the w movie clip into this frame of the w animate movie clip. Position it at the center of the movie clip.
8. In the Properties Inspector for this movie clip set Brightness to -50% .
9. Insert a new layer Insert > Layer and position it below Layer 1.
10. Make Frame 2 in this layer as keyframe Insert > Keyframe.
11. Drag an instance of the shine movie clip into this frame of the w animate movie clip. Position it exactly behind the w movie clip. If required hide the w movie clip by clicking on the dot next to the layer name in the eye column : .
12. In the Properties Inspector for this movie clip set Brightness to -100% .
13. Insert keyframes in frame number 4 in both the layers. ( The two movie clips would automatically be copied to the new frames in the corresponding layers.)
14. Set the brightness of the w movie clip as 0% and that of shine movie clip as -50%.
15. Insert keyframes in frame number 15 in both the layers.
16. Set the brightness of the w movie clip as -100% and that of shine movie clip as -100%.
17. Select frame number 2 and 4 (keyframes) in each layer and apply motion tween Insert > Create Motion Tween . The movie clip should create a effect as shown below when played Control > Play (Enter).
18. Repeat steps 1 to 16 for each alphabet that you want to appear shining. (The file for download consists of the alphabets "w","e","b","a","s" and "p" to indicate the word "webwasp". Minimize the number of movie clips if you are using a slower machine since it may produce a staggered effect rather than a continuous effect.)
Stage Four: The Main Stage and ActionScript
1. Drag an instance of each of the animate movie clips to the stage. Place it outside the screen so that it will not be visible when the movie is played.
2. Name the instance of each movie clip as the movie clip used in it, i.e. name character animate as character , w animate as w and so on. You can name the movie clip in the Properties Inspector panel after selecting the movie clip to be named.
Before naming the movie clip
After naming the movie clip
3. Select frame number 3 in this layer and choose Insert > Frame (F5).
4. Insert a new layer Insert > Layer to enter some actionscript for the movie. Name the layer as actions.
5. Place the following code in frame number 1 of the actions layer.
fscommand("fullscreen", true);
SSX = 30;
SSY = 30;
XSPACING = 30;
YSPACING = 25;
spans = new Array (SSX);
for (y = 0; y < SSY; y++) {
for (x = 0; x < SSY; x++) {
n = y*SSX + x ;
if (((( x*5 ^ y*3)) & 3) == 0) {
duplicateMovieClip ("character", "c"+n, n );
}//Add the following code (by removing the "//" ) if you have created movie clips for other alphabets
//else if (((( x*5 ^ y*3)) & 1) == 0) {
//duplicateMovieClip ("e", "c"+n, n );
//} else if (((( x*5 ^ y*3)) & 4) == 0) {
//duplicateMovieClip ("b", "c"+n, n );
//} else if (((( x*5 ^ y*3)) & 2) == 0) {
duplicateMovieClip ("a", "c"+n, n );
//} else if (((( x*5 ^ y*3)) & 6) == 0) {
//duplicateMovieClip ("s","c"+n, n );
//} else if (((( x*5 ^ y*3)) & 7) == 0) {
//duplicateMovieClip ("p","c"+n, n );
} else {
duplicateMovieClip ("w", "c"+n, n );
}
with (this ["c"+n] ) {
_x = x*XSPACING + XSPACING;
_y = y*YSPACING;
}
}
}
for (x=0; x < SSX; x++) {
y = Math.random () * SSY * 8;
spans[x] = - (int (y));
}
6. Insert a blank keyframe Insert > Blank Keyframe in frame number 2 of the actions layer.
7.Place the following code in frame number 2 of the actions layer.
for (x=0; x < SSX; x++) {
if ( spans (x) >= 0) {
n = spans[x]*SSX + x ;
this ["c"+n].gotoAndPlay (2);
if ( spans[x] >=SSY ) {
n = Math.random () * SSY * 8 ;
n = int (n) ;
spans [x] = - n ;
}
}
spans [x]++;
}
8. Insert a blank keyframe Insert > Blank Keyframe in frame number 3 of the actions layer.
9.Place the following code in frame number 3 of the actions layer.
gotoAndPlay (2) ;
10. Publish your movie and view the special effects. To publish you movie go to: File > Publish (Shift + F12) .
The ActionScript Explained
Although some knowledge of actionscript is required the author and editors have tried to explain each function and it's implication in the script sequentially. For further assistance you can view the Reference panel (Shift + F1) to learn more about the functions and their syntax.
ActionScript in Frame 1 Explained
fscommand("fullscreen", true);
The fscommand allows the Flash movie to communicate with either the Flash Player, or the program hosting the Flash Player, such as a web browser. In this example the movie instructs the Flash Player to start the movie in full screen mode instead of it's original size. This is optional but the movie visual effect is better in a full screen mode. If this command is not used the movie will be started in it's original design size.
SSX = 30;
SSY = 30;
XSPACING = 30;
YSPACING = 30;
The above statements create four constants. The constants XSPACING and YSPACING are used for maintaining the minimum distance between adjacent alphabets. There would be XSPACING number or columns and YSPACING number or rows in your movie.
spans = new Array(SSX);
Creates an array named span with provision for SSX number of variables in it. The array will be empty at this point of time when the script is first executed.
for (y=0; y < SSY; y++) {
for (x=0; x < SSX; x++) {
Starts two for loops with one nested inside the other. A for loop consists of three parameters and statements to be executed within the flower braces. The first parameter is the initial condition,the second one being a expression which when true the statements have to be executed and finally the increment parameter that states in what steps the variable must be increased each time the loop is executed. Two new variables x and y are implicitly declared within the loop. The inner loop is executed SSX number of times and the outer loop is executed SSY number of times. But actually the inner loop is executed SSX * SSY number of times (30*30=900 times) since it is nested within the outer loop.
n = y*SSX+x;
Creates an integer n from the mathematical relation. This number is used to name the Movie Clips when they are duplicated in the next stage as well as to set depth for the Movie Clips. It takes a value ranging from 0 to 899.
if ((((x*5 ^ y*3)) & 3) == 0) {
duplicateMovieClip("character", "c"+n, n);
Evaluates the function(x*5 ^ y*3) first and then performs a 32-bit bitwise comparison of the result with the number '3', i.e. checks whether the result of the mathematical expression is equal to '3'. If the condition is false '0' is the result of comparison and when it is true '1' is the result of the comparison. This result is compared again with '0'. If (x*5 ^ y*3) is not equal to '3' the statements within the flower braces are executed, otherwise the following statements are evaluated.
The duplicateMovieClip creates an instance of a movie clip while the movie is playing. The Movie Clip to be duplicated is mentioned(name of the instance of a Movie Clip) in the first parameter of the function within quotes. The new duplicated Movie Clip will be named according to the second parameter in the function and set at a depth specified in the third parameter for the function. The depth level is a stacking order for duplicated movie clips. This stacking order is much like the stacking order of layers in the Timeline; movie clips with a lower depth level are hidden under clips with a higher stacking order. You must assign each duplicated movie clip a unique depth level to prevent it from replacing movies on occupied depths. Since n is unique for each value of x and y the depth and name of each movie clip is unique. The Movie Clips are named as c0, c1, c2,........c501,c502,.....c899 when n takes the value from 0 to 899. The '+' symbol concatenates the alphabet "c" with the integer n to name the Movie Clip.
//else if (((( x*5 ^ y*3)) & 1) == 0) {
//duplicateMovieClip ("e", "c"+n, n);
.................
.................
//else if (((( x*5 ^ y*3)) & 7) == 0) {
//duplicateMovieClip ("p","c"+n, n);
//}
This script is similar in functioning as stated above except the fact that it us used to generate Movie Clips of other instances as named. The algebraic expression is used as a random function to choose between the different Movie Clips and duplicate them. If you are good at algebra you can design your own expression to choose the Movie Clips to be duplicated.
else {
duplicateMovieClip("w", "c"+n, n);
}
The last option of the if .. else statement is shown above. The Movie Clip mentioned here will be duplicated by default if all other expressions turn out to be false since there is no expression to be evaluated here.
with (this["c"+n]) {
_x = x*XSPACING+XSPACING;
_y = y*YSPACING;
}
The above script allows you to specify an object (such as a movie clip) and evaluate expressions and actions pertaining to that object. This prevents you from having to repeatedly write the object's name or the path to the object. The statement this["c"+n] allows you to refer to the most recent Movie Clip that you duplicated and renamed.The _x and _y are x and y co-ordinates of the Movie Clip, i.e. the position of the Movie Clip in the screen. These are set to a new value so that no two Movie Clips overlap each other.
for (x=0; x < SSX; x++) {
y = Math.random()*SSY*8;
spans[x] = -(int(y));
}
The above loops generates a value for the variable y from the expression Math.random()*SSY*8 and stores these values in the array spans. The function Math.random() randomly generates a number 'n' where 0 < n < 1. The range of values y can take is 0 < y < 240 including fractions. The fractions are rounded off to the nearest integer using the int function.
Note : The entire script in the first frame is executed only once. The Movie Clips are duplicated and placed in appropriate positions in the screen but are invisible, since in all Movie Clips the first frame was a blank keyframe with the stop () function that would pause the Movie Clips in that frame. It was only in the second frame of each Movie Clip that the text was visible. The movie would appear as shown below if the first frame of each Movie Clip had the stop()function in the frame where the text first appears (instead of a blank keyframe).
The ActionScript in the second keyframe of the actions layer is aimed at randomly choosing which Movie Clip to play so that the special effects is achieved.
ActionScript in Frame 2 Explained
for ( x=0; x < SSX; x++ ) {
if ( spans(x) >= 0 ) {
The above script starts a for loop with the variable x and the following statements are executed 30 times whenever the Play Head is transferred to frame number two. The if statement checks whether the spans array is empty or has variables. The spans array was filled with negative integers with some actionscript in the previous frame(frame number 1). So the if statement would always return a true value and the following statements will be executed.
n = spans[x]*SSX + x;
this[ "c" + n ].gotoAndPlay(2);
The first line generates a value for n from the algebraic expression spans[x]*SSX + x. Since spans array was filled with negative integers the value of n will be negative and in the range -1 to -7140 initially. The spans[x]++ statement at the end (of the script in this frame) would increment (make it less negative,i.e. -20 would become -19) the value by one at a time for each member in the array(corresponding to the value of x). Eventually after few loops the value becomes positive. A positive value of a member in the spans array will create a positive value for n in the following loops. This positive value of n is used to point to one of the duplicated Movie Clips in the next line of the script. The script this[ "c" + n ].gotoAndPlay(2) will start the Movie Clip pointed by "c" + n from the second frame. The motion tween where either the brightness or alpha property was varied in the corresponding Movie Clip will be played. This line of script though executed every time will create an effect in the screen only when the value of n is positive and between 0 and 899 (since the duplicated Movie Clips were named c0,c1,c2....c898,c899 in the ActionScript in frame one).
if ( spans[x] >= SSY ) {
n = Math.random() * SSY * 8 ;
n = int(n);
spans[x] = -n ;
}
The above script is used to check the value of each element in the spans array so that the value of n determined from expression n = spans[x]*SSX + x is below 900 and the previous line this[ "c" + n ].gotoAndPlay(2) will refer to a valid Movie Clip that is present in the movie. The value n keeps increasing due to increases in the value of the elements in the spans array. The values are generated once again similar to last the few lines in the previous frame.
spans[x]++;
This is the last statement inside the for loop in frame number 2. This statement increases the value if each element pointed in the array by one. The values of these elements directly affect the value of n which in turn chooses which Movie Clip is to be played.
ActionScript in Frame 3 Explained
gotoAndPlay(2);
This makes the above script loop so that the Play Head on the Main Stage continually goes back one space. Thus the script in Frame 2 is looped infinitely and Movie Clips are selected and played in a random order.
Illustration of ActionScript
Consider that we have reached the end of Frame 1 and all the Movie Clips have been duplicated and placed in appropriate positions. The spans array would have been filled with negative integers. Let us assume it has the following elements in it :
spans[]={-51,-118,-120,-173,-230,-83,-205,-207,-185,-210,-143,-11,-68,-73,-93,-126,-214,-83,-53,-144,-188,-65,-89,-55,-203,-26,-96,-204,-52,-168}
Note: The magnitude alone of all the elements are below 240.
When the for loop is completely executed once, x would have taken the value from 0 to 29. The corresponding changes are tabulated below.
x spans[x] n=spans[x] * SSX + x spans[x]++
0 -51 -1530 -50
1 -118 -3539 -117
2 -120 -3838 -119
3 -173 -5187 -172
4 -230 -6896 -229
5 -83 -2485 -82
6 -205 -6144 -204
7 -207 -6203 -206
8 -185 -5542 -184
9 -210 -6291 -209
10 -143 -4280 -142
11 -11 -319 -10
12 -68 -2028 -67
.. .. .. ..
.. .. .. ..
.. .. .. ..
25 -26 -755 -25
26 -96 -2854 -95
27 -204 -6093 -203
28 -52 -1532 -51
29 -168 -5011 -167
It is clear from the above table that spans[11] will first become positive. At this time the value of n would be 11. So the Movie Clip c11 will be played. The x and y co-ordinates of this Movie Clip would be (x=360, y=0) on the screen(The point (0, 0) is the top left corner in the screen) . In the following loops Movie Clips c41 (360, 25), c71 (360, 50), c101 (360, 75), c131 (360, 100).... etc in the same column(as x-coordinate remains the same) are played. In the interval between two successive clips being played, the variable x in the loop cycles through other values and Movie Clips in other columns may be played to create the special effects.
End of the tutorial
I hope this tutorial will have helped you to create the Matrix special effects background. If any alphabet occurs a large number of times try changing the algebraic functions a little bit. When you use your Movie Clips with this background be sure to set the depth of your Movie Clip at a suitable value so that it appears before the falling alphabets and not behind them. And remember to use normal fonts so that all the numbers from 0 to 255 have a corresponding character.
http://www.adri.de/theadrix/01_adrix_anim_30.html
--
------------------------~!~----------------------
Best Regards,
G.Arun Bala
B.Tech Information Technology
SSNCE,Kalavakkam
http://dmatriz.wordpress.com
-------------------------~!~---------------------
If you want a custom URL for this text, click here ($2/year)
If you want to create your own free URL , click here
|