Miguel Puente Objetivo Digital Educatico (ODE) con PowerBullet

Producción de ObjetosDigitales Educativos

con PowerBullet

Versión 9 / mayo 2012

Profesor/AutorJuan Carlos Asinsten

05- 3

Producción de Material Didáctico (2)En ambientes virtuales de aprendizaje

Objetos con PowerBullet - Objetos con PowerBullet - Objetos con PowerBullet - Objetos con PowerBullet - Objetos con PowerBullet - 2Juan Carlos AsinstenJuan Carlos AsinstenJuan Carlos AsinstenJuan Carlos AsinstenJuan Carlos Asinsten

05 - Producción de Material Didáctico (2)05 - Producción de Material Didáctico (2)05 - Producción de Material Didáctico (2)05 - Producción de Material Didáctico (2)05 - Producción de Material Didáctico (2)

Instituto de Formación Docente de Virtual EducaInstituto de Formación Docente de Virtual EducaInstituto de Formación Docente de Virtual EducaInstituto de Formación Docente de Virtual EducaInstituto de Formación Docente de Virtual Educa

CONTENIDOS

Antes de comenzar ....................................................................................... 4¿Aprender qué..? ........................................................................................................... 4¿Aprender para qué? ..................................................................................................... 5¿Aprender cómo? .......................................................................................................... 5Obtener el programa .................................................................................................... 6

Power Bullet .................................................................................................. 6Registrar Power Bullet 1.44.......................................................................................... 7Interfaz........................................................................................................................... 8Principales ventajas del programa................................................................................. 9Algunas desventajas del programa ................................................................................ 9

Estructura del proyecto ............................................................................... 10Comentarios sobre el guión........................................................................................ 11Comentario sobre la interfaz ...................................................................................... 11Menú - Túnel de inicio ................................................................................................. 12Menú - Historia / Goleta Ancud .................................................................................. 13Menú - Geografía ......................................................................................................... 14Menú - El fuerte ........................................................................................................... 15Criterios de nombres de archivos ............................................................................. 16

Pequeño ejercicio previo .............................................................................. 17

Armar el tunel inicial ................................................................................... 20Configurar el proyecto ............................................................................................... 21Crear la página 1.......................................................................................................... 23Comentario sobre botones ........................................................................................ 27Armar página 2 ............................................................................................................ 28Armar la página 3 ........................................................................................................ 29Armar la página 4 - Menú general del proyecto ......................................................... 33Una mejor estrategia ................................................................................................... 36Guardar y probar ........................................................................................................ 38Un poco de trabajo en serie ....................................................................................... 40Navegar entre páginas ................................................................................................. 40Armar la página 5 ........................................................................................................ 41Armar la página 12 ...................................................................................................... 43Armar la página 13 ...................................................................................................... 43Armar página 14 .......................................................................................................... 46Armar página 15 .......................................................................................................... 46Armar página 16 .......................................................................................................... 47Armar página 17 .......................................................................................................... 47Armar página 18 .......................................................................................................... 48

El Fuerte Bulnes .......................................................................................... 49Armar la página 19 ...................................................................................................... 50Armar página 20 .......................................................................................................... 51Armar la página 21 ...................................................................................................... 53Armar página 22 .......................................................................................................... 54Armar página 23 .......................................................................................................... 55Importante................................................................................................................... 55Armar página 24 .......................................................................................................... 56




Esta obra puede utilizarse libremente enactividades educativas, siempre que secumplan las siguientes condiciones:1) Distribuir tal cual está publicada, sinintroducir ninguna modificación2) Reconocer la autoría.3) No comercializar ni utilizar en proyectoseducativos arancelados.

Armar página 25 .......................................................................................................... 57Armar la página 26 ...................................................................................................... 57Armar página 27 .......................................................................................................... 58Armar página 28 .......................................................................................................... 59Armar página 29 .......................................................................................................... 59Armar página 30 .......................................................................................................... 59Armar página 31 .......................................................................................................... 60Armar página 34 .......................................................................................................... 61Armar página 32 .......................................................................................................... 61Armar página 33 .......................................................................................................... 61Armar la página 35 ...................................................................................................... 62

Insertar sonido ............................................................................................ 63

Transiciones y animaciones .......................................................................... 66Página 3 ........................................................................................................................ 67El resto de las páginas ................................................................................................. 67Página 2 ........................................................................................................................ 67El efecto Fade .............................................................................................................. 67Animaciones ................................................................................................................. 68

El producto final .......................................................................................... 69

Engordar PowerBullet ................................................................................. 71

Tips ............................................................................................................. 72Perder la selección ...................................................................................................... 73Una sola carpeta .......................................................................................................... 73Hacer Backup .............................................................................................................. 73Botones missing .......................................................................................................... 73Guardar ....................................................................................................................... 73Extraño buffer ............................................................................................................. 73Cuidado al pegar.......................................................................................................... 74Inestabilidad ................................................................................................................. 74JPG en Windows Vista ................................................................................................ 74Párafos en texto .......................................................................................................... 74




Antes de comenzar

Nos aprestamos a encarar la construcción de un objeto multimedia. Paramuchos será la primera oportunidad en su vida de realizar una tarea semejan-te. Queremos hacer unas reflexiones previas, que cremos serán útiles en laoportunidad.

Como docentes, sabemos que los aprendizajes incluyen una importantecuota de actitud. Actitud de querer aprender. Quien no quiere aprender,no aprende. Seguramente se lo hemos señalado muchas veces a nuestros alum-nos. La primera cuestión entonces será encarar este trabajo con la actitud deaprender.

¿Aprender qué..?Nos estamos formando como docentes para espacios virtuales. Eso signi-

fica que (lo sepamos o no) estamos cambiando nuestras pautas culturales comoprofesoras y profesores. Entre las nuevas culturas que necesitamos adquirirestá la de dominar nuevos lenguajes. Nuevos lenguajes que son parte hoyde la vida cotidiana de toda la sociedad (no sólo de nuestros alumnos).

El trabajo que encaramos ahora, en esta Unidad, no es el de aprender autilizar un software. No es ese el sentido. El sentido es aprender a escribir enotro lenguaje: el lenguaje multimedia. El aprendizaje de ese lenguaje tiene susreglas, su sintaxis, su gramática, su ortografía. Que se materializan en larealización práctica de cada objeto.

No es lo mismo cualquier fondo. No es lo mismo si un botón está coloca-do correctamente en su lugar o no. No es lo mismo si la secuencia de páginases la adecuada o no. No es lo mismo si un efecto es agradable o no.

Todos sabemos, por ejemplo, como vestirnos para dar clase en la presen-cialidad. Cuidamos nuestro aspecto. Cuidamos la forma de hablar. Cuidamosla forma de escribir.

¿Porqué no cuidar de la misma manera la forma en que escribimos en los

Carta del docente - autor




otros lenguajes? ¿Porqué no pretender que nuestros alumnos nos entiendan(más y mejor) usando otros reecursos expresivos? Señalemos, de paso, quelos recursos habituales del discurso oral presencial no los podremos usar en lamodalidad virtual...

Ese es el sentido de las actividades que comenzaremos a concretar, a ma-terializar.

¿Aprender para qué?Ya señalamos una parte de los «para qué»: adquirir competencias para es-

cribir en lenguaje multimedia.Pero más importante es que esas competencias nos ayudarán a mejorar

nuestras habilidades docentes para que también nuestros alumnos aprendan aescribir en lenguaje multimedia. Que es algo diferente y superior a utilizarcon mayor o menor habilidad programas informáticos, o participar de las re-des sociales.

¿Aprender cómo?Como dijimos más arriba, con actitud de aprender.Eso significa, en primer lugar, considerar la actividad no como una carga

sino como la oportunidad de esos aprendizajes.En segundo lugar, significa desprenderse de todos los «ésto no es para mí»,

«yo no ando bien con la tecnología» y autolimitaciones similares. Además deque no aprenden quienes no quieren, tampoco aprenden quienes creenque no pueden.

En nuestra muy larga experiencia en formación de docen-tes en el uso de TIC en la educación, hemos adquirido latotal convicción de que cualquier docente puede aprendercualquier cosa (dentro de límites razonables) si le dedica eltiempo y esfuerzo necesarios. Y, desde luego, encara el pro-ceso con la actitud adecuada.

Además de estas dos cuestiones principales, también influyen algunas con-ductas:

Es necesario trabajar despacio, con paciencia. Tratando decomprender el sentido de cada acción. Sin ansiedadespor terminar pronto.

Cuando algo no funciona como es de esperarse, volver a trásy repetir las acciones. La mayor parte de las fallas en estosaprendizajes mediante proyectos guiados paso a paso surgenpor saltearse pasos (¡ay!! la ansiedad...).

Tratar de aprender de los errores. Cuando nos equivocamos ,prestar atención a porqué cometimos ese error, para no re-petirlo. Metacognición tecnológica, si se quiere.

No es el momento depolemizar sobre los mitosde los «nativosdigitales». Pero que seanconsumidores demultimedia no significaautomáticamente quecomprendan esoslenguajes lo suficientecomo para escribircorrectamente y no sermanipulados a través delos mismos. De esto yanos alertaba Paula Freiremucho antes de Internet

Entender el sentido delas aciones (y no hacerlasmecánicamente) nosservirá para podertraspolar lo que estamoshaciendo a otrosproyectos, con otrosprogramas y objetivos.




Power Bullet

PowerBullet es un programa creado para presentaciones. Pero el hechode que el producto final se exporta en formato flash y algunas de sus presta-ciones, sumado al hecho de ser un producto gratuito, hizo que lo eli-giéramos como una opción para trabajar en la producción de peque-ños objetos para nuestras clases virtuales.

No hay muchas opciones gratuitas de este tipo de software. La mayorparte de los programas gratuitos que revisamos se limitan al armado de se-cuencias de imágenes (slideshows).

Obtener el programaEl sitio Web de los creadores del programa está en

http://www.powerbullet.com/

...pero han dejado de ofrecer la descarga del programa. Todo indica quehan abandonado el mismo. Por lo tanto el programa hay que bajarlo de lasección Archivos del aula de la materia, o de la clase respectiva

Curiosamente, la versión Plus, que en algún momento pensaron en co-mercializar, ahora la ofrecen gratuitamente, en la misma Web, donde figura elcódigo con que se activan las prestaciones extendidas.

This is the registration info to enter in order to unlock extra features -that is, upgrade to Plus in 1.44:

Name: Information Services and Technology 10

Key: 000014-4776X5-DX1HB9-VC9EPN-F3JG4Y-VK2CT3-TDFKKM-1DZZCU-MFD87W-NET9UN

Algunos antivirus dan unafalsa alarma de troyanoal instalar PowerBullet.Hemos chequeado elinstalador con variosantivirus y antitroyanosactualizados conresultados negativos.




Hay que descargar la versión 1.44 y después de instalarlo activar la ver-sión Plus. Este proceso de registro es totalmente egratuito.

Registrar Power Bullet 1.44

1

2

3

4

1

2

Una vez instalado elprograma, lo abrimos y...1) Vamos al menú Help2) Elegimos la opción

Enter registración code

1

2

3

4

1) Aparece unapantalla deregistración.

2) Se ingresa el nombre(Name). Se copia delarchivo TXT quesuministramos junto alsoftware y se pega enla casilla.

3) Hacmos lo mismo conla clave (Key).

Este usuario y clave estándisponibles también en elsitio Web del programa.

4) Completamos con elbotón Install...

Aparece una pantalla desaludo.1) Confirmamos con

Aceptar.1

1

Aparece una pantalla quenos informa que hay queresetear el programa (no lacompu)1) Confirmamos con

Aceptar.




Interfaz

Cuando abrimos el programa la primera vez, aparecerá aproximadamen-te con el siguiente aspecto:

Algunas referencias delprograma




La zona superior (no configurable) muestra las cuatro barras con todos loscontroles (los que se repiten en los menúes), comandos a los que se puedeacceder también mediante atajos de teclado, que vale la pena aprender siutilizaremos mucho el programa. Los comandos los iremos describiendo amedida que los utilicemos. Son pocos y sencillos.

Abajo se ubica la zona de trabajo y se cierra con una barra de estado coninformación sobe los objetos seleccionados.

Principales ventajas del programa

Exporta las presentaciones en formato SWF (flash), lo que per-mite su utilización con mucha libertad.

A la vez, exporta en formato flash ejecutable (exe), lo quefacilita aún más su distribución.

Por último, exporta código HTML para incrustar las presentacio-nes en sitios Web.

Incluye la inserción de botones roll-over de tres posiciones,lo que brinda una serie de posibilidades para crear efectosdinámicos.

Tiene prestaciones importantes para trabajar con imágenes.

Incluye una colección importante de efectos de animación y tran-siciones muy completa y con algún grado de configuración.

Permite insertar sonido.

Algunas desventajas del programa

No posee una herramienta específica de selección de objetos.

Se pierde la selección con mucha facilidad, lo que obliga a unpar de pasos para recuperarla. Aunque a poco de hacerlo seaprende, resulta molesto. Esto sucede sobre todo al trabajarcon textos. En este tutorial no trabajaremos con textos.

No posee página maestra.

No incluye un modo de fijar los objetos para no moverlosaccidentalmente al trabajar.

No permite ejecutar sonido a pedido. Sólo colocarlo comofondo en las páginas.

Manejo torpe de la configuración de textos.

No incluye avance automático de páginas seleccionadas. Sólose puede elegir esa opción para el conjunto del objeto.

Puede no funcionar bien en las versiones más recientes de Win-dows (Windows Vista y Seven)

Seguramente existenprogramas comerciales demejor calidad. Pero eneste posgrado utilizamossólo software gratuito o delibre distribución, demanera que todos losparticipantes estén enigualdad de condiciones.

Todos los comandos a losque se accede mediantebotones, están incluídosen los menúes delprograma. En el tutorialutilizamos los botonesporque son más sencillosde mostrar.

SolucionesEn el capítulo final (Tips) daremos indicaciones sobre los principales proble-mas y trucos para solucionarlos. Recomendamos leerlo antes de trabajar.




Estructura del proyecto

El proyecto trabaja sobre el tema de un fuerte chileno ubicado en la zonamás austral del continente, llamado Fuerte Bulnes. No pretende ser un pro-yecto educativo real, sino servir como pretexto para el aprendizaje del pro-grama y la reflexión sobre los modos expresivos del lenguaje multimedia.

El proyecto completo es demasiado extenso para el tiempo del que dis-ponemos, para los participantes más inexpertos en el uso de programas noconocidos. Por esa razón, cada participante armará la parte que se solicita enlas Asignaciones publicadas en la clase de inicio de la Unidad. Armar el restodel proyecto es optativo.

Fotografía actual (enerode 2012)




Comentarios sobre el guión

El guión tiene una estructura en árbol. Con un menú general al que sepuede regresar desde cualquier página.

La navegación entre páginas sigue la lógica del discurso. Hayalgunas que son secuenciales y otras que son opciones que elusuario final puede abrir o no.

El avance (o regreso) entre páginas se realiza mediante boto-nes ubicados en la zona inferior de la pantalla. Donde tam-bién hay un botón que lleva al menú general.

Los accesos al tercer nivel de información se hacen desde bo-tones intercalados en el texto, o porciones de imágenes queson botones.

En pocas ocasiones se accede a la misma página desde doslugares diferentes. El programa no posee la opción de regre-sar a la página de origen, por lo que hay que ser cuidado-sos con esa opción.

En los apartados destinados a la construcción de cada páginadetallaremos todos los elementos que se incluyen, y algunoscomentarios sobre los criterios de diseño.

NotaTodas las capturas de pantalla del guión fueron realizadas sobre una ver-

sión preliminar del objeto. Pueden presentar leves variantes con el demofinal que publicamos.

Comentario sobre la interfaz

La interfaz fue dise-ñada utilizando elemen-tos que remitan visual-mente a la época deconstrucción del fuerte.Madera, hierros, rema-ches. Y el color predo-minante es el sepia, queen la cultura visual se re-laciona con lo antiguo.

Regresar ala página deorigen es una opción quese usa cuando a unapágina se puede regresardesde dos o más lugaresdiferentes.

Se adapta a lo que se estádiciendo




Menú - Túnel de inicio

El comienzo del objeto está trabajado como«túnel», constituido por tres páginas consecu-tivas que llevan a la del menú.

1) La página 1contiene sólo un botón,bastante obvio, para comenzar a re-correr el objeto. Fondo negro.

2) La segunda página muestra ellogotipo del IFD.

Toda la pagina es un botón que lleva ala siguiente.

3) La tercera página contiene el título delobjeto, un botón que lleva a la páginade créditos y un botón para continuar.

4) La cuarta página es la del menú gene-ral. Los botones de la zona inferiorno tienen acciones (regresan a la mis-ma página) y cinco botones de las tan-tas secciones en que se estructura elobjeto:

Historia

Geografía

El fuerte

La zona

La goleta Ancud

1

2

3

4




Menú - Historia / Goleta Ancud

No están graficados los retor-nos. En general, van a la pági-na de origen.La goleta Ancud tiene un bo-tón en el menú general. Tam-bién se llega desde la segundapágina de historia.




Menú - Geografía

La secuencia de imágenes dela sección Geografía corres-ponden a capturas de aproxi-maciones en Google Maps (lasmismas que usamos en el vi-deo Fuerte Bulnes). Pero to-mando sólo una selección delas placas.Todas las páginas incluyen unbotón para regresar al menúgeneral. En todas menos la úl-tima hay un botón (lupa) quelleva a la siguiente página.

La placa final no tiene botón deavanzar...




Menú - El fuerte

Los links de este framese desglosan en lapágina siguiente

La imagen funciona comomenú. Hay cuatro botonesque se destacan sólo al pasarel mouse sobre ellos.




El «botón» es unafracción de texto.

Criterios de nombres de archivos

Para facilitar la carga (en la ventana se ve sólo el nombre) de los archi-vos gráficos que usaremos en el proyecto, los mismos han sido bautiza-dos de la siguiente manera:Todos tienen un prefijo numérico que corresponde al número de pá-gina en el objeto (es el mismo número que usa PowerBullet para iden-tificar cada página o frame). Por ejemplo 04-imagen.jpg es una ima-gen que se usa en la página 4.Los elementos que se usan en más de una página (algunos botones y la«madera» de la base, llevan como prefijo un doble cero (00)Las imágenes de los botones usan el prefijo de la página donde vaninsertados, y un sufijo, aplicando un criterio que nos ha sido muy útildesde hace años:

Usamos la letra a para la primera posición (reposo)

Usamos la letra b para la segunda posición (cuando elmouse pasa sobre el botón)

Usamos la letra c para la tercera posición (cuando sehace clic sobre el botón)

Así, por ejemplo, el gráfico 27-boton-b.jpg es una imagen de botónque se usa en la página 27 para la segunda posición.




Pequeño ejercicio previo

PowerBullet es un programa orientado a objetos. Eso significa que todoslos elementos que colocamos, dibujamos o editamos en su pantalla de traba-jo, son tratados como objetos individuales, que no se mezclan con los otros.

Cuando abrimos por primera vez el programa, aparece una pantalla comola que mostramos más abajo. Las imágenes que se muestran en la zona detrabajo, ilustran los efectos de degradé y transparencia en objetos dibujadosen el programa. Esas cuatro figuras son, cada una, un objeto individual, edita-ble (se puede modificar) y cambiar de posición en la pantalla y/o entre sí (cualtapa a cual).

El texto también esun objeto individual,

editable.

Usamos la palabraobjeto con dossignificados diferentes:para designar cadaelemento en el proyecto(imágenes, sonidos,textos, botones) y para elproyecto terminado, alusar la categoría deobjeto digitaleducativo.




2

1

3

Seleccionar unobjeto1) Hacemos clic sobre uno

de los objetos. elcuadrado celeste.

2) Observemos queaparecen ocho puntoscuadrados en losvértices y en los lados.Esos puntos son loscontroles de seleccióndel objeto. Si losvemos, el objeto estáseleccionado.Si los tomamos con elpuntero del mouse,podemos modificar laforma y el tamaño delobjeto.

Cambiar posiciónrelativa(Cual objeto está por sobreel otro)1) Clic sobre el botón que

manda «al fondo» alcuadrado.

Cuando trabajemos en elproyecto veremos lascuatro opciones de cambiarla posición relativa de losobjetos entre sí.

1

1

2

1

Observemos que ahora elcuadrado celeste quedópor debajo del negro, quelo tapa.




4Haciendo clic sobre elobjeto, y sin soltar elbotón principal delmouse, podemosarrastrarlo hasta otraposición de la pantalla.

Podemos cambiar cualquier otro atributo o propiedad del objeto selec-cionado:

Color del fondo

Transparencia del fondo

Color de la línea de contorno

Ancho de la línea de contorno

Tamaño de la figura

Forma de la figura

Borrarlo

EtcéteraLo más importante, en PowerBullet, es asegurarnos que nuestras acciones

se apliquen al objeto seleccionado. Cuando el fondo ocupa toda la pantalla(como será en nuestro proyecto) los puntos de selección del mismo no seven. Hay que tener cuidado con eso. Podemos probar cómo desaparecen lospuntos, arrastrando el objeto fuera de los límites de la pantalla.

Es un buen momento, ahora, para «jugar» un rato, explorando lainterfaz, moviendo objetos, dibujando figuras, etc. para ir tomandoconfianza. Es gratis, no hay peligro de equivocarnos y no engorda.




Armar el tunel inicial

Ell túnel incial lo constituyen las cuatro primeras placas. En la construcciónde las mismas aprenderemos todas las acciones básicas, por lo que es impor-tante ir presstando atención a cada paso.

Antes de comenzar

Tener instalado y registrado el programa, tal como se indicaen las páginas 6 y siguientes.

Armar una carpeta de trabajo donde colocaremos todos nues-tros materiales, que debemos bajar del aula. No se debe co-locar el material de trabajo en la misma carpeta donde el pro-grama guarda sus archivos de funcionamiento.

El archivo comprimido contiene todos los gráficos y demásrecursos para armar el proyecto completo. Son muchos ar-chivos, de los que usaremos sólo una parte si no contruimosel proyecto completo.

Programar el trabajo. No conviene realizar sesiones muy lar-gas, ya que al final se realizan muy automáticamente las ta-reas, sin consolidar el parendizaje. Tampoco sesiones muycortas, ya que no se alcanza a crear el «clima» de trabajo ne-cesario. Mínimo una hora y tratar de no pasar de cuatro.

Recomendamos imprimir este capítulo (o todo el manual) paratenerlo sobre la mesa de trabajo mientras editamos enPowerBullet.




Configurar el proyecto

3

2

1

4

Crear nuevoproyecto1) Clic sobre el botón

nuevo...

2) Aparece unaventanapara guardar...

3) Buscamos nuestracarpeta de trabajo...

4) Le damos un nombre alproyecto

5) Guardamos

3

5

2

4

Muy importanteEl programa abre en la carpeta dondeguarda sus propios archivos. No hayque guardar allí el proyecto.Usar la carpeta donde guardamos lasimágenes.

21

2

1

1

1) En la barra superioraparece el nombre delproyecto

Dimensiones de lapantalla1) Menú Project2) Layout dimensions...

En la pantalla que aparece...1) Ancho 516 px2) Alto 380 px

DimensionesEstas medidas se deben a:Ancho: es el máximo que po-demos publicar en nuestras au-las virtuales.Alto: es la proporción al redu-cir de las pantallas originales de640x480 px

0




5

6

1

Configurar laexportación1) Menú Project2) Export settings...

En la pantalla queaparece....1) Tildamos la casilla

Manual (los botones deavance y retroceso losponemos nosotros)

Dejamos el resto sin tocar.

Elprograma posee botonespropios para avanzar yretroceder de a una página.Se pueden colocar botonesrollover para esasfunciones. No usaremosesas opciones en esteproyecto.

El programa permiteestablecer avanceautomático temporizadopara pasar a la páginasiguiente. Tampocousaremos esa opción (sirvepara banners...)

Opciones de exportaciónSon las que el programa usa en

el momento de exportar el proyec-to al formato swf (flash), exe yhtml . No hemos explorado todaslas opciones, ya que usamos el pro-grama sólo para los proyectos decreación de objetos.

Ver los formatos de archivo

La computadora de un docente virtual debe estar configurada de acuer-do al tipo de tareas que debe encarar. Los diseñadores de Windows,empeñados en producir usuarios bobos, automatizan muchas cosas queno deberían ser así, y ocultan información importante para los usua-rios.Entre esos ocultamientos está la configuración por defecto de todas lasversiones de Windows que oculta las extensiones de archivo.En la Guía Didáctica en línea (aula virtual) publicamos las indicacionespara volver visibles las extensiones.




Crear la página 1

La página 1 sólo contiene el botón de iniciar el recorrido, sobre fondonegro. Nos pareció que sería mejor un diseño «de época» que un típico botónplay.

1

2

Color de fondo dela pantalla1) Menú Project2) Background color

En la pantalla que apareceelegimos el negro

Color negro, pero...Elegimos el color negro para fondo, porque sial visualizar el producto final se demora encargar algún gráfico, ese color «molestará»menos que otro.También es el color que PowerBullet usa parafondo de la página Web que crea (formatohtml)

Pero...En los navegadores, no siempre se visualizael color de fondo de los objetos flash(swf). Eso no sucede sólo con elpobrecitoPowerBullet sino también con elsuperpoderoso Adobe Flash...De manera que debemos agregar un paso.

3

1

Agregar figura defondo1) Clic sobre el botón de

agregar figurarectangular




4

7

6

5

Aparecerá un cuadradoblanco, seleccionado, en elángulo superior izquierdode la zona de trabajo.

2

1) Tomando el punto decontrol del vérticeinferior derecho con elpuntero del mouse...

2) ...lo arrastramos hastael vértice inferiorderecho de la zona detrabajo.

1) Con las flechitas delteclado corremos lafigura hasta quedesaparece el punto decontrol de la izquierda(y el de arriba, que nose ve en la captura).

2) Con el punteroagrandamos elrectángulo hasta cubrirel lado derecho y abajo

1

2

Cambiar el colorCon el recuadroseleccionado...1) Clic sobre el botón de

color de fondo defiguras

2

1




10

11

8Aparece la clásica ventanade seleccionar colores deWindows...Elegimos el negro.

Colocar el botónde inicio1) Clic sobre el botón de

insertar imagen

2) Aparece la ventana deseleccionar imagen

3) Elegimos laimagen delbotón en reposo (sufijoa). El nombre es el queaparece en la captura.

4) Clic sobre Abrir

43

3

2

Aparece la imagen delbotón en reposo en la zonade trabajo.Con la imagen seleccionada(se ven los 8 puntos),usando las flechas delteclado, corremos laimagen hasta el centro de lapantalla. Esto se hace «aojo».




12

13

14

15

1

2

2

1

3

Convertir en botónrollover1) Hacemos clic con el

botón derecho delmouse sobre la imagendel botón en reposo

2) En el menú emergente...3) Clic sobre Item rollover

effects.

1) Aparecela pantalla paracargar las otras dosimágenes del botón

2) Clic sobre Over paracargar la imagen que severá cuando el mousepase sobre el botón.

Cuando aparece la ventanade cargar la imagen,elegimos la que tiene elsufijo b, que corresponde ala posición Over (sobre)El nombre del archivo es elque aparece en la captura.

Nuevamente clic con elbotón derecho del mouse...

Repetimos la operaqciónpara la posición Down,para la que elegimos elarchivo que tiene el sufijo c(01-b-play_inicio-c.jpg)

Función del botónHacemos clic con el botónderecho sobre la imagendel botón en la pantalla.1) En el menú emergente

elegimos Item Clickaction.

Muy importanteAsegurarse que lo que esté seleccio-nado sea la imagen del botón, y noel fondo. En este y en todos los ca-sos en que armemos botones.La selección la indican los ocho pun-tos de control.




161) Aparece la pantalla de

asignar acciones albotón (lo que conviertea cualquier objeto enbotón, tenga o noconfiguración rollover)

2) Tildamos el botón deradio Go to page... (ira página).

3) Escribimos enl a casillael número dela páginasiguiente (2). No elegirde la lista...

4) Clic sobre OK..

Es importante tildarla casilla. No seseleccionaautomáticamente alllenar el número depágina de destino,como hacen la mayorparte de losprogramas deWindows

3

1

2

4

Comentario sobre botones

Para PowerBullet botón es cualquier objeto al que se le asigna unaacción «de clic». Pero la acción de establecer una acción para elbotón no es reversible. Lo que significa que, si por error tenemosseleccionado el fondo u otro objeto, y lo convertimos en botón, no haymodo de volver atrás. Deberemos borrar el objeto convertido erró-neamente en botón y volverlo a insertar.

No hemos experimentado con otras acciones del botón. Pero nor-malmente los player de flash no permiten ejecutar acciones fuera de laWeb de origen, para evitar que se inserte código malicioso en los obje-tos flash.

Antes de abandonar la página 1Después de terminar con el botón, seleccionamos el recuadro negro de

fondo y lo copiamos, con el botón copy.

GuardarConviene guardar al terminar cada página, o parte de ella, cuando

hay muchos elementos.




1

Armar página 2

La página 2 contiene sólo el logotipo del IFD sobre fondo negro.

Clic sobre el botón deagregar una página.

2

Las páginas nuevas se agregan siempre a continuación de laque está abierta en el momento de crearlas.

Clic sobre el botón depegar, para insertar elrecuadro negro quecopiamos de la página 1

3

Elpegado se hace exactamente en la misma posición que elobjeto copiado tenía en la página de origen.

Clic sobre el botón deinsertar imagen

4

5

Seleccionamos el archivo02-logo3D-ve.jpg

Mediante las felchitas delteclado lo acomodamos enel centro de la pantalla (másespacio arriba que abajo,para equilibrar)




6

7

21

1) Clic con el botónderecho del mousesobre la imagen.

2) En el menú emergenteseleccionamos ItemClick Action

Sin rolloverEn este caso, al ser la ima-gen de tamaño grande, y elúnico elemento en la panta-lla, no es necesario que use-mos imágenes para el efec-to rollover.Convertimos directamentela imagen en botón, al asig-narle una acción.

1) Seleccionamos el botónde radio Go to page...

2) Colocamos el númerode la página siguiente(3)

3) Clic sobre OK

Armar la página 3

La tercera página es la del título del objeto. Tiene un botón de acceso a loscréditos y la barra inferior de navegación.

La barra inferior de navegación la integran una franja (madera) y, según lapágina, los botones de avanzar (ir a...) retroceder (ir a...) y de acceso al menú.en este caso sólo el botón de avanzar.

1Agregamos una nuevapágina mediante el botónrespectivo.

21) Mediante el botón de

insertar imagen...

2) Agregamos el archivo00-madera2.jpg parael friso de navegación.

2

Guardar




4

7

5

6

8

3Aparecerá en la zona mediade la pantalla.Lo arrastramos hacia laparte inferior.

Lo paroximamos alborde...

Con las flechas del tecladolo llevamos hasta suposición., cuandodesaparecen (apenas) lospuntos de control inferioresy del costado.Ver que el superior todavíase visualiza.

1) Clic sobre el botón deagregar imagen

2) 00-B-avanzar-a.jpg

Con el puntero del mouselo aproximamos al lugardonde se ubicará

La ubicación exacta latendremos cuandohagamos coincidr las dosmarquitas claras. Una estáen la mader y la otra en elbotón




10

13

12

11

9RegistrarRegistrar es colocar cada elemento exactamente en suposición, guiándonos por detalles (como las marquitas).Esta exactitud tiene que ver con la credibilidad de lasimágenes, que deben verse integradas y nosuperpuestas.

Se ve una sola marquita...

1) Clic con botón derechodel mouse...

2) Elegir rollover efects enele menú emergente

3) Cargar los gráficosavanzar-b yavanzar-c

Como acción del cliccolocar ir a página 4.

Cargar la imagen de fondo03-Titulo.jpg

Aparecerá en la zonacentralCon el púntero del mouse lamovemos hacia su posiciónfinal...




14

16

15

18

17

Con las flechitas del tecladomovemos la imagen hastaque desaparecen los puntosde selección...

Con el botón de «enviar alfondo» colocamos laimagen por debajo del frisode madera inferior

Cargamos la imagen delbotón Créditos para laposición reposo.03-B-Creditos-a.jpg

La acomodamos lo mejorposible en su lugar. No hayguías visuales para estaocasión.1) Que no corte la sombra

del título.

1

Colocamos las otras dosimágenes para el efectorollover del botón:03-B-Creditos-b.jpg03-B-Creditos-c.jpg

Establecemos como accióndel clic ir a la página 35

Guardar




Armar la página 4 - Menú general del proyecto

Esta página contiene un fondo igual al de la anterior, pero más suave, latabla sobre la que se arma el menú, el friso inferior con una versión especialdel menú de navegación. Y los cinco botones que van a cada una de las seccio-nes del proyecto.

1

Antes de abandonar la página 3, seleccionamos y copiamos el friso infe-rior de madera.

2

Clic para crear una nuevapágina

Pegamos el friso inferior demadera.

3

Se acomoda según la posiciónque tenía en la página 3.

Cargamos nuevamente elgráfico del botón deavanzar. Lo acomodamossegún hicimos antes.00-B-avanzar-a.jpg

4

Menú de navegación especialEn el friso de madera dela parte inferior van los botones de navegación de avanzar,retroceder y el de ir al menú de la página 4. En esta página colocaremos una versiónespecial, con los botones atenuados (más claros o grisáceos), como es usual en lasinterfaces Windows para los botones que no funcionana, aunque se vean.De manera que podemos reproducir el friso y ese menú en todas las páginas, ypostriormente usar lo que necesitemos en cada una.

Sobre la imagen del botónen reposo (a)1) Clic con el botón

derecho del mouse

2) En el menú emergenteelegimos Itemproperites(propiedades de esaimagen)

2

1




7

5

6

Para el efecto rolloverCargar los gráficos00-B-avanzar-b.jpg y00-B-avanzar-c.jpg

8

1

2

Aparece una ventana depropiedades generales delobjeto seleccionado (eneste caso nuestro botón)1) Colocamos como

opacidad el valor de 50o 60 %

2) Clic sobre OK.

Observemos que podemoscambiar en esta pantalla laposición, el tamaño,agregarle sombra e, incluso,cargar otra imagen en lugarde la original.

Observemos la diferenciaentre el botón normal y elsemitransparente.

Colocamos como acción declic ir a la página 4. El botónno hará nada, ya que seencuentra en la página 4.

9

Cargamos la imagen delbotón del menú para laposición de reposo00-B-Menu-a.jpg




11 10

Para acomodarla(registrarla)...1) Ver los detalles que nos

guiarán

12

11

2

1

13

ZzoomZzoom es una lupa de pantallamuy útil para estos casos. Nonecesita instalarse.Colocamos el pequeño exe.en el escritorio y lo abrimoscuando lo necesitamos.En su ventana muestra(aumentada) la zonaalrededor del puntero delmouse.Aunque para registrar losobjetos usemos las teclas deflechita, hay que poner elmouse en la zona para poderver lo que sucede.Está en la sección Archivosdel espacio de Ayudas delaula..

Hacemos semitransparentela imagen (50%)

Se puede hacer a ojo, peromejor con la lupa depantalla Zzoom.Ver los detalles que nosayudan, usando latransparencia:1) El pixel más brillante es

una buena guía.2) El relieve se ve muy

borroso si la imagen noestá bien registrada.

Incorporar los otros dosgráficos del botón.00-B-Menu-b.jpg00-B-Menu-c.jpgColocar como acción delbotón ir a la página 4

14

Insertar la imagen del botón00-B-volver-a.jpg




16

15

18

17

Una mejor estrategiaEl proceso más adecuado sería, no cargar en esta ocasión las imágenes del efecto rollover,lo que haría innecesario también colocar la acción de clic. Es decir, sólo tendríamos laimagen de los tres botones, sin que sean botones.Posteriormente los copiamos, los pegamos en la página siguiente, les sacamos latransparencia (volvemos al 100% de opacidad), colocamos las dos imágenes para el efertorollover y (sin cambiar todavía la acción de clic) los propagamos en el total de las páginas(las vamos creando y pegando el conjunto de friso de madera y tres botones). Después,cuando completamos cada página, borramos los botones que no se usan y colocamos eldestino de la acción de clic que corresponda.Este tipo de automatización ahorra tiempo, pero como estamos aprendiendo, ahora no eslo más importante..

Para este botón tenemosmarcas fuertes que nosayudarán a registrarlo en suposición

Con el botón transparente yusando la lupa Zzoom, esalínea oscura fue la guía quemás me ayudó

Colocamos las dosimágenes para el efectorollover00-Bvolver-b.jpg y00-B-volver-c.jpgTambién le asignamos laacción de ir a la página 4como acción del clic.

Ya tenemos nuestros tresbotones de navegación(atenuados)




20

19Colocar el fondo

21

22

Cargamos laimagen

04-Fondo_menu.jpg

1) La acomodamos con elmouse y las flechitasdel teclado hasta quedesaparecen los puntosde control.

2) La «mandamos alfondo» con el botónrespectivo.

Cargamos las imágenes delos cinco botones:04-B-El_Fuerte-a.jpg04-B-Geografia-a.jpg04-B-Historia-a.jpg04-B-La_Goleta-a.jpg04-B-La_Zona-a.jpg

1) Los aproximamos a suposición con el mouse

2) con la layuda de la lupaZzoom, ajustamos elregistro con las flechitasdel mouse, usando losdetalles visuales (haymuchos en esta zona)




23

24

Procedemos igual con losotros cuatro botones.Los detalles nos ayudan alregistro de cada uno.Hay que ir mirando en lavista normal y en la lupa,porque en la vista normalse parecian mejor cuálesson los puntos a observar.

Así queda el panel del menúde la página 4.

Completamos para cadauno de los botones las dosimágenes del efectorollover.Ver al costado el cuadro deacciones para cada botón.

Con esto se finaliza laconstrucción de lapágina 4 del menú.

La columna de destinos de la izquierda es laque corresonde al proyecto completo.La de la derecha es para quienes hagan sólola p arte del proyecto obligatoria (túnel, ElFuerte y La zona)

Guardar y probar

Ya es hora de ver cómo funciona lo que hicimos...

Con el botón de publicarobtenemos una versiónfuncional del proyecto.

1

Botón Ir a pág. Ir a pág.

Historia 12 4

Geografía 5 4

El Fuerte 19 19

La zona 4 36

La goleta Ancud 15 4 AtenciónLos números de destino(Ir a pág...) de losbotones del menúcambian según serealice el proyectocompleto o sólo laparte obligatoria.




3

2

4Volvemos a lapágina 4...1) Seleccionamos el friso

de madera inferior, y lostres botones denavegación.Eso se hace con la tecamayúsculas presionada,mientras haceos clicsobre cada uno de losobjetos.

2) Los copiamos

En nuestro navegadoraparece el proyecto, quepodremos recorrer hastadonde está construido

Si al accionar un botónapaqrece una página comola de la captura, es porquehemos omitido asignar unaacción de clic o porque lamisma es incorrecta.

+

Al publicar, guardamos...La acción de publicar incluye la de guardar, por lo que no hace falta

guardar cuando publicamos.

=




Un poco de trabajo en serie

Vamos a crear todas las páginas que usaremos en el proyecto.Para ganar tiempo de producción. Si por cualquier razón necesitá-ramos otras, se pueden crear, intercalar o desplazar a donde lasnecesitemos.

2

1Creamos una nueva página.

3

Pegamos la barra denavegación que acabamosde copiar en el último pasode la página 4

1) Damos la opacidad total(100%) a los tresbotones.

2) Dejamos las accionescomo están. La delbotón central (menú) esla definitiva (ir a lapágina 4 , que es la delmenú).Las de los otros botoneslas cambiqaremos encada página.

3) Seleccionamos lamadera del friso y loscuatro botones.

4) Copiamos con el botónCopy

+

4Creamos 30 páginasnuevas. A medida que lascreamos, en cada unapegamos la barra inferiorde navegación completa.Al finalizar el progrma nosindicará que tenemos 35páginas.

Tenemos ahora 35 páginas. Las cuatro primeras completas y las 31 restan-tes a medio hacer. Con fondo negro y la barra de navegación inferior con sustres botones.

Navegar entre páginas

La navegación entre páginas, mientras trabajamos en el proyecto, se hacemediante dos flechas ubicadas a la izquierda de la barra de botones del pro-grama. No confundir con otras dos flechas parecidas, que sirven para moveruna página a otra posición relativa (por ejemplo, que la página 17 pase a ser la29)

1

2

1) Moverse entre páginas(navegar)Sólo se puede avanzaro retroceder de a unapágina por vez.

2) Mover las páginas delugar

1 2




Armar la página 5

La página 5 es la primera de la serie de vistas satelitales de Google Mpas,correpondientes a la sección Geografía del proyecto.

Contiene la imagen de fondo y un botón con una lupa para ir a la páginasiguiente, además del botón del menú.

2

11) Seleccionamos los dos

botones de navegar.2) Los borramos...

Cargamos el gráfico defondo05-satelite.jpgLa acomodamos con lasflechitas y la mandamos alfondo con el botónrespectivo.

3

4

1) Cargamos la imagen delbotón00-Lup-a.png

2) La achicamos un poco...2) La colocamos en el

vértice inferior derecho.

1) Cargamos el botón -bpara la posición Over.

2) Cargamos nuevamentela imagen00-Lup-a.pngpara la posición Down.

Este es un botón con sólodos imágenes.Ponemos como acción delbotón ir a la página 6

2

1

Antes de abnadonar lapágina, copiar el botón-lupa




Pagina 61) Borrar los botones triangulares2) Pegar el botón lupa3) Acción = Ir a página 74) Colocar imagen de fondo 06-satelite.jpg,

acomodar y mandar la fondo.









Pagina 111) Borrar los botones triangulares2) Colocar imagen de fondo 11-satelite.jpg,

acomodar y mandar la fondo.3) NO pegar el botón lupa (es la última pá-

gina de la serie)

Estas páginas se hacen enserie, en unos minutos.

Para hacerotra página

Pegamos la lupa enprimer lugar, paraevitar reemplazar poraccidente al fondo. Siel fondo está todavíaseleccionado cuandopegamos la lupa, lamisma lo reemplaza.

Atención:Mucho cuidado con noaplicar la acción de clical fondo, en lugar delbotón.Nos daremos cuentaporque al editar laacción de clic, noaparecerá ir a página6, que es lo que tiene elbotón que copiamos.




Armar la página 12

La página 12 es la primera de la sección de historia.Además de la placa de fondo, sólo tienen el friso inferior de madera, el

botón de ir al menú y un botón de avanzar.

2

1

1) Borrar el botón deretroceder.

2) Editar el botón deavanzar...Establecercomo acciónde clic ir a página 13.

Insertar la imagen de fondo12-Historia-01.jpgAcomodar y mandar alfondo.

Armar la página 13

La página 13 tiene, además del botón de avanzar en el friso inferior, tresbotones de un tipo que no vimos hasta ahora: botones en el texto. Aunqueno se trata de texto sino de imágenes que lo contienen.

1

2

2

1) Borrar el botón deretroceder.

2) Editar el botón deavanzar...Establecercomo acciónde clic ir a página 16.

2




2

3

32

11) Insertar la imagen de

fondo13-Historia-02.jpg

2) Acomodar3) Enviar al fondo

1

4

Cargamos la imagen parauno de los botones.13-B-Ancud-a.jpg

1) Aproximar con elmouse hasta cerca desu posición final

2) Ajustar el registro conlas teclas de flechita.




7

6

8

5Efecto rollover1) Cargar para la posición

Over el archivo13-B-Ancud-b.jpg

2) Cargar para la posiciónDown nuevamente elarchivo13-B-Ancud-a.jpg

Este es un botón de dosimágenes

1

2

1

Colocar como acción delclic ir a página 15

Cargar el gráfico13-B-Bulnes-a.jpgArmar el efecto rollover(dos imágenes).Acción: Ir a página 14

Cargar el gráfico13-B-Zarpo-a.jpgArmar el efecto rollover(dos imágenes).Acción: Ir a página 16En los dos botones se repiten los pasos 4, 5 y 6

9




Armar página 14

La página 14 tiene sólo el botón de volver y una imagen de fondo.

3

2

11

21) Borrar boton avanzar2) Acción: ir a página 13

Insertar imagen de fondo14-Historia-03.jpgAcomodar y mandar alfondo.

Armar página 15

La página 15 tiene sólo el botón de volver y una imagen de fondo.

11) Borrar boton avanzar2) Acción: ir a página 13

12

3

2Insertar imagen de fondo15-Historia-04.jpgAcomodar y mandar alfondo.




2

1

Armar página 16

La página 16 tiene el menú de navegación completo y una imagen de fon-do.

12

3

Acción de clic1) Ir a página 132) Ir a página 17

Insertar la imagen de fondo16-Historia-05.jpgAcomodar y enviar al fondo

Armar página 17

La página 17 tiene el menú de navegación completo y una imagen defondo.

11 2 Acción de clic

1) Ir a página 162) Ir a página 18

2Insertar la imagen de fondo17-Historia-06.jpgAcomodar y enviar al fondo

3




Armar página 18

La página 18 tiene el botón de regresar y una imagen de fondo.

12 1) Borrar

2) Acción de clic:Ir a página 17

2Insertar la imagen de fondo18-Historia-07.jpgAcomodar y enviar al fondo

3

1

Momento oportuno para probar si todo funciona bien...y corregir lo que sea necesario.




El Fuerte Bulnes

Nos internamos ahora en lo que es el nú-cleo del proyecto. La descripción, predominan-temente visual, del Fuerte.

Para quienes hemos tenido la oportunidadde conocerlo, impresiona la solidez con quedesafía las inclemencias del durísimo clima dela zona. Cuesta imaginar las condiciones de vidade los pioneros, en los años de su fundación.




2

1

Armar la página 19

La página 19 funciona como carátula de la sección dedicada al fuerte demanera específica.

El menú de navegación tiene el botón de regresar al menú general delproyecto y el de avanzar. Además, hay un botón en el texto que simula unhiperlink. Este botón lleva a una sección con detalles de la construcción.

321

1) Borrar2) No se modifica3) Acción de clic:

Ir a página 20

1) Insertamos el gráfico defondo19-El_Fuerte-01.jpg

2) Lo acomodamos con elpuntero del mouse y lasflechitas del teclado.

3) Lo enviamos al fondo4) Ajustamos la posición

con las flechitas.

31) Insertar la imagen para

la posición de reposodel botón.19-B-Detalles-a.jpg

2) Aproximarla a suposición

3) Registrarla con la ayudade las teclas de flechitasdel teclado.




5

4Efecto rollover1) Cargar para la posición

Over la imagen19-B-Detalles-b.jpg

2) Cargar para la posiciónDown nuevamente laimagen19-B-Detalles-a.jpg

Es un botón con dosimágenes.

Establecer para la accióndel botón (Item clic action)Ir a página 31.

6

1

Armar página 20

Esta página tiene en el friso de navegación el botón de ir al menúgeneral y otro de regresar.

La imagen de fondo simula un dibujo del fuerte en vista aérea. Enrealidad es un filtro de dibujo aplicado sobre una fotografía de unamaqueta (del museo de Ancud). Algunos edificios del dibujo sonbotones que se descubren recorriendo con el puntero del mouse laimagen. Funciona como menú de las fotografías del fuerte.

Cuando se usan este tipo de soluciones, hay que evitar el risego de que elusuario final pase de largo la pantalla, sin darse cuenta de que a través de lamisma se accede a otra información. Nosotros optamos por una solución ob-via: el texto del áungulo superior izquierdo. Pero pueden elegirse otras alter-nativas: por ejemplo, si borramos todos los botones de la barra inferior, alllegar a esta pantalla el usuario la recorrerá buscando el modo «escondido» deseguir adelante.

1) Acción de clic delbotón:Ir a página 19

2) Borrar

1 2




2

3

Cargar la imagen de fondo20-El_Fuerte-02.jpg

Acomodar y enviar alfondo.

Posición de losbotonesUtilizamos cuatro botones,que ocupanlas posicionesindicadas en los recuadros.Los gráficos para laposición en reposo son:

20-B-canoa-a.jpg

20-B-Porton-a.jpg

20-B-Iglesia-a.jpg

20-B-caniones-a.jpg

4

2

1

3

3

1

2

4

4Posiciones rollovery accionesOver DownOVER20-B-canoa-a.jpgDOWN20-B-canoa-a.jpgIr a página 30

OVER20-B-Porton-a.jpgDOWN20-B-Porton-a.jpgIr a página 27

OVER20-B-Iglesia-a.jpgDOWN20-B-Porton-a.jpgIr a página 21

OVER20-B-caniones-a.jpgDOWN20-B-Porton-a.jpgIr a página 23

Efecto rolloverEl efecto visual al pasar elmouse sobre los botones esun leve movimiento y elcambio entre el dibujo y lafotografía.El efecto es bastante sutilpero se advierte.No se colocaron másbotones para no extenderdemasiado el ejercicio. Perotampoco sería fácil hacerlosin que se superpongan. Encaso de pretender usar unbotón para cada edificiohabría que buscar otrodiseño.Los botones son de dosposiciones. Para la posiciónpresionado se usa la primeraimagen.




5Cuando colocamos laimagen inicial del botóncaniones, queda por sobreel friso de madera.Hay que bajarlapresionando el botón deenviar una posición abajo(varias veces).Cuidar que el botón noquede por debajo delfondo. Para eso, seleccionarla imagen del fondo y usar elbotón de enviar al fondo...

5

Armar la página 21

La página 21 tiene en el friso de navegación el botón de ir al menú generaly otro de retroceder.

Además de la imagen de fondo, tiene un botón que va a simular ampliar lafotografía de la capilla.

11 2

3

2

1) Acción de clic delbotón:Ir a página 20

2) Borrar

Imagen de fondo21-El_Fuerte-04.jpgAcomodar y enviar alfondo.

Imagen botónInsertamos la imagen parael botón en reposo:21-B-capilla-a.jpg




6

5

7

4Acomodar elbotónUtilizando como guíasvisuales el borde del botón,lo registramos en su lugar

Efecto rolloverPosición Over21-B-capilla-b.jpgPosición Down21-B-capilla-c.jpg

Acción del botónIr a página 22

1

Armar página 22

Esta página simula que la fotografía se amplía. Mantiene los botones delfriso, ya que la fotografía no se superpone a ellos y deben verse (y funcionar).

Todo el fondo lo convertimos en botón, para que al hacer clic se regrese ala página de origen.

121) Borrar2) Ir a página 21




2

3

4Importante

La ilusión de que la foto se amplía funciona si al pasar de pantalla elfondo queda exactamente en el mismo lugar. (Ir de la 21 a la 22)

Para eso primero hay que acomodar perfectamente la página 22, comose indica en el punto anterior.

Y después, editar y verificar con el proyecto en funcionamiento,la coincidencia. Como seguramente no coincidirán en el primer intento,acomodar la imagen de fondo de la página 21(la anterior), con lasteclas de flechita, hasta que coincidan. Y recordar volver a registrar elbotón de la página 21.

La guía visual es el texto del ángulo superior izquierdo (ver el resultadocorrecto en el demo)

Insertar la imagen de fondo22-El_Fuerte-05.jpg

Al acomodarla, asegurarque el borde inferior de lafotografía quede visible.


Armar página 23

La página 23 tiene el friso con el botón de volver (regresa a lapágina «menúde la zona de el Fuerte) y el de ir al menú general del proyecto; una imagen defondo y tres botones que simulan que las fotos que contienen se amplían, demanera similar a la de la capilla.




2

3

En reposo23-B-cañon1-a.jpgPosición Over23-B-cañon1-b.jpgPosición Down23-B-cañon1-c.jpgAcción del botónIr a página 24



Insertar la imagen de fondo23-El_Fuerte-07.jpg

BotonesColocar, completar elefecto rollover y asignaracción.

1

Armar página 24

En esta página el problema principal será el registro, para que se mantengala ilusión de que la foto se amplía en la misma pantalla.

2


Cargar imagen de fondo24-El_Fuerte-08.jpgAcomodarProbar en funcionamiento yajustar para que registrecon la página 23





2

3

Armar página 25

También en este caso el problema principal es el registro respecto a lapágina 23. Pero, como veremos, no se puede resolver bien porque la imagenno lo permite.

Colocar la imagen de fondo25-El_Fuerte-09.jpgAcomodar y enviar al fondo

Al acomodar, dejar elborde de la foto visible,pero lo más abajo posible.No alcana para poderajustar con la página 23.

4

Armar la página 26

En este caso se puede registrar con la página 23, pero el borde de la foto-grafía queda oculto tanto arriba como abajo.


2Colocar la imagen defondo26-El_Fuerte-10.jpgAcomodar y enviar alfondo




3

4

El borde de la fotografíaampliada queda oculto,tanto arriba como abajo.

Armar página 27

Imagend e fondo, dos botones que amplían la fotografía y el menú de na-vegación inferior.

3



En reposo27-B-porton-a.jpgPosición Over27-B-porton-b.jpgPosición Down27-B-poton-c.jpgAcción del botónIr a página 28

En reposo27-B-porton2-a.jpgPosición Over27-B-porton2-b.jpgPosición Down27-B-poton2-c.jpgAcción del botónIr a página 29

Colocar botones




Armar página 28

Esta es otra delas varias páginas de ampliación de fotografías. Es posibleregistrar perfectamente con la página 27.



Armar página 29

Esta página se puede registrar muy fácilmente con la 27.



Armar página 30

Una página muy sencilla. Contiene sólo la imagen de fondo. Nada queregistrar...






3


2

Armar página 31

La página inicial de la zona de detalles constructivos del fuerte. Viene depágina 19 y contiene tres fotografías que se «amplían», como en los casosanteriores.

Insertar la imagen de fondo31-Detalles-01.jpg

Insertar yacomodar botones

En reposo31-B-Detalles-1-a.jpgPosición Over31-B-Detalles-1-b.jpgPosición Down31-B-Detalles-1-c.jpgAcción del botónIr a página 32


4





2


Armar página 32

Sólo la imagen de fondo que hay que tratar de registrar con la de la página31

Insertar la imagen del fondo32-Detalles-02.jpg

2


Armar página 33



2


Armar página 34






Armar la página 35

La página 35 es la de créditos. La que inseertamos nosotros es una placacon poca información sobre fondo negro.

Cada participante de la Especialización deberá construir la suya, indicandosus nombres y apellidos, así como la fecha y la comisión a la que pertenece.

Debe incluir un modo de regresar a la página 3




Insertar sonido

PowerBullet hace un ma-nejo muy elemental del soni-do. Sólo admite colocarloscomo «fondo» en la página, yel mismo se ejecuta automáti-camente al ingresar a la mis-ma. Se puede establecer unademora en el inicio de ejecu-ción del clip de sonido.

Por tales limitaciones, sóloharemos unas pocas inser-ciones, como para aprenderlos procedimientos.

1

2

Clic sobre el botón deinsertar sonidos

1

Aparece la pantalla desonidos...1) Clic sobre Browse para

abrir la ventana debúsqueda.




3

4

1

21

1

2

Aparecerá la ventana debuscar archivos...1) Elegimos click03.mp32) Abrir

1) Aparece el archivoseleccionado

2) Clic sobre OK

5Repetimos la operación en las páginas... 3 y 5 a 11. Probamos

La operación puede hacerse también arrastrando el archivo de sonido ala página.

1Sonido de fondoEn la página 16 vamos acolocar un efecto de sonidode agua...Elegimos el clipolas de mar.mp3




2

1

1 En este caso le agregamosun delay (demora) queretardará el comienzo...1) Entre 0.8 y 1.2

segundos.

1

En la página 17Para la página 17 elegimosel clip fanfarrias.mp3Le asignamos un delay(demora) de 1 segundo.

En la página 18Para esta páginaseleccionamos el clip desonido viento-2.mp3También le configuramos undelay de 1 segundo

Como vemos, no es mucho lo que podemos hacer con el sonido enPowerBullet. Solamente «adornar» un poco con efectos especiales.Ni soñemos con sincronizar el sonido con avances automáticos de lasplacas. Eso sólo puede hacerce en archivos de video, cuya banda so-nora está sincronizada inernamente.




Transiciones y animaciones

Power Bullet cuenta con tres transiciones de página preconfiguradas, a lasque se le puede asignar un tiempo de duración.

8

7

9

65

32

41

Pantalla detransiciones depágina1) Ninguna2) Slide (desplazamiento

horizontal)3) Zoom (Se acerca desde

el ángulo superioroizquierdo,agrandándose hasta eltamaño final)

4) Fade(desvanecimiento).Aparece laimagendesde negro...

5) Duración del efecto ensegundos.

6) Configurar. Fija losvalores elegidos.

7) Los valores de salida nofuncionaron en laspruebas que hicimos.

8) Aparentemente sepueden cargar efectosde transiciónadicionales.

9) Confirmar todo.

Muy importanteNo convertir al objeto en un muestrario de transiciones y animaciones.Aunque podamos agregar otras.Usaremos las tres que disponemos para ver cómo funcionan.




32

1

Página 2

1) Zoom2) 1,50 segundos3) Clic sobre Set4) OK

Página 31) Slide2) 1,00 segundos3) Clic sobre Set4) OK

El resto de las páginas1) Fade2) 0,50 segundos3) Clic sobre Set4) OK

Aplicar a todo el restode las páginas delproyecto

El efecto Fade

El efecto de desvanecimiento, en este caso de ingreso, tiene por fin,cuando se aplica con duraciones breves, evitar el efecto de salto al cam-biar de página, suavizando la transición.El fade de PowerBullet no se aplica de manera pareja a todos los obje-tos de la página, por lo que no conviene usar duraciones largas, ya quealgunos objetos pueden aparecer antes que otros. Hay que probar ycorregir.




Animaciones

Power Bullet posee una importante cantidad de animaciones, aplicables aobjetos en las páginas. Algunas de ellas las mostramos en las Guías (Espaciode Ayudas) del programa.

En el capítulo «Engordar PowerBullet» indicamos cómo agregar otras,que suministramos en una colección aparte.

En este proyecto no hemos considerado que aporten nada, por lo que nolas utilizamos. Y colocamos la indicación del procedimiento para los partici-pantes que quieran experimentar.

2

5

3

4

1

Animaciones1) Tiempo de demora

para el inico de laanimación, desde elingreso a la página.

2) Fijar valor.3) Tiempo de duración de

la animación.4) Fijar valor5) Lista desplegable de

animacionesdisponibles

Parte de la lista deanimacionesinstaladasPara conocer qué hacecada una no hay otroremedio que probar, yanotar los nombres de lasque nos gustan




El archivo flash final, defi-nitivo, lo obtenemos con elmidmo botón con que hicimoslas pruebas durante el trabajo.

1Luego de presionar elbotón, aparecerá unventana que mostrará elavance del proceso.Inmediatamente después deque finalice la exportación,se abrirá el navegador(Explorer, Firefox o el quetenga instalada la compu) yse podrá ver y nagegar porel proyecto terminado.

El producto final

2En la carpeta del proyectoencontraremos:1) El archivo del proyecto,

en formato propio dePowerBullet.

3) El archivo en formatoflsh SWF, que podemoscolocar en una páginaWeb, blog, en una clasede nuestro campus.

3) Un archivo EXE(proyector flash). Estepermite ver el flash encualquier compu, sinnecesidad delnavegador.

4) Un archivo HTML5) Un archivo PBX. De uso

interno de PowerBullet

251

43




Una vez más insistimos en la importancia de poder ver las exten-siones de los archivos, y no guiarnos sólo por los íconos, que pue-den confundirnos.

El archivo con extensión .pbt, con un bonito ícono que re-presente un rollo de película, no es un archivo que sirva paramostrar nada. Es el archivo de trabajo interno de Power Bullet.

El archivo .exe es un archivo flash ejecutable, que permitemostrar la película flash sin necesidad de que en la compuesté instalado el player de Flash.

El archivo .swf es la película flash que podemos insertar enuna página Web, un blog, una clase virtual o ejecutarla en unaventana de Flashplayer. Es el que hay que remitir al do-cente.

Los archivos tendrán elnombre que le pusimos alproyecto. Pero podemosrenombrar los de formatoflash.




Instalar animaciones extrasBajamos de la clase o de la sección archivos del aula el archivo llamado

05-3-efectos_extras.zip y lo descomprimimos en algún lado. Conviene ha-cerlo en una carpeta especial.

11

2

1) El archivo zipeadoabierto. El programanecesario paradescomprimir (WinZip)y un tutorial de uso loencontraremos en laBiblioteca del Campus.

2) Clic sobre Extract, paraextraer elc ontenido.

1) Seleccionamos todoslos archivos (losreconocemos por laextensión fvanim)

2) Los arrastramos hasta lacarpetaPowerbullet\keyframes

2

12

2

Engordar PowerBullet




Tips

Como todos los programas, a PowerBullet hay que «tomarle la mano», esdecir, aprender los pequeños trucos y tips que nos ayudarán a trabajar concomodidad.

Como hemos repetido varias veces, la mayor parte de los problemas tie-ne que ver con la edición de textos en el programa. La mejor solución quehemos encontrado es no usar ese recurso, y reemplazarlo por placas gráficascon el texto editado en el programade imágenes. Tal como hemos hecho conel proyecto de Fuerte Bulnes.

Hacemos entonces un breve resumen de nuestra (corta) experiencia conel programa, los problemas que encontramos y las soluciones que nos pare-cieron viables.

Perder la selección

Una sola carpeta

Hacer Backup

Botones missing

Guardar

Extraño buffer

Cuidado al pegar

Inestabilidad

JPG en Windows Vista

Párafos en texto

Tomarle la mano es unargentinismo que significaconocerlo




Perder la selección

Cuando tenemos un fondo que cubre toda la superficie del proyecto (comolos fondos del proyecto Fuerte Bulnes), es muy fácil que inadvertidamentetoquemos el fondo, en lugar del objeto sobre el que queremos trabajar (unbotón, otra imagen, etc).

Al tener el fondo seleccionado, cuesta retomar la selección del objeto máspequeño.

La solución más sencilla es des-seleccionar el fondo con la tecla ESC.

Una sola carpeta

Aunque podemos cargar imágenes, sonido u otros objetos desde cual-quier lugar, es muy importante concentrar todos los contenidos en la carpetade trabajo. Eso nos asegura poder reconstruir y retomar el proyecto en cual-quier momento, sin tener que buscar archivos perdidos por borrados, cam-bios de nombre de carpetas, etc.

Pasados unos días, no recordaremos más dónde estaban las cosas, ni lanecesidad de conservar archivos o carpetas que no recordamos vinculados aningún proyecto.

Guardar todo en la carpeta de trabajo nos permite copiar esa carpeta enun CD o DVD y poder reponerla cuando querramos.

Hacer Backup

No nos sucedió nunca el perder un proyecto. Pero, nunca se sabe...Una forma sencilla de hacer un backup mientra trabajamos es guardar el

proyecto con otro nombre en otra carpeta. El programa copiará todos losarchivos vinculados.

Para p robar si realmente lo hizo, podemos renombrar la carpeta anterioragregando un signo adelante del nombre (#) y ver si esto hace que no aparez-ca algún archivo. Si eso sucediera lo copiamos «a mano» a la nueva carpeta.

Este mismo procedimiento lo podemos usar para hacer variantes del pro-yecto, o experimentos con el mismo.

Botones missing

Sucede muy raramente, pero en algunas condiciones pueden volverse in-visibles algunos botones de la interfaz. No hay problema, ya que todas lasacciones están también en los menúes desplegables.

Guardar

En algunas ocasiones encontramos que guarda mejor con el botón de pu-blicar. Y de paso probamos cómo andamos con el armado...

Extraño buffer

Nos ha sucedido que al reemplazar una imagen por otra con el mismonombre (modificándola afuera del PB), el programa sigue cargando la ante-rior, aunque la borremos.




No encontramos explicación a ésto, salvo que el programa seguramentearma un buffer de trabajo y almacena allí temporalmente las imágenes quevamos cargando.

La solución es borrar la imagen, guardar y cerrar PB. Al volver a abrirlo elproblema desaparece y podemos reemplazar la imagen.

Cuidado al pegar

Cuando pegamos un objeto copiado, remplazará a cualquiera que estéseleccionado en ese momento.

La solución: si pegamos algo en una pantalla que contenga objetos, asegu-rarnos de que no haya ninguno seleccionado con la tecla ESC

Si al pegar un nuevo objeto vemos que desaparece el fondo, podemosvolver atrás, deseleccionarlo y volver a pegar.

Inestabilidad

Aunque la inestabilidad del programa aparece asociada (en nuestra expe-riencia) al trabajo con edición de textos, y no hemos tenido problemas de«cuelgues» ni otras irregularidades mientras trabajamos en el proyecto de FuerteBulnes, en el caso de que el programa comience a tener conductas extrañas(inestabilidad) lo mejor es guardar y cerrar el programa. Al volver a abrirlo elproblema habrá desaparecido.

JPG en Windows Vista

Power Bullet tiene problemas con algunos gráficos en formato JPG cuan-do trabaja en el sistema operativo Windows Vista. El síntoma es que nocompila los archivos (no produce los SWF ni los EXE). Posiblementedebido a los metadatos de algunos archivos JPG.

Por eso hay que porbar el funcionamiento al armar un par de páginas, alprincipio

Una solución es cargarlos en el programa Paint de Windows y guardarloscon otro nombre (agregarle una letra, por ejemplo) ya que Paint omite losmetadatos.

Otra solución es convertir esos archivos en GIFs, con la opción de ditheringo difusión. Se perderá alguna calidad en las imágenes.

Párafos en texto

Los espacios entre párrafos son muy grandes cuando bajamos con enter.Lo mismo que ocurre en HTML. La solución es también la misma: bajamoscon:

Botón de deshacer

Esta no es una fallasistemática, sinoaleatoria. Sucede sóloalgunas veces

+

Miguel Puente Objetivo Digital Educatico (ODE) con PowerBullet

Documents

Transcript of Miguel Puente Objetivo Digital Educatico (ODE) con PowerBullet