Share
En este tutorial crearemos un archivo SWF que se precarga, lo que significa que el precargador y el contenido están en el mismo archivo. Repasaremos cómo hacer las cosas de la manera correcta y evitaremos las trampas..
La idea de una sola carga de SWF es que tenga un objeto Flash que se precarga a sí mismo. Eso significa que el preloader, con su funcionalidad y activos asociados, está integrado en el mismo archivo SWF que toda la película o aplicación Flash..
Comenzaremos este tutorial con un poco de teoría y lo terminaremos creando un FLA junto con una clase de precargador que puede usar en proyectos futuros. Durante el curso del tutorial, discutiremos las dificultades comunes y las consideraciones importantes..
Además, ahora que Activetuts + ha comenzado a centrarse en las clases de documentos y, en general, a mantener todo lo posible en los archivos de clase, lo haremos en la parte práctica de este tutorial. Consulte el Consejo rápido: cómo usar una clase de documento en Flash si necesita aprender lo básico.
Asegúrese de tener una versión actualizada de Flash CS3 o Flash CS4. Sé con certeza que una actualización posterior de CS4 ha cambiado la forma en que se cargan las clases y eso puede hacer toda la diferencia aquí!
Admitiré de inmediato que este tutorial es bastante largo para este tema limitado, pero contiene todo lo que necesita saber, así que abróchese los cinturones y vámonos.!
La idea de un precargador es bastante obvia: desea asegurarse de que el usuario reciba comentarios visuales que indiquen que el objeto Flash se está cargando. La incrustación de un archivo Flash grande que demora 10 segundos en cargarse puede significar la diferencia entre los usuarios que se quedan o salen del sitio web, en caso de que el precargador no le diga al usuario que espere.
El proceso de creación de archivos Flash de "auto carga" presenta algunos problemas y problemas. Existen otras técnicas de carga que son realmente fáciles de armar, como un archivo SWF que carga otro y lo agrega al escenario una vez cargado.
¿Entonces, para qué molestarse? Bueno, hay situaciones en las que no tienes otra opción..
Por ejemplo, es posible que desee crear juegos Flash que espera expandir a tantos portales de juegos Flash como sea posible. La mayoría de estos portales solo admiten juegos en forma de un único archivo SWF que no te deja más remedio que asegurarte de que tu juego se cargue correctamente desde dentro..
Aparte de estos ejemplos obvios, existe el argumento de tener un producto completo en un solo archivo que facilita la administración.
Cuando su navegador se topa con un objeto Flash y comienza a cargarlo, comienza desde el principio de la línea de tiempo. Carga los marcos uno tras otro. Tan pronto como se carga el primer cuadro, se puede mostrar.
Nuestro enfoque aquí es colocar un precargador en el primer fotograma para que el usuario vea que sucede algo, mientras el navegador continúa cargando el resto del archivo. Escribimos un código para verificar el progreso general y cuando se completa, continuamos con el contenido principal del archivo.
El desafío es mantener el tamaño del primer cuadro al mínimo. Si deja que el código y los sonidos se acumulen en el primer fotograma, es posible que tenga un precargador que no se vea hasta que haya cargado el 60% de la película..
Un gran consejo cuando se trata de usar un contador de porcentaje que muestra números es usar una fuente que sea pequeña en tamaño de bytes. Pero esto solo te lleva muy lejos. Desafortunadamente tenemos que trabajar un poco más duro para tener las cosas a nuestra manera!
Se ha dicho muchas veces antes y vale la pena repetirlo:
Preloaders, la tarea más difícil de las más simples en Flash ...
Hay una serie de cosas que afectarán lo que se colocará en qué marco, como por ejemplo:
El principal problema que enfrentamos es controlando lo que termina en el cuadro uno, porque, como se mencionó anteriormente, todo lo que se encuentra en el fotograma 1 debe cargarse antes de poder mostrar el preloader.
Aparte de eso, hay diferencias entre cómo funcionan Flash CS3 y CS4. En el siguiente paso, haré una serie de afirmaciones exhaustivamente investigadas que puede consultar si es necesario. Debería ser un gran recurso si quieres solucionar rápidamente tu precarga, para descubrir por qué no se comporta como esperas..
Trataré de hacer las declaraciones un poco más tangibles al referirme a TweenLite, una excelente biblioteca de interpolación por Jack Doyle en greensock.com. Usaremos TweenLite en la parte práctica de este tutorial para que tenga más sentido..
Estas declaraciones son válidas tanto para Flash CS3 como para CS4, a menos que se indique lo contrario. "Importar TweenLite" básicamente significa "importar y usar TweenLite"; los resultados pueden diferir si realmente no usas el código ya que el compilador de Flash ignora las importaciones no utilizadas. El simple hecho de escribir una declaración de importación no equivale a usar el código.
Las siguientes tres declaraciones se refieren al escenario en el que tiene un clip de película que se exporta para ActionScript, utilizando un archivo de clase externo, que a su vez importa TweenLite en el archivo de clase.
Las siguientes tres declaraciones se refieren al escenario en el que tiene un MovieClip que se exporta para ActionScript como "CustomClass", ya sea con un archivo de clase externo o no, que se crea una instancia y se agrega a la etapa desde un MovieClip que se coloca en la línea de tiempo (solo como el MovieClip de las tres declaraciones anteriores.) Este CustomClass es solamente instanciado y no existe previamente en la línea de tiempo principal.
Con todas estas restricciones, al menos consideremos esta afirmación positiva:
Aquí hay una muy interesante:
Sí, lo leiste bien. Supongo que es justo asumir que Adobe quiere que las personas se actualicen a CS4. Entonces, ¿qué hacer si estás atascado con CS3 y la hierba es más verde en el otro lado? Te lo diré en el siguiente paso..
Todo este paso es solo para aquellos de ustedes que usan Flash CS3.
Si leyó todas las declaraciones en el paso anterior, entonces se dará cuenta del problema de tener muchos MovieClips exportados para ActionScript. Todos estos deberán cargarse en el fotograma uno, o no estar disponibles. Afortunadamente, esas declaraciones asumieron que esos activos nunca se colocaron en la línea de tiempo principal, ¡lo cual es nuestra solución! (Esta es también la única forma de cargar sonidos que no sean en el primer fotograma ...)
Así es como se hace:
Esto hará que todos tus activos se carguen en el segundo marco. La solución es un poco pegajosa, pero no es tan difícil como tener que comprar un nuevo software para este problema en particular.
(Felicitaciones a 8bitrocket por este truco!)
Una cosa que debo mencionar antes de comenzar a trabajar es el generador de perfiles de ancho de banda. Esta es una herramienta esencial para resolver sus problemas de precarga. Cuando obtiene una vista previa de una película, puede subir para verla y luego elegir el generador de perfiles de ancho de banda. O simplemente pulsa Ctrl + B.
Aquí puede cambiar entre gráficos de cuadro por cuadro y gráficos de transmisión. También puede simular la descarga de la película a la velocidad de conexión de su elección, ya sea seleccionándola en el menú Ver o presionando Ctrl + Intro una vez más (cambie la velocidad de descarga simulada usando el submenú Ver> Descargar configuración). Esto es esencial para descubrir cómo se verá su precargador, sin pasar por la molestia de subirlo y limitar su ancho de banda. Para ese caso específico, sin embargo, puedo recomendar Firefox Throttle.
Además de la herramienta muy útil que es el generador de perfiles de ancho de banda, existe la opción de generar un informe de tamaño. Presione Ctrl + Shift + F12 para abrir el cuadro de diálogo Configuración de publicación.
Vaya a la pestaña Flash, y en la sección Avanzado hay una casilla de verificación "Generar informe de tamaño". Cuando esta casilla está marcada, la vista previa o publicación de su película generará un archivo de texto en la misma carpeta que el archivo FLA que contiene información útil sobre qué partes conforman el tamaño total de la película..
Finalmente, podemos comenzar a hacer una película Flash con un bonito precargador autónomo.!
Emplearemos una técnica de "precarga de tres cuadros". En el primer fotograma colocaremos un clip de película precargador que tiene su propia clase "Precargador". En el segundo cuadro cargamos todas las clases y en el tercer cuadro cargamos y mostramos el contenido. Pondremos el contenido en un MovieClip llamado Aplicación con una clase asociada "Aplicación". Aquí es donde va la carne de la aplicación..
Comience creando un nuevo documento AS3. Lo estoy haciendo 600x400px, fondo gris oscuro, 24 FPS. Estas configuraciones no importan sin embargo.
Establece la clase de documento en Principal y pulsa OK.
Vaya a Archivo> Configuración de publicación, la pestaña Flash y luego la configuración de ActionScript 3.0. Escriba "marco 2" en el campo "Exportar clases en marco".
Obviamente, el diseño de un precargador no afectará la función. Daré instrucciones paso a paso, pero siéntase libre de omitir estas partes y tomar su propio enfoque si así lo desea. Solo asegúrese de anotar a qué partes me refiero en el código más adelante.
Dibuja un rectángulo con esquinas redondeadas y dale un degradado azul. Luego conviértalo en un símbolo de MovieClip, llámelo Preloader. Elija exportarlo para ActionScript y llamar a la clase Preloader.
Dentro de este nuevo clip de película, dibuje un nuevo rectángulo de esquina redondeada con un degradado gris, conviértalo en otro clip de película y asígnele un nombre de instancia de progressArea.
Siga adelante y haga coincidir el diseño de capa que tengo en la imagen de arriba. A continuación, haga un duplicado de la última forma y colóquela en la capa de la barra de progreso en la parte superior del área de progreso. Dale un degradado azul claro, conviértelo en un MovieClip y dale un nombre de instancia de progressBar. Habilite las guías para la escala de 9 cortes y asegúrese de mantener los bordes redondos izquierdo y derecho afuera.
Por último, cree un campo de texto dinámico con un nombre de instancia de percentText. Hacer el texto alineado a la derecha. De esa manera, el signo de porcentaje nunca se moverá, solo los números (que cambian de todos modos). Ingrese en la incrustación de caracteres y asegúrese de incrustar números y el signo de porcentaje (%). Para hacer un precargador realmente pequeño, estoy usando un pixelfont pequeño llamado Pixel Mix de dafont.com. También le doy un brillo azul solo porque puedo.
Asegúrese de que todo el clip de película del precargador se coloca en el primer fotograma y se le da un nombre de instancia del precargador. Cree una nueva capa llamada "AS" y ponga un stop (); En el primer cuadro. Mantenga el preloader en su propia capa, "Preloader". Haz otra capa llamada "Aplicación". Aquí es donde guardaremos el contenido principal al final..
Cree un nuevo archivo ActionScript y guárdelo en el mismo directorio que su archivo FLA. Nómbrelo Main.as:
paquete import flash.display.MovieClip; import flash.events.Event; public class Main extiende MovieClip public function Main () preloader.addEventListener (Event.COMPLETE, onPreloaderComplete); preloader.setLoaderInfo (loaderInfo); función privada onPreloaderComplete (e: Evento): void gotoAndStop (3);
Cree un nuevo archivo ActionScript y guárdelo en el mismo directorio que Preloader.as:
paquete import flash.display.LoaderInfo; importar flash.display.MovieClip; import flash.events.Event; import flash.events.ProgressEvent; la clase pública Preloader extiende MovieClip public function Preloader () public function setLoaderInfo (ldrInf: LoaderInfo): void ldrInf.addEventListener (ProgressEvent.PROGRESS, onProgress); ldrInf.addEventListener (Event.COMPLETE, onComplete); función privada onProgress (e: ProgressEvent): void var percent: int = Math.round (e.bytesLoaded / e.bytesTotal * 100); progressBar.width = percent / 100 * progressArea.width; percentText.text = percent + "%"; función privada onComplete (e: Evento): void dispatchEvent (e);
Entonces, ¿qué hacen estas dos clases?
En el constructor de Main, llamamos al método setLoaderInfo () personalizado de nuestro preloader y pasamos el objeto LoaderInfo que está asociado con Main.
Preloader recibe este objeto y le agrega dos detectores de eventos. ProgressEvent activa la función onProgress, en la que calculamos el porcentaje de bytes cargados en comparación con el total de bytes a cargar. El porcentaje se utiliza para establecer el ancho de la barra de progreso y el texto de nuestro campo de texto.
El evento completo simplemente se envía de vuelta a Main, que a su vez salta a la línea de tiempo principal para encuadrar tres cuando se recibe el evento.
Para tener algo que muestre claramente que el precargador está funcionando, estoy agregando una bonita foto macro de un gato llamado Runa tomada por un amigo mío. Puede encontrar la imagen en los archivos de origen provistos con este tutorial. He importado el mapa de bits y lo convierto en un MovieClip llamado "Cat".
Siéntete libre de usar cualquier imagen que encuentres adecuada. Dale al clip un nombre de instancia de "gato".
Como puede ver en la captura de pantalla anterior, coloqué el Clip de película Cat en el fotograma tres en la capa de aplicación. Tome cualquier MovieClip que haya creado, cat o no cat, y presione F8 una vez más para anidarla dentro de un nuevo MovieClip al que llama Aplicación. Exportar esto para ActionScript como aplicación.
Cree la clase de aplicación iniciando un nuevo archivo AS y guardándolo como "Application.as". Haga que la clase de aplicación tenga este aspecto:
package import com.greensock.TweenLite; import com.greensock.easing.Sine; importar flash.display.MovieClip; La aplicación de clase pública amplía MovieClip aplicación de función pública () TweenLite.to (cat, 7, scaleX: 4, scaleY: 4, onComplete: tweenBack, ease: Sine.easeInOut); función privada tweenBack (): void TweenLite.to (cat, 3, scaleX: 1, scaleY: 1, onComplete: reTween, ease: Sine.easeInOut); función privada reTween (): void TweenLite.to (cat, 7, scaleX: 4, scaleY: 4, onComplete: tweenBack, ease: Sine.easeInOut);
Esto animará al gato a entrar y salir indefinidamente, por lo que siempre recordarás el detalle de la piel de su nariz. ¿Cómo funciona esta clase no es importante, qué es lo importante es que estamos importando TweenLite y usándolo, asegurándonos así de que formará parte del archivo SWF una vez exportado.
Volvamos al banco de la escuela por un minuto..
Esta película compila bien en CS4. La aplicación MovieClip está configurada para exportar en el fotograma 2 a menos que la haya cambiado. Si lo has cambiado puedes notar algo extraño. Más sobre esto en el siguiente paso..
Si estás en CS3 esta configuración realmente importa. Tendrás que ir y asegurarte de desactivar la casilla de verificación "Exportar en primer fotograma" en las Propiedades del clip de película de la aplicación, de lo contrario, todo se cargará en el primer fotograma!
Ese no es el único problema. Si intentas compilar, obtendrás un error de tipo 1046, diciendo que no tienes el tipo TextField disponible. Así que como puedes adivinar, CS3 hace las cosas un poco diferentes. ¿Qué esta pasando? Bueno, estás intentando usar un campo de texto dentro del clip de película de Preloader pero no lo tienes importado. En CS4 esto se maneja automáticamente por usted, pero no en CS3.
Afortunadamente la solución es simple, simplemente añada:
importar flash.text.TextField;
a tu clase de Preloader, y estás listo.
Algunos de ustedes podrían haber pensado ya que debería haber extendido Sprite para mi clase de Preloader en lugar de MovieClip. Bueno, esta es la razón por la que no hice eso; Quería esperar hasta este punto para sacar el tema. Dado que el símbolo de Preloader contiene tanto "ProgressArea" como "ProgressBar", que son MovieClips, obtendrías el mismo error de tipo 1046.
La misma solución es posible aquí también, por supuesto. De hecho, ahora debe cambiar el Precargador para extender Sprite en lugar de MovieClip, y si está utilizando CS3, asegúrese de importar la clase Sprite dentro de la clase Preloader también.
Mencioné una ocurrencia extraña en el último paso. Si desactiva la opción "Exportar en el fotograma 2" de la aplicación y ejecuta una descarga simulada, verá desaparecer el precargador, a menos que haya extendido el fotograma clave del precargador para cubrir el segundo fotograma también..
Entonces, ¿qué está pasando realmente? En pocas palabras, la primera parada (); declaración no cuenta. ¿Cómo es eso para la planificación obvia del flujo de trabajo? Tenga en cuenta que si coloca una declaración de seguimiento en el primer fotograma después de detener (); Llama, hace un seguimiento. Importante: Tenga en cuenta que este problema solo se muestra cuando simulamos la descarga.!
La lección aprendida aquí es no confíes en la descarga simulada! No le mostrará con precisión cómo se cargarán y funcionarán las cosas. Usted puede simplemente mantener la parada (); y preloader en el primer fotograma y estará bien cuando se trata de la implementación. Sin embargo, puede ser difícil obtener una vista previa a menos que tenga la aplicación configurada para exportar en el marco 2. Y eso es solo para este escenario específico.
En CS3, debe desactivar la casilla de exportación en el MovieClip de la aplicación, de lo contrario terminará cargando en el primer fotograma. Pero si haces eso, te encontrarás con este problema. Así que adelante y extiende el precargador al segundo cuadro..
Avanza y ve la película. Ejecute una descarga simulada a baja velocidad y disfrute del precargador magistralmente * elaborado (* magistralmente solo se aplica si ha seguido mis instrucciones a la carta).
Si observa el gráfico fotograma a fotograma, o un informe de tamaño generado, verá que el código se carga en el segundo fotograma. El primer fotograma es de solo 4kb y consta de la clase Preloader y los glifos de fuente incrustados. Ahora, 4kb es bastante asequible en lo que respecta al tiempo de espera antes de ver al precargador, ¿no cree??
Es posible que veas diferentes tamaños en CS3 y definitivamente verás diferentes tamaños con diferentes fuentes. O gatos.
Podría tener la idea de que le gustaría usar TweenLite para desvanecer el precargador mediante la interpolación del alfa a 0, pero no quiere cargar TweenLite en el primer fotograma, ya que eso agrega otros 8kb a la descarga inicial.
Hay varias maneras de lograr esto y lo resolveremos al tener un Clip de película en el tercer cuadro que atrapa el precargador y lo ajusta. Cuando se complete, avanzará al cuarto marco, que habremos movido Aplicación a.
La razón para colocarlo en el tercer cuadro es que no podemos colocarlo en el segundo cuadro sin tener TweenLite cargado en el primer cuadro..
Ahora nos estamos alejando de la técnica estándar de precarga de tres cuadros.
Añadir una nueva capa llamada "catcher precargador". Asegúrate de poner stop (); Pide en los marcos uno, dos y tres. Esto es para evitar errores en la vista previa al simular una descarga, como se mencionó anteriormente.
Continúe y mueva la Aplicación al cuarto fotograma, así como también extienda Preloader al tercer fotograma..
Asegúrese de tener un fotograma clave en el tercer fotograma de la capa del receptor de Preloader. Vaya a este marco, dibuje una forma pequeña y haga que el alfa del color de relleno se establezca en 0%. Esto se supone que es un clip de película invisible. Conviértalo en un símbolo de MovieClip llamado PreloaderCatcher o algo similar.
Exportar el MovieClip como PreloaderCatcher. Si está utilizando CS4, no importa si lo exporta para el fotograma 2 o no, ya que se cargará en ese fotograma pase lo que pase. Bueno, sí cambia una cosa, ¿recuerdas? Sea o no el forma se carga en el marco 2. En esencia, no importa si se considera el tamaño de archivo casi inexistente para esta forma. Aunque también puedes desmarcarlo por buen hábito..
Haga un nuevo archivo de clase llamado PreloaderCatcher.as:
Accentsconagua
package import com.greensock.TweenLite; importar flash.display.MovieClip; importar flash.display.Sprite; import flash.events.Event; importar precargador; la clase pública PreloaderCatcher extiende Sprite función pública PreloaderCatcher () addEventListener (Event.ADDED_TO_STAGE, onAdded); función privada onAdded (e: Event): void removeEventListener (Event.ADDED_TO_STAGE, onAdded); var preloader: Sprite = MovieClip (parent) .getChildByName ("preloader") como Sprite; TweenLite.to (preloader, 0.5, alpha: 0, onComplete: function (): void MovieClip (parent) .nextFrame ();); Como puede ver, esta clase funciona obteniendo primero el precargador convirtiendo el padre como Sprite y llamando a getChildByName ("preloader"), donde preloader es el nombre de la instancia. El precargador también se lanza un Sprite, luego se usa TweenLite para desvanecerlo.
Cuando se completa la interpolación, la función onComplete en TweenLite convierte al padre como un MovieClip, por lo que es posible llamar al método nextFrame.
Como dije antes, ahora nos hemos alejado de la técnica de precarga de tres cuadros. Eso en sí mismo no es exactamente una blasfemia, pero estoy seguro de que algunos de ustedes se preguntan por qué hicimos eso. En su lugar, podríamos haber manejado la interpolación del precargador dentro del clip de la aplicación ...
En ese caso, tienes toda la razón! La razón por la que utilicé cuatro cuadros aquí fue para mostrarte cómo hacerlo manteniendo las cosas separadas. Entre el preloader; ¿eso pertenece a la parte del precargador o la parte de la aplicación? Precargador definitivamente, pero en este caso no queríamos que se cargara en el primer cuadro. Por lo tanto, terminamos con esta clase extra "catcher".
Solo recuerda que todo esto es opcional. Una vez que sepa cómo hacer todo, puede decidir fácilmente lo que su situación requiera..
En el Paso 7 le conté sobre los problemas de carga de activos en CS3. Dado que este tutorial está dirigido tanto a los usuarios de CS3 como a los de CS4, utilizaremos el denominador común más bajo y utilizaremos el enfoque AssetHolder. Si está utilizando CS4, puede realizar los siguientes pasos de la misma manera y funcionará de la misma manera, o puede omitir el enfoque de AssetHolder.
Comience importando el sonido "music.wav" de los archivos de origen a su FLA.
Entra, expórtalo para ActionScript y asegúrate de desactivar la casilla "Exportar en primer fotograma" en CS3. Para CS4 esto no hará mucha diferencia. Estoy usando Flash CS4, que probablemente ya hayas descubierto, por lo que las capturas de pantalla muestran el cuadro de diálogo de CS4. Si lo desea, puede cambiar la compresión predeterminada de MP3 a algo más agradable. De esa manera no sonará terrible.
Veamos un par de pasos más, agregando un poco de texto a la película y poniéndolo todo en un clip de película AssetHolder!
Presione Ctrl + F8 para crear un nuevo símbolo de MovieClip. Asígnele el nombre TextHolder y expórtelo para ActionScript, una vez más (en CS3) asegurándose de que la casilla "Exportar en primer fotograma" no esté marcada.
Al crear, estarás "dentro" de este MovieClip. Escribe algún texto estático y dale un color blanco. Estoy usando la misma fuente PixelMix que antes. Para crear un color de trazo simulado, le doy un efecto de filtro de brillo con la configuración que se ve a continuación.
Crea una nueva capa llamada AssetHolder. Cree un fotograma clave en el segundo fotograma, presione Ctrl + F8 para crear un nuevo Clip de película y asígnele el nombre AssetHolder. No exportar esto para ActionScript.
En el clip de película AssetHolder, cree tres capas llamadas AS, música y Activos. Ya que "música" es el nombre del objeto de sonido que estamos usando, eso es lo que llamo la capa. Ahora debes poner un stop (); llamar en el primer fotograma de la capa AS.
A continuación, cree un fotograma clave en el segundo fotograma de la capa de música y Activos. Arrastre el sonido de la música al escenario cuando esté
