kadazuro.com
 TutorialesTexto Animado con ActionScript
 
por: kadazuro
imprimir este documento
 

Animar texto con ActionScript es más fácil de lo que se cree, sólo se necesita el script , un TextField [texto dinámico o Dynamic Text] e imaginación. Con sólo esto podrás hacer toodas las animaciones que querrás o que te de la cabeza hacer. Aparte que tendrás una cantidad de ventajas, entre estas las más importantes creo yo serían: que tus animaciones no se verán pre-fabricadas (como la hechas con programitas para esto, que te las puedes encontrar igual en cientos de sitios), archivos más pequeños en peso.
El script te lo doy aquí, el textfield lo trae Flash, y la imaginación te la dejo a vos( digo, algo tenias que hacer).

Cómo funciona?
La animación es un movieclip con un TextField que se pone dentro de otro movieclip, en éste se anima el TextField; ésta animación se coloca dentro de otro movieclip,este último con el fin de que pueda duplicar al clip que tiene dentro( el que contiene la animación) sin mayor problema, poniéndole a cada TextField la letra que le corresponde; y finalmente se pone en el escenario.

Paso1.
Abrir flash, nueva movie,insertar nuevo símbolo letra como nombre y movieclip como comportamiento ( figura uno)

figura 1(creación del primer movieclip)

En este clip ponemos el TextField, presionando el botón A () click en el escenario, como vamos a poner una letra {el fin es animar el texto letra por letra} ponemos la letra más ancha que encontremos ( generalmente es "W")digitemos eso: la W ; luego abrimos el panel de opciones de texto presionando el el repectivo botón en la barra de acceso rápido que aparece abajo en flash en el botón show character (o presionando window>panels>character o CRTL+T). En las opciones de texto ponemos

  • Pestaña Caracter(Character) : el tipo de letra que vamos a ocupar
  • Pestaña Párrafo (Paragraph):en alinear le ponemos centrado.
  • Pestaña Opciones de Texto ( Text Options): seleccionamos como tipo de texto "Dynamic Text" de la lista, luego como nombre de variable le ponemos _parent.letra {esto para facilitarnos el trabajo más adelante}; nos aseguramos que ningún check box esté seleccionado. Ahora bien para poder animar un campo de texto dinámico tenemos que exportar las outlines de las letras{ esto para que se vea decente } ahora bien si le ponemos que nos exporte todas las outlines de las letras no aumentará el archivo de 15 a 35k más dependiendo de la letra que ocupemos razón por la cual te pongo dos opciones.
    • Poner en el campo de texto( el input field ) únicamente el texto que vamos a ocupar
    • Exportar las letras de uso más común, estas son mayúscula, minúsculas y las características de nuesto idioma áéíóúÁÉÍÓÚÑñ (figura 2)

Figura 2. Opciones del TextoField.

Paso2.
Nuevo símbolo, "movie_letra" como nombre {en este ejemplo, si no le pones ese nombre también funciona :)} y movieclip como comportamiento; aquí colocas una instancia del del movieclip "letra".ahora puedes hacer la animación que quieres para el texto, haciendo alarde de tus faculatades "flasheras", puedes usar varias instancias del movieclip letra para agregar efectos más elaborados; hacerle skew, flips etc, en fin cualquier animación que se hariá con un símbolo normalmente { aquí es donde entra tu imaginación}, si quieres que la animación sólo se vea una vez, colócale un stop en el último cuadro de la animación.

Paso3.

Nuevo símbolo, le pones nombre("main_movie" en este caso) y pones una instancia de la animación que acabas de hacer ("movie_letra") a esta apenas la pones en el escenario le pones el nombre de instancia "clip".(figura 3)

Porqué a este movieclip si le ponemos nombre de instancia y al anterior ( el que contiene la letra) no?.
Recuerdas que al nombre de la variable le pusimos _parent.letra?,pues gracias a esto no tenemos que ponerle nombre a los simbolos "letra" que coloquemos dentro de "movie_letra", esto nos va a ayudar a la hora de duplicar las movies y asignarles a cada una su repectiva letra. al poner _parent.letra le estamos diciendo que tome el valor de una variable llamada letra que se encuentra un nivel abajo "_parent", lo que nos permite poner todas las movieclips "letra" que queramos sin tener problemas.

Figura3. movieclip"movie_letra" con nombre de instancia.

Si no entendiste lo anterior entonces sólo me queda más que decirte: confía en mi, es lo mejor :)

Paso4.
Ponemos main_movie en el escenario principal y ahora si, la parte bonita: el script. Pero primero tenemos que saber que vamos a ocupar.
Tomando en cuenta que nuesto centro de operaciones va ha ser main_movie y que esta contiene a movie_letra con nombre de instancia clip, desde main_movie para referirnos a "clip" lo haremos asi: this.clip
Como a los movieclip se les puede poner acciones "onClipEvent" usaremos el evento load para asignar las variables y el evento enterFrame para que duplique las movies y haga todo el resto.

onClipEvent (load)

  • Necesitamos el texto que queremos mostrar, asi que ponemos la variable texto="texto a mostrar";
  • Para saber cuantas veces duplicar la movie necesitamos saber qué tan largo es el texto, entonces: largo=texto.length;
  • Para separar las movies entre sí ocupamos una distancia entre ellas: distancia= 12;{esta la puedes modificar dependiendo del texto que uses}
  • Alguien que nos lleve la cuenta: i=1;
  • Y como clip contiene una W que es la que vamos a sustituir, no queremos que clip se quede visible ya que iremos duplicando las movies asignándoles un nombre del tipo clip1= primer letra, clip2=segunda letra; por lo que a clip no lo ocuparemos más ( solo a sus duplicados), razón por la cual le damos las gracias y lo escondemos: this.clip._visible=0;

al final nos quedará algo como esto:

onClipEvent (load) {
  //texto es el texto a mostrar
  texto="Texto de ejemplo por kadazuro";
  //calculamos el largo del texto
  largo=texto.length;
  //espacio entre las letras.
  distancia= 12;
  //el contandor
  i = 1;
  //ponemos invisible a la movie "clip"
  this.clip._visible=0;
}

onClipEvent (enterFrame)

  • Para que nos vaya duplicando las movies una a una necesitamos hacer un if, que nos evalue si ya terminamos, si no lo hemos hecho, que el script siga duplicando movies if( status != "done")
  • duplicamos la movieclip this.clip.duplicateMovieClip("clip"+i,i);
  • le asignamos la letra que le corresponde this["clip"+i].letra = texto.substring(i-1,i);
  • la ponemos a la par de la anterior this["clip"+i]._x = this.clip._x+(i*distancia);
  • le sumamos uno a i i++;
  • hacemos el if que pone a status en "done" si i es mayor a el largo del texto
    if(i>largo){
    status="done"
    }

OnClipEvent (enterFrame) {
  //si no hemos terminado
  if( status != "done"){
    //duplica la movie y le asigna nombre, formato clip1,clip2 etc.
    this.clip.duplicateMovieClip("clip"+i,i);
    //le asigna la letra correspondiente
    this["clip"+i].letra = texto.substring(i-1,i);
    //la pone a la par de la anterior
    this["clip"+i]._x = this.clip._x+(i*distancia);
    //aumenta a i en uno
    i++;
  }
  //si ya terminó
  if(i>largo){
    //status en done detiene el if de arriba
    status="done"
  }
}

Suponiendo que vamos por la primer letra("T" en este caso), en español este sería el resultado para el script en el evento enter frame

OnClipEvent (enterFrame) {
  if( status != "done"){
    //duplica clip asigándo el nombre de clip1, con depth 1
    this.clip.duplicateMovieClip(clip1,1);
    //le asigna la letra T a la variable letra que se encuentra en clip1
    this.clip1.letra = T;
    // si la posición de clip es de cero entonces 0+(1*12)= 12
    this.clip1._x = this.clip._x+(1*12);
    //le suma uno a clip
    1++;
  }
  if(i>largo){
    status="done"
  }
}

 

 
regresar
TextField : cuadro de texto, caja de texto, campo de texto.
MovieClip : Clip de película
 

Historial:

  • dic16,2000 se crea este documento.