Efeito Matrix

Neste tutorial, vou mostrar como criar o mesmo efeito do filme Matrix. Todas as animação é feita através de Actionscript 3.0, Não será mostrado neste tutorial nada na “Timeline”, apenas o efeito.

>Prévia

Configurando o efeito.


01. Crie um novo documento no tamanho 300x300.

02. Crie um texto dinâmico (dynamic text field). Tipo números.

03. Dê nome a instância de "myText". Defina a fonte para 15.

04. Clique no botão “Embed” e selecione “Numerals”.



05. Converta o campo de texto em um “Movie clip”. Nome dele "numberInsideMC". Defina o ponto de registro para o canto superior esquerdo.

06. Dê nome ao movie clip de "NumberInside"

07. Converta o "numberInsideMC" em um movie clip (basta clicar nele e pressionar F8). Dê nome ao novo movie clip ”myNumberMC". Defina o ponto de registro para o canto superior esquerdo.

08. Linck "myNumberMC" a uma classe chamada "BitNumber"



Actionscript 3.0

09. Na “timeline” principal, crie uma nova camada ”Actionscript”. Digite o seguinte.

//This array will contain all the numbers seen on stage
var numbers:Array = new Array();

//We want 8 rows
for (var i=0; i < 8; i++) {

//We want 21 columns
for (var j=0; j < 21; j++) {

//Create a new BitNumber
var myNumber:BitNumber = new BitNumber();

//Assign a starting position
myNumber.x = myNumber.width * j;
myNumber.y = myNumber.height * i;

//Give it a random speed (2-7 pixels per frame)
myNumber.speedY = Math.random() * 5 + 2;

//Add the number to the stage
addChild (myNumber);

//Add the number to the array
numbers.push (myNumber);

}
}

//Add ENTER_FRAME so we can animate the numbers (move them down)
addEventListener (Event.ENTER_FRAME, enterFrameHandler);

/*
This function is repsonsible for moving the numbers down the stage.
The alpha animation is done inside of the myNumberMC movieclip.
*/
function enterFrameHandler (e:Event):void {

//Loop through the numbers
for (var i = 0; i < numbers.length; i++) {

//Update the y position
numbers[i].y += numbers[i].speedY;

//If the BitNumber is below the stage, move it up again
if (numbers[i].y > stage.stageHeight) {
numbers[i].y = 0;
}
}
}

10. Estamos quase chegando ao fim, mas temos ainda de acrescentar alguns código dentro do nosso “myNumberMC”. Dê um duplo clique no “myNumberMC” e crie uma nova camada de “Actionscript”.

11. Digite o seguinte no painel de ações.

//This variable tells us should we increase the alpha
var increaseAlpha:Boolean;

//We want the number to be invisible at the beginning
numberInside.alpha = 0;

//Calculate a random timer delay (how often we increase the alpha)
var timerDelay:Number = Math.random() * 4000 + 2000;

//Create and start a timer
var timer:Timer = new Timer(timerDelay, 0);
timer.addEventListener (TimerEvent.TIMER, timerHandler);
timer.start ();

//Add ENTER_FRAME so we can animate the alpha change
addEventListener (Event.ENTER_FRAME, enterFrameHandler);

/*
Timer calls this function.
Timer delay defines how often this is called.
*/
function timerHandler (e:Event):void {

//Update the increaseAlpha value
increaseAlpha = true;

//Calculate a random number (0 or 1)
var newNumber:int = Math.floor(Math.random() * 2);

//If the random number is 1, we insert "1" into the text box
if (newNumber == 1) {
numberInside.myText.text = "1";
}
//Else we insert "0" into the text box
else {
numberInside.myText.text = "0";
}
}

//This function animates the alpha
function enterFrameHandler (e:Event):void {

//Increase the alpha if increaseAlpha is true
if (increaseAlpha == true) {
numberInside.alpha += 0.02;
}

//Else we want to decrease the alpha
else {
numberInside.alpha -= 0.02;
}

//We don't want the alpha to be over one, so we assign increaseAlpha to be false
if (numberInside.alpha > 1) {
increaseAlpha = false;
}
//If the alpha is negative, set it to zero
if(numberInside.alpha < 0) {
numberInside.alpha = 0;
}
}

12. Volte para o palco e retire o “myNumberMC”.

13. Teste o seu efeito agora.

Muito bom!



Vou testar já já.
Valeu aí cara!