Cómo hacer un sitio web FLASH puro

Después de un período de aprendizaje de Flash, muchos amigos comenzaron a interesarse en la producción de sitios web totalmente Flash. Los sitios web All-Flash se basan básicamente en gráficos y animaciones, por lo que son más adecuados para aplicaciones que no tienen demasiado contenido de texto y utilizan principalmente efectos planos y de animación. Tales como: promoción de marca corporativa, publicidad online específica, juegos online, sitios web personalizados, etc.

Crear un sitio web completo en Flash es similar a crear un sitio web HTML. Primero debe dibujar un diagrama estructural en papel, que incluya: el tema del sitio web, qué elementos usar, qué elementos deben reutilizarse. y la relación entre los elementos, la conexión entre ellos, cómo se mueven los elementos, qué estilo de música usar, en cuántos bloques lógicos se puede dividir todo el sitio web, cómo se conectan los distintos bloques lógicos y si planea usarlo. Se debe considerar Flash para construir todo el sitio o usarlo solo para la primera parte del sitio web, etc.

Los efectos de implementar un sitio web Flash completo son diversos, pero el principio básico es el mismo: utilizar la escena principal como un "escenario", que proporciona una relación de aspecto estándar y toda la estructura del diseño, y el "actor" es El contenido específico de las subcolumnas del sitio web puede derivar más subcolumnas según la estructura del contenido de las subcolumnas. Como base del "escenario", la escena principal básicamente mantiene su propio contenido sin cambios, y las subcategorías y subcategorías de otras identidades de "actores" se importan a la escena principal según sea necesario.

Desde una perspectiva técnica, si domina los métodos de producción de muchos trabajos Flash individuales y aprende más sobre los métodos de llamada entre archivos swf, no será demasiado complicado crear un sitio web Flash completo.

Proceso de referencia: planificación de la estructura del sitio web: gt; planificación de la escena Flash: gt; preparación del material: gt; integración general del sitio web Full Flash y trabajo único en Flash. Diferencias en la producción

2. Técnicas utilizadas habitualmente

1. Control importante del código ActionScript

2. importar

3. Análisis de la producción de ejemplo

1. Planificación de la estructura de este sitio web de ejemplo

2. Producción de la escena de la página de inicio index.swf

3, Producción de subescenas Cartoon (200208.swf)

4 Producción de subescenas secundarias (200208_frog01~200208_frog05)

5. /p>

4. Precauciones

Lo anterior hemos introducido aproximadamente el método de producción básico de un sitio web Flash completo a través del análisis de casos. Esperamos brindar ayuda real a los amigos a los que les gusta Flash. para verlo pronto. ¡Maravilloso sitio web Flash creado por todos! Descargue el archivo fuente del ejemplo del sitio web Flash en este artículo

1. La diferencia entre la producción de un sitio web Flash completo y un solo trabajo Flash

1. Diferentes estructuras de archivos

La escena de un único trabajo Flash, el proceso de animación y el contenido están todos en un solo archivo, mientras que los archivos de un sitio web Flash completo se componen de varios archivos y pueden continuar ampliándose según las necesidades de desarrollo. Las animaciones de archivos del sitio web Flash completo se encuentran en sus respectivos archivos correspondientes. Los efectos de animación se logran mediante el control de importación y salto de Action. Dado que se pueden cargar varios archivos SWF al mismo tiempo, se superpondrán y se mostrarán en la pantalla.

2. Diferentes ideas de producción

La producción de un solo trabajo Flash generalmente se realiza en un archivo independiente. Simplemente planifique el efecto de animación para que cambie con el cambio de la línea de tiempo o la alternancia de. la escena. La producción de un sitio web Flash completo requiere una comprensión general. Para lograr el efecto dinámico de un sitio web Flash completo mediante la conmutación y el control de diferentes archivos, el productor debe tener ideas claras y buenos hábitos de producción.

3. El proceso de reproducción de archivos es diferente.

Un solo trabajo Flash generalmente necesita contener todos los archivos en un solo archivo. Para ver el efecto, debes esperar hasta que el archivo esté básicamente. descargado antes de empezar a jugar. Sin embargo, un sitio web Flash completo se combina a través de varios archivos, lo que está más en línea con las características de los productos de software Flash en términos de flujo de tiempo. El archivo se puede hacer más pequeño y es más adecuado para su difusión en Internet cargando otros archivos uno tras otro. Esto también evita que los visitantes abandonen la navegación debido a largos tiempos de espera.

2. Tecnologías de uso común

1. Importante control de código ActionScript

Esta es la clave para la realización de un sitio web completo en Flash, especialmente porque Flash MX tiene Se agregaron muchas funciones poderosas. Para esta parte, consulte otra información. Aquí solo presentamos algunas de las funciones de ActionScript más importantes que deben usarse para crear un sitio web Flash completo.

loadMovieNum("url", nivel[, variables])

loadMovie("url", nivel/objetivo[, variables])

Descripción de la función:

Cargue el archivo SWF o JPEG mientras reproduce el vídeo cargado originalmente.

Descripción del parámetro:

url La URL absoluta o relativa del archivo SWF o JPEG que se va a cargar. No puede contener una descripción de carpeta o unidad de disco.

nivel carga el archivo swf en la película en forma de capa. Si se carga la capa 0, el archivo swf cargado reemplazará la película que se está reproduciendo actualmente. El segundo piso es más alto que el primero.

El objetivo puede utilizar el selector de ruta para obtener y reemplazar el MC de destino. La película cargada tendrá atributos como la posición, el tamaño y el ángulo de rotación del MC de destino. (Personalmente creo que es mejor usar Target, que es más conveniente al controlar la ubicación del .swf cargado)

parámetro opcional de variables, especifique el método HTTP (GET/POST) utilizado para enviar variables, si No, omita este parámetro.

Nivel: Flash permite ejecutar varios archivos SWF al mismo tiempo. Una vez que Flash carga un archivo SWF, ocupa un "nivel". El valor predeterminado del sistema es _Flash0 o _Level0, y las películas posteriores son el orden. se coloca en nivel0---nivel16000. El primer archivo SWF cargado es _Flash0 o _Level0, el segundo cargado en la primera capa se llama _Flash1 o _Level1, y así sucesivamente. Tenga en cuenta que la premisa es que no se ha salido del archivo cargado anteriormente; de ​​lo contrario, el primer archivo SWF se borrará y el primer archivo también saldrá de la memoria.

Nota: Si carga una película externa en la capa Level0 o Level0, la película original será reemplazada temporalmente y tendrá que cargarla nuevamente si desea usarla nuevamente. a Nivel Sólo puede existir una película a la vez. Debe prestar especial atención a la relación entre el nivel cuando utilice LoadMovie y UnLoadMovie. De lo contrario, se producirán problemas innecesarios cuando desee reproducir sólo una película a la vez y descargar la película anterior.

unloadMovieNum(level)

unloadMovie[Num](level/"target")

Descripción de la función: elimina la película cargada de Flash Player.

Descripción del parámetro: igual que arriba

loadVariables ("url", nivel/"objetivo" [, variables])

Descripción de la función:

Leer datos de un archivo externo (como un archivo de texto o texto generado por un script CGI, página Active Server (ASP), PHP o Perl) y establecer el valor de una variable en el nivel de Flash Player o en el clip de película de destino.

Descripción del parámetro:

url La URL absoluta o relativa donde se encuentra la variable

nivel Un número entero que especifica el nivel en Flash Player que recibe estas variables.

Destino apunta a la ruta de destino del clip de película que recibe las variables cargadas.

variables parámetro opcional, especifica el método HTTP (GET/POST) utilizado para enviar variables, si no, este parámetro se omite.

gotoAndPlay(escena, fotograma)

Descripción de la función:

Vaya al fotograma especificado en la escena especificada y comience a reproducir desde ese fotograma. Si no se especifica ninguna escena, el cabezal lector irá al fotograma especificado en la escena actual.

Descripción del parámetro:

escena El nombre de la escena a la que se transferirá.

frame El número o etiqueta del frame al que ir.

2. Producción de la carga

Teniendo en cuenta la velocidad de transmisión de la red, si el archivo index.swf es relativamente grande, es muy difícil diseñar una carga que guíe al espectador a esperar. pacientemente antes de que sea completamente importado. Al mismo tiempo, una carga bien diseñada a veces puede allanar el camino para el sitio web.

El enfoque general es realizar primero la carga en un MC, establecer una etiqueta como final en la última posición de la escena y usar ifFrameLoaded para determinar si la descarga se ha completado. , utilice gotoAndPlay para controlar toda la reproducción de Flash.

Tome un archivo de carga como ejemplo, inserte MC en la escena,

ifFrameLoaded("end"){

gotoAndPlay("Dónde empezar a reproducir" );

}

3. Importación de texto

En el proceso de creación de un sitio web Flash completo, a menudo nos encontramos con una cierta cantidad de contenido de texto que debe editarse. El rendimiento del contenido es el mismo que el proceso presentado anteriormente, pero el rendimiento final y los métodos de procesamiento son ligeramente diferentes en diferentes lugares.

Método 1. Método de gráficos de texto

Si no hay mucho contenido de texto y desea que el contenido del texto sea más dinámico, puede utilizar este método. Convierta el texto requerido en varios componentes Flash y colóquelos en las posiciones correspondientes. La carga de archivos del método de gráficos de texto es similar al método de procesamiento presentado anteriormente y los principios son similares. Los efectos dinámicos específicos son para que todos los consideren, por lo que no los presentaré aquí.

Método 2. Método de importación directa

El método de importación de texto puede importar un archivo de texto .txt independiente al archivo Flash a través de loadVariables. Al modificar, solo necesita modificar el texto txt. El contenido es muy conveniente para modificar archivos relacionados con Flash.

Establezca Var: nombre de la variable en las propiedades del cuadro de texto (tenga en cuenta este nombre de variable).

Agrega código ActionScript al marco donde se encuentra el cuadro de texto:

loadVariables("Variable name.txt", ""); archivo de texto.txt (el nombre del archivo es arbitrario), el comienzo del texto es "nombre de variable=" y el contenido del texto formal se escribe después de "=".

3. Análisis de producción de ejemplo

Proceso de producción general:

Planificación de la estructura del sitio web—gt; planificación de escenas Flash—gt; — gt; integración general

1. Planificación de la estructura del sitio web para este ejemplo

Columnas del sitio web: Noticias, Acerca de, Correo electrónico, Galería, Dibujos animados, Animación

Subcolumnas Acerca de: Feiyingis, Miembro, Relación, Contáctenos

La parte de la línea roja constituye la escena principal (escenario). Cada subcolumna solo conserva su nombre en la página de inicio y sus atributos son botones.

El contenido en la línea azul es la subescena (actor). El contenido de la subescena se puede crear en un archivo, o también se puede crear en varios archivos independientes e importarlos al archivo. escena principal (escenario) según sea necesario.

2. Producción de la escena de la página de inicio index.swf

El sitio web Flash completo consta de escena principal, subescena, subescena secundaria...

De manera similar a crear un sitio web HTML, generalmente crearemos una escena principal index.swf. El contenido principal incluye: relación de aspecto, fondo, botones de navegación de columnas, nombre del sitio web y otra información de la "página de inicio". Finalmente, publíquelo en un archivo html o cree una página html usted mismo. El contenido es una tabla y el código incrustado de index.swf está escrito en ella.

Disposición de la escena principal:

La parte de la línea azul es el nombre del sitio web, los derechos de autor y otras áreas de información fija, generalmente ubicadas en el borde de la animación Flash.

El contenido de la línea naranja es el botón de navegación de la columna del sitio web, que generalmente está fijo en un área determinada. El botón se puede convertir en efectos estáticos o dinámicos según sea necesario, o incluso en un botón que contenga cambios de MC.

La línea verde es el área de demostración para importar subarchivos a la escena principal.

En términos de carga de subarchivos, se utilizan principalmente dos funciones de control, LoadMovieNum y UnloadMovieNum. Consulte el importante control de código ActionScript mencionado anteriormente.

Aquí tomamos como ejemplo la producción de la subcolumna Cartoon. Hay un botón Dibujos animados en el índice del archivo de escena principal. Cuando hacemos clic en el botón Dibujos animados, queremos importar el archivo 200208.swf en la carpeta de dibujos animados. Entonces seleccionamos el botón Dibujos animados en la escena y agregamos el código de Acción:

on(release){

loadMovieNum("cartoon/200208.swf", 1

unloadMovieNum(2);

}

Tenga en cuenta que aquí configuramos el nivel en 1.

3. Producción de la subescena 200208.swf

Ahora determine el archivo 200208.swf que debe importarse a la subcolumna Cartoon. Se planea que este archivo contenga 5. subarchivos. Entonces, la interfaz del archivo 200208.swf solo contiene 5 botones gráficos y un título para importar 5 subarchivos independientes.

200208.swf

Como puede ver en la imagen, el archivo 200208.swf contiene 5 iconos pequeños con atributos de botón, a saber, Bu_2_frog01 a Bu_2_frog05. El efecto que necesitamos es: haga clic en ellos para importar los archivos correspondientes 200208_frog01.swf a 200208_frog05.swf respectivamente.

Seleccionamos Bu_2_frog01 en la escena y agregamos ActionScript a este botón:

on(release){

loadMovieNum("cartoon/200208_frog01.swf", 2

}

Haga clic en Bu_2_frog02 y agregue ActionScript a este botón:

on(release){

loadMovieNum("cartoon/ 200208_frog02.swf", 2);

}

...

Establezca las acciones correspondientes en los 5 botones para llamar a los archivos correspondientes.

Nota: Aquí configuramos el nivel en 2, que es el número de niveles importados configurados para retener y distinguir la escena principal 1. Si es necesario importar el siguiente nivel de capas, se aumenta el número de niveles. a 3, y así sucesivamente.

4. Producción de subescenas de segundo nivel (200208_frog01~200208_frog05)

La subescena de segundo nivel aquí es el contenido asociado al nivel superior y es la última. en la estructura de tres niveles en esta clase de ejemplo. Este nivel es principalmente la parte de contenido específico del sitio web Flash completo, que puede ser imágenes detalladas, texto y contenido de animación. Lo que debe conectarse aquí es la imagen específica como contenido, pero también debe convertirse en un archivo swf con la misma proporción que la escena principal. Por ejemplo:

200208_frog01

200208_frog02

Esta escena es la escena de nivel más bajo, que es la parte de visualización del contenido principal. Puedes profundizar en ella. efectos de animación específicos según sea necesario. Tenga en cuenta que debe agregar el código ActionScript de detención: stop() en el último fotograma de la escena; esto puede detener la acción en bucle de la animación de la escena.

El efecto de la importación completa a la escena principal

5. Importación de texto en Acerca de

Vea la subcolumna Acerca de en este ejemplo en el índice del archivo. fla Establece la acción del botón Acerca de:

on(release){

loadMovieNum("aboutus.swf",

unloadMovieNum(2) ;

p>

}

Cree un cuadro de texto para mostrar texto en el archivo aboutus.fla. Establezca el atributo del cuadro de texto en Multilínea, Var: aboutus (tenga en cuenta esta variable). nombre).

Agrega código ActionScript al marco donde se encuentra el cuadro de texto:

loadVariables("aboutus.txt", ""); el archivo aboutus.swf pertenece Escriba un archivo de texto sin formato about.txt a continuación. El comienzo del texto es "aboutus=" y el contenido del texto formal se escribe después de "=".

El efecto de importar completamente archivos de texto a la escena principal

IV.Notas

1. Preste atención a los atributos de largo y ancho de todos los subarchivos.

Desde la perspectiva del nivel de imagen, el sitio web Flash completo es muy similar a la estructura de capas de Photoshop. Podemos considerar cada subescena como un archivo de capa, y el subarchivo aparece dentro de la longitud. y ancho del fondo. Para facilitar el posicionamiento, podemos mantener el subarchivo y la escena principal en la misma relación de aspecto, lo cual es muy conveniente para la disposición del diseño. De lo contrario, su posición debe controlarse cuidadosamente mediante declaraciones setProperty.

2. Al publicar archivos, preste atención a publicar la opción html en modo transparente

La razón por la que necesita publicar cada subarchivo en modo transparente es que los subarchivos no puede tener un color de fondo. La relación de aspecto del subarchivo es básicamente la misma que la de la escena principal. Si el subarchivo tiene un color de fondo, cubrirá el contenido de la escena principal.

Método de configuración: marque la opción html en la configuración de publicación y seleccione modo ventana: TransparenteWindowless en el panel html, como se muestra en la figura.

3. Al utilizar la importación de texto, tenga en cuenta que el contenido al principio del archivo de texto debe ser "la cadena con el mismo nombre que la definición de Var en el atributo del cuadro de texto = texto". Además, el archivo swf que necesita importar texto y el archivo de texto txt importado deben estar en el mismo directorio.

4. Preste atención a comprobar cuidadosamente si las llamadas entre archivos son correctas para evitar "enlaces muertos".