¿Cómo escribir el código para la barra de progreso flash?

Busca antes de preguntar.

Para más detalles, puede consultar los sitios web recomendados a continuación~ ~Hay ilustraciones~ ~Las explicaciones son relativamente claras.

Programación para cargar animación de precarga

Cargar el precargador de páginas web es clave en la animación web, porque aunque el archivo generado por Flash sea pequeño, en animaciones grandes el usuario utiliza un módem Aún es necesario abordar la velocidad. Si no hay un proceso de precarga, me temo que la animación no se verá muy fluida. Especialmente las animaciones que contienen muchos sonidos e imágenes no se mostrarán sin problemas ante nuestros ojos sin cargarlas.

Antes de eso, conozca las propiedades y funciones que aparecerán en este capítulo. Si utiliza funciones y atributos que nunca antes había tocado en el ejemplo, primero hágalo como de costumbre y luego mire hacia atrás después de aprender otras funciones relacionadas en los siguientes capítulos. Comprenderá completamente la función del ejemplo.

◆_Loaded Frame

_ FrameLoaded es una propiedad del clip de película, que se utiliza para obtener el número de fotogramas descargados en el clip de película. Por supuesto, la mayoría de las propiedades que se aplican a los clips de película se pueden aplicar a toda la animación. Esta propiedad sólo se puede utilizar para obtener.

if(_ root . MC . _ fotogramas cargados & gt; 100){

_root.gotoandplay(1)

}

En modo normal, la entrada para este ejemplo sería:

if(getproperty("_root.mc",_frames cargado)>100){

gotoandplay( 1)

}

En modo normal, la función getproperty se utilizará para obtener propiedades, pero esta función no es la mejor en usos nuevos. sintaxis, a la que no se hará referencia en los ejemplos siguientes. En este ejemplo, cuando el recuento de fotogramas descargados del clip de película obtenido es superior a 100, comienza a regresar a la escena y a reproducirla nuevamente. Este es también un ejemplo típico en la producción de sitios web. Debido a problemas de tamaño, muchos clips de película no se transmitirán correctamente durante el proceso de "transmisión". El siguiente ejemplo será un ejemplo equivocado.

_ root . MC . _ frames cargados = 100

_ root .

En programación, asignando valores a _ FrameLoaded. atributo. Si desea que el directorio raíz comience a reproducirse cuando el número de fotogramas descargados sea igual a 100, siga el ejemplo siguiente.

if(_ root . MC . _ fotogramas cargados = 100){

_ root . >◆_Total Frames

El atributo _totalframes se utiliza para obtener el número total de fotogramas de la entidad del clip de película. También se puede utilizar para obtener el número total de fotogramas de la animación. Verás su uso en los ejemplos siguientes.

I = _ raíz . MC . _ cuadros totales;

if(_ raíz . cuadros cortados = I

_ raíz .

}

En el programa, asigne el número total de fotogramas de la entidad del clip de película a la variable I. Cuando el puntero de animación de la escena principal se reproduce con el mismo número que el total número de fotogramas en el clip de película, la animación deja de reproducirse. Esta propiedad también es una propiedad intransferible.

◆ ifFramesloaded

La función IfFramesloaded también se usa para obtener el número de fotogramas descargados. La diferencia entre esta y _ FrameLoaded es que se usa para describir el comportamiento simple de descargar el. número de fotogramas. Y esta función parece estar especialmente diseñada para cargar. Se encuentra en el conjunto de comandos de acción básica y el nombre del comando es Si se cargan fotogramas. El siguiente ejemplo constituirá la carga más simple.

ifFrameLoaded(_totalframes){

gotoandplay(3);

}else{

gotoandplay(1);

}

Agregar este programa al segundo fotograma de la película se puede utilizar con todas las técnicas de precarga de animación. Significa que cuando el número de fotogramas cargados es el número total de fotogramas, reproduzca el tercer fotograma; de lo contrario, reproduzca el primer fotograma. Dado que se utilizan más funciones y propiedades a partir de Flash5, esta función está en desuso.

◆ getBytesLoaded()

GetBytesLoaded() obtiene los bytes descargados de la entidad del clip de película. Si es una animación externa, devuelve el total de bytes de la animación. GetBytesLoaded se utiliza para un diseño de carga más preciso, porque no obtiene el número total de fotogramas de una película como el atributo _framesloaded, sino en bytes. Si el último fotograma de la animación será una imagen grande o un carácter de voz, el porcentaje obtenido por which_FrameLoaded será inexacto. getBytesLoaded compensa efectivamente esta deficiencia. Ejemplo:

I = _ root . getbytestotal();

if(_ root . getbytesloaded()>=1000000){

n = _ root getbytesloaded();

Si (n & lt=i/4){

_ root . Descarga, menos de una cuarta parte. La animación es demasiado grande y tardará mucho en descargarse.")

}

}

Cuando llegue la descarga. 1 MB, compare si la animación ya está a un cuarto del final. Si es así, detenga la animación y muestre la cadena "1M,..." en la ventana de depuración y determine si continúa la reproducción en función de otros comportamientos de la animación. Otra característica de este ejemplo es que si se inserta un clip de película donde se detuvo, el clip de película no dejará de reproducirse. También puede mostrar el recuento de palabras descargadas a través de texto dinámico. Supongamos que hay una variable de texto dinámico llamada texto en la escena principal de la animación. ¿Cuáles son algunos ejemplos?

_ root . text = _ root . obtener bytes cargados();

if(_ root . getbytesloaded()>=_root.getBytesTotal()){

gotoandplay(3);

} De lo contrario, {

gotoandplay(1);

}

El cuadro de texto dinámico Muestra dinámicamente la cantidad de bytes descargados para servir a la audiencia. Los espectadores también aprenderán sobre el progreso dinámico del proceso de descarga de la animación.

◆ getBytesTotal()

La función getBytesTotal() se utiliza para obtener el número total de bytes de animaciones o clips de película. Por supuesto, podemos observar el número total de bytes de la animación a través del tamaño del archivo, pero para los espectadores que utilizan navegadores en Internet, es necesario mostrar dinámicamente el tamaño del archivo. Además, si desea observar el volumen del clip de película en la animación, solo puede confiar en la función getBytesTotal().

if(_ root . getbytetotal()>=1000000){

_ root . getbytetotal()>=1000000){

_ root . Este programa significa detener la animación cuando el total de bytes de la animación supera 1M.

◆ gettimer()

La función Gettimer() se utiliza para obtener el tiempo de reproducción de clips de película o animaciones. Esta función no solo se utiliza para la carga de producción, sino que también estará expuesta en el proceso de aprendizaje futuro. En Flash5, habrá una etapa en la que la función gettimer() podrá desempeñar plenamente su papel en el control del tiempo de reproducción de la animación.

El tiempo obtenido por la función gettimer () se calcula en milisegundos. Durante el proceso de programación, generalmente se divide por 1000 para obtener segundos, lo que está más en línea con la visualización del tiempo del programa de reproducción. Supongamos que hay una variable de cuadro de texto dinámico para el texto en la animación. Ejemplo:

text = gettimer()/1000;

Muestra dinámicamente el proceso de tiempo de reproducción de la animación controlando el período del fotograma u otros comportamientos como OnClipEvent(enterframe). Otro ejemplo es:

text = gettimer()/1000;

if(text>=10){

gotoandstop(3);

}En caso contrario{

gotoandplay(1);

}

Supongamos que este programa está ubicado en el segundo cuadro de la escena de animación principal. Luego comienza a reproducirse después de 10 segundos; de lo contrario, simplemente se repite entre el primer y el segundo fotograma.

Carga simple

Una producción de carga simple no requiere una base de programación profunda. La mayoría de los diseñadores comienzan a aprender scripts Flash desde la carga. También se debe a que la carga de producción juega un papel vital en la comunicación de la animación.

Paso 1: Abra Flash5 y cree un nuevo archivo. En la configuración predeterminada de la película, el color de fondo es blanco y la animación se reproducirá a 12 fotogramas por segundo, lo que puede observar abriendo el cuadro de diálogo "Propiedades de la película" haciendo clic en el comando "Modificar | Película". Como se muestra en la Figura 4-1. Sin embargo, la práctica nos dice que las animaciones producidas con la configuración predeterminada de la película no son muy fluidas cuando se ven en línea, por lo que a los diseñadores generalmente les gusta cambiar los 12 fotogramas por segundo predeterminados a un nivel superior para que se puedan ver con mayor fluidez después de publicar la animación. .

Figura 4-1 Cuadro de diálogo Propiedades de la película

Paso 2: en el primer fotograma de la película, utilice la ventana de comando Panel | Trazo para abrir el panel de trazo y cambiar el ancho. del recorrido Tire de él a 3, como se muestra en la Figura 4-2.

Figura 4-2 Utilice el panel "Trazo" para cambiar el grosor del trazo.

Paso 3: haga clic en la herramienta de dibujo cuadrado en el panel de dibujo. Seleccione rojo en la herramienta Bote de pintura encima del elemento Color en el panel Dibujar. Luego dibuje un rectángulo en la escena, como se muestra en la Figura 4-3.

Figura 4-3 Dibuje una barra de progreso rectangular

Paso 4: haga clic en la parte roja del rectángulo con el mouse en el área de edición. Encontrará que hay muchos hoyos pequeños. en el color y ya está seleccionado.

Paso 5: Haga clic en "Insertar" | "Convertir en símbolo" para convertir el rectángulo rojo en un símbolo e ingréselo en el cuadro de entrada "Nombre" en el cuadro de diálogo "Propiedades del símbolo" que se abre posteriormente. El nombre del símbolo al cargar. Luego seleccione el elemento del clip de película y haga clic en Aceptar.

Paso 6: Ahora haz clic en el rectángulo rojo, encontrarás que ya no tiene un pequeño hoyo, sino que aparece un cuadro azul, porque ya es un símbolo. Ahora seleccione el comando "Ventana" | "Paneles" | "Instancias" para abrir el panel de instancias "Instancias".

Paso 7: Ingresa el nombre Cargando en el elemento de nombre del panel y dale a este símbolo un nombre doble. Como se muestra en la Figura 4-4.

La Figura 4-4 muestra los nombres de los miembros del símbolo de la barra de progreso.

Paso 8: Pulsa F6 en el segundo fotograma de la línea de tiempo para insertar un fotograma clave.

Paso 9: Haz doble clic en el marco con el mouse para abrir el panel de acciones del marco. Vamos a empezar a hacer la animación de precarga.

Paso 10: Haga doble clic en el elemento de acción en el comando en el lado izquierdo del panel de acciones, seleccione if en el comando abrir, haga clic nuevamente con el mouse y el comando if aparecerá en el área de edición. .

Paso 11: Ingrese code_frame cargado>=_totalframes en el campo de entrada de condición en el área de entrada de parámetros en la parte inferior del panel de acciones. Como se muestra en la Figura 4-5.

Figura 4-5 Ingrese el código en el cuadro de parámetro del comando if

Paso 12: luego haga clic en el comando ir a en el comando de acción básica establecido en el área de comando e ingrese el siguiente cuadro de entrada de parámetros Introduzca el número 3 en la columna Marco. Como se muestra en la Figura 4-6.

Figura 4-6 Campo de entrada de parámetros de la instrucción GOTO

Paso 13. Luego haga clic en el elemento más en el conjunto de instrucciones de operación.

Paso 14: Haga clic en el comando Ir a nuevamente, esta vez sin cambiar el número de fotograma.

Paso 15: haga clic en la instrucción Setproperty del conjunto de instrucciones Acción, seleccione el atributo _xscale en el cuadro desplegable de atributos, luego ingrese "_root.loading" en el campo de entrada de destino y haga clic en la expresión siguiente elemento del cuadro de selección de radio.

Paso 16: Ingrese el código (_ cuadros cargados/_ cuadros totales)* 100 en el campo de entrada de valor y haga clic en el botón de opción de expresión detrás de él.

Figura 4-7 Cuadro de entrada del parámetro del comando Establecer propiedad

Paso 17: Se ha ingresado el comando. A continuación, comience la animación después del tercer fotograma, luego publíquela, cárguela y mírela. También puede abrir Control | Depurar película para probar la película, usar la velocidad de descarga simulada en el menú de depuración y probarla en ventanas de navegación posteriores.

Explicación del programa:

En las líneas 1-2, si (_ fotogramas cargados >; cuando el número de fotogramas descargados es mayor o igual al número total de fotogramas de la película = _totalframes, salta al tercer fotograma comienza a reproducirse.

Línea 3-5, si el número de fotogramas descargados es menor que el número total de fotogramas, salta al primer fotograma e instala el atributo de longitud. clip de película que se carga para crearlo. La longitud se convierte en el número de fotogramas descargados dividido por el número total de fotogramas multiplicado por 100.

Punto de conocimiento:

La carga hace que muchos diseñadores prefieran hacerlo. use el comportamiento del marco. De hecho, la carga se puede realizar mediante muchas funciones. En este ejemplo, la expresión (_ cuadros cargados/_ cuadros totales) * 100 se usa para determinar el ancho de la barra de progreso. función de tiempo de descarga o función de bytes de descarga, pero el número de descargas se divide por el número total de veces. La expresión multiplicada por 100 básicamente no cambia.

Diseño de carga preciso

Cuál. Los procedimientos de carga mencionados anteriormente son más simples, pero tienen requisitos más altos. Para los amigos, esto puede no ser suficiente. Consulte la Figura 4-8. Esta animación de precarga utilizará más funciones para que la precarga de la animación parezca más fácil de usar. p>

Figura 4-8 Interfaz avanzada del cargador

Proceso de producción:

El primer paso es abrir la animación de carga que acabamos de diseñar. El cargador se modificará según. la carga anterior.

El segundo paso es usar la herramienta de texto, use el comando Ventana | Panel Carácter para abrir el panel de caracteres, establezca el tamaño de fuente en 25 y el color de fuente en negro, como se muestra. como se muestra en la Figura 4-9.

Figura 4- 9 Configuración del panel de caracteres

Paso 3: Ingrese los caracteres en la interfaz que se muestra en la Figura 4-8. Comando Alineación para abrir el panel Alineación.

Paso 4: Utilice el método de alineación para alinear el texto en el estilo que se muestra en la Figura 4-8.

Paso 5: Haga clic en la herramienta de texto. y use el mouse para arrastrar un texto detrás del número total de bytes de texto. Marco, preste atención a ajustar el ancho del cuadro de texto. Luego abra el comando Ventana | Opciones de texto, abra el panel Propiedades de texto de Opciones de texto. Texto dinámico en el menú desplegable y abra el cuadro Configuración de texto dinámico.

Paso 6: ingrese la variable del cuadro de texto dinámico como zbye, como se muestra en la Figura 4-10. Configure la variable de texto dinámico en el panel de texto dinámico.

Séptimo paso: utilice el mismo método para dibujar siete cuadros de texto dinámico detrás de cada carácter. La variable de campo después de los bytes descargados es yby, el número total. de fotogramas es zfrm, el número de fotogramas descargados es yfrm y la variable después del tiempo requerido es xtim. El tiempo utilizado es ytim y la variable de progreso de descarga debajo de la barra de progreso es yload. : Después de la configuración, comience a programar. Abra el panel de acciones en el segundo cuadro y podrá ver el programa que acabamos de diseñar. Hay muchas cosas en este programa que no es necesario cambiar, solo agregue algunos programas más.

Paso 9: Arrastramos los atributos de la colección de oraciones ("_root.load with mouse",_xscale, (_frames cargados/_total frames)*100 hacia arriba una línea, en el comando Acciones establecido en el área especificada Seleccionar el comando Establecer variable.

Paso 10: en el cuadro de entrada de variable abierto, complete la variable zby del número total de fotogramas en el elemento variable, ingrese el código _root.getbytestotal() en la columna de valor y verifique la siguiente expresión Caja de opciones de radio.

Figura 4-11 Cuadro de entrada de variables

Paso 11: Utilice el mismo método para ingresar otras variables. yby=_root.getbytesloaded().

Paso 12: zfrm = _root. _Marcos totales.

Paso 13, yfrm = _root. _ Marco cargado.

Paso 14: ytim=gettime()/100"segundos".

Paso 15, xtim = int(zby-yby)/yby*tim)+"segundos".

Paso 16: YLOAD = _ fotograma cargado/_ fotogramas totales * 100.

Paso 17: Se ha ingresado al programa completo. Consulte la Figura 4-12.

Figura 4-12 El programa completo de carga avanzada

Explicación del programa:

Las primeras líneas del programa básicamente no necesitan ser interpretadas. ¿Qué características están en juego? Simplemente aprenda las funciones al comienzo de este capítulo y asígnelas a variables.

En la línea diez, se utiliza una expresión para obtener el valor de la variable de tiempo deseado. Bytes totales menos bytes descargados divididos por bytes descargados multiplicados por el tiempo transcurrido.

En la undécima línea, divida el número de fotogramas descargados por el número total de fotogramas y luego multiplique por 100 para obtener el progreso de la descarga. De hecho, esta línea de programa también se puede cambiar a yfrm/zfrm*100.

Puntos clave de conocimiento:

La carga avanzada en realidad no es complicada de realizar y se puede realizar mediante la comprensión de las funciones. Además, aquí hay otro concepto. Varias funciones, como getbytesloaded, son funciones de edición de películas. ¿Por qué se pueden utilizar también en escenas? De hecho, puede imaginar la escena como un clip de película grande. Se pueden utilizar muchas funciones de clip de película en la escena, incluido gettimer(). Las variables de texto dinámico se utilizan para mostrar los valores numéricos de estas funciones. De hecho, existe otro concepto de carga, que consiste en utilizar un bucle de fotograma para lograr el efecto de bucle. A diferencia de la programación general, Flash puede utilizar bucles de cuadros para lograr algunos efectos. A veces, debido a las características de temporización de los bucles de fotogramas, los bucles que se realizan son más inesperados que el uso de sentencias de bucle como while. Aprender bien estas funciones es la clave para la carga avanzada.