Hacer de WebProgreso tu página de inicio Agregar a favoritos Contáctenos Acerca de WebProgreso
Crear texto con scroll en flash
     

En este tutorial de WebProgreso, aprenderás a crear textos con scroll en flash, a modo de lograr el siguiente efecto:

Puedes descargar los archivos de este tutorial incluído el archivo .fla aquí (deberás descomprimir todos los archivos en una misma carpeta para visualizarlo correctamente).

Procedimiento:

1) Crear las dos flechas que harán que el texto suba y baje / convertirlas en símbolos (F8) como botones: la primera llamarla "Arrow1" y la segunda llamarla "Arrow2".
2) Crear una nueva capa, llamada "Text", y en ella insertar fotogramas claves vacíos en los 4 primeros fotogramas. También situarse en el cuarto fotograma de la capa anterior y hacer botón derecho / insertar fotograma.

3) Hacer clic con el botón derecho en el primer fotograma de la capa Text / Acciones, e insertar el siguiente código:
loadVariablesNum ("./text.txt", 0);
en donde text.txt es el archivo de texto que se desea llamar (el contenido de este debe empezar por: "text=" y debe estar en el mismo directorio que la animación.)

Haz clic con el botón derecho sobre el segundo fotograma de la capa Text / Acciones, e insertar el siguiente código:
if (text ne "") {
gotoAndStop ("end");
}

Haz lo mismo para el tercer fotograma, pero con este código:
gotoAndPlay ("load");

Y lo mismo con el cuarto, pero colócale este código:
stop ();

4) Anda al segundo fotograma de la capa Text, y abre el panel Fotograma (box) en etiqueta (label) coloca "load", haz lo mismo para el cuarto fotograma, pero colocarle "end".

5) Anda al cuarto fotograma de la capa Text / insertar / nuevo símbolo / clip de película (Movie Clip) y llámalo "uptrigger". Dentro de este Movie Clip, inserta tres fotogramas claves vacíos en los tres primeros fotogramas de la capa. Al primer fotograma, dale esta acción:
stop ();
al segundo, esta otra acción:
/text:scroll = Number(/text:scroll)-1;
y al tercero, esta:
gotoAndPlay (2);

6) Anda a la película principal, e inserta un símbolo nuevo en el cuarto fotograma de la capa Text, elige Movie Clip, y llámalo "downtrigger". Dentro de este Movie Clip, inserta tres fotogramas claves vacíos en los tres primeros fotogramas de la capa. Al primer fotograma, dale esta acción:
stop ();
al segundo, esta otra acción:
/text:scroll = Number(/text:scroll)+1;
y al tercero, esta:
gotoAndPlay (2);

7) Vuelve a la película principal, y abre la biblioteca (ventana / biblioteca). En ella deberías ver "Uptrigger" y "Downtrigger", arrástralos al fotograma (da lo mismo dónde, pero es conveniente colocar Uptrigger arriba de la flecha para subir y Downtrigger, bajo la flecha para bajar). Haz clic en el punto que apareción de Uptrigger / abre el panel de instancia y en nombre coloca: uptrigger. Realiza lo mismo con el punto de Downtrigger, pero llamando a este: downtrigger.

8) Ahora toma la herramienta texto y haz clic donde desees que aparezca el texto. En el panel opciones de texto, elige texto dinámico, multilínea, y en variable coloca "text". Activa los cuadros: HTML y Ajuste de palabras (también puedes marcar si deseas que sea seleccionable). Agranda el cuadro de texto hasta dejarlo del tamaño que deseas que aparezca el texto.

9) Haz clic con el botón derecho sobre la flecha hacia arriba / acciones, y colócale el siguiente código:

on (press) {
tellTarget ("uptrigger") {
gotoAndPlay (2);
}
}
on (release, releaseOutside) {
tellTarget ("uptrigger") {
gotoAndStop (1);
}
}

Ahora realiza lo mismo con la flecha abajo, colocándole el siguiente código:

on (press) {
tellTarget ("downtrigger") {
gotoAndPlay (2);
}
}
on (release, releaseOutside) {
tellTarget ("downtrigger") {
gotoAndStop (1);
}
}

Y listo!! Solo recordarte que el texto del archivo de texto comience por: "text=" y que esté en el mismo directorio que la animación. Ahora podrás modificar el contenido del archivo text.txt y se modificará automáticamente en la animación.

   
 
   
     
     
 
WebProgreso | Acerca de | Contáctanos | Sitio por Sebastián Largo
df