POSIBILIDADES POSIBILIDADES DIDÁCTICAS DEL FLASH DIDÁCTICAS DEL FLASH PARA LA ENSEÑANZA DE PARA LA ENSEÑANZA DE

LA GEOGRAFÍALA GEOGRAFÍA

Prof. Isaac Buzo SánchezProf. Isaac Buzo SánchezIES Extremadura (Montijo)IES Extremadura (Montijo)

III SEMINARIO SOBRE LA ENSEÑANZA DE LA III SEMINARIO SOBRE LA ENSEÑANZA DE LA GEOGRAFÍA EN LA EDUCACIÓN SECUNDARIA.GEOGRAFÍA EN LA EDUCACIÓN SECUNDARIA.

Universidad Carlos III, Getafe, 9, 10 y 11 de Octubre 2010Universidad Carlos III, Getafe, 9, 10 y 11 de Octubre 2010

PARTAMOS DE NUESTROS PARTAMOS DE NUESTROS ALUMNOS...ALUMNOS...

¿SI EN LOS MOMENTOS DE OCIO Y TIEMPO LIBRE LOS ALUMNOS PRACTICAN

VIDEOJUEGOS Y NAVEGAN POR LA RED USANDO....

* LECTURA EN TRES DIMENSIONES (HIPERENLACES)* LECTURA EN TRES DIMENSIONES (HIPERENLACES) * GRÁFICOS ESPECTACULARES ES SUS VIDEOJUEGOS (PSP, WII...)* GRÁFICOS ESPECTACULARES ES SUS VIDEOJUEGOS (PSP, WII...) * INTERACTIVIDAD Y MOVIMIENTOS COMPULSIVOS.* INTERACTIVIDAD Y MOVIMIENTOS COMPULSIVOS. * BUSQUEDA DE LA INMEDIATEZ (SI NO ES LO QUE BUSCO, LO * BUSQUEDA DE LA INMEDIATEZ (SI NO ES LO QUE BUSCO, LO CIERRO...CIERRO...))

...PRETENDEMOS SEGUIR ENSEÑANDO A ...PRETENDEMOS SEGUIR ENSEÑANDO A PARTIR DE LECTURAS PLANAS E IMÁGENES PARTIR DE LECTURAS PLANAS E IMÁGENES

ESTÁTICAS? ESTÁTICAS?

PARA EMPEZAR... PARA EMPEZAR... ALGUNOS EJEMPLOS DE ANIMACIÓN FLASHALGUNOS EJEMPLOS DE ANIMACIÓN FLASH

ENJUTO MOJAMUTOENJUTO MOJAMUTO

LA NIÑA REPELENTELA NIÑA REPELENTE

CALICO ELECTRÓNICOCALICO ELECTRÓNICO

Mas series:http://seriesflash.com

¿Qué nos ofrece Flash?¿Qué nos ofrece Flash?

1) Multimedia (gráficos, video, sonido...)1) Multimedia (gráficos, video, sonido...)2) Movimiento2) Movimiento3) Interactividad3) Interactividad4) Diferentes grados profundización de la información4) Diferentes grados profundización de la información5) Información tridimensional5) Información tridimensional6) Y todo ello con archivos de bajo peso y rápidos de 6) Y todo ello con archivos de bajo peso y rápidos de usarusar

¿No es eso lo que nuestros alumnos practican en su tiempo de ocio?

Ventajas de usar FlashVentajas de usar Flash

Se generan archivos Se generan archivos con con pocopoco peso relativo peso relativo

Se pueden integrar Se pueden integrar archivos multimedia archivos multimedia (imagen+video+texto(imagen+video+texto+sonido...) en muchos +sonido...) en muchos

formatosformatos

Reproducción Reproducción multiplataforma y multiplataforma y

navegadoresnavegadores

Facilidad de Facilidad de integración en htmlintegración en html

Diversidad de Diversidad de aplicaciones: diseño web, aplicaciones: diseño web,

cd, animación, tratamiento de cd, animación, tratamiento de video...video...

Sistema relativamente Sistema relativamente seguro (ante la posibilidad de seguro (ante la posibilidad de

copia y manipulación)copia y manipulación)

Rápida transmisión por Rápida transmisión por InternetInternet

Ventajas de usar FlashVentajas de usar Flash

Se generan archivos Se generan archivos con poco peso relativocon poco peso relativo

- Comprensión del archivo (en una película no se guardan todos los fotogramas, sino solamente los fotogramas clave)

- Imágenes vectoriales frente a mapas bits

- Sistema de Símbolos (para evitar guardar varias veces la mima imagen)

Ventajas de usar FlashVentajas de usar Flash

Se pueden integrar Se pueden integrar archivos multimedia archivos multimedia (imagen+video+texto(imagen+video+texto+sonido...) en muchos +sonido...) en muchos

formatosformatos

EJEMPLO EXPANSIÓN ECONÓMICA SWFEJEMPLO EXPANSIÓN ECONÓMICA FLAEJEMPLO EXPANSIÓN ECONÓMICA SWF

EJEMPLO VIDEO DOLMEN

Ventajas de usar FlashVentajas de usar Flash

Reproducción Reproducción multiplataforma y multiplataforma y

navegadoresnavegadores

Ventajas de usar FlashVentajas de usar Flash

Facilidad de Facilidad de integración en htmlintegración en html

- Subir archivo swf a un servidor- Incrustarlo en la web mediante el siguiente código:

<td><object height="tamaño" width="tamaño"> <param name="movie" value="http://direccióndelarchivo.swf"> <embed src="http://direccióndelarchivo.swf" height="tamaño" width="tamaño"></object></td>

Ventajas de usar FlashVentajas de usar Flash

Diversidad de Diversidad de aplicaciones: diseño web, aplicaciones: diseño web,

cd, animación, tratamiento de cd, animación, tratamiento de video...video...

Ejemplo de web usando swf

Ejemplo de tratamiento de video

Ejemplo de infografía

Ventajas de usar FlashVentajas de usar Flash

Rápida transmisión por Rápida transmisión por InternetInternet

- Streaming (Las imágenes se van cargando por orden)- Almacenamiento en la caché del ordenador

SWF

1ª Vez que la veamos:

Descarga en el Buffer (Archivos temporales)

La animación comienza a funcionar antes de que se termine de descargarpues se va descargando por orden

Ventajas de usar FlashVentajas de usar Flash

http://www.flash-decompiler.com/

Programa para destripar un archivo swf y convertirlo en fla: Flash decompiler¿Sistema relativamente ¿Sistema relativamente

seguro (ante la posibilidad de seguro (ante la posibilidad de copia y manipulación)?copia y manipulación)?

CODIFICARCODIFICARMacromedia Flash:Macromedia Flash:

http://www.adobe.com/es/products/flash/http://www.adobe.com/es/products/flash/

DECODIFICARDECODIFICARPlugin:Plugin:

http://get.adobe.com/es/flashplayer/http://get.adobe.com/es/flashplayer/

AUTORAUTOR USUARIOUSUARIO

¿CÓMO FUNCIONA?¿CÓMO FUNCIONA?

TRANSMISIÓN TRANSMISIÓN POR LA REDPOR LA RED

¿CÓMO USAR EL FLASH?¿CÓMO USAR EL FLASH?

Quiero usar animaciones flash... ¿Qué tengo que hacer?Quiero usar animaciones flash... ¿Qué tengo que hacer?

Diseño mis propiasDiseño mis propias animacionesanimaciones

Usar animaciones Usar animaciones flash en la redflash en la red

Aprender el uso del Aprender el uso del programaprograma

Utilizar el recursoUtilizar el recurso

Usar Usar buscadorbuscador

Elaborar recursoElaborar recurso

Compartir el Compartir el recursorecurso

Usar Usar animaciones animaciones

de sitios de sitios conocidosconocidos

GuardoGuardo(Modifico)(Modifico)

Aprender el uso del programaAprender el uso del programa

http://www.aulaclic.es/flash8/index.htm

http://formacionprofesorado.educacion.es/

http://www.isftic.mepsyd.es/formacion/materiales/34/cd/index.htm

PANIAGUA, A. (2006): Flash 8. Manual imprescindible. Ed. Anaya. Madrid.

Herramientas necesariasHerramientas necesarias

http://www.adobe.com/es/products/flash/

PARA ELABORARPARA ELABORAR PARA VISUALIZARPARA VISUALIZAR

Navegador actualizado o

Adobe flash player:http://get.adobe.com/es/flashplayer/

ARCHIVOS .flaARCHIVOS .fla PUBLICACIÓN ARCHIVOS .swfARCHIVOS .swf

Espacio de trabajoEspacio de trabajo

Espacio de trabajoEspacio de trabajo

USO DE CAPAS

USO DE FOTOGRAMAS

SÍMBOLOS

SÍMBOLOS

MOVIMIENTOS

MOVIMIENTOS

ACCIONES

ACCIONES

COMPONENTES PRINCIPALES DE LA COMPONENTES PRINCIPALES DE LA ANIMACIÓN FLASHANIMACIÓN FLASH

¿Qué elementos podemos incluir en ¿Qué elementos podemos incluir en una animación flash?una animación flash?

SONIDOSONIDOIMÁGENESIMÁGENES VIDEOVIDEOTEXTOTEXTO

SÍMBOLOSSÍMBOLOS

GRÁFICOGRÁFICO BOTÓNBOTÓN CLIP DE PELÍCULACLIP DE PELÍCULA

- Ahorran espacio (biblioteca-instancia)

- Se les puede dar órdenes (programar)

OBJETOSOBJETOS

SÍMBOLOSSÍMBOLOS

GRÁFICO: Objeto (imagen o texto) que puede modificarse en la propia línea de tiempo.

EJEMPLO SWF EJEMPLO FLA

SÍMBOLO GRÁFICOSÍMBOLO GRÁFICOSÍMBOLOSSÍMBOLOS

CLIP DE PELÍCULA: Símbolos que se modifican en su propia línea de tiempo, no en la de la animación principal

EJEMPLO SWF EJEMPLO FLA

CLÍP DE PELÍCULACLÍP DE PELÍCULASÍMBOLOSSÍMBOLOS

BOTÓN: Símbolos que sirven para que la animación responda a una orden al ser pulsados

Órdenes del botón

EJEMPLO SWF EJEMPLO FLA

BOTÓNBOTÓNSÍMBOLOSSÍMBOLOS

También se pueden utilizar para que cuando se pase el cursos por encima del botón se vea algo que normalmente no se ve... (En la instancia “sobre” se puede insertar una imagen o un texto diferente al que se ve en la instancia “reposo”, puede servir por ejemplo para nombrar partes de un todo)

Los planetas son botones y cuando se pasa el cursos por encima de ellos aparece su nombre

¿Los botones siempre llevan asociados una ¿Los botones siempre llevan asociados una acción?acción?SÍMBOLOSSÍMBOLOS

1) FOTOGRAMA A FOTOGRAMA1) FOTOGRAMA A FOTOGRAMA

Se incluyen pequeñas modificaciones de un fotograma a otro. Problema, muy lento y trabajoso.

EJEMPLO ECLIPSE EJEMPLO PUESTA SOL

MOVIMIENTOSMOVIMIENTOS

Se inserta un objeto en un fotograma inicial, se crea un fotograma clave dejando varios fotogramas intermedios y se mueve el objeto a otra posición (y/o le cambiamos su tamaño). Señalamos el fotograma inicial y seleccionamos animar movimiento en el panel propiedades, automáticamente se crea el movimiento del objeto.

EJEMPLO COORDENADAS SWF EJEMPLO COORDENADAS FLA

2) INTERPOLACIÓN DE MOVIMIENTO2) INTERPOLACIÓN DE MOVIMIENTOMOVIMIENTOSMOVIMIENTOS

Se inserta un objeto en un fotograma inicial, se crea un fotograma clave dejando varios fotogramas intermedios y se cambia la forma del objeto en el fotograma final. Señalamos el fotograma inicial y seleccionamos animar forma en el panel propiedades, automáticamente se crea el movimiento del objeto.

EJEMPLO SWF

EJEMPLO FLAEJEMPLO PRECIPITACIONES

3) INTERPOLACIÓN DE FORMA3) INTERPOLACIÓN DE FORMAMOVIMIENTOSMOVIMIENTOS

Se trata de un movimiento en el que el objeto sigue un camino marcado, (no recto como la interpolación de movimiento normal)

EJEMPLO ECLIPSE SWF

EJEMPLO ECLIPSE FLA

EJEMPLO SISTEMA SOLAR

4) ANIMACIÓN MEDIANTE CAPA GUÍA4) ANIMACIÓN MEDIANTE CAPA GUÍAMOVIMIENTOSMOVIMIENTOS

ACTIONSCRIPTACTIONSCRIPT

- Las acciones son órdenes que permite al usuario actuar con la animación (es lo que permite la interactividad).

- Estas órdenes se dan mediante un lenguaje de programación propio de Flash: Actionscript.

- Sirven para ordenar una acción al pulsar un botón o al llegar a un fotograma determinado.

- Las acciones se ordenan desde el panel Acciones (seleccionando el botón o el fotograma).

ACCIONESACCIONES

ACTIONSCRIPTACTIONSCRIPTACCIONESACCIONES

EJEMPLO SWF

EJEMPLO FLA

gotoAndPlay

ACTIONSCRIPTACTIONSCRIPTACCIONESACCIONES

gotoAndStop

EJEMPLO SWF

EJEMPLO FLA

ACTIONSCRIPTACTIONSCRIPTACCIONESACCIONES

nextFrame nextScene

EJEMPLO SWF

EJEMPLO FLA

UNIENDO TODO ESTO...UNIENDO TODO ESTO...¿QUÉ SE PUEDE HACER?¿QUÉ SE PUEDE HACER?

Y otras más en: http://www.isaacbuzo.com/flash.html

PRESENTACIÓN TRADICIONAL: con botones asociados PRESENTACIÓN TRADICIONAL: con botones asociados a las acciones de avance y retrocede página.a las acciones de avance y retrocede página.

PRESENTACIÓN CON MULTIPLES BOTONES: Al pulsar cada botón nos lleva a una pantalla diferente (Sirve para analizar imágenes)

MAPA INTERACTIVO: Cada territorio un botón asociado a la acción “ir a un número de fotograma” en el que se encuentra el nombre de ese territorio

MAPAS SENSIBLES: Botones invisibles que al pasar sobre ellos o bien nos conducen a otro fotograma (como el caso del mapa) o bien la instancia “sobre” del símbolo botón tiene un elemento visible que nos indica el nombre de ese lugar

ANIMACIONES EXPLICATIVAS: Animaciones que se inician al pulsar un botón y sirven para ilustrar algún fenómeno.

ANÁLISIS DE GRÁFICOS, MAPAS...: Al pasar el cursor sobre un punto, una línea o un área del gráfico o mapa nos aparece una información extra.

EJERCICIOS DE LOCALIZACIÓN DE PUNTOS O ELEMENTOS SOBRE UN MAPA: Los puntos a localizar son botones invisibles que cuando pasa el cursor sobre el realizan alguna acción.

VIDEOS: Se diseñan las animaciones en flash y se exportan a formato de video, pudiéndose editar posteriormente con un programa adecuado.

Subir el archivo a la RedSubir el archivo a la Red

a) Guardándolo en nuestro servidor via FTP (por ejemplo usando FileZilla

Subir el archivo a la RedSubir el archivo a la Red

b) Usar nuestro servidor usando webFTP

Subir el archivo a la RedSubir el archivo a la Red

c) Usando servidores externoshttp://megaswf.com/

Subir el archivo a la RedSubir el archivo a la Red

c) Usando servidores externoshttp://www.xooimage.com/fr/

http://img7.xooimage.com/files/4/a/8/prehistoria-211fc74.swf Ejemplo:

Usar buscadorUsar buscador

http://cprmerida.juntaextremadura.net>>Buscasdor Dis@nedu

Autores: Diego Guerrero Alonso y Santiago Ortiz DuránAsesores TIC. CPR de Mérida

Usar animaciones Usar animaciones flash en la redflash en la red

Otras lugares donde buscarOtras lugares donde buscar

Marcadores sociales: - Mister-wong (http://www.mister-wong.es)- Delicious (http://www.delicious.com)

- Periódicos: http://www.elmundo.es/graficos/multimedia/http://www.elpais.com

- Editoriales: http://www.librosvivos.net (SM)http://www.oupe.es (Oxford)http://www.digital-text.com/

- Recopilaciones de Profesores:- Juanjo Romero (http://www.juanjoromero.es) - Profesor Francisco Ayén (http://www.profesorfrancisco.es)

- Otros: http://www.consumer.es

- Profesionales del diseño gráfico: (http://www.albertocairo.com/)(http://www.90grados.info/)(http://www.5wgraphics.com/en/)

Webs de Profesores: - Jesús Peñas Cano (http://www.educaplus.org)

Otras lugares donde buscarOtras lugares donde buscar

- Recopilaciones de Profesores:

- Juanjo Romero (http://www.juanjoromero.es)- Profesor Francisco Ayén (http://www.profesorfrancisco.es)

- Otros: http://www.consumer.es

- Webs de Profesores:

- Jesús Peñas Cano (http://www.educaplus.org)- Enrique Alonso (http://www.xtec.cat/~ealonso/flash/mapasflash.htm)

Recursos del Ministerio de Educación y las Consejerías de las CC.AA.:

Proyecto Sexante: http://recursostic.educacion.es/primaria/sextante/web/ Flashes de Geografía (Carlos Gullart):

http://www.ite.educacion.es/w3/recursos/secundaria/sociales/geografia/contenido_indice.htmlContenidos educativos digitales Junta de Extremadura:

http://conteni2.educarex.es/?a=44

Guardar swfGuardar swf

A) En nuestro ordenador para usar desconectado a Internet:

1. En Firefox podemos usar un complemento que se llama “unplug” que identifica los archivos multimedia (vido, sonido, flash...) que estén insertados en una web y te da la posibilidad de descargártelo a tu ordenador.

2. También en Firefox, podemos ir al menú herramientas>>información de la página>>>medios. Ahí aparecen las direcciones de cada elemento alojado en una web, si queremos guardar el elemento presionamos “guardar como”, le damos nombre y seleccionamos la carpeta que queramos.

3. También podemos ir a ver>>código fuente y buscar el archivo swf copiar la dirección y pegar en el navegador y guardar el resultado.

Guardar swfGuardar swf

B) En nuestro ordenador para usarlo conectado a Internet:

1. Usando los marcadores del navegador (guarda la dirección web en nuestro propio ordenador, para que sea fácilmente recuperable cuando queramos usarla)

2. Usando los marcadores sociales: Herramienta colaborativa de la web 2.0 por la que los usuarios van guardando enlaces a sitios de su interés y etiquetándolos. Sería necesario abrir una cuenta en algún servicio de marcadores sociales y guardar nuestros enlaces con sus etiquetas. Cuando lo necesitemos estarán ahí almacenados (junto a los de los demás usuarios).

Y PARA FINALIZAR...Y PARA FINALIZAR...

USAR

COMPARTIR