POSIBILIDADES DIDÁCTICAS DEL FLASH PARA LA …age.ieg.csic.es/secundaria/Material III Seminario web...
Transcript of POSIBILIDADES DIDÁCTICAS DEL FLASH PARA LA …age.ieg.csic.es/secundaria/Material III Seminario web...
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
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
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).