GAEM 3° “C”                                      Unidad 4Los símbolos de tipo Botón son los que aportan la mayor parte de ...
GAEM 3° “C”4.1 Crear Botones.Flash, nos permite crear botones personalizados, de manera muy rápida; a la vez nos ayudaa da...
GAEM 3° “C”Mira hacia la línea del tiempo (Timeline), como puedes notarlo es diferente a la línea deltiempo de la Escena 1...
GAEM 3° “C”Como podrás notarlo, el botón se copia, así que no necesitarás hacer un nuevo dibujo.7- Aún estamos en el estad...
GAEM 3° “C”4.2. Programar propiedades de los botones Y4.3. Programar acciones de los botonesAdemás de poder realizar simpl...
GAEM 3° “C”  6. En la línea del tiempo nos situamos sobre el fotograma “sobre” e insertamos un     fotograma clave. Hacemo...
GAEM 3° “C”  18. Con la herramienta texto creamos un campo de texto junto al botón. En él escribimos      “REPOSO”.  19. C...
GAEM 3° “C”  22. En variable escribimos Texto y en valor escribimos PRESIONADO.   23. Pulsamos en la línea que pone “on (r...
GAEM 3° “C”El lenguaje ActionScript está formado por clases incorporadas, por lo que se deberá utilizarla sintaxis correct...
Próxima SlideShare
Cargando en…5
×

Unidad 4

210 visualizaciones

Publicado el

0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
210
En SlideShare
0
De insertados
0
Número de insertados
37
Acciones
Compartido
0
Descargas
0
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Unidad 4

  1. 1. GAEM 3° “C” Unidad 4Los símbolos de tipo Botón son los que aportan la mayor parte de la interactividad de laspelículas Flash con aquel que la está visualizando. Un botón, en Flash, es igual que cualquierbotón de cualquier entorno informático, sea web o cualquier otro.Son elementos que se prestan a que el usuario los presione, desencadenando al hacerlo unaserie de acciones. También es habitual ver como este tipo de elementos reaccionan cuando seles pasa el ratón por encima o cuando se les está pulsando, por ejemplo.Al igual que los otros símbolos de Flash 8, los botones tienen su propia línea de tiempos. Estaes independiente pero, sin embargo, está formada únicamente por cuatro fotogramas, unopara cada estado posible del botón.Reposo. Aspecto por defecto del botón, es decir, cuando el puntero del ratón no está situado sobreél.Sobre. Aspecto del botón cuando situamos el puntero sobre él.Presionado. Apariencia que deseamos tenga nuestro botón mientras lo mantengamos pulsado.Zona activa. Aquí debemos indicar el área real en la que queremos que actúe nuestro botón. Esto esimportante sobre todo en botones compuestos sólo por texto como veremos más adelante.Parece que la limitación de fotogramas podría implicar una limitación en la capacidad deespectacularidad y utilidad de estos símbolos, pero no es así.Los botones pueden contener a su vez otros símbolos, como clips o gráficos (también de tipoBitmap). La unión de las posibilidades de todos los símbolos dota a los botones de granespectacularidad. Lorena Rodríguez Turrubiates
  2. 2. GAEM 3° “C”4.1 Crear Botones.Flash, nos permite crear botones personalizados, de manera muy rápida; a la vez nos ayudaa darle mas vida a nuestras páginas web; en pocas palabras, nos ayuda a hacer másatractivo nuestro sitio y lógicamente eso es lo que queremos para aumentar el número devisitas a nuestro website.Empecemos:1- Primero crearemos un nuevo símbolo, haciendo la siguiente combinación de teclas:ALT+F8.Aparecerá el siguiente cuadro:2- En Nombre (Name), escribe "botón 1", en Comportamiento (Behavior) selecciona laopción Botón (Button), finalmente haz click en Aceptar (OK).Automáticamente, seremos enviado desde la Escena 1 al escenario del símbolo "botón 1";ahí es donde crearemos un botón que será incluido en nuestra biblioteca.El escenario únicamente para la creación de botones, será parecido a la siguiente imagen: Lorena Rodríguez Turrubiates
  3. 3. GAEM 3° “C”Mira hacia la línea del tiempo (Timeline), como puedes notarlo es diferente a la línea deltiempo de la Escena 1.La línea del tiempo, del escenario para crear botones es parecida a la siguiente imagen:Expliquemos el gráfico anterior:Debemos entender que Reposo, Sobre, Presionado y Zona activa son los cuatro estados deun botón. Veamos a continuación, qué representa cada estado.Reposo: es cuando el mouse no está colocado sobre nuestro botón o no se ha hecho clicksobre él.Sobre: es cuando el mouse está colocado sobre el botón, pero aún no se ha hecho clicksobre él.Presionado: lógicamente, es cuando haces click sobre el botón.Zona Activa: su mismo nombre lo indica, es cuando el botón está activo.Continuemos con la creación de nuestro "botón 1".La cabeza lectora, en la línea del tiempo tiene que estar señalando el estado de Reposo.4- Haz click sobre la Herramienta de Rectángulo (Rectangle Tool), que se encuentra en elPanel de Herramientas.5- Dibuja un rectángulo en el centro del área de trabajo, y ponle el color azul.6- Después presiona la tecla F6; ésto hará que la cabeza lectora en la línea del tiempo paseal estado Sobre. Lorena Rodríguez Turrubiates
  4. 4. GAEM 3° “C”Como podrás notarlo, el botón se copia, así que no necesitarás hacer un nuevo dibujo.7- Aún estamos en el estado Sobre, si no tienes seleccionado el botón, hazlo (con laHerramienta Flecha y haz doble click sobre nuestro dibujo), luego dirígete a Color deRelleno que se encuentra en la sección colores del Panel de Herramientas, y escoge elcolor rojo, como se muestra a continuación:8- Después presiona nuevamente la tecla F6, para que la cabeza lectora pase al estadoPresionado, y cambia el color de relleno de la misma forma que lo hicimos en el paso 7; yescoge un color verde. Finalmente presiona por ultima vez F6 para pasar al estado Zonaactiva, ésto hará que se copie el botón. Para este último estado, no es realmente necesariocambiar el color de fondo.Con los colores que hemos aplicado, haremos que el botón cambie de color, cuando selleven a cabo los Estados de los botones anteriormente descritos.Nuestro botón ha sido creado, así que puedes volver a la Escena 1, abre la biblioteca yverás que ahí esta el símbolo llamado "botón 1", podrás arrastrarlo al escenario las vecesque quieras para hacer varias copias de él.Toma la Herramienta de Texto (A), y escribe lo que desees, después coloca el texto sobre elbotón creado; para probar la película haz la tradicional combinación de teclas CTRL +Enter. Si después quieres ver la película en tu explorador de internet, únicamente presionalas teclas CTRL + F12. Lorena Rodríguez Turrubiates
  5. 5. GAEM 3° “C”4.2. Programar propiedades de los botones Y4.3. Programar acciones de los botonesAdemás de poder realizar simples animaciones, Flash nos permite agregar botones anuestras películas de forma que al pulsar con el ratón sobre ellos se ejecutase una accióndeterminada. Esto hace que podamos dotar las películas de cierta interactividad, la cual seve aumentado por el hecho de que también podemos establecer una comunicación entrelos distintos clips de película que tenemos en el escenario; por ejemplo podríamos hacerque al terminar un clip se inicie otro. ActionScript es el lenguaje de programación de scriptsde Flash y es la herramienta que nos permite realizar todo lo anterior. En este trabajo no pretendemos abarcar todo lo que podríamos hacer conActionScript pero realizaremos dos ejemplos que expliquen cómo crear botones y comoprogramar ciertas acciones para dotar a nuestra animación de un poco de interactividad.Ejemplo 1: En este ejemplo veremos como crear un botón, como modificar su aspecto según suestado y cómo utilizaríamos ActionScript para especificar acciones para el botón queactúen sobre un cuadro de texto dinámico. 1. En un documento nuevo dibujamos un círculo de color verde con la herramienta óvalo. 2. Con la herramienta flecha seleccionamos el óvalo haciendo doble clic. 3. Convertimos el óvalo en símbolo pulsando F8 (o Insertar → convertir en símbolo). En el cuadro de diálogo “convertir en símbolo” le ponemos de nombre “botón”, seleccionamos la casilla botón y pulsamos aceptar. 4. Hacemos doble clic en el botón para entrar en el modo de edición de símbolos. Si nos fijamos en la línea del tiempo vemos que ha cambiado, mostrando ahora los fotogramas correspondientes a los estados del botón. 5. Seleccionamos el ovalo haciendo doble clic con la herramienta flecha. Pulsamos F8 para convertirlo en símbolo pero esta activamos la casilla “Clip de película” en lugar de Botón. Lorena Rodríguez Turrubiates
  6. 6. GAEM 3° “C” 6. En la línea del tiempo nos situamos sobre el fotograma “sobre” e insertamos un fotograma clave. Hacemos lo mismo con el fotograma “presionado”. 7. Cambiamos color de relleno del óvalo en cada fotograma con la herramienta bote de tinta de forma que cada fotograma tenga un color distinto. 8. Nos situamos en el fotograma “sobre”. 9. Pulsamos doble clic en el óvalo con la herramienta flecha para seleccionarlo. 10. Lo convertimos en símbolo (F8) igual que antes pero esta vez seleccionando la casilla “Clip de película” en lugar de “botón”. 11. Doble clic en el óvalo para editarlo. La línea del tiempo ha vuelto a cambiar. 12. Seleccionamos el fotograma 4 e insertamos un fotograma clave (F6). 13. Pulsamos Ventana → Transformar para que aparezca la ventana de transformación. En ella escalamos al 120% fijándonos en que la casilla restringir está marcada. 14. Seleccionamos el fotograma 7 e insertamos un fotograma clave 15. Escalamos al 80%. 16. Nos situamos en un fotograma entre el 1 y el 4 y seleccionamos “forma” en el menú “animar” del inspector de propiedades. Realizamos también la misma operación situándonos en un fotograma entre el 4 y el 7. Si todo ha ido bien aparecerán, en la línea del tiempo, flechas continuas entre dichos fotogramas. 17. Pulsamos en “escena1” para volver al escenario principal. Lorena Rodríguez Turrubiates
  7. 7. GAEM 3° “C” 18. Con la herramienta texto creamos un campo de texto junto al botón. En él escribimos “REPOSO”. 19. Con el cuadro de texto seleccionado especificamos sus propiedades en el inspector de propiedades. Seleccionamos “texto dinámico”, “línea única” y fuente “_sans”, le asignamos un color de letra, alineación, etc… En el campo “Var” escribimos “Texto”. 20. Ahora toca programar el script. Seleccionamos el botón y expandimos el panel “Acciones”. (Si el panel no está visible Ventana → Acciones) 21. Vamos a Acciones → Variables y hacemos doble clic en setVariables. Lorena Rodríguez Turrubiates
  8. 8. GAEM 3° “C” 22. En variable escribimos Texto y en valor escribimos PRESIONADO. 23. Pulsamos en la línea que pone “on (release) { ”; vemos que aparecen distintas casillas arriba. Activamos sólo “Presionar”. 24. Nos situamos en la última línea y volvemos hacer doble clic en setVariables. Esta vez en valor escribimos SOBRE. Las casillas que activamos esta vez es “Situar sobe objeto” y “liberar”. 25. Doble clic en setVariables por última vez. La misma variable, en valor escribimos REPOSO, y activamos las casillas“liberar Afuera” y “situar fuera de objeto. 26. Hemos terminado. Podemos probar la película con Control → Probar PelículaJuega con el resultado final!!!4.4. Operar botones.Los OperadoresUna vez entendida una de las principales bases del lenguaje que son las variables, ahoraentraremos a otro de mayor importancia y son los operadores.Puede que se pregunten por el uso de símbolos matemáticos en el código. Los símbolos sedenominan operadores en ActionScript. Los operadores calculan un valor nuevo a partir deuno o varios valores y un operador le permite asignar un valor a una variable del código,por ejemplo el operador de igualdad (=) permite asignar un valor a una variable:Los operadores son caracteres que especifican cómo combinar, comparar o cambiar losvalores de una expresión. Una expresión es cualquier sentencia para la que Flash puedecalcular el resultado y que devuelve un valor. Puede crear una expresión combinandooperadores y valores, o bien llamando a una función. Lorena Rodríguez Turrubiates
  9. 9. GAEM 3° “C”El lenguaje ActionScript está formado por clases incorporadas, por lo que se deberá utilizarla sintaxis correcta para formar sentencias de manera que el código se compile y funcionecorrectamente en Flash. En este caso, la sintaxis se refiere a la gramática y la ortografía deun lenguaje que le permite programar. El compilador no comprende la sintaxis incorrecta,por lo que observará errores o advertencias en el panel Salida cuando intentes comprobarel documento en el entorno de prueba o no se ejecutara cuando se haya exportado a SWFel contenido. Por consiguiente, la sintaxis es un conjunto de reglas y directrices que leayudan a formar códigoActionScript correcto. Lorena Rodríguez Turrubiates

×