Cómo crear animaciones flash. Cómo crear un nuevo archivo (documento) en Flash CS6

A muchos de nosotros nos gusta pasar el tiempo jugando juegos flash cortos, pero pocas personas piensan en cómo se crean estas obras de arte virtual. Mientras tanto, esta tecnología existe desde finales de los 90. Su creador es la empresa estadounidense Macromedia (ahora Adobe Systems). Este sistema se utiliza activamente no sólo para el desarrollo de juegos, sino también para el dominio web. La mayoría de los sitios web en Internet funcionan con Flash (aunque algunos ya están cambiando a HTML 5). Además, una creación de Adobe Systems es un programa para crear aplicaciones Macromedia Flash. Cualquiera puede dominarlo, incluso aquellos que están alejados de la tecnología informática. Sin embargo, antes de empezar a hablar de cómo crear juegos, veamos los principales pros y contras de esta plataforma.

Beneficios de Adobe Flash

    Hay una serie de ventajas que distinguen a esta tecnología de otras plataformas de software y la hacen excelente para crear contenido de juegos amateur:
  • En primer lugar, esta es la velocidad del desarrollo. A diferencia de otras plataformas, flash te permite crear cualquier juego en tan solo una hora. Macromedia Flash no molesta al desarrollador con largos fragmentos de código, proporcionando una herramienta lista para trabajar
  • En segundo lugar, esta tecnología ofrece amplias oportunidades para trabajar con otros contenidos multimedia. No tiene que perder tiempo y esfuerzo convirtiendo un archivo en otro. La tecnología te permite integrar cualquier archivo gráfico, de sonido y de vídeo en el juego sin problemas innecesarios. De esta manera puede incluir artistas, compositores y editores en el trabajo del proyecto y crear un producto verdaderamente único.
  • En tercer lugar, Macromedia cuenta con controles intuitivos y un conjunto de funciones que simplifican enormemente el trabajo en este entorno de software. La funcionalidad de arrastrar y soltar, el menú de comandos de Action Script, las barras de herramientas fáciles de usar y la información sobre herramientas hacen que trabajar con Adobe sea extremadamente agradable.
  • En cuarto lugar, la funcionalidad de la plataforma es extremadamente conveniente en términos de envío y distribución de contenido. Gracias a la extensión web de Adobe Player, las aplicaciones creadas con esta tecnología se pueden colocar fácilmente en cualquier sitio web insertando un código simple en la página. La tecnología también admite la creación de aplicaciones independientes en formato SWF, que pueden reproducirse fácilmente en cualquier sistema operativo.
  • Finalmente, en quinto lugar. Esta tecnología te permite crear juegos coloridos con animaciones muy fluidas y gran interactividad. En muchos sentidos, la belleza de una aplicación depende del talento del artista, no del programador. Con esta propiedad, esta plataforma atrae a principiantes que quieren probar suerte en la creación de juegos.

Desventajas de Flash Player

    Como cualquier otro programa, este también presenta una serie de desventajas que todo aquel que quiera empezar a trabajar con aplicaciones Flash debe conocer:
  • Enlace a la línea de tiempo. Básicamente, la creación de aplicaciones Flash implica organizar fotogramas secuenciales en una línea de tiempo y luego reproducirlos. Por tanto, este sistema es fantástico para crear animaciones. Sin embargo, no se logrará la no linealidad, que es una tendencia actual en la mayoría de los juegos.
  • Actuación. Desafortunadamente, no es muy diferente. trabajo rapido. Por lo tanto, no se crean juegos cooperativos y arcades con una gran cantidad de objetos similares en base a él.
  • Sin soporte 3D. Una desventaja importante es que la tecnología flash no admite la creación y el uso de modelos tridimensionales y escenas ambientales, y para la mayoría de los juegos modernos este es un estándar inquebrantable. Por otro lado, el navegador Juegos en línea Utilizan principalmente Flash, debido a ciertas restricciones típicas de los juegos online.
  • Plataforma cerrada. Adobe Macromedia no admite la adición de nuevas funciones. En otros entornos de software (por ejemplo, Java), puede agregar nuevas propiedades. Aquí sólo los propios desarrolladores pueden hacer esto. Y a pesar de que actualizan constantemente el programa teniendo en cuenta las opiniones de los usuarios, su funcionalidad sigue siendo limitada.

A pesar de estas desventajas, el flash es indispensable para crear pequeños minijuegos de aficionados.

Cómo crear un juego Flash: aspectos básicos

Crear animaciones en el motor recuerda un pasatiempo de la infancia: cuando se dibujaba una imagen en las esquinas de las páginas, cuadro por cuadro, y cuando se volteaba rápidamente, comenzaba a moverse. La esencia de las animaciones flash es la misma: colocas objetos gráficos cuadro por cuadro en la línea de tiempo y, cuando se reproducen, comienzan a moverse. Es más difícil con los juegos. Para crearlos, es necesario dominar el lenguaje de programación ActionScript 3.0. Puede estudiarlo con la ayuda de libros y libros de texto especiales (por ejemplo, el libro de Colin Mook "ActionScript 3.0 para Flash"). También hay bastantes vídeos instructivos en YouTube. Sólo se necesita un poco de esfuerzo para dominar este programa. Una vez hecho esto, es poco probable que tengas preguntas sobre cómo escribir un juego Flash.

    Al crear un juego flash, es importante seguir una estructura determinada:
  • Ventana de título (pantalla de presentación)
  • Normas
  • Ventana de fin de juego

Primero viene la "Ventana de título". Esta es una pantalla de presentación que debería causar una impresión inicial en el jugador. Aquí es importante mostrar todo tu talento artístico e imaginación.

El siguiente paso es crear la página de Reglas. A pesar de que algunos desarrolladores ignoran esta etapa, es mejor formular las reglas del juego, haciéndola más comprensible y amigable. A veces están escritos en una página externa o en una ventana separada.

"Fondo" es el entorno en el que se ubicarán los objetos gráficos. En algunos casos, los objetos ocupan toda la pantalla. El fondo del juego se puede crear utilizando las herramientas de Adobe Macromedia o utilizando programas de terceros (por ejemplo, Ogmo Editor es excelente para crear escenas bidimensionales). Es importante que sea temático y complemente el concepto general del juego.

El final del juego marca la "ventana de fin del juego". El juego puede terminar en diferentes casos— cuando el jugador gana, pierde o simplemente se queda sin tiempo/munición. Para cada caso, se crea una ventana separada con el contenido animado correspondiente. A veces se inserta una lista de ganadores en esta ventana.

Así, tras estudiar Adobe Flash, cualquiera sabrá cómo crear un juego. Basta con comprender los mecanismos básicos de funcionamiento y pronto podrás crear juegos sencillos. Como en cualquier negocio, aquí lo principal es mostrar suficiente perseverancia e interés, y el resultado no tardará en llegar.

¿Alguna vez te has preguntado qué se esconde detrás de la hermosa animación de los banners en Internet? ¿O los novedosos dibujos animados creados con la ayuda de la tecnología informática? La mayoría de las veces se basan en "carne", o se traducen con mayor precisión del nombre inglés Tecnologías flash. Hoy hablaremos de animación flash para el sitio web:

tecnología flash

El marco multimedia fue desarrollado por Macromedia. Pero después de su absorción (fusión), todos los derechos de la tecnología fueron transferidos al nuevo propietario: Adobe Systems.

Área de aplicación moderna de Adobe Flash:

  • La creación de aplicaciones web es una dirección bastante nueva. Implica el uso total o parcial de Flash para crear sitios web. Cuando se aplica parcialmente, esta tecnología crea elementos de diseño individuales: varios menús interactivos, botones animados, etc.

En comparación con los recursos convencionales basados ​​en HTML, los sitios Flash tienen algunas características que limitan su uso. Estos incluyen el alto costo de desarrollo, las demandas de recursos del servidor, largos tiempos de carga con una conexión a Internet lenta y algunos otros aspectos:

  • Implementación de capacidades multimedia: para escuchar audio y reproducir videos en sitios web, a menudo se utilizan reproductores multimedia creados en base a Flash. Su desarrollo incluye el uso de uno de los lenguajes de scripting (generalmente JavaScript):
  • En la publicidad online, la tecnología se utiliza con mayor frecuencia para crear banners animados. Implican no sólo la reproducción de publicidad multimedia, sino también algún tipo de interacción con el usuario a modo de juego.

Conceptos básicos y herramientas de desarrollo Flash

Para crear animaciones flash, las herramientas tradicionales de Adobe se utilizan con mayor frecuencia:

  • Adobe Flash Professional: un programa para crear animaciones interactivas (animador);
  • Adobe Flash Builder: un entorno para crear interfaces de aplicaciones web;
  • Adobe Flash Player es un reproductor integrado en el navegador para reproducir Flash.

Además, varias aplicaciones de terceros pueden reproducir contenidos multimedia de este tipo. Los más populares son Gnash, QuickTime y algunos otros:

Esta tecnología le permite mostrar cualquier tipo de gráficos ( trama, vector, 3D). También admite transmisión por secuencias de datos de audio y vídeo. Especialmente para dispositivos móviles Se desarrolló una versión ligera, Flash Lite.

El principal estándar para archivos Flash es la extensión SWF. La abreviatura significa formato web pequeño. El vídeo grabado en Flash tiene las extensiones de archivo FLV, F4V.

El desarrollo de la animación interactiva en Flash se basa en gráficos vectoriales. Es gracias a esto que fue posible implementar soporte para plataforma multimedia e independencia de la calidad de la animación de la resolución de la pantalla.

El tamaño del archivo de la aplicación flash es el mismo para todos los usuarios, independientemente de características técnicas resolución de la pantalla).

La animación interactiva en Flash se basa en morphing (tipo vectorial), en el que hay un flujo lento entre fotogramas clave. Para reproducir los datos se utiliza un reproductor Flash, cuyo funcionamiento es en muchos aspectos similar al funcionamiento de una máquina virtual JavaScript. El componente de software de la tecnología se implementa utilizando el lenguaje ActionScript.

Las desventajas de la tecnología incluyen los siguientes puntos:

  • Carga pesada en el procesador central de la máquina cliente. Esto se debe a la baja eficiencia de la máquina virtual Flash, que está integrada en el navegador del usuario junto con el reproductor;
  • Alta probabilidad de errores: la reproducción de animaciones Flash puede ocurrir con una alta probabilidad de errores. Además, las fallas en la reproducción de Flash afectan negativamente el funcionamiento de toda la aplicación cliente (navegador). Esto se debe a un control insuficiente sobre la tolerancia a fallos del código del programa al crear aplicaciones Flash;
  • Error al indexar: todo el contenido de texto que se muestra en el contenido Flash no está indexado. Esta limitación es especialmente problemática para aquellos recursos que se crean sobre la base de esta tecnología.

Revisión del software de creación de Flash de terceros

Sothink SWF Quicker se tomó como una aplicación prototipo en la que demostraremos los conceptos básicos de la creación de Flash. Según muchos profesionales, el programa es el más comprensible y fácil de aprender.

Además de crear y editar, el editor flash "puede" funcionar con todos los demás tipos de animación web (GIF, HTML y otros estándares):

Después de la instalación, vaya a la interfaz fácil de usar del programa. Desafortunadamente, después de recorrer todos los rincones, no encontramos ningún cambio de idioma en la interfaz.

Para entender cómo hacer animaciones flash en esta aplicación, usaremos las plantillas integradas. El cuadro de diálogo "Nuevo desde plantilla" aparece inmediatamente después de iniciar el programa. Además, se puede llamar a través del elemento del menú principal "Archivo". Entre las opciones ofrecidas, elegimos crear un banner:

En la siguiente ventana del asistente, de la lista desplegable debe seleccionar una plantilla según la cual se creará la animación. Debajo hay un pequeño marco en el que se reproduce la plantilla seleccionada:

En los siguientes pasos, deberás establecer las dimensiones del banner e ingresar 5 frases de texto que se reproducirán en la animación. Además, debe especificar la dirección del recurso al que será dirigido el usuario haciendo clic en el banner:

Después de compilar el proyecto y cerrar la ventana del asistente, podrá ver el vídeo resultante en el reproductor integrado. Para hacer esto, haga clic en la flecha verde en la parte superior:

Después de cerrar el reproductor, echemos un vistazo más de cerca a la interfaz de la aplicación. Tenga en cuenta que consta de dos ventanas principales: la superior es para editar el período de tiempo del video y la inferior es una ventana normal. editor de gráficos. Cada uno de los elementos está ubicado en una capa separada, que se puede modificar usando herramientas estándar ubicadas en la barra lateral:

La animación flash creada para el sitio se puede publicar. Puede seleccionar el método de publicación haciendo clic en el botón "Publicar" en la parte superior. Hay tres opciones para elegir, incluida la inserción en código html. Las configuraciones detalladas para este proceso están disponibles en una ventana separada "Configuración de publicación".

* Programas utilizados: Flash CS3, Photoshop CS3
* Complejidad: promedio
* Tiempo aproximado de finalización: 3 horas

Un sitio web de portafolio es de gran importancia para cualquier artista, fotógrafo, diseñador e incluso músico moderno. Muestra un enfoque serio hacia los negocios y el profesionalismo. Hoy te mostraremos cómo puedes crear un portafolio fotográfico original y elegante basado en sistema moderno Gestión de contenidos flash Moto CMS.

Usaremos la versión independiente de Moto CMS, que contiene diferentes utilidades, componentes, ejemplos integrados y plantillas de sitios en blanco con diferentes estructuras. Y utilizamos la plantilla más sencilla, es decir, crearemos un sitio web con un portafolio de fotografías desde cero.

En esta guía cubriremos los siguientes temas:

* Creación de contenedores.
* Creación de ranuras (botón Cerrar, botón simple).
* Creación de módulos (reproductor de música y galería de imágenes).
* Edición del precargador del sitio.
* Crear páginas de sitios web y llenarlas de contenido.

También le informaremos sobre las capacidades y funcionalidades del Panel de control de Moto CMS.

Necesitaremos:
* Adobe Photoshop;
*Adobe Flash CS3;
* Versión independiente de Moto CMS (prueba gratuita);
* Diseño de sitio web en. Formato PSD.

Vista previa del resultado final

Paso 1: descargue los archivos Moto CMS

Para comenzar a crear nuestro sitio web de portafolio de fotografías, debe descargar la versión independiente de Moto Flash CMS. Para repetir todos los pasos de esta guía y comprender las capacidades de Moto CMS, una versión de prueba será suficiente.

Paso 2: Breve descripción general de los archivos Moto CMS

Aquí breve reseña Archivos y carpetas de Moto CMS:

* Componentes. Esta carpeta contiene componentes mxp administrados por Adobe Extension Manager.
* Panel de control. Contiene todos los archivos del Panel de control.
* Documentos. Esta carpeta contiene documentación API.
* Ejemplos. Contiene 4 ejemplos de sitios flash ya preparados, desde los más simples hasta los más complejos, con un módulo de galería, un módulo de noticias, un reproductor de música y vídeo, un formulario de contacto, etc.
* Plantillas. 5 plantillas que se pueden utilizar para crear un sitio web basado en Moto CMS. Cada plantilla tiene el conjunto de archivos necesario y se diferencia en su estructura. Hoy usaremos una de estas plantillas, específicamente la plantilla n.° 1, como base de nuestro portafolio de fotografías.
* archivo Léame, que describe cómo empezar a crear un sitio web con Moto CMS.

Paso 3: ejecutar en alojamiento local

Nuestro siguiente paso será lanzar la plantilla del sitio web, en la que basaremos nuestro sitio web de cartera. Para ello necesitamos un servidor web local. Usamos WampServer. Te permite crear aplicaciones web con bases de datos Apache, PHP y MySQL.

Para iniciar la plantilla de sitio web n.° 1, simplemente cargue el contenido de la carpeta en su servidor local. plantilla_01 desde el directorio /templates/, así como el contenido de la carpeta Panel de control.

Luego de esto vamos al Panel de Control de Moto CMS ingresando nuestra URL en la barra de direcciones del navegador, agregando /admin al final

Nota: No podrá ver el sitio en este momento porque aún no contiene ninguna página. Aparecerá una página con un error 404.

Paso 4: Editar config.xml

Todo lo que tenemos que hacer es cambiar el ancho y el alto del sitio y establecer el color de fondo.

El tamaño de nuestro proyecto es de 980x800 píxeles. Para que el tamaño cambie en una pantalla grande, debemos establecer "100%" para el ancho y alto del sitio. Y para que se muestre correctamente en una pantalla con baja resolución, debemos especificar el ancho y alto mínimo del sitio (aparecerán barras de desplazamiento). Color de fondo negro (#000000).

Paso 5: cambiar estilo.css

Ahora tenemos que abrir el archivo style.css y especificar el color de fondo (negro). Todo lo demás se puede editar usando el Panel de control de Moto CMS.

Paso 6: crea un precargador

Los archivos fuente moto.xfl y website.xfl se encuentran en las carpetas flamoto y defectoebsite, respectivamente.
El precargador del sitio debe crearse en moto.xfl. El precargador puede ser un clip simple que consta de 100 fotogramas.

En el panel Acciones de este clip escribimos: “Detener ();” para el primer fotograma. Luego animamos el resto de fotogramas como queramos.

También escribimos “Stop();” en las acciones del primer fotograma de la línea de tiempo en fla.

No olvide especificar las dimensiones del sitio (ancho y alto mínimos) en las propiedades del archivo moto.fla.

Nuestro siguiente paso es crear una bonita animación para que desaparezca el precargador. En el último cuadro tenemos que iniciar el sitio web activando la función “showWebsite()”.

Abra el archivo website.xfl y actualice el precargador.

Paso 7: Fondo del sitio web

Abra la biblioteca multimedia de Moto CMS (Configuración > Biblioteca multimedia) y, junto con otras imágenes requeridas (para la página de inicio, las páginas principales o la galería), cargue una imagen de fondo usando el botón "Agregar medios".

Después de eso, regrese al Panel de control, cree una nueva página e inserte una imagen de fondo usando el botón "Foto". Arrastra la imagen y céntrala.

El Administrador de fuentes permite a los usuarios administrar las fuentes del sitio, que se almacenan como archivos SWF y se pueden descargar.

Antes de descargar cualquier fuente, primero debemos convertirla al formato SWF. Para esto usaremos Creador de fuentes en línea- conveniente aplicaciones en linea, desarrollado por el equipo de MotoCMS, que permite convertir fácilmente archivos TTF y OTF a SWF. Todo lo que tenemos que hacer es seleccionar el archivo de fuente requerido con extensión .TTF o .OTF, agregarlo a Online Font Creator, hacer clic en el botón "Crear fuente" y descargar el archivo SWF terminado, después de lo cual podemos usarlo en el sitio web de nuestro portafolio. .

Crear un nombre de sitio y un eslogan

Una vez descargada la nueva fuente, puede crear un nombre de sitio y un eslogan usando la herramienta Texto y aplicando la fuente deseada. Para crear un eslogan utilizamos la fuente Tahoma, tamaño: 10, color: #727272. Después de eso, ajustamos el nombre y el eslogan del sitio de acuerdo con el diseño en el .PSD.

Paso 9: agregue una imagen a la página de inicio

Colocaremos la imagen de la galería en la página principal del sitio. Para hacer esto, seleccione una imagen de la Biblioteca multimedia haciendo clic en "Foto" en la barra de herramientas izquierda. Si es necesario, ajuste su ubicación de acuerdo con el diseño de la página principal.

Paso 10: crea un menú inferior

Usando la herramienta Forma, cree un rectángulo gris estrecho y usando la herramienta Texto, cree botones en él. Ajusta todo según el diseño de tu sitio.
Guarde todos los cambios y vea el resultado haciendo clic en "Vista previa".
También puede utilizar el módulo de menú integrado para crear un menú.

Paso 11: crear contenedores de contenido

Nota: Los contenedores son clips en website.fla donde se puede agregar contenido dinámicamente. Pueden ser de 4 tipos: 1) un contenedor con objetos visibles en todo el sitio, 2) un contenedor con objetos de diseño; 3) contenedor con objetos de página; 4) contenedor con objetos de ventana emergente.

La plantilla de sitio n.° 1, que elegimos, tiene dos contenedores de forma predeterminada: un contenedor con objetos visibles en todo el sitio y un contenedor con objetos de página. Si abrimos el archivo website.fla los veremos:

Estos contenedores están escritos en el archivo Structure.xml. Asegúrese de que el ancho sea 980 y el alto sea 800 píxeles.

Un contenedor con objetos que son visibles en todo el sitio:

Contenedor con objetos de página:

Para crear elementos del sitio como fondo, título del sitio, eslogan y menú inferior con un rectángulo gris visible en todas las páginas, debemos colocarlos en un contenedor con objetos de todo el sitio. Podemos hacer esto fácilmente usando el Panel de control de Moto CMS. Simplemente haga clic en el elemento deseado y seleccione su ubicación: Sitio web. (En Todo El Sitio Web).

Paso 12: cree una página Acerca de nosotros

Crear una página en blanco

En la esquina superior izquierda, haga clic en el botón “Crear”, lo que nos permitirá crear una nueva página.

Conexión de los botones de menú necesarios a la nueva página.

Para hacer esto, regrese a la página principal y conecte el botón de menú a la nueva página. Simplemente resalte el texto del botón de menú y haga clic en el ícono de enlace a la derecha para abrir el editor de enlaces. En nuestro caso, el botón de menú "Portafolio" enlaza con la página principal del sitio, y el botón "Acerca de nosotros" enlaza con la página "Acerca de nosotros".

Agregar una imagen de fondo a la página Acerca de nosotros

Decidimos agregar un fondo negro a la página. Para hacer esto, vaya a la Biblioteca multimedia haciendo clic en el botón "Foto" en el panel izquierdo, allí seleccionamos una imagen precargada (un rectángulo negro normal) y ajustamos su ubicación en la página de acuerdo con el diseño.

Agregar texto a la página "Acerca de nosotros"

Agregue información de texto a la página usando la herramienta "Texto". El editor WYSIWYG integrado te muestra todo lo que haces, por lo que formatear el texto es muy sencillo. Agregar una dirección de contacto también es bastante fácil, sólo necesita abrir el Editor de enlaces e ingresar la dirección de correo electrónico.

Una vez que haya terminado, no olvide colocar los elementos de la página Acerca de nosotros en el contenedor Objetos de página. Seleccione cada elemento uno a la vez y seleccione la ubicación: Página (contenido de la página).

Paso 13: cambia la imagen del precargador

Es posible que hayas notado precargadores circulares blancos al navegar por las páginas. Para configurarlos, abra el archivo website.fla y vaya a la biblioteca. Haga clic derecho en el precargador y seleccione Propiedades.

En la ventana de propiedades del símbolo, puede seleccionar el elemento "Editar clase base" y luego animar el precargador como desee. Dejaremos el preloader vacío y eliminaremos la imagen gráfica.

Paso 14: Animación del sitio web

Finalmente, llegamos a la parte más interesante de nuestra guía: la animación de sitios web. En este momento, como ya habrás notado, el sitio es estático, ya que ningún contenedor está animado. Por lo tanto, nuestro siguiente paso será animar los contenedores y agregar otras animaciones para darle vida a nuestro sitio.

Animar contenedores por defecto

El contenedor de contenido es fácil de animar a lo largo de la línea de tiempo. Abra el archivo website.fla y cree una animación gradual para cada contenedor.

Primero, animemos el contenedor principal con objetos visibles en todo el sitio. Esta es la capa website_holder_1. Estamos haciendo una animación sencilla con transparencia, pero decoraremos su apariencia con algo. Cree un segundo fotograma clave en la capa, establezca Alfa 0% para el primer fotograma clave (hágalo transparente), cree un fotograma intermedio del primero al segundo y luego agregue suavizado.

Creemos la misma animación para el contenedor con objetos de página (capa page_1_holder_2), pero hagámosla aparecer un poco más tarde.

Entonces agregaremos dos fotogramas clave más en la capa, haremos que el contenedor sea transparente en el primer y segundo fotograma y crearemos un fotograma intermedio con suavizado desde el segundo fotograma clave al tercero.

Cuando compilamos y cargamos el sitio, veremos que cada elemento aparece con animación. Pero al pasar de una página a otra, no hay animación, sólo un parpadeo inusual. La segunda parte de la línea de tiempo es responsable de esto.

Así animamos la aparición y desaparición del contenedor.

Dado que la fuente del texto proviene de fuentes del sistema, debemos cambiar el modo de fusión de capa normal a nivel para todas las instancias de movieclip en las capas contenedoras.

Creamos contenedores adicionales y los animamos.

Para un buen sitio flash, esta animación no es suficiente, por lo que animaremos otras partes del sitio, por ejemplo, la parte superior (resaltada en amarillo en la imagen a continuación), la parte inferior (resaltada en verde) y el contenido. sí mismo (en la imagen en un marco rojo).

Dado que las partes superior e inferior están al nivel de todo el sitio, agregaremos dos contenedores para estas dos partes. Antes de añadir contenedores debemos determinar su tamaño y ubicación. Esto es fácil de hacer usando la herramienta Rebanar en Photoshop.

La parte superior tiene las siguientes dimensiones: x=0, y=0, ancho=980, alto=120.

Zona inferior: x=0, y=765, ancho=980, alto=35.

El contenedor superior contendrá el nombre del sitio, el contenedor inferior contendrá el menú y se mostrarán de manera diferente. Además, se pegarán a la parte superior e inferior de la pantalla respectivamente cuando entren en modo de pantalla completa.

Después de determinar los tamaños de los contenedores, abrimos el archivo Structure.xml y agregamos nuevos contenedores (a nivel de sitio), especificando sus coordenadas, ancho, alto y profundidad.


Después de agregar contenedores al archivo .xml, debemos crearlos en el archivo website.fla. Abra el archivo website.fla y cree nuevas capas para nuestros contenedores. El orden de las capas debe corresponder a los valores de profundidad que configuramos en el archivo xml.

Podemos copiar el clip de película vacío de la capa website_holder_1 y pegarlo en website_holder_3 y website_holder_4.

En el clip establecemos las mismas coordenadas especificadas en el archivo Structure.xml.

Para el tercer contenedor: x = 0, y = 0;

Para el cuarto contenedor: x = 0, y = 765.

Desde que copiamos el clip, los nombres antiguos permanecieron. Los cambiamos según el ID para que sean fáciles de encontrar.

Se debe hacer lo mismo con el contenedor 4.

En la línea de tiempo, configuramos el primer fotograma clave para los contenedores 3 y 4 para que comiencen a aparecer más tarde que el contenedor con objetos de todo el sitio. Luego creamos los segundos fotogramas clave y la animación de interpolación. Los primeros fotogramas clave contienen la posición inicial de los contenedores y los segundos fotogramas clave contienen la posición final de los contenedores en el sitio. El contenedor principal aparece desde la parte superior de la pantalla, así que lo movemos al primer fotograma clave; el contenedor inferior está en el lado inferior, por lo que también lo movemos al primer fotograma clave. Y también agregamos flexibilizaciones para animar los fotogramas intermedios.

Esto es lo que tenemos:

Después de eso, debemos agregar el siguiente código en la capa de acciones al nivel del primer fotograma clave de la animación de nuestros contenedores.

Luego compilamos el sitio y actualizamos el Panel de Control.

Colocar objetos en contenedores.

Al seleccionar cualquier objeto, verás que han aparecido dos nuevos contenedores en la lista de posibles ubicaciones en el menú desplegable: superior e inferior.

El nombre del sitio con un eslogan debe colocarse en el contenedor superior y el menú del sitio con un rectángulo gris en la parte inferior.

Cambiar el contenido del contenedor inferior

Ahora es deseable que el contenedor inferior se adhiera a la parte inferior de la pantalla en una pantalla grande. Para hacer esto, tenemos que mover la animación del contenedor a otro clip porque, como sabes, no podemos mover un clip animado mediante programación (la animación no funcionará). Llamemos a este clip website_holder_4_c.

Después de eso, vayamos a la escena principal, hagamos clic en los primeros fotogramas clave de los contenedores 3 y 4 y editemos el código.


Una vez que se compila el sitio, puede ver que el contenedor inferior se adhiere a la parte inferior de la pantalla sin importar cómo cambiemos el tamaño de la pantalla. Si la resolución de la pantalla es demasiado pequeña, el contenedor inferior no se superpondrá al contenido del sitio y permanecerá en su lugar.

Paso 15: animar el contenedor de contenido del sitio

Para animar el contenido del sitio, necesitaremos animar el contenedor con los objetos de todo el sitio de la misma manera que lo hicimos para los contenedores superior e inferior.

Paso 16: crea una página de contacto

Antes de crear una nueva página, actualicemos la plantilla de página. Hagamos que la plantilla para todas las páginas nuevas sea una página "Acerca de nosotros". Haga clic derecho en la página Acerca de nosotros y seleccione Actualizar plantilla de página.

Después de que hayamos actualizado la plantilla de la página, haga clic en el botón "Crear", ingrese el nombre de la página, el título, asigne una URL y seleccione su ubicación en la estructura de su sitio, como se muestra a continuación en la captura de pantalla.

La página de Contacto está lista. Ahora todo lo que queda es editar su contenido usando un conveniente editor WYSIWYG y usar el editor de enlaces para conectarlo al botón de menú correspondiente.

Paso 17: crea una ranura simple

En Moto Flash CMS, las tragamonedas desempeñan el papel de objetos animados. Una ranura puede contener una gran cantidad de funciones animadas que se pueden controlar directamente desde el Panel de control.

Primero intentaremos crear una ranura simple y luego mejorarla.

Comencemos con el botón "Cerrar", agréguelo al sitio como una imagen, apliquemos algunos efectos y asigne la acción "Ir a la página" -> "Inicio".

Animamos el botón "Cerrar", no es nada difícil, porque lo haremos usando una ranura. Creemos un espacio en el archivo website.fla. Para hacer esto, importe la imagen del botón "Cerrar" a la biblioteca. En la sección Slots debemos crear un nuevo movieclip y llamarlo CloseButtonSlot.

Configuremos la clase como CloseButtonSlot. No es necesario crear una nueva clase, simplemente herede la clase AbstractMotoSlot. Simplemente copie: com.moto.template.shell.view.components.AbstractMotoSlot y péguelo en el campo Clase base.

Luego agregamos la imagen del botón Cerrar a la escena (CloseButtonSlot MovieClip debe estar abierto) y la convertimos en un clip llamado CloseButtonIcon. Como heredamos nuestra ranura de la clase AbstractMotoSlot, esto nos da la animación principal. Ahora crearemos un hermoso efecto de expandir/contraer.

El siguiente paso es crear una nueva capa y crear fotogramas clave en los que colocar "Stop();". Coloquemos las marcas principales "sobre" (entre el primer y segundo fotograma clave de parada) y "fuera" (entre el segundo y tercer fotograma clave de parada) - ver captura de pantalla:

Creamos los mismos fotogramas clave y fotogramas intermedios en la capa con nuestro clip.

Por ejemplo, nuestro botón "Cerrar" girará en el sentido de las agujas del reloj cuando el cursor del mouse se coloque sobre él y en el sentido contrario a las agujas del reloj cuando se retire.

Agreguemos brillo a la rotación y suavicemos para animar el movimiento.

Una vez finalizada la animación, compilamos el archivo website.fla con nuestra nueva ranura (Ctrl + Enter).

Para trabajar con una ranura usando Moto CMS, debemos especificar sus parámetros en el archivo: estructura.xml:

bibliotecaSymbolLinkage=” ” – exportar ranura de clip de película (nombre de clase).
animado = "verdadero": un atributo que indica si la ranura está animada o no.
resizable=”false” – si existe lógica para cambiar el tamaño de la ranura o no.
bloqueado=”falso”: si la ranura debe mostrarse en el Panel de control o no.
– nombre de la ranura en el Panel de control
– propiedades de ranura que amplían la funcionalidad. No lo usaremos en este ejemplo.