desarrollo del software didáctico informático -...

Desarrollo del Software Didáctico Informático

Elaborado por: Marte Alejandro Ramírez Ortegón 1


Elaborado por: Marte Alejandro Ramírez Ortegón

Indice

Tutoriales de matemáticas en Internet.................................................................................... 3

Impacto e importancia de los tutoriales ............................................................................. 3 Tipos de tutoriales ............................................................................................................... 3 Técnicas para el desarrollo de tutoriales ............................................................................ 4

Programas para la enseñanza de las matemáticas.................................................................. 5 Tipos de programas para la enseñanza de las matemáticas .............................................. 5 Programas entrenadores y evaluadores .............................................................................. 5 Programas con sistemas expertos ....................................................................................... 6

Primer vistazo a FlashMX....................................................................................................... 7 Barra de propiedades, parte inferior de la ventana principal. ........................................... 8 Un ejemplo de edición....................................................................................................... 11

Fuentes incorporadas y fuentes de dispositivo..................................................................... 21 Primer movimiento............................................................................................................ 22

Interpolación de movimientos............................................................................................... 27 Interpolación de movimientos .......................................................................................... 27 Interpolación de forma o shape......................................................................................... 28

Construcción de un site ......................................................................................................... 33



Tutoriales de matemáticas en Internet

En esta unidad se presentaran los tutoriales aplicados a la enseñanza de las matemáticas que existen en Internet y su impacto en el alumnado de bachillerato. De igual forma, se enseñara el diseño de tutoriales básicos utilizando herramientas simples.

Impacto e importancia de los tutoriales

Los tutoriales por Internet o por programas de computación son la herramienta didáctica del futuro y del presente. Estas son herramientas auxiliares que permiten mejorar la enseñanza en temas difíciles o como puntos de referencias para investigaciones.

Los tutoriales por Internet tienen la ventaja de ser portables y de estar accesibles a cualquier usuario (siempre y cuando el sitio sea libre). Su desventaja es el tamaño del contenido que es limitado por la velocidad de la red y por el tamaño de la página o sitio.

Los tutoriales de CD tienen la ventaja del tamaño, pero desventajas en portabilidad.

Un tutorial en Internet permite al estudiante revisar en forma más detallada los temas que esta aprendiendo.

Tipos de tutoriales

Existen básicamente 2 tipos de tutoriales:

Tutoriales estáticos:

Estos son tutoriales escritos para paginas HTML o PDF, básicamente son sustitutos de libros de texto o cuadernos de problemas.

El formato HTML permite crear hiperlinks, es decir ligar varias páginas y crear un sitio muy dinámico y sin tanta carga visual. Su desventaja es que ocupa un espacio regular pero si el contenido tiene una gran cantidad de imágenes (como las ecuaciones) entonces el tamaño se incrementa desmedidamente.

El formato PDF permite tener mucha información, pero en un formato muy parecido a un libro, no es dinámico, por lo que no es recomendable si se quiere llamar la atención. Básicamente es leer un libro en la computadora con la ventaja de usar hiperlinks como html.

Tutoriales interactivos

Estos son de 2 tipos: multimedia y dinámicos.

Tutoriales multimedia



Permiten al usuario interactuar con la página, por lo general son en formato flash, y permiten incluir animaciones o ambientaciones que son muy agradables al usuario. Su desventaja es que ocupan mucho espacio en el sitio, y no es fácil programar tutoriales entrenadores en flash.

Tutoriales dinámicos

También suelen tener interactividad tipo multimedia, sin embargo se utilizan principalmente para programar entrenadores o visualizadores de evento, graficas o simuladores interactivos. Son mucho mas complicados de programar aunque su tamaño es similar al flash.

Técnicas para el desarrollo de tutoriales

Lo más recomendable es programar una página en formato HTML combinada con PDF y paginas Flash. Lo anterior se logra haciendo un sitio con hiperlinks en donde interactúan paginas HTML para la información general, para información de apoyo utilizar PDF, para los temas difíciles es recomendable usar una pagina en flash, y los entrenadores en javascrip (dinámicos

La forma más practica de hacer paginas HTML es utilizar el word y front page de Microsoft, los cuales están disponibles para los usuarios del office.



Programas para la enseñanza de las matemáticas

En esta unidad se presentan diferentes tipos de programas que permiten el desarrollo interactivo de estudiante utilizando programas o paquetes de software.

Tipos de programas para la enseñanza de las matemáticas

Los programas de enseñanza son básicamente de 3 tipos:

Programas entrenadores:

Un programa entrenador es un generador de ejercicios que permite capacitar o entrenar a un alumno para resolver problemas de temas específicos.

Programas evaluadores:

Un programa evaluador es un programa diseñado para aplicar exámenes en forma automática, así como también permitir una evaluación rápida y eficiente.

Sistemas expertos de enseñanza:

Estos son programas que combinan entrenadores, evaluadores, tutores y en algunos casos, sistemas de análisis de comportamiento con sistemas expertos o sabios.

Programas entrenadores y evaluadores

Básicamente, un sistema entrenador consiste en un generador de problemas, un revolvedor, un evaluador y una interfase de usuario, en ocasiones incluye analizadores de comportamiento que supervisan al usuario en su entrenamiento.

Son relativamente simples de programar en lenguajes como Java, Pascal o C. Son excelentes para enseñar problemas en los cuales los estudiantes tienen dificultades de aprendizaje.

Un programa evaluador consiste en una base de datos con problemas tipo, un selector de problemas, un evaluador y una interfase de usuario. Los más avanzados incluyen generadores de problemas y sistemas de análisis para la guía del usuario.

Estos requieren de utilizar una base de datos como internase, acces u oracle.

Programación en C, pascal o java.



Programas con sistemas expertos

Los más avanzados son los llamados tutores inteligentes los cuales son de 3 tipos:

Tutores simples:

Un tutor simple incluye tutoriales de enseñanza, entrenadores y evaluadores, un sistema simple de guía y registro de la evolución del estudiante.

Tutores expertos:

Estos son sistemas tutores simples pero que además incluyen analizadores de evolución de los estudiantes, incluyen sistemas que resuelven paso a paso los problemas y permiten evaluar paso a paso la solución del estudiante. Suelen incluir sistemas de consejo para mejorar la eficiencia de aprendizaje del estudiante.

Tutores sabios:

Los tutores sabios son tutores expertos que incluyen programas que evolucionan sus datos o sus consejeros de acuerdo a las necesidades de los usuarios.



Primer vistazo a FlashMX

Hola y bienvenidos. Vamos a enseñarles a utilizar a nivel básico y completo Macromedia Flash MX, que como todos saben, es un programa donde podemos desarrollar desde una simple animación hasta un sitio completo interactuando con una base de datos.

Cuando Macromedia armó la versión MX, pensó "unificar" el sistema de interfaces de los programas, por eso cuando vean Dreamweaver MX, Flash MX y Fireworks MX, nos vamos a encontrar con una interfase igual para todos, obviamente con algunas características correspondientes a cada programa.

Cuando abrimos Macromedia Flash MX nos encontramos con la siguiente pantalla:

Veamos con detalles las secciones:



Barra de propiedades, parte inferior de la ventana principal.

Al margen izquierdo vemos que es un documento si guardar, por eso nos dice Sin Título, luego tenemos para poder configurar, el tamaño, el color de fondo, la velocidad de fotogramas o frames por segundos (FPS) y para la exportación la opción publicar. Veamos:

Si hacemos clic en tamaño:

Esta ventana -aquellos que vienen de versiones anteriores ya la conocen-, nos pide los datos de tamaño de nuestra película, color de fondo, la velocidad de fotogramas por segundo, qué tipo de reglas deseamos utilizar, para web, utilicemos Píxeles.

Coincidir con impresora, significa que nos adapta el documento para una buena impresión (en caso de bocetos por ejemplo).

Coincidir con contenidos, nos adapta el lienzo o el fondo con los objetos que tenemos y si sobra espacio lo elimina.

Transformar en predeterminado, una vez que tenemos todo formateado y pensamos que va a hacer siempre de esa manera, tomamos esta opción y la dejamos predeterminada y cada vez que tengamos un archivo nuevo va a abrir con las características predeterminadas.

Predeterminada, es pedir que nos coloque lo predeterminado, por si cambiamos y no es lo deseado.

Si hacemos clic en publicar:



Tenemos las propiedades del archivo swf, que va a ser el archivo que utilizamos para incorporar en un html para uso web. Le decimos que tipo de plugin queremos para la exportación, es decir, que plugin como mínimo tiene que tener el usuario que ve nuestra película desde la web. Tengamos en cuenta que si utilizamos cosas propias del MX y que no existía en la versión 5 y colocamos el player para el 5, no se va poder ver en forma correcta ya que no corresponde el 5 para el MX.

También tenemos la opción muy importante de proteger el archivo para la importación, todos sabemos que el archivo swf una vez que vemos una página con esta tecnología, bajan a nuestros archivos temporales de Internet, entonces si queremos los podemos tener como ejemplos, pero acuérdense que si están protegidos no se pueden abrir con el Flash MX.

En el caso que puedan abrirlo, no se hagan ilusiones, solo van a poder ver una gran capa llena de fotogramas pero no van a ver ninguna acción ni clip de películas, solo imágenes. A continuación les muestro el cuadro de colores rgb (red, green and blue) que nos muestra cuando pedimos color.

Línea de tiempo y sus capas:



Como podemos ver tenemos un ojo, un candado y un cuadrado: el ojo sirve para ocultar la capa cuando no deseamos verla, el candado para bloquear la capa y el cuadrado para ver solo los contornos de los elementos colocados en cada capa correspondiente al color que vemos que tiene cada una. Donde vemos el mouse dice "insertar capa", haciendo clic ahí, agregamos las capas que necesitemos y haciendo doble clic en la palabra Capa, nos da lugar editable para poder cambiar el nombre a la capa. Del otro lado del icono "insertar capa" tenemos un icono con forma de tachito de basura: es para borrar, eliminar la capa que ya no necesitamos. La seleccionamos y hacemos clic en el tachito.



Un ejemplo de edición

Llegó el momento: ahora vamos a seleccionar un círculo y le damos cualquier color, por ejemplo, le he dado el verde.



Si hacemos un clic en el centro, seleccionamos el relleno. (Ver imagen arriba)

Si hacemos doble clic en el centro, seleccionamos el relleno y el contorno.

Si hacemos clic en el contorno, seleccionamos el contorno solamente.

Ahora realizamos en un archivo nuevo, en vez de un círculo un cuadrado:



Realicemos los pasos que les indiqué mas arriba y van a notar alguna diferencia cuando hagan un clic en el contorno.

Un cuadrado, tiene un contorno compuesto por cuatro lados, no como en el círculo que tiene un contorno único, no existen vértices que dividan en el círculo pero sí en el cuadrado. Entonces hacemos doble clic en el contorno y seleccionamos todos los contornos a la vez.

Observemos en las opciones de la barra de herramientas, cuando seleccionamos rectángulo, encontramos un solo icono, hagamos clic ahí, aparece la siguiente pantalla:

Ahora nos vamos a dedicarnos a utilizar la herramienta pluma de dibujo:



Hacemos clic en los vértices a unir y vamos formando la figura de deseamos, para cerrar la figura me apoyo con la herramienta en el primer "nodo" y hacemos clic en el.

Automáticamente se nos va a pintar del color que tengamos formateado en la barra de herramientas o en la barra de propiedades con sólido. Tomando el tachito de pintura para rellenar sólidos podemos elegir color y hacemos clic dentro de la figura y listo.

Si nos acercamos con el mouse, seleccionada la flecha negra, la de selección principal, a un contorno, vamos a ver que en la punta inferior del mouse nos va a mostrar una curva y si nos acercamos a una esquina un ángulo recto.



Entonces ahora, sin llegar a tocar el contorno, hacemos clic con el mouse y arrastramos el contorno haciéndolo curvo:

Llevemos el mouse al vértice de esta figura, elijamos cualquiera:

¡Estiremos como hicimos anteriormente y nos llevaremos la punta a donde nos guste!:



Ahora comencemos a jugar y a distorsionar un poco la figura:

Verán que les estoy mostrando como poder seleccionar el contorno y luego darle la textura que uno desee, línea recta, o sólida, de puntos, etc.

¿Y cómo van hasta ahora?

Guardamos este archivo y vamos a crear uno nuevo, en el van a colocar un círculo y van a pintarlo con un degradado.



Luego seleccionamos la herramienta TRANSFORMAR RELLENO DE DEGRADADO como muestro al principio de este tutorial. (La figura no tiene que estar seleccionada).

? Primero: dibujo el círculo

? Segundo: la pinto con el degradado

? Tercero: No selecciono el círculo.

? Cuarto: Selecciono la herramienta antes mencionada.

? Quinto: Hago clic en el círculo y nos vamos a encontrar con:

Como pueden observar tenemos cuatro íconos, un círculo central (nos representa el medio del degradado), un cuadrado chico y dos círculos más, les detallo lo que realiza cada uno:

Distorsionar



Escalar, más grande o más chico.

Rotar

Para armar un degradado a nuestro gusto, y no los predeterminados, tenemos que buscar la opción MEZCLADOR DE COLOR que está en el menú WINDOWS o VENTANA.

Nos encontramos con la siguiente ventana:



Pantalla 1

Pantalla 2

Pantalla 3



Pantalla 4

\

Pantalla 5

Vamos por pasos: primero abro la ventana como dije anteriormente, luego puedo agregar solapitas para colocar mas colores con un simple clic en la barra de las solapas (2), hago clic en la muestra de color al lado del combo donde elijo, lineal o radial y así cambio el color a la solapa que ya estaba seleccionaba obviamente.(3,4). En la altura del nombre de la ventana MEZCLADOR DE COLORES, tengo un icono que indica como un "menú", elijan en el menú, guardar color y listo, queda, agregado en el demo de colores como les muestro en (5). Pero solo queda para este documento, para un nuevo documento vuelve a los colores predeterminados.



Fuentes incorporadas y fuentes de dispositivo

Bien, ¿Cómo les ha ido? Ahora vamos a continuar con texto: en la barra de herramientas seleccionamos el icono para tipografía:

Cuando escribimos, podemos fijarnos en la barra de propiedades las opciones que tenemos para los cambios necesarios como ser: tipo de fuente, tamaño, color, estilo, alineación, si va ir vinculado, lista, tabulación, etc.

Si presionamos la opción Formato..., se les abre la siguiente ventana:



Este icono nos ayuda a colocar el texto en forma horizontal o vertical, de derecha a izquierda o de izquierda a derecha.

Los campos de texto estáticos muestran texto cuyos caracteres no se modifican de forma dinámica.

Los cuadros de texto dinámicos muestran texto que se actualiza de forma dinámica, como resultados deportivos, cotizaciones de valores o información meteorológica.

Los campos de texto de entrada permiten a los usuarios introducir texto en formularios o encuestas.

" ... Fuentes incorporadas y fuentes de dispositivo:

Si se utiliza una fuente instalada en el sistema en una película Flash, Flash incorpora la información de la fuente en el archivo SWF de Flash, lo que garantiza la correcta visualización de la fuente en Flash Player. No todas las fuentes visualizadas en Flash pueden exportarse con una película. Para verificar que una fuente se puede exportar, utilice el comando Ver > Suavizar texto para previsualizar el texto; si el tipo aparece dentado, se debe a que Flash no reconoce el contorno de esa fuente y por tanto no exportará el texto.

En Flash, puede utilizar fuentes especiales denominadas fuentes de dispositivo como alternativa a la incorporación de información de fuente (sólo para texto horizontal). Las fuentes de dispositivo no se incorporan a los archivos SWF de Flash. En lugar de ello, Flash Player utiliza la fuente disponible en el equipo local más parecida a la fuente de dispositivo. Como la información de la fuente de dispositivo no está incorporada, la utilización de este tipo de fuentes reduce en cierta forma el tamaño del archivo de la película Flash. Además, estas fuentes pueden ser más nítidas y más legibles que las incorporadas con tamaños en puntos pequeños (por debajo de los 10 puntos). Sin embargo, al no estar incorporadas, si el usuario no tiene la fuente correspondiente instalada en su sistema, el aspecto del texto puede ser diferente al esperado.

Flash incluye tres fuentes de dispositivo, denominadas _sans (similar a la Helvética o Arial), _serif (similar a la Times Roman) y _typewriter (similar a la Courier). Para especificar una fuente como fuente de dispositivo, seleccione una de las fuentes de dispositivo de Flash en el inspector de propiedades. Durante la reproducción de la película, Flash selecciona la primera fuente de dispositivo ubicada en el sistema del usuario. Se puede especificar que el texto escrito en una fuente de dispositivo sea seléccionable, de manera que los usuarios puedan copiar el texto que aparece en la película...." (Manual oficial de Macromedia)

Primer movimiento

Abramos Macromedia Flash MX.

Vamos a la capa 1 y la llamamos círculo.

Nos vamos a posicionar en el fotograma 15 y vamos a insertarles frames. (Botón derecho).



Dibujemos un círculo.

En el fotograma 1 con el botón derecho seleccionemos la opción "crear interpolación de movimiento" o "create motion tween".

Nos posicionamos en el fotograma 15 y con la herramienta flecha, movemos el círculo hacia otro lado del escenario.

Los puntos negros que estamos observando se llaman Keyframes o Fotogramas claves, estos sirven para indicarle por medio de la línea de tiempo donde va a ver una orden, de tamaño, de ubicación, algún efecto, etc.

La capa, si pueden observar, cambia de color, de gris que significa que tiene un elemento en escena, cambia al color lavanda.

Les recomiendo que practiquen mucho este simple movimiento hasta que les resulte por "inercia".

Esta es la barra de propiedades de un fotograma o frame:

Por ahora les voy a explicar lo elemental para esta interpolación:

Podemos pedirle que gire en sentido de las agujas del reloj, o en contra de las agujas del reloj, y tenemos que indicarle cuantas veces entre punto y punto. (Keyframes o fotograma clave).

Borrar o Erase significa la aceleración del movimiento, si colocamos in o out, afuera o adentro, van a notar que el movimiento comienza mas o menos acelerado y no es parejo en todos los fotogramas.

Tenemos la posibilidad de colocar efectos: vamos al fotograma 1 y seleccionamos el círculo, se nos va a habilitar la barra de propiedades del gráfico, veamos un ejemplo.



Veamos la barra de propiedades del círculo:

Encontramos el combo Color donde desde ahí podemos darle el cambio, el efecto que deseamos en el círculo, en mi caso, en el ejemplo le di Alfa (opacidad) 0% en el fotograma 15.

Resumiendo:

Me posiciono en el fotograma 15 y selecciono la imagen.

En la barra de propiedades selecciono Color y elijo Alfa, ahí le designo 0%

Enter y pruebo.

También podemos incluir efectos no en las zonas de partida y llegada sino en el medio del trayecto del círculo, simplemente colocamos un keyframe o fotograma clave (porque le vamos a dar una orden, un cambio) y selecciono la imagen y repito los pasos mencionados anteriormente.

En el ejemplo que pueden observar a continuación, vemos que en el fotograma 6, coloqué un fotograma clave y a la imagen la escalé, la agrandé (botón derecho escalar, cale), y le sume "tinta" que podemos encontrar en el combo color donde esta Alfa.



Por esta semana creo que tienen bastante por practicar, les recomiendo que realicen muchas interpolaciones para tener bien claro como realizarlas, para poder seguir adelante.



Interpolación de movimientos

¿Han podido practicar interpolación de movimiento?

Si se dieron cuenta, hemos movido objetos pero siempre en línea recta, por eso tenemos una opción que es: agregar la capa guía, nos sirve para poder dibujar la ruta que deseamos que recorra el objeto.

Interpolación de movimientos

En primer lugar van a dibujar un triángulo como les muestro en el ejemplo, nos posicionamos en el fotograma 1 y con botón derecho le damos crear interpolación de movimiento, nos paramos en el fotograma que deseamos, veinte o treinta y lo movemos de lugar, de esa manera, movemos de un lado a otro en línea recta al objeto triángulo.

Seleccionamos la capa del triángulo y hacemos clic en el icono que tenemos al lado de agregar capa, que es agregar capa guía y en esa capa dibujamos el recorrido que deseamos.

1) hacemos el recorrido lineal del triángulo:

2) Nos situamos y hacemos clic en el icono para la capa guía:



3) En la capa guía dibujamos la ruta que deseamos:

4) Nos falta por último colocar el punto de inicio, y el de llegada, colocándonos en el último fotograma clave el punto de llegada.

Cabe destacar que para todo esto que hemos aprendido, podemos colocarle efectos de color, alfa, escalar el objeto, achicarlo, rotarlo, etc.

Interpolación de forma o shape

Hasta ahora hemos utilizado el movimiento para un mismo objeto, existe la interpolación de forma que es un movimiento para dos o más elementos.

Veamos un ejemplo básico:

Colocamos un círculo en la capa 1.



Nos posicionamos en el fotograma 20.

Colocamos un fotograma clave.

Borramos en el fotograma 20 el círculo.

Dibujamos un cuadrado.

Nos posicionamos en el fotograma 1 y en la barra de propiedades le indicamos que es una interpolación de forma.

Presionan Enter y prueben.



Bien, ahora podemos colocarnos en el fotograma 10 y colocar un fotograma clave, ahí, borramos la figura que existe y colocamos un triángulo con un degradado.

De esta manera pueden ver que pueden interactuar más de dos objetos, también pueden cambiarles el color, el tamaño, pueden rotarlos, etc.

Lo que puede suceder es que no nos guste como realiza el movimiento, por eso, lo que vamos a colocar son "puntos de unión", veamos el siguiente ejemplo:

Una vez colocada la interpolación de forma:

Seleccionamos la figura del fotograma 1.

Buscamos la opción Forma en Modificar.

Elegimos Añadir Pista de Forma.



Vamos a ver que en el objeto uno (seguimos parados en el fotograma 1) aparece un círculo colorado con la letra a, estos puntos o pistas, lo que hacen es buscarse entre sí, y siempre trabajan con los bordes de las formas, por eso, al punto a, lo llevamos hacia un costado.

Ahora nos toca ir al último fotograma y vamos a encontrar el punto a de esa forma también, así en la interpolación, punto a busca punto a, y de esa manera vamos realizando la forma a nuestro gusto.

Si nos posicionamos en el punto a de la primer forma, es decir, en el primer fotograma y hacemos clic en el botón derecho de nuestro mouse, aparece un breve menú donde podemos elegir si queremos mas puntos, borrar ese punto en especial o todos en el caso de tener muchos puntos o pistas de forma.



Van incrementando en forma alfabética, a, b, c, etc.

Si están bien colocados los puntos, de colorado cambian, en la primera figura son de color amarillo y en la segunda forma, cambian a color verde.

Práctica para la semana que viene en resumen:

Guiar interpolaciones de movimiento, dándoles efectos de color, alfa, etc.

Crear interpolaciones de forma y agregarle luego más de un consejo de forma o pistas de forma para darle una forma más interesante.



Construcción de un site

Hoy vamos a armar un sitio completo

En primer lugar debo explicarles que existen tres elementos muy importantes para Flash, el gráfico, el botón, y a mi consideración el más importante el clip de película.

Con estos elementos podemos desarrollar un sitio básico en Flash sin ningún inconveniente.

Cuando realizamos una interpolación de movimiento automáticamente de la manera que les enseñé anteriormente, en la biblioteca (F11 o Control + L) agrega un elemento "gráfico" llamado ANIMAR si esta el programa en español o "tween" si está en inglés. Es decir, están aprendiendo una manera mas rápida de realizar este movimiento que como dice en los manuales que pueden encontrar en la net.

Carrusel es un gráfico que está importado a la película es conveniente que sea JPG o GIF por el peso y ya en su tamaño real para la película Flash.

Veamos el ejemplo: esta es la biblioteca de una interpolación de movimiento si dibujo un círculo, hago que se mueva hasta donde quiero, pedimos biblioteca y vemos lo siguiente:



En cambio para la interpolación de forma, no tiene que estar en biblioteca, por eso cuando terminamos de hacerla vemos lo siguiente:

Ante la duda, fíjense en los trabajos realizados ya por ustedes y vean sus bibliotecas.

Si necesitan realizar una interpolación de forma de un elemento que si está en la biblioteca, primero al elemento lo colocan en el escenario luego, tienen que separarlo (en el menú modificar) (Control + B) y recién ahí pueden modificar la interpolación.

¿Para qué sirve la biblioteca?: es como el vestuario de los personajes de una obra de teatro, todo se guarda ahí y se utiliza cuando es necesario, a la vez para no repetir



vectores, es decir, guarda el peso de los elementos y lo podemos utilizar las veces que deseamos que son como "accesos directos" busca la información del elemento a la biblioteca y lo reproduce, por eso la mayoría de los desarrollos Flash son de bajo peso en kb.

Bueno, llego el momento, vamos a realizar el desarrollo web que les mostré al principio.

Vamos a realizar un nuevo archivo con las dimensiones de 790 x 400, fondo gris y le damos OK, ACEPTAR.

En el menú ventana pedimos escenas y nos tiene que abrir la siguiente ventana:

Tenemos tres íconos por debajo, el primero es DUPLICAR, luego AGREGAR, y el último BORRAR.

Hacemos doble clic en la frase Escena 1 y la llamamos principal.

Ahora vamos a las capas:

La primera la llamaremos Acciones, luego texto fijo, texto de bienvenida y botonera al final.

Hasta ahora tenemos armado la primera escena llamada principal con las capas con su nombre, ahora a todas le damos 25 fotogramas.



El texto fijo es la frase Página de colores, separada sin relleno y con borde, y la palabra contacto en forma texto sin nada en especial. A esta capa a partir del fotograma 8 creo una interpolación de movimiento desde alfa 0 a 100% en el fotograma 25, la frase en el mismo lugar, efecto de "aparición" en escena.

Texto de bienvenida, a partir del fotograma 1 aparece con una interpolación de movimiento con efecto alfa igual que el texto fijo.

Bienvenido a nuestro sitio de colores.....lo tienen en el ejemplo para copiar.

A partir del fotograma 18 coloco los botones que los pueden sacar en el menú Ventana > bibliotecas comunes > botones Óvalos.

Colocamos uno debajo del otro siempre en la capa botones y vemos que ya están listos, si se fijan en la biblioteca de la película, ya se agregan en forma automáticamente con la carpeta que contiene sus gráficos.

En la capa acciones colocamos un fotograma clave en el nº25 y seleccionando en el fotograma 25 presionamos F9, llamamos a la ventana de acciones.

Seleccionamos en la carpeta acciones que podemos ver, en película y dragueamos o hacemos doble clic en la acción que vemos llamada STOP.



El stop significa que la película se va a reproducir hasta el número 25 y encuentra en la línea de tiempo un STOP, por eso se detiene así el navegante puede sin ningún problema comenzar a navegar, más adelante vamos a colocarle las acciones a los botones para que poder realizar la navegación del sitio.

El fotograma 25 de la capa acciones debe tener ahora una "a".

Ahora una vez terminada la escena principal abrimos la ventana escenas, fíjense que capaz ya les quedó abierta.

Vamos a duplicar la escena principal y vamos a colocarle el nombre de rojo.



En esta escena vamos a seleccionar todos los fotogramas desde el 1 al 24 de todas las capas y vamos a pedir el menú del botón derecho posicionado en todos los fotogramas seleccionados y le decimos, eliminar fotogramas.

Nos va a quedar la escena roja con un solo fotograma para todas las capas.

Bien, una vez borrado todo, vamos a borrar la capa texto de bienvenida ya que aquí no nos hace falta y vamos a colocar una nueva dibujando en ella un rectángulo, con opciones a redondear las puntas (le dí 15) y como ven en el ejemplo dibujen un rectángulo sin relleno con filete o contorno de 4 px. Color rojo, la llamaremos marco rojo.



También vamos a crear una capa nueva llamada texto rojo y escriben, Escena roja, segunda escena de la película.

Vamos a realizar un botón que diga principal, solo texto y en el área activa le dibujamos un cuadrado así nos toma todo el vector.

Entonces realicemos nuestro primer botón:

Vayamos al menú insertar > insertar nuevo símbolo y nos aparece la siguiente ventana:

Vamos a seleccionar botón y en nombre colocamos principal, damos aceptar, entramos en la edición del botón:



Se nos presenta tres eventos del mouse:

? Reposo: cuando el botón esta tranquilo, sin ningún cursor encima.

? Sobre: cuando pasamos el mouse por arriba del botón, sin hacer clic.

? Presionado: en el momento justo que hacemos clic pero no soltamos.

? Zona activa: es un elemento invisible ahí colocamos el marco sólido, donde queremos que haya "manito" para que el usuario entienda que se trata de un botón.

Tratemos ya en reposo que cuando escribimos la palabra principal, por medio de la ventana alinear decirle que con respecto a la escena este centrado en sentido vertical y horizontal.

Cuando ya hemos terminado con reposo, insertamos en sobre un fotograma clave y ahí le colocamos algún cambio de color o lo dejamos así.

Repetimos este paso también para Presionado y cuando llegamos a Zona activa, dibujamos un rectángulo para definir el área sensible para presionar el botón.



Bien, ahora volvamos a la escena rojo donde estábamos, fíjense que donde está marcado en la imagen de arriba, nos indica: están en principal, que es un botón, puede ir a Escena 1 solo con hacer clic en la frase Escena 1.

Cuando están en la escena el objeto botón esta en la biblioteca (F11) y lo arrastran o draguean hacia la escena, puede estar en la capa botonera.

Ahora por medio de la ventana escena nos vamos a la escena principal y nos posicionamos en el botón rojo.

Entonces hacemos clic NO DOBLE CLICK PORQUE SINO ENTRAN DE NUEVO EN LA EDICIÓN DEL BOTÓN, ¡ATENTOS! y presionamos F9 para pedir Acciones.

Vamos a utilizar la acción GOTO:

Entonces dragueamos la acción goto que se encuentra en Acciones, Control de película y en Escena ponemos rojo (fíjense que al final del campo para escribir tenemos una flecha



para elegir la escena que ya las reconoce. En tipo dejamos Número de fotograma y en fotograma le decimos 1.

Ahora hacemos clic ahí mismo en la línea 1 del actionscript donde dice on:

Nos da a elegir los eventos del mouse, cuando el usuario:

? presione.

? libere (suelte el clic)

? liberar afuera

? presiona la tecla "x" (cualquiera que le digamos)

? situar sobre objeto: rollover, cuando el mouse para por arriba del botón.

? situar fuera del objeto: rollout.

? arrastrar sobre (dragueo, llevarnos el botón por cualquier parte)

? arrastrar fuera

Nosotros por defecto dejamos release, ósea, liberar.

Ahora ustedes van a duplicar la escena roja para crear la azul, verde y naranja, cambiando los marcos de color y el texto para identificarlos luego.

Vuelven a la escena principal y le van a dar las acciones a los botones correspondientes a cada escena menos al botón amarillo que es para "contacto" a ese botón le vamos a dar la siguiente acción:



getURL, la pueden encontrar en acciones > Navegador/Red. Esta acción siempre le pide a flash que salta a navegar por la red, a algo "externo que este swf" como para el correo como para hacer funcionar un javascript como un vínculo a otra página de internet.

En el campo URL escriben sin dejar ningún espacio: mailto:[email protected]. ¡Listo!, de esta manera este botón va a pedir el correo predeterminado de cada usuario y le abrirá ya con el destinatario que es el email que nosotros colocamos, es decir, el que va a recibir el email que envíen desde la página.

Ahora nos vamos al botón que van a crear que dirá "lo invitamos a mage & Art." (no se olviden de la zona activa, hacer un rectángulo sino nos toma los sólidos de la tipografía y la "manito" de vínculo, no estaría siempre).

Vamos a darle la acción getURL y en URL van a colocar la dirección completa de la página agregando antes el prefijo http://

Veamos el ejemplo:

En ventana colocamos _blank que significa en una ventana nueva, y listo también este botón.

Recuerden que todavía seguimos en la escena principal, así que vamos a hacer clic en la capa botonera y se nos van a seleccionar todos los botones, los vamos a copiar (control + C) y nos vamos a cada una de las escenas y borramos los botones que tenemos y pegamos



los que tenemos grabados en la memoria en el mismo lugar de donde los copiamos, para eso en vez de hacer un simple pegar (control + V) vamos a pegar in situ, en contexto, en el mismo lugar y eso es con las teclas (control + Shift + V) o ir a menú edición > pegar in situ.

De esa manera tenemos ya todos los botones con todas las acciones en todas las escenas.

Al botón principal, vamos a incorporarle un sonido para que esté más divertida, así que: seleccionamos menú ventana, bibliotecas comunes y seleccionamos Sonidos.

Elegimos cualquiera, yo elegí este:

Pueden probarlos con el play que pueden ver arriba de la secuencia de sonido que muestra la biblioteca.

Vamos a nuestra biblioteca y hacemos doble clic en la visualización del botón principal y entramos en la edición del mismo, agreguemos una capa más que diga sonido y vamos a insertar un fotograma clave en los tres eventos del mouse.

Nos posicionamos en sobre y ahí arrastramos el sonido al escenario, no al fotograma, como si fuera una imagen.

nos tiene que quedar de esta manera:



volvemos a cualquier escena y como lo hemos cambiado desde la biblioteca, ya esta arreglado en todos los lugares donde se repita este botón.

Para probar la película vayan al menú control > probar película.

Para cerrar, vayan a la x de cerrar no la del programa si a la de la ventana.

desarrollo del software didáctico informático -...

Documents