Cómo crear una página web flash

Flash es un paquete de software de animación utilizada por profesionales y aficionados para hacer diseños interactivos sofisticados. Mientras que los profesionales tienden a utilizar Flash en conjunto con otros programas como Photoshop para la creación de imágenes y Dreamweaver para la construcción de un sitio web, Flash tiene las herramientas dentro de ella para hacer que las páginas web completas sin necesidad de utilizar ningún otro programa. La familiaridad con Flash & # 039; s herramientas básicas y áreas de trabajo son necesarias para esta tarea.

Instrucciones

La planificación de una página web

1 Dibujar un boceto con lápiz y papel de un diseño de una página web. Los diseñadores profesionales siempre tienen un boceto de un diseño web antes de que realmente se construyen. Este esquema muestra los elementos básicos que deben incluirse en el diseño, así como los tamaños de los elementos. También puede incluir las descripciones de los colores que se van a utilizar.

Para este artículo vamos a crear una "página del portal." Al igual que una puerta o portón, una página del portal conduce al usuario a otro lugar. Este portal será una junta escolar local. Tendrá el nombre del sistema escolar en la parte superior y dos botones de navegación, una que dice "estudiante" y el otro "maestro". También en la página será un enlace de correo electrónico.

Tengamos en cuenta que una página web en su forma más simple es un lienzo con cuatro elementos básicos: un encabezado que dice al espectador lo que el nombre del sitio es; un área de contenido principal (una imagen y / o texto) que describe lo que ofrece la página; enlaces de navegación que llevan al espectador a otro lugar (esto podría ser simplemente una dirección de correo electrónico de un usuario puede hacer clic para enviar un correo electrónico solicitando más información o botones que cuando se pulsa enviar al espectador a otras páginas web o sitios web, y un pie de página que contiene información de contacto y tal vez un aviso de copyright. a veces el área de contenido principal y los enlaces de navegación se combinan en una sola sección. esto es lo que haremos para este ejemplo.

2 Gire el papel para que esté en formato apaisado y dibuje un rectángulo en él. Cada lado del rectángulo debe estar dentro de una pulgada o menos del papel & # 039; s borde. Etiquetar los "ancho" 800 píxeles y la altura "600 pixels," el tamaño estándar para un sitio web. Una proporción panorámica (o ejemplo, 1000 x 600 o 1200 x 600) es cada vez más popular. Este rectángulo será el marco básico para mostrar la página web & # 039; s de diseño. Si la página tendrá un color de fondo, indicar que en el papel. Nuestro ejemplo utilizará un fondo blanco.

3 Decidir lo que la cabecera se verá así. La cabecera de la mayoría de las páginas web normalmente se ejecuta el ancho de la página (800 píxeles, en este caso) y estrechos (100 píxeles) de altura. Es a menudo un solo color o una fotografía que tiene texto en la parte superior de la misma. El texto suele ser grande y fácilmente visible desde lejos y establece el nombre de la empresa u organización propietaria de la página web. Tome un lápiz e ir hasta el borde izquierdo del rectángulo en la página. A partir de alrededor de una pulgada hacia abajo desde el borde superior del rectángulo, dibujar una línea recta horizontal a través de la página hasta que toque el borde derecho del rectángulo. El área por encima de la línea dibujada representa simplemente la cabecera. Dibujar en el espacio de lo que el encabezado tendrá el aspecto y la información que contiene. También escriba en la dimensión de la altura de las "100 píxeles."

4 Decidir lo que el pie de página se verá así. La mayoría de los pies de página son de un color sólido con el texto en un color contrastante. También son más estrechos en la altura de las cabeceras, por lo general 50 o 75 píxeles. Comenzando alrededor de tres cuartos de pulgada desde el borde inferior del rectángulo, dibujar una línea recta horizontal a través de la página desde el borde izquierdo al borde derecho del rectángulo. El área debajo de la línea dibujada representa simplemente el pie de página. Dibujar en el espacio de lo que el pie de página se verá como y qué información se va a contener. Para este artículo, habrá un enlace de correo electrónico. También escriba en la dimensión de altura de 75 píxeles "."

5 Etiquetar la altura del área de contenido principal. Debido a que el rectángulo es 600 píxeles de alto, la cabecera es de 100 píxeles y el pie de página es de 75 píxeles, el área de contenido principal es, por defecto, 425 píxeles de altura. Decidir lo que va a ir en la zona de contenido principal. En el ejemplo vamos a sacar dos cuadrados, cada uno de 350 píxeles por lado y cada cuadrado se centrarán en horizontal y en vertical en la zona con la página principal. Cada cuadrado actuará como un botón de enlace. Cada uno tendrá un fondo amarillo cuando aparece, pero el fondo cambiará a rojo cuando el usuario & # 039; s del ratón pasa sobre él.

La construcción de la Página Web

6 Abrir una nueva (ActionScript 2.0) documento de Flash. Abra el Panel de propiedades ( "Ventana" y luego "Propiedades") y cambiar las dimensiones predeterminadas a 800 por 600. El panel de propiedades es también el espacio de trabajo donde se fijan el color de la etapa y velocidad de fotogramas. Hacer que el color de la etapa "blanco" y establece la velocidad de fotogramas a "12 fps" (cuadros por segundo. "Doce fps es la tarifa estándar para los sitios web.

7 Seleccione "Ver" y luego "reglas" para que los gobernantes visibles en el escenario y luego colocar dos directrices de la regla superior en las marcas de 100 y 525 píxel de píxeles. Las directrices son el lugar haciendo clic en la regla, manteniendo pulsado el botón izquierdo del ratón y arrastrando el cursor sobre la ubicación del escenario donde se supone que la pauta a seguir. Cuando las directrices están en su lugar, estará claro en las áreas de encabezado, pie de página de contenido principal y van.

8 Inserte una nueva capa en la línea de tiempo haciendo clic en el panel Línea de tiempo & # 039; s botón "Nueva capa". Tendrá un nombre predeterminado de "Nivel 2". Haga doble clic en el nombre de la capa y cambiarle el nombre "cabecera". Abra el panel de información ( "Ventana" y luego "Información"). Clic en la muestra de color de relleno en la barra de herramientas, y seleccione un color. Vamos a elegir amarilla. Ahora seleccione la herramienta Rectángulo. Dibujar un rectángulo en el escenario desde la esquina superior izquierda a la parte inferior derecha de la primera directriz. Esta será la cabecera, y no importa en este momento si el tamaño es exacto; será en un momento. Después de soltar el botón del ratón, vaya al panel de información y establecer la coordenadas X e Y cada uno a "0". A continuación, establezca la anchura ( "W") a "800" y la altura ( "H") a "100". La cabecera está dimensionada con exactitud.

9 Inserte una nueva capa y el nombre "texto de cabecera." Cambiar el color de relleno a "negro". Seleccione la herramienta de texto y escribir el nombre de la página web sobre el rectángulo de color amarillo. En este caso, se & # 039; ll tipo: "Mainville escuelas de la ciudad." Resalta el texto y luego seleccione un tamaño de fuente y fuente en el panel de propiedades (por ejemplo, "Arial", "60 puntos"). Elija la herramienta de selección y mover el texto a la izquierda de la barra de encabezado.

10 Inserte una nueva capa y el nombre "pie". Seleccione la herramienta Rectángulo. Dibujar un rectángulo en el escenario desde la esquina izquierda inferior del escenario a la esquina superior derecha de la segunda directriz. Este será el pie de página, y será negro. Después de soltar el botón del ratón, vaya al panel de información y establecer la coordenadas X e Y en "0" y "525". A continuación, establezca la anchura ( "W") a "800" y la altura ( "H") a "75". El pie de página está dimensionada con exactitud.

11 Inserte una nueva capa en el panel Línea de tiempo y haga doble clic en él para cambiar su nombre "pie de página" como se indica en el Paso 3. Cambiar el Color de relleno para "blanco". Seleccione la herramienta de texto y escriba: "Haga clic aquí para enviarnos un correo electrónico!" sobre el rectángulo negro. Resalte el texto y seleccione el mismo tipo de letra que se utiliza en la cabecera y cambiar el tamaño de fuente en el panel de propiedades (por ejemplo, "24 puntos"). En la barra de vínculos del panel de propiedades, escriba: "mailto: //[email protected]", la sustitución de una dirección real para la ficticia dada en el ejemplo. Elija la herramienta de selección y mover el texto hacia el centro de la barra de pie de página. Después de que el archivo se muestra en un navegador, el cursor cambiará de una flecha a una mano cuando el usuario pasa el ratón sobre el texto en el pie de página. Si el usuario hace clic en la frase, el usuario & # 039; s del navegador de correo predeterminado se abrirá automáticamente con un nuevo cuadro de diálogo de mensajes de correo electrónico.

Hacer que los botones

12 Inserte una nueva capa en la línea de tiempo y el nombre de "studentbutton." Clic en la muestra de color de relleno en la barra de herramientas y seleccione un color. Vamos a elegir amarilla. Ahora seleccione la herramienta Rectángulo. Dibujar un cuadrado en el área de contenido principal del escenario. No importa lo que en este momento es el tamaño. Después de soltar el botón del ratón, vaya al panel de información y establecer la coordenadas X e Y de "30" y "150". A continuación, establezca la anchura ( "W") a "350" y la altura ( "H") a "350". Pulse la tecla "F8" para convertir la plaza en un símbolo. Nombrar el símbolo "estudiante" y crea "botón" que se ha seleccionado como el símbolo & # 039; s de clase. Haga clic en Aceptar." Después de un objeto se convierte en un símbolo, una copia del mismo se coloca en el archivo & # 039; s Biblioteca. Haga clic en el cuadrado para seleccionarlo y darle un nombre de instancia en el panel Propiedades. Nombrarlo: "student_bu". El "bu" es sinónimo de "botón".

13 Abra la biblioteca ( "Ventana" y luego "Biblioteca") y haga doble clic en el botón & # 039; s icono. El archivo & # 039; s línea de tiempo cambiará al botón & # 039; s línea de tiempo. El botón & # 039; s línea de tiempo no muestra cuadros. Muestra "estados", o cuatro condiciones, el botón se puede utilizar en: "arriba", lo que el botón se ve como cuando se carga la página; "Sobre" lo que el botón se ve como cuando un ratón pasa sobre él; y "abajo" y "golpe", que son otros dos estados que no necesitamos. Usando la herramienta de texto, escriba la palabra "estudiante" en letras grandes en el cuadrado amarillo. Cambiar el tipo de letra y tamaño, si es necesario. A continuación, utilice la herramienta de selección para centrar el texto verticalmente y horizontalmente en la plaza.

14 Haga clic con el estado "sobre" en la línea de tiempo y seleccione "Insertar fotograma clave en blanco" en el menú desplegable que aparecerá al lado del cursor. Haga clic en el cuadrado amarillo para resaltarlo y cambiar el color de relleno a "rojo". La plaza ahora se vuelve rojo. Haga clic en "Escena 1" a la derecha, encima del escenario, y el archivo & # 039; s línea de tiempo volverá a aparecer. Ahora, cuando el archivo está en línea, el cuadrado amarillo cambiará a un cuadrado rojo cuando se desplaza el ratón sobre.

15 Abra la ventana de acciones ( "Ventana" y luego "Acciones"). Asegúrese de ActionScript 2.0 se selecciona y ScriptAssist está activo. Seleccione "Funciones globales", luego "" Navegador / Red "y haga doble clic en" getUrl. "ScriptAssist colocará código en la acciones de la ventana y también proporcionan una barra para que se inserte una dirección URL. Escriba la dirección en que el botón debe enlace a cuando se hace clic en este artículo & # 039;. s ejemplo, podría ser una página web llamada "www.MainvilleCitySchools.edu/student.htm".

dieciséis Volver a la Biblioteca y haga clic con el botón estudiante. Seleccionar "Duplicar". Cambie el nombre del "teacher_bu" archivo y haga clic en "Enter". Seleccione el botón de maestro en la Biblioteca y se arrastra a la etapa justo a la derecha del botón de los estudiantes. aparecerá s línea de tiempo; haga doble clic en el botón maestro & # 039; s icono en la Biblioteca, y el botón & # 039. Haga clic en el estado "arriba" en la línea de tiempo. Con la herramienta Texto, seleccione el texto (que actualmente dice "estudiante") y sustituirla por "maestro". Haga clic en el estado "sobre" en la línea de tiempo. Con la herramienta Texto, seleccione el texto (que también dice "estudiante") y sustituirla por "maestro". Haga clic en "Escena 1" y luego volver a las acciones de la ventana. Ahora cambiar en el código de la dirección URL (que dice "www.MainvilleCitySchools.edu/student.htm") a la dirección del lugar en el botón maestro debe enlazar a (por ejemplo, "www.MainvilleCitySchools.edu/teacher.htm).

Publicar la página Web

17 Probar el archivo con la tecla "Ctrl-Enter". El archivo se mostrará y operar exactamente como lo hará en un navegador. Cierre la ventana de prueba. Seleccione "Archivo" y luego "Configuración de publicación." Aparecerá un cuadro de diálogo. Asegúrese de que sólo los dos cajas (.swf y .html) estén marcadas. Tomar nota de que en el equipo se publicarán los archivos y haga clic en el botón "Publicar". En Flash, la palabra "Publicar" es equivalente a "Guardar como" en otros programas. En este caso, el archivo Flash se guardará como una película SWF y un archivo HTML.

18 Abra un navegador de Internet, como Internet Explorer, Safari o Firefox.

19 Seleccione "Archivo" y luego "Abrir", y el navegar al archivo HTML que acaba de publicar. Haga clic en "Abrir", y verá la página que ha creado de trabajo al igual que cualquier página web haría.

Consejos y advertencias

• Guarde el archivo con frecuencia para asegurarse de que don & # 039; t pierde cualquiera de su trabajo.