UNIDAD 3 Producción de pequeños objetos de enseñanza · 2020-01-20 · Unidad 3 - 6 Juan Carlos Asinsten 05 - La producción de material didáctico (2)) Especialización en Entornos

05 - La producción de material didácticopara entornos virtuales de aprendizaje (2)

Juan Carlos Asinsten

UNIDAD 3Producción de pequeños

objetos de enseñanza

Versión 8 / Enero 2010

Especializaciónen Entornos Virtualesde Aprendizaje

argentina

Unidad 3 Unidad 3 Unidad 3 Unidad 3 Unidad 3 - 2Juan Carlos AsinstenJuan Carlos AsinstenJuan Carlos AsinstenJuan Carlos AsinstenJuan Carlos Asinsten

05 - La producción de material didáctico (05 - La producción de material didáctico (05 - La producción de material didáctico (05 - La producción de material didáctico (05 - La producción de material didáctico (22222)))))

Especialización en Entornos Virtuales de AprendizajeEspecialización en Entornos Virtuales de AprendizajeEspecialización en Entornos Virtuales de AprendizajeEspecialización en Entornos Virtuales de AprendizajeEspecialización en Entornos Virtuales de Aprendizaje

CONTENIDOS

Mejor que decir es hacer... ............................................................................. 4Obtener el programa.......................................................................................... 5

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

Construir el proyecto................................................................................... 10Tareas previas ..................................................................................................... 9Comentario sobre el guión ............................................................................... 10Comentario sobre la interfaz ............................................................................ 10Estructura del proyecto .................................................................................... 11Iniciar el proyecto ............................................................................................. 12Formatos de archivo de PowerBullet ............................................................... 13Armar página 1 .................................................................................................. 14Efectos y acciones ............................................................................................. 15Armar página 2 .................................................................................................. 18Un botón de tres posiciones, más interesante ................................................. 20Registrar ............................................................................................................ 20Nombres de botones ....................................................................................... 22Probar ............................................................................................................... 24Armar página 3 .................................................................................................. 25Una ayuda a nuestros ojos ................................................................................ 26Seguimos con la página 3 .................................................................................. 27Botones con sólo dos imágenes ....................................................................... 27Insertar más paginas .......................................................................................... 28Navegar entre páginas ...................................................................................... 28Si nos equivocamos ........................................................................................... 28Utilizar estos elementos en las páginas siguientes ............................................ 29Importante ........................................................................................................ 29Pegar los elementos .......................................................................................... 30




Insertar textos .................................................................................................. 30Seguimos con la página del menú .................................................................... 30Perder la selección ............................................................................................ 31Elección de la tipografía .................................................................................... 32Habrá mas... ...................................................................................................... 35

Página submenú «Fotos» y otras dependientes de ésa ............................... 36¿Y las fotos? ....................................................................................................... 37Páginas 7, 8 y siguientes (hasta la 19) ................................................................ 40Agregar texto .................................................................................................... 41Página número 7 / «Ampliar» .......................................................................... 41Página número 8 / «Efectos» ........................................................................... 42Un efecto final... ................................................................................................ 44Delay ................................................................................................................. 44Página número 9 / submenú «SlideShow» ....................................................... 44Página número 10 / «SlideShow» por Fade in ................................................... 45Página número 11 / «SlideShow» por movimiento ........................................... 47Cambiar el botón en la página 4 (también en la 5 y 6) ...................................... 47

Página submenú «Textos» ........................................................................... 48

Página submenú «Sonidos» ......................................................................... 50Página 12 / Efectos de sonido ........................................................................... 51Página 13 / Tango .............................................................................................. 52Sin fantasías ....................................................................................................... 53

Nuevamente en el menú principal ............................................................. 54Otro botón sin forma de botón ....................................................................... 55

No sólo de botones vive el hombr-{Otros usos de la opción rollover ........... 56Página 20 ........................................................................................................... 57Página 19 ........................................................................................................... 57Página 21 ........................................................................................................... 58Sobre efectos, ilusiones y trucos ...................................................................... 58Botones que hacen click ................................................................................... 58

El producto final .......................................................................................... 59

Transparencias ............................................................................................. 61

Tips ............................................................................................................. 65Perder la selección ............................................................................................ 65Inestabilidad ....................................................................................................... 66Inestabilidad menor ........................................................................................... 66Precaución ........................................................................................................ 66Párafos .............................................................................................................. 66Botones del programa Missing .......................................................................... 66Guardar ............................................................................................................. 67Cuidado al pegar ............................................................................................... 67Windows Vista .................................................................................................. 67




Mejor que decir es hacer...

La frase, de un líder político argentino ya fallecido, marca el sentido deesta Unidad, orientada al hacer. Porque de nada valen las mejores intencio-nes, si no estamos en condiciones de plasmarlas en obras, en propuestas edu-cativas reales y concretas.

De los distintos tipos de objetos que podemos construir, hemos seleccio-nado algunos que están a nuestro alcance, en los limitados y limitantes marcostemporales del posgrado. A esta limitación (proyectos realizables en un pe-ríodo de tiempo relativamente corto), se suma otra que nos hemos impuestoen el posgrado: utilizamos sólo programas de código abierto, gratuitos o dedistribución gratuita.

En ese marco nuestra propuesta se concentra en la producción de un obje-to flash, con contenidos simulados, realizado mediante el programa quetutoriamos: PowerBullet.

Con este programa podemos producir interesantes presentaciones (lo queen jerga llamamos «un power») aptas tanto para el proyector en el aula pre-sencial como para incrustar en nuestras clases virtuales. El proyecto que enca-raremos está más orientado a la clase virtual, pero los criterios son similaresen ambos casos. En el desarrollo del proyecto iremos marcando las diferen-cias a tener en cuenta según la índole del proyecto.




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 para trabajar en la producción de pequeños objetos para nues-tras 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 programa

El sitio Web de los creadores del programa está enhttp://www.powerbullet.com/

Hay un grupo de usuarios (en inglés) enhttp://groups.google.com/group/Powerbullet-users

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




Hay que descargar la versión 1.44 y después de instalarlo activar la versiónPlus. 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.

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

Los comandos los iremos describiendo a medida que los utilicemos. Sonpocos y sencillos.

Principales ventajas del programa

Exporta las presentaciones en formato SWF (Flash), lo quepermite 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 presenta-ciones en sitios Web (esta opción no la hemos probado todavía).

Tiene prestaciones bastante completas para trabajar con tex-tos e imágenes.

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

Permite insertar sonido.

Permite insertar botones roll-over.

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 (hayque recurrir al método con frecuencia) se aprende, resulta mo-lesto. Esto sucede sobre todo al trabajar con textos.

No posee página maestra.

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

El programa es algo inestable. No se cuelga pero en algunosmomentos produce resultados inesperados.

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.

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.




Tareas previas

Antes de comenzar a trabajar en le proyecto hay que tener resueltas va-rias cuestiones:

Descargar e instalar el programa PowerBullet, como indica-mos en las páginas interiores.

Registrar el programa, como se detalla en la página 5 de estematerial.

Crear una carpeta de trabajo para el proyecto.

Descargar del Campus el archivo con los gráficos y sonidosque utilizaremos. Descomprimirlo en la carpeta de trabajo.

Descargar e instalar las tipografías necesarias.

Descargar el programa Zzoom y copiarlo en el escritorio dela computadora en la que rabajaremos (no hace falta instalar-lo).

Si no está instalado el plugin Adobe Flash Player, es necesa-rio bajarlo e instalarlo, de lo contrario no se podrá observarel resultado del trabajo.

El programa puededescargarse tambiénd elCampus de Virtual Educa,de la clase inicial de laUnidaad 3 o de la secciónarchivos del aula.




Construir el proyecto

Comentario sobre el guión

No se trata de un guión didáctico con sentido propio. El diseño del guiónestá basado en el objetivo de aprender a construir este tipo de objetosutilizando este programa.

La estructura de navegación es muy simple: en árbol, pero con un menúque permite regresar a los tres submenúes principales desde cualquier pági-na. En la página siguiente podemos ver un esquema, con miniaturas de laspantallas.

Comentario sobre la interfaz

El diseño de la interfaz no es ni convencio-nal ni «académico». Tiene una impronta «cómic»muy fuerte. Es una elección intencional: no setrata de que cada uno lo utilice para contenidosque no tienen nada que ver. Lo que pretende-mos es romper el modelo de fondos y dise-ños neutros, que no dicen ni aportan nada a loscontenidos.

A la vez, la producción de la gráfica para fon-dos y partes requiere competencias que no to-dos los docentes poseen. Que eso no resulteintimidante: cada uno encarará sus proyectos alnivel de lo que sabe y puede hacer, y un poqui-to más, para ir dando pasos adelante.

El escáner y las capturas de pantalla puedenproveernos de importantes recursos que pode-mos adaptar a nuestras necesidades.




Estructura del proyecto

CRÉDITOS

Los númeroscorresponden a los de lspáginas del proyecto

1

2

3

4

5

6

7 8 9

10 11

12 13

14151617

18

Estas cuatropaginas no será

necesarioconstruirlas

Esta página sepersonalizará.

1920

21




Iniciar el proyecto

Desde luego, lo primero es loprimero: abrimos el programamediante el método que utilice-mos habitualmente. La primeravez abrirá con el aspecto quemostramos en la captura. En losucesivo, abrirá con el último pro-yecto que hayamos trabajado.

Para trabajar con este proyec-to es muy conveniente que man-tengamos un ícono del programaen el escritorio, bien a mano...

Podemos mirar y revisar unpoco la interfaz, aprovechandoque lo que hagamos no afectaránuestro trabajo.

11) Con el botón Nuevo

limpiamos la página ycomenzamos aconfigurar nuestroproyecto

2) Aparecerá una ventanapara nombrar nuestroproyecto.

3) Elegimos la carpeta odisco de trabajo. Elprograma creará unanueva carpeta, dentrode esa, con el nombreque demos al proyecto.

4) Bautizamos a nuestroproyecto.

5) Guardamos.

2

3

4 5

El crear una carpeta general del proyecto, dentro de la cual habráotra con el proyecto en sí, nos sirve para tener todos juntos losmateriales que usaremos (o no) en el trabajo.

21) Con el botón

Dimensionesconvocamos la pantallade configurar el tamañodel escenario (página).

2) Establecemos 470 píxelspara el ancho

3) ...y 460 para el alto.4) Confirmamos con OK

2 3

4

La medida del ancho es la máxima que admiten los objetosinsertados en las clases de la plataforma e-ducativa. El largoes arbitrario, pero obligatorio en este proyecto, porquelos gráficos están preparados para esa medida.




31) Ir a Menú Projet2) Elegir Export Settigs...

1

2

31) Aparecerá la ventana de

Configuración deexportación.

2) Tildamos Manual. Paracontrolar eldesplazamiento entrepáginas con nuestrospropios botones.

3) Confirmamos con OK4) Dejamos todo el resto,

como está.OPCIONES QUE NOUSAMOS AHORA:5) Auto-advance es para

avance automático(como un banner).

5) Default navegationscontrols coloca unosbotoncitos muy feos depágina adelante, paginaatrás.

PowerBullet, como muchosotros programas de autor, guardalos proyectos con formato propio.Esos archivos no son los que se utili-zan en otras aplicaciones.

Para crear los archivos Flash queusaremos en las clases virtuales seutiliza el comando exportar (lo ve-remos en su momento) que es el quecrea ese archivo Flash y otros.

La pantalla Export Settings sir-ve para configurar los parámetros deesos archivos exportados.

3

5

4

6

Formatos de archivo de PowerBullet

En la carpeta de trabajo de Power Bullet aparecerán varios tipos dearchivos (además de los gráficos y sonidos). Todos con el nombre quele adjudiquemos al proyecto. Las extensiones son:SWF Película Flash. Es la que se debe enviar para su evaluación.EXE Película Flash en formato autoejecutable.PBT Con un ícono de película. Es el archivo de trabajo del proyec-

to. Es un archivo en formato propio que sólo guarda las ins-trucciones de tabajo del programa, para ese proyecto.

PBX Otro archivo de trabajo interno de PowerBullet.Los archivos PBT y PBX no deben enviarse.




Armar página 1

La página 1 es muy simple. Fondo blanco, para que se confunda con elfondo de la Clase en la que la insertaremos, Y un botón de Play en el centro.

Veremos la estrategia de diseño de la interfaz en otro apartado.

11) Con el botón de

agregar imágenesabrimos la ventana quenos permitirá elegir laque queremos colocar.

2) Navegamos pornuestro disco hasta lacarpeta donde tenemoslos gráficos.

3) SeleccionamosB_Play-a.gif

3) Confirmamos con Abrir.

1) Aparecerá nuestrográfico en el escenario(página).

2) Con el puntero, losujetamos yarrastramos hasta elcentro de la pantalla.El puntero toma laforma de doble flechaen cruz.Para arrastrarlo, hacerclic sobre él con elbotón principal delmouse, y sin soltarloarrastrarlo hasta ellugar deseado.

3) Observemos los ochopuntos de control, quenos indican que elobjeto estáseleccionado y nospermite modificar sutamaño.

2

1

2

34

1

23

Mucho cuidado en no perder la selección, haciendo clic acciden-talmente en cualquier lado. El programa es muy torpe en el manejode las funciones del cursor. Podemos ver los problemas y sus solu-ciones en el capítulo Tips, de esta Unidad




Efectos y acciones

Este pequeño gráfico será nuestro botón de inicio. Lo convertiremos enun botón rollover de tres posiciones, le agregaremos algún efecto, como parallamar la atención, y le adjudicaremos la acción de ir a la página siguiente.

Los botones rollover reconocen cuando el mouse pasa sobre ellos y cam-bian de aspecto (reemplazan un gráfico por otro). Pueden tener dos o tresgráficos:

1) Uno cuando está en reposo

2) Uno cuando el mouse se ubica sobre él

3) Uno cuando se hacer clic sobre él.Este tipo de botones es parte del lenguaje de Internet y la multimedia: le

indica al usuarios que algo sucederá si hace clic sobre el mismo.En esta página usaremos tres gráficos: uno para cada una de las situaciones

mencionadas.El gráfico base lo obtuvimos de una Web de íconos, y lo modificamos para

las otras dos posiciones.Las variaciones en losgráficos de los botonesrollover no tienen por quéser muy exageradas. Eneste caso son apenasperceptibles (aunque seven mejor en el objeto).

11 3

1) Hacemos cilc con elbotón derecho(secundario) del mousesobre el gráfico.

2) Nos fijamos que estéseleccionado. Veremoslos ocho ppuntos decontrol.

3) Aparecerá un menúcontextual.

4) Elegimos la opciónItemrollover effects.

32




2Aparecerá esta ventana1) Clic sobre el botón

Over, para colocar elgráfico que aparececuando el mouse pasasobre el gráfico.

3

4

Navegamos hasta lacarpeta donde hemosguardado los gráficos.1) Elegimos B_Play-b.gif2) Confirmamos con Abrir

1

1) Repetimos el procesopara la posición Down(botón presionado) yen este caso colocamosel botón B_Play-c.gif

2) Confirmamos con OK

1

1 2

1

2




1) Manteniendo el gráficoseleccionado hacemosclic sobre él con elbotón derecho(secundario) del mouse.Si perdemos laselección ver la soluciónen el capítulo Tips.

2) Aparecerá un menúemergente.El mismo resultado lopodemos obtener conel objeto seleccionado yhaciendo clic sobre elbotón animaciones.

3) Seleccionamos laopción Item animation,que nos permitiráagregar una animacióno efecto al objeto.

5

6

7

8

1

1) Aparece la pantalla deagregar animaciones oefectos

2) Clic sobre el botón queabre la lista desplegablede efectos.

2

1 1) En la lista (es larga)seleccionamos Fade in.

Fade in es un efecto dedesvanecimiento que vadesde transparencia totalhasta opacidad total. Esdecir, la imagen aparecegradualmente.

1) El efecto seleccionadoparece en la ventana.

2) El delay (demora) encomenzar el efecto lodejamos en cero.

3) Tampoco modificamosla duración del efecto.Los valores por defectoson suficientes.

4) Confirmamos con OK.1

2 3

4




Armar página 2

La página 2 cumple la función de portada del objeto que estamos constru-yendo. En ella no sucede nada y sólo nos muestra el clima visual de la inter-faz.

1

2 3

4

91) Sin perder la selección,

hacemos nuevamenteclic con el botónderecho del mousesobre el objeto.

2) Aparecerá el menúemergente.

3) Seleccionamos Item clicaction. Es paraconfigurar qué accionesse desencadenarán alhacer clic sobre elobjeto.

101) Aparecerá la pantalla de

acciones.2) Tildamos el botón de

radio Go to a page (ir apágina).

No olvidar este paso.No basta con colocarel número. el botón deradio no se activa solo.

3) Escribimos en la casillael número 2,correspondiente alnúmero de página (queagregaremosenseguida).

4) Confirmamos con OK.

2

3

Con ésto hemosterminado de armar yconfigurar nuestraprimera página

21) Mediante el botón

agregar páginainsertamos una nuevaen el escenario delproyecto

2) En la barra se indica elnúmero de páginadonde estamosposicionados

1

2




3

4

5

1) Clic sobre el botón deinsertar imágenes.

2) Elegimos el gráfico01-inicio.gif que seráel fondo de estapágina.

3) Confirmamos conAbrir.2 3

1) Aparecerá en laposición aproximadaque vemos.

2) Lo arrastramos con elpuntero del mouse...

3) ... hasta que los puntosde control quedencerca del borde.

1

2

3 3

1) Sin perder la selección(se deben ver lospuntos)...

2) Con las flechas dedirección del tecladomovemos el gráficohacia arriba y hacia laizquierda justo hastaque desaparecen lospuntos.Si nos pasamos,veremos aparecer lospuntos de abajo y/o dela derecha.




Un botón de tres posiciones, más interesante

Vamos a hacer ahora un botón que no tiene forma de botón. El cambio deimágenes en los botones rollover nos permite incluir en nuestras produccio-nes pequeñas animaciones bastante realistas.

En este caso el botón está constituído por los siguientes tres gráficos, queocuparán la posición de reposo, con el mouse sobre y al hacer clic, respecti-vamente.

El armado de este botón lo haremos con elmismo procedimiento que elanterior.

61) Nuevamente clic sobre

el botón de insertarimágenes.

2) Elegimos el gráficoBB-manija-a.gif queserá el el gráfico delbotón de pase depágina en reposo.

3) Confirmamos conAbrir.

2

3

Registrar

La operación de registrar consite en acomodar loselementos perfectamente en su lugar. Es una opera-ción muy importante, porque es la que asegura la ilu-sión, en este caso de que lo que se mueve es la manija.Para ello el gráfico que estamos cargando debe que-dar exactamente en su lugar, con precisión de un píxel.

Debemos educar a nuestros ojos para que veanlos pequeños detalles que nos permiten registrar per-fectamente un gráfico en el lugar adecuado.

El botón simula la aperturade una manija o picaporte.

NO SE NOTAN LOS BORDES.eL BOTÓN SE CONFUNDECON EL FONDO




71) Aparecerá

aproximadamente enel centro del escenario.Como en la captura,sólo que el bordenegro no existe. Lodibujamos para que sedistinga.

2) Con el mouse loarrastramos hastaaproximadamente suposición.

3) Luego con las flechasde dirección loacomodamos hastaque se confundatotalmente con elfondo.Las guías visuales sonlas marcadas con lasfechas.

1 2

81) Clic con el botón

derecho del mouse.


3) Seleccionamos Itemrollover effects.

4) Aparece una ventanapara cargar losgráficos.

5) Clic sobre botón Over.

2

3

4

5

Esta opción aparecesólo si se ha registradoel programa, como seindica en la página 6




9

10

1) Seleccionamos elsegundo gráficoBB-manija-b.gif

2) Confirmamos conAbrir.

1

1 2

Repetimos el procedimientopara la posición Down,pero esta vez cargamos elarchivo BB-manija-c.gifque corresponde a la otraposición del botón.Confirmamos con OK

Nombres de botones

Desde hace muchos años utilizo la misma notación para bautizarlos botones que diseño o uso:

La letra b al principio lo identifica como gráfico para botón.Separado por un guión corto, el nombre (significativo)Separada por un guión corto las letras a, b o c que indican respecti-vamente si se trata de un gráfico para la posición de reposo (a), parala posición «mouse sobre» (b) o para botón presionado (clic) (c).

De esa manera siempre sé a qué posición corresponde cada gráfico.

11

2

3

1) Una vez más clic con elbotón derecho delmouse.

2) Aparece el menúemergente.

3) Elegimos Item clickaction.




12

23

4

1

1) Aparecerá la ventanaButton action

2) Tildamos el botón deradio Go to a page.

3) Colocamos comonúmero de pagina dedestino la 3 (enseguidala crearemos).PW permite configurarlos botones para quepasen a páginas quetodavía no existen.Desde luego que si losprobamos nos daráerror...


13Vamos a agregar un efectode transición para elingreso de la página1) Clic sobre el botón de

transiciones de página.

2) Elegimos Fade3) Establecemos la

duración en 0,5segundos.

4) Clic sobre el botón Set5) Dejamos la transición

de salida (out) enNone.


2

3 4

5

6

Con ésto hemos terminado de armar y configurar nuestrasegunda página




Probar

Seguramente estamos ansiosos por ver cómo va nuestra producción.Power Bullet tiene dos modos de probar:

1) Prueba de todo el proyecto. Es lo mismo que la ediciónfinal. Exporta el proyecto hasta donde esté construido, y lomuestra en el navegador de la compu. Se utiliza también paraexportar el proyecto terminado

2) Prueba de la página que está en la pantalla. Una sola. Lomuestra en el navegador, pero, lógicamente, no pueden fun-cionar los movimientos entre páginas.

La pantalla de avance delproceso de exportación

El producto publicado en elnavegador.Abajo, el detalle de nuestrobotón de tres posiciones.

En nuestra experiencia, el proceso de publicar el proyecto es que quenos asegura un guardado sin errores. Funciona mejor que el comandoespecífico de guardar.Conviene tener abierto el navegador para que la publicación demoremenos. Y es imprescindible tener instalado el plugin Adobe Flash Player.




Armar página 3

La tercera página del proyecto es la principal, y contiene el menú desde elcual se accede a todas las subsecciones principales.

La interfaz es más sencilla, ya que a partir de ahora los contenidos deberánverse sin competencia del fondo.

En la parte inferior ubicaremos un menú de botones que se repetirán en(casi) todas las páginas.

Es importante que acomodemoscuidadosamente todos los elementos,porque después los copiaremos en elresto de las páginas.

11) Mediante el botón

página nuevaagregamos la número 3

2) Insertamos el gráfico defondo. Elegimos1-Fondo.gif

3) La acomodamos con losmismos procedimientosque utilizamos en lapágina 2.

21) Mediante el botón de

insertar gráficoscolocaremos el primerbotón.

2) Elegimos b-Texto.jpg

1) Aparecerá en laposición 1.

2) Con el mouse loarrastramos hasta laposición 2Lo más centradoposible en sentidohorizontal.

3) Ver relación del puntode control con elremache del fondo.

4) El borde inferior justocon el resaltado delfondo.

3

1

2

3

4




Una ayuda a nuestros ojos

El pequeño gran programaZzoom es una lupa depantalla que nos permiteampliar la zona donde estáel mouse, para ajustardetalles de posición deobjetos.No necesita instalación.El programa simplementese copia al escritorio (paratenerlo siempre a mano) ycon doble clic sobre elícono se abre una ventana,que arrastramos hastacolocarla junto a la zona detrabajo.En el menú Projetsindicamos Always on top(para que siempre quedesobre las otras ventanas) ycolocamos el mouse en lazona que queremosobservar. En la ventana deZZoom aparece la imagenampliada.En el caso de nuestrobotón, dejamos el mouse enel centro y lo movemos conlas flechas del teclado.




Seguimos con la página 3

Una vez con el botón en su lugar, lo convertimos en un botón rollover,cargando las imágenes b-Textos.jpg y b-Textos-B.jpg para las dos posicionesdel botón.

b-Textos.jpgPara la posición presionado.

b-Textos-B.jpgPara la posición mouseover

Repetimos el procedimiento para los otros tres botones:

El menú de botones quedará más o menos así:2 2

1

1) El pequeño botón iniciolo colocamos en elborde izquierdo.

2) Cuidar que lasdistancias entrebotones sean iguales.

Posteriormente configuramos las acciones para cada botón, siguiendo elmétodo que ya vimos en botones anteriores. Los destinos de cada botónson los siguientes:

1 4 5 6Página dedestino

O en el menúemergente (botónderecho sobre elobjeto)

Botones con sólo dos imágenes

En este caso utilizamos sólo dos gráficos para los botones. Para laposición del botón presionado, usamos el mismo gráfico que para elbotón en reposo.

b-inicio.jpg b-fotos.jpg b-sonidos.jpg




Insertar más paginas

Tenemos hasta ahora tres páginas. necesitaremos una cantidad mayor paradesarrollar todo el proyecto. Aunque eso lo podemos hacer en cualquiermomento, conviene hacerlas todas de una vez, para dejarlas preparadas.

Para crear nuevas páginas utilizamos el botón respectivo (1), el cual lascolocará a continuación de aquella en la que estamos «parados» (La que está ala vista).

La nueva página apareceráen blanco y en el cabezalaparecerá el número de lamisma

1

Ir a página anterior

Ir a página siguiente

Entonces crearemos las páginassiguientes hasta tener 21 de ellas,que son las que utilizaremos para elproyecto.

Navegar entre páginas

La navegación entre páginas en Power Bullet se hace de una sola ma-nera: utilizando las flechas de avanzar o retroceder de una página por vez.Método sencillo y suficiente para proyectos con una cantidad no muy grandede páginas.

TipPara regresar de la página 21 a la tercera, en lugar de volver una poruna, avanzamos y... estaremos en la página 1. con dos clics más llega-mos ala tercera.

Si nos equivocamos

Si no estamos lo suficientemente atentos, podemos armar una página enun lugar incorrecto (por ejemplo la página 4 en lugar de la 5) podemos cam-biar la página de lugar, desplazándola un espacio o lugar por vez.

Mover un lugar haciaadelante

Mover un lugar hacia atrás.




Utilizar estos elementos en las páginas siguientes

El paso siguiente es copiar los componentes de esta página en las siguien-tes, antes de seguir con la presente.

1) Menú Edit2) Select all (seleccionar

todo.El comando de teclas(Ctrol+A) puede nofuncionar en algunascomputadoras.

Una opción esseleccionar de a uno loselementosmanteniendo Ctrlpresionado.

11

2

TipPowerBullet pega los elementos exactamente en la mis-

ma posición que los originales. Eso nos permite reproducirescenarios idénticos. Aunque se nota la ausencia de una pági-na maestra, este recurso permite hacer como si...

+

2El escenario con una capagris violácea nos indica quetodo está seleccionado.1) Con el botón copiar

copiamos todos loselementos.

Importante

No siempre Power Bullet permite seleccionar o copiar el fondo ylos botones simultáneamente. La solución es muy sencilla: seleccionarprimero el fondo (clic sobre cualquier parte de él) y copiarlo en las pági-nas siguientes. Después se repite la operación con los botones.

Esto es lo que haremos en esta ocasión, sin limitarnos a copiar loselementos en las páginas 4 a 6.




3

+

Pegar los elementos

Los elementos previamente copiados (en bloque o en dos pasos) lospegamos en las páginas 4 a 19, antes de continuar trabajando en el menúprincipal. Utilizamos para pegar el botón respectivo o la combinación de te-clas Ctrol+V

Para asegurarnos de no tener ningún objeto seleccionado antes depegar, porque en ese caso los nuevos elementos reemplazan al se-leccionado, utilizar la tecla ESC para deseleccionar todo.

Seguimos con la página del menú

Utilizando las flechas de desplazamiento entre páginas (en el programa,no en el proyecto) volvemos a la página 3 del menú.

Vemos en qué pagina estamos en la barra de comandos:

Insertar textos

El trabajar con textos es una de las cosas más complicadas con PowerBullet.No tanto por los métodos en sí, sino por un par de problemas que surgen, elmás serio de los cuales es perder la selección. Lo mencionaremos en su mo-mento y en el capítulo Tips describimos la solución.

Vamos ahora a colocar ahora los textos d e nuestra página del menú principal.

11) Clic sobre el botón de

insertar caja de texto.

2) Aparece un pequeñotexto en el vérticesuperior izquierdo delescenario.

1

2

2




21) Con el puntero del

mouse lo arrastramosdesde la posición (a)hasta la posición (b)Prestar atención a queaparezcan los puntosde control. Si noaparecen es señal quese perdió la selección.Ver el capítulo Tips.También se puedeutilizar el botón devolver atrás (Undo).

a

b

Perder la selección

De las variadas formas de re-cuperar una selección «perdida», laque encontramos más adecuada esla utilización de la tecla Esc, queelimina cualquier selección y nospermite retomar la que perdimos.

3

4

Una vez que tenemos lacaja (cajita) de texto enposición...1) Tomamos el punto de

control horizontal de laderecha y loarrastramos hacia laderecha....

2) ...hasta que el puntollega al otro costado delescenario.

Verificar que el punterotome la forma de dobleflecha.

1

2

1) Hacemos doble clicsobre el texto: no sobrecualquier parte de lacaja sino sobre el textomismo.

2) La caja adquiere unmarco grisado.El cursor cambia deforma (como el de uneditor de texto).

3) Seleccionamos(pintamos) el texto ysobre escribimos:MENÚ PRINCIPAL.

2

3

Cuando perdemos la selección, suele ser porque hemos hecho clic so-bre el fondo. Como los puntos no están a la vista, no nos damos cuenta.Cuidado con eso, porque si movemos accidentalmente el fondo, perderá elregistro. en ese caso, conviene borrarlo,copiar el fondo de otra página y volverlo apegar. Luego se envía al fondo (debajo delos otros objetos en la página) con el bo-tón respectivo.




5Sin perder la selección (eltexto permanece«pintado»)...

1) Clic sobre el botón deabrir la lista desplegablede tipografías.

2) Elegimos una tipografía«rota». La quesuministramos en lepaquete de recursos oalguna que busquemosen Internet.La que suministramosse llama Earthquake MF

En el «paquete de recursospara el proyectosuministramos unatipografía «rota» querecomendamos utilizar.El instalar y desinstalartipografías es unacompetencia quenecesitamos adquirir.Para instalar la tipografíaen la compu, simplementese la copia a la carpetaFonts, dentro deldirectorio Windows.

6Vamos a agrandarla tipografía1) Clic sobre el botón de

agrandar tipografías.

2) Lo primero que hace esponerla en un tamañotan pequeño que no seve.

3) Seguimos haciendo clicsobre el botón hastaobtener un tamañoadecuado

1

2

3

Elección de la tipografía

Cada tipo de letras tiene su «personalidad» como hemos visto en lamateria Comunicación en su momento. La tipografía que necesitamoselegir para este proyecto debe acompañar el estilo del «ambiente». Esoes parte de lo que llamamos «coherencia de la interfaz».




7Sin perder la selección (eltexto todavía aparece«pintado»)...1) Clic sobre el botón de

dar color a texto ylíneas.

2) Elegimos algún colormarrón rojizo.

3) Completamos conAceptar.

2

2

3

8Luego de centrar el textocon el botón respectivo...

...tendremos un resultadocomo el de la captura.

9Armamos una caja de textoaproximadamente como lade la captura.Escribimos un texto similaral de la captura que sigue.Lo configuramos en Arial yle agregamos el estilo boldo negrita con el botónrespectivo.




10Tendremos un resultadosimilar a la captura.El texto baja sólo línea porlínea, como un procesadorde textos.

Para que no tengamosespacio excesivo entrepárrafos se baja con

pero... todavía noterminamos.

+

Agregar sonido a la páginaMás adelante exploraremos más el tema de agregar sonido. Las posibili-

dades no son muchas, ya que el sonido está pensado como «música de fondo»de la página. Es decir, no se puede ni arrancar ni detener con comandos.

Como el sonido se ejecuta en el momento en que arranca la página, se meocurre poner un efecto que refuerce la idea del picaporte y la puerta metálicade la página anterior.


insertar sonidos.

2) Se abre la ventana Pagesound...

3) clic sobre el botónBrowser...




3Finalmente completamoscon OK.La opción Delay (demoraen comenzar) no lautilizamos en esta ocasión.

2Se abrirá una ventana denavegación. Buscamos lacarpeta donde guardamosnuestro archivo MP3 y loseleccionamos. Se llamagolpe-3.mp3

Con estos pasos hemos terminado de configurar la página del menú. An-tes de continuar con las secciones siguientes de nuestro proyecto, guardamosy probamos lo realizado hasta ahora.

Habrá mas...

Más adelante agregaremos nuevos elementos a esta página. Por ahora ladejamos así y comprobamos que podemos navegar entre todas las que tene-mos configuradas.

Los elementos a agregar son un botón especial que lleve a la página decréditos y otro para mostrar capacidades de la opción rollover.




Página submenú «Fotos»y otras dependientes de ésa

Esta página contiene un submenú que despliega algunos ejemplos de cosasque se pueden hacer con fotografías.

Colocar los títulosLo primero que haremos es colocar los títulos de las tres páginas de

submenúes.Realizamos todos los pasos que ya conocemos para escribir el título FO-

TOS. Elegimos una tipografía pesada (gorda, gruesa) y la llevamos al tamañoaproximado de la captura.

Luego le damos color: un naranja amarillento. Como podemos ver en lacaptura.

A continuación veremos cómo colocarle la sombra que podemos obser-var.

11) Clic con el botón

derecho.


3) Elegimos Itemproperties (propiedadesdel objeto.




Las otras páginas1) Copiamos el título con

el botón de copiar.

2) Vamos a la páginasiguiente: la 6, quecorresponde al menútextos.

3) Pegamos el título Fotos.

4) Lo seleccionamos enmodos «escritura» ysobre escribimos.

2

1

2

3

1) Configuramos lasombra al 50%La sombra es negra. Deesta manera se verágris.

2) Configuramos eldesplazamiento en 4 o5 píxels.


Después repetimos la operación en la página 7, que corresponde alsubmenú sonidos.

¿Y las fotos?

Ahora vamos a eso. Regresamos a la página 4.Vamos a colocar tres efectos para las fotografías:

Ampliar

Movimientos

Transparencia.

Es un buenmomento...




1) Con el botón deinsertar rectánguloscolocamos uno.

2) Lo trasladamos sobre lafotografía y le damosuna dimensiónaproximada a la misma.

Colocar las fotosUtilizaremos unas miniaturas de las fotografías, a modo

de botones.

11) Con el botón de insertar

gráficos abrimos laventana de navegacióny buscamos lafotografía ojo.jpg en ellugar donde la hayamosguardado.

2

3

Desplazamos la fotografíahasta su ubicación (más omenos) definitiva.




1) Con la combinación deteclas

duplicamos el fondonegro

2) Sin perder la selecciónlo arrastramos hasta lasiguiente posición.

3) Repetimos la operaciónpara el tercer recuadro

4) Luego repetimos laoperación con lasfotografías.Las acomodamos lomejor que podamos (esa ojo) hasta tener unresultado parecido al dela captura.

4

5

6

+

1) Con el botón de colorde objetos leatribuimos el colornegro.

1

Con el botón de enviar unlugar más abajo colocamosel rectángulo negro bajo lafotografía.

Posteriormente loacomodamos y achicamosde manera que tome elaspecto de la captura.

2

3

4

Utilizaremos losbotones de enviararriba o enviarabajo, y las teclas dedirección paraacomodar todo.

Duplica un objetocada vez




7

En las operaciones anterioreses muy fácil perder laselección.Si movemos un objetoinadecuado, podemos volveratrás con la tecla Retrocederun paso (Undo).

Y para recuperar la selecciónusar la tecla Esc y volver aseleccionar.

Cuando hemos acomodadotodo adecuadamente...1) Clic con el botón

derecho sobre lafotografía superior.

2) Menú emergente.3) Elegimos Item clic

action.4) Configuramos para ir a

la página 7.

5) Repetimos en la fotodel medio y laconfiguramos para ir ala página 8

6) Idem con el tercerafotografía, que servirápara ir a la página 9

1

2

3

5

6

Páginas 7, 8 y siguientes (hasta la 19)

Recordemos que tenemos una página (la 7) con el fondo y el menúde botones, como reserva. Si no lo hicimos antes...

Vamos a esa página mediante la conocida tecla dedesplazamiento y seleccionamos todo (fondo y bo-tones). Lo podemos hacer con la combinación deteclas

Copiamos con la combinación de teclas

Vamos a la página siguiente (la 8)

y pegamos allí todo con la combinación de teclas

Tenemos ya la página 8. Repetimos todo hasta lapágina 19

Buen momento para volver a probar todo.

+

+

+

Como señalamos antes,no siempre Power Bulletpermite seleccionar todo ocopiar todo loseleccionado. en ese casoseleccionar el fondo,copiarlo y pegarlo entodas las páginas, ydespués hacer lo mismocon los botones.

Esta operación se podríahaber hecho en cualquiermomento antes...




Agregar texto

Como los usuarios finales de nuestro proyecto no son adivinos, vamos aagregar texto al submenú fotos, que indique qué sucede en cada una de laspáginas a las que conduce.

Ya sabemos insertar y editar texto, por lo que sólo ponemos una muestradel trabajo final.

Página número 7 / «Ampliar»

La página 7 es muy sencilla.Sólo debemos colocar lafotografía, ampliarla yestablecer la transición dela página.

1) Insertar la fotografíaojo-grande.jpg

2) Agrandarla hasta cubrirtoda la superficie de lazona del visor.

3) Cuidar de dejar visibleslos biseles (bordes) quedan aspectotridimensional al marco.

13

3

2




1) Clic sobre configuraciónde transiciones depágina.

2) Elegir Fade3) Establecer medio

segundo para laduración de latransición.

4) Clic sobre Set.5) Confirmar con OK

2

2

3 4

5

Página número 8 / «Efectos»

+

1) Insertamos la fotografíaojo.jpg

2) La duplicamos y laacomodamos,

1

2En cada fotografía hacemosclic con el botón derechosobre ella, elegimos Itemanimation en el menúemergente y seleccionamosla animación que indicamosen la lista o alguna que nosparezca apropiada. (Verlista en página siguiente)Vamos poniendo retardos(delay) progresivos demanera que no se ejecutentodas al mismo tiempo (vertabla en pagina siguiente.

Repetimos hasta completarLa segunda foto debe quedarligeramente más arriba que lasotras




1 2

5 6

3 4

7 8

9 10 11 12

Número Nombre del efecto SegundosDelay

ComentariosTimeSpan

1 Half turn 0.5 0 -

2 bart vert 2 0 -

3 Bump in from right 4 0 -

4 Cartoon 6 0 -

5 Stretchy 6 2 -

6 Square 9 0 -

7 Quick spin in 12 0 -

8 Smile 12 0 -

9 js_sparkle 20 0 -

10 V rotate 16 0 No queda en la pantalla

11 Horizontal sweep 24 0 -

12 andyg 26 0 No queda en la pantalla

placa Fade in 34 4 Ver página siguiente

Efectos de la página 8

1 2

Referencias1) Delay (demora es el tiempo, en segun-

dos y/o fracciones que esperará el efec-to para comenzar.

2) Time span indica la duración del efec-to. Todos los efectos tienen una dura-ción predeterminada. Con este valor semodifica esa duración.

3) Después de indicar el valor, hay quepresionar el botón Set

33

Es optativo colocar losnombres de los efectos bajocada foto, como se muestraen el ejemplo.

Efectos extrasAlgunos de los efectos queutilizamos no integran lacolección que trae el programaoriginal. Hay que descargar de laclase el archivo (comprimido conWinZip), que contiene efectos deanimación adicionales a los quetrae el programa. Se copian en lacarpeta keyframes, dentro deestá instalado PowerBullet.05-3-Animaciones keyframes.zip




Un efecto final...

Cuando probábamos los últimos efectos, se nos ocurrió que el usuariofinal se podría quedar esperando a ver qué otra cosa sucedía en esta pantallatan (exageradamente) animada. Decidimos entonces explicitar el final.

Para ello utilizamos un gráfico que se llama TheEnd.jpgDespués de finalizar con los efectos de las fotografías, cuando hayamos

probado y reprobado hasta estar seguros, insertamos este gráfico, lo coloca-mos en su lugar (en la capa superior, tapando todo) y le adjudicamos lossiguientes parámetros de la animación:

Efecto: Fade in

Delay: 34 segundos

Duración: 4 o 5 segundosEsto hace que la placa espere que finalicen todas las animaciones de las

fotografías, y aparece suavemente por transparencia, hasta ocupar toda la par-te de la pantalla con las fotografías

Delay

Las demoras en los proyectos multimedia son muy importantes. En la pá-gina de los efectos las utilizamos para que los mismos no sucedan todos simul-táneamente (la pantalla sería un caos).

En el slideshow de la página 9 lo utilizaremos para que las fotografías semuestren de a una por vez. En los textos les daremos otras funciones.

Página número 9 / submenú «SlideShow»

En internet se ha popularizado la expresión slideshow para nombrar a unaexhibición de fotografías, que se muestran una después de otra, generalmentecon avance automático, aunque también puede ser manual.

Nosotros armaremos uno con cinco fotografías, en dos variantes:

Ingreso por fade in

Ingreso por movimientoEsas variantes estarán en dos páginas separadas, lo que significa que la pá-

gina 9 será un nuevo submenú.Los pasos los conocemos a todos, de manera que sólo los enumeraremos:

Copiamos de la página de fotos el título, lo pegamos en lapágina 9 y lo editamos: sobreescribimos «SlideShow».

Creamos un rectángulo, modificamos su tamaño y lo «pinta-mos» de color gris oscuro.

Lo duplicamos y acomodamos según la captura (ver páginasiguiente).

Creamos el texto del primer recuadro. La tipografía es ArialBlack. Color blanco. Centrado.

La duplicamos, la colocamos sobre el segundo recuadro ycambiamos el texto.

La placa final. Cuandoarmamos el proyectoqueda tapando todo. Peroal ejecutarse, aparecedespués, por el delay.

+Recordar bajar las líneas detexto con




En ésto nos encontramos con una curiosidad. La palabra Mo-vimiento no la centra. Lo que tuvimos que hacer es alineartodo por derecha y volver a centrarla.

Para el primer texto establecemos que al hacer clic vaya a lapágina 10

Los textos también pueden funcionar como botones.

Para el segundo texto que vaya a la página 11.

La página terminada.

Esta es una forma sencilla yrápida de hacer botones.

Página número 10 / «SlideShow» por Fade in

La página 10 era una reserva del fondo y los botones. Copiamos todo ycreamos varias páginas más y pegamos todo en cada una de ellas. Las que nossobren al final del proyecto las podremos borrar.

11) Insertamos el gráfico

b-volver-a.jpg, loacomodamos en ellugar que muestra lacaptura.

2) Lo convertimos enrollover, colocando enla opción over el gráficob-volver-b.jpg,.

3) Le asignamos la acción(Item clic action) ir apágina 9.

4) Lo copiamos y lopegamos también en lapágina 11.




2

3

1) Insertamos la fotografíamaiz-1.jpg y laacomodamos.

2) Le asignamos laanimación Fade in.

3) Establecemos Delay en0.5 segundos.

4) Establecemos laduración en 2segundos.

Procedemos de la mismamanera con el resto de lasfotografías (en orden).La demora (delay) laestablecemos en 5, 10. 15 y20 segundosrespectivamente.La duración será paratodas de 2 segundos.

Las opciones de retardo(delay) que hemosestablecido sonbastante breves, enrelación al carácter dedemo de este proyecto.En una aplicacióneducativa, los lapsospueden (y en algunoscasos deben) sernecesariamente másprolongados.




Página número 11 / «SlideShow» por movimiento

11) Insertamos la fotografía

colonia-1.jpg y laacomodamos.

2) Le asignamos laanimaciónOpen horiz+vert

3) Establecemos Delay en0.5 segundos.

4) Establecemos laduración en 2segundos.

2Procedemos de la mismamanera con el resto de lasfotografías (en orden).La demora (delay) laestablecemos en 5, 10. 15 y20 segundosrespectivamente.

Los efectos demovimiento debemosmedirlos en relación asu discreción ysobriedad. No puedenconvertirse en losprotagonistasprincipales, y sólo sonuna manera nomonótona de ingresode las imágenes.En cada proyectodebemos ver quéanimación es la queconviene, según lascaracterísticas ytamaño de lasimágenes.No utilizar más de unao dos animacionesdiferentes.

Cambiar el botón en la página 4 (también en la 5 y 6)

Como hemos podido comprobar, podemos ir desde cualquier página a lapágina de los submenúes (Fotos, Textos, Sonidos). Lo que no es lógico es queen esas páginas (las de submenúes) existan botones que lleven a esas mismaspáginas. De manera que en cada una de ellas hay que borrar el botón respec-tivo e insertar en su lugar un gráfico del botón grisado:

Los nombres de losgráficos que remplazan alos botones son losmismos, con el agregadode la palabra gris.




Página submenú «Textos»

De las páginas de texto sólo hay que hacer la del submenú Textos y la 16.Las otras son de confección optativa (las hace quien desee practicar).

Cada una de las flechasrojas (fuente windings,Alt+138) es un botón quelleva a las páginas 14, 15,16 y 17, de arriba haciaabajo.

+Recordar bajar las líneas detexto con




Página 14 Página 15

Página 16 Página 17




Página submenú «Sonidos»

Este submenú lo haremos bastante sencillo, ya que las opciones de mani-pulación de sonido son muy pocas. Apenas elegir el clip y establecer unademora en su inicio.

El uso habitual de estos recursos será acompañar, como fondo, elementosvisuales.

En este proyecto los ubicamos en paginas especiales sólo para ejercitar-nos en el proceso de inserción.

11

1

En la página 6, del submenúsonidos, insertamos elgráfico fondo-sonidos.jpg.Lo acomodamos con laayuda del mouse y lasflechas de dirección.1) Las dos guías visuales

que dejamos en elgráfico para colocarlocorrectamente.

2) Con el botón de enviaruna posición abajocolocamos el gráficopor debajo del título.

2




11) Colocamos y

formateamos los dostextos que mostramosen la captura.

2) A «Efectos de sonido»le atribuimos la acciónir a página 12.

3) A «Un tango» leatribuimos la acción ir apágina 13.

2

3

Página 12 / Efectos de sonido

1Editamos el título (si quedóabajo lo acomodamosarriba nuevamente)Insertamos el gráficob-volver-a.jpg, loconvertimos en rollover y leasignamos la acción de ir apágina 6




21) Con el botón de insertar

sonido abrimos laventana que nospermite navegar por laPC hasta encontrar elarchivo de sonido quenecesitamos.En este caso cargamosefectos.mp3

2) Confirmamos con Abrir.

1 2

31) Establecemos como

delay (demora) 1segundo.Esta demora tiene comoobjeto crear en elusuario final una ciertaexpectativa, mientrasreconoce la nuevapágina.

2) Completamos con OK

1 2

Página 13 / Tango

11) Editamos el título

(Sonido) y loreemplazamos por elnombre del tango:Bandoneón arrabalero.

2) Con figuramos unefecto de ingreso deFade in, con un delayde 0.5 segundos.

3) Creamos el texto«Tango (fragmento)»

4) Configuramos un efectode ingreso de Fade incon un delay de 3segundos.

1

3




21) Cargamos el archivo de

sonidoBandoneon_arrabalero.pm32) Configuramos un delay

de 1.5 segundos, demanera que la músicacomience mientras sevisualizan los dos títulos


1

2 3

Sin fantasías

Ni en Power Bullet, ni en ningún otro programa de autor similar esposible sincronizar eventos de sonido con eventos de pantalla.

Por ejemplo, si en el slideshow quisiéramos que un sonido acompa-ñe la apertura de cada imagen, no podremos lograrlo con las herramien-ta delay. Podemos esforzarnos mucho y lograr (¡al fin!) un resultado exi-toso... por un rato. En cualquier otra máquina, o incluso en la misma, enotra sesión en la que estén abiertos otros programas, la sincronizacióndesaparecerá.

Eso sucede porque los tiempos de ejecución de los sonidos y el vi-deo de la computadora se manejan de manera diferente y autónoma.

La única manera de lograr esa sincronización es construyendo un vi-deo, en el que las imágenes y la pista del sonido se integran en un archi-vo único.




Nuevamenteen el menú principal

Un proyecto como éste no quedaría completo si no lo «firmamos». Vamosa hacer entonces una página de créditos.

2

11) En la página del menú

principal (página 3)insertamos el gráficocreditos.jpg

2) Le colocamos la acciónir a página 18

1) En la página 18colocamos nuestroscréditos (autor,institución, etc.) con losgráficos que nosparezcan másadecuados.

NO el gráfico quepusimos nosoiros en elejemplo...

2) Al botón inicio loredireccionamos paraque lleve a la pagina 3(del menú).




Otro botón sin forma de botón

Agregaremos la palanca de la izquierda del texto. Un botón que tampocotiene forma de botón, que nos muestra la variedad de posibilidades que nosdan los botones rollover.

1 2 3 Los gráficos para la tresposiciones del botón:1) B-palanca-a.gif para el

botón en reposo2) B-palanca-b.gif para la

posición mouse over.3) B-palanca-c.gif para el

botón presionado.4) Como acción (Item clic

action) le inidcamos ir ala página 19 (vercapítulo siguiente)




No sólo de botonesvive el hombre

Otros usos de la opción rollover

La opción rollover, que hemos utilizado para indicar al usuario que ungráfico funciona como botón, tiene otro usos interesantes. Como finalmentese trata de un gráfico que es sustituido por otro cuando detecta el mousesobre el primero, la opción permite producir gráficos animados, que funcio-nan al desplazar el mouse por la escena y eventualmente pueden llevr a otraspáginas.

Construiremos un ejemplo sencillo en las últimas páginas de nuestro pro-yecto.

Esta referencia es sólo paraexplicar el criterio. En estecaso el rollover contiene lainformación adicional, y no

necesita ninguna acciónagregada. Por lo tanto, en el

proyecto no incluiremos estapágina.

Agrega info adicional

Muestra la pieza

Explicación para la demo.No va en el proyecto.

19 20

21

Para este área, nocolocaremos lasinstrucciones paso a paso.sólo los nombres de loselementos y alguna otrainformación.




Página 19

Utilizamos una parte de un despiece de un motor eléctrico

Fondo_despiece.gif

BOTÓNb-66

BOTÓNb-11

BOTÓNb-13

Botones

b11

Este botón no tiene acción. Muestra la info adicional median-te el efecto del rollover. Recordar colocarle como acción quevaya a la misma página.

b13

Este botón va a la página 20.

b66:

Este botón va a la página 21

Página 20

En esta página sólo se carga el gráfico Fondo despie-ce ruleman.gif al cual se le asigna;

item clic action: ir a pág. 19item animation: Fade in

La idea es que parezca queel recuadro con el detallede la pieza aparezcapaulatinamente, mientras seesfuma levemente el fondo.Es muy importante que elgráfico esté registradoexactamente, de maneraque la ilusión visual seaefectiva, sobre todo alvolver.

Previamente hay queborrar el fondo y los tresbotones (Fotos, Textos ySonidos).El botón Inicio hay queredireccionarlo a la página3 y ubicarlo más abajo y ala izquierda.




Página 21

En esta página también se coloca sólo un gráfico:circuito.gif

item clic action: ir a pág. 19

...y sobre el texto se coloca un rectángulo de color con transparencia.

Sobre efectos, ilusiones y trucos

Hemos mostrados sólo tres de los trucos posibles, utilizando la capacidaddel programa de cambiar un gráfico cuando detecta el mouse sobre él.

Poner la información adicional en el botónAunque en este proyecto lo usamos sólo para agregar información textual,

es posible mostrar información visual, que se muestre al pasar el mosue sobreel gráfico. La dificultad es que los botones son siempre rectangulares, por loque no siempre es fácil colocarlos.

Simular un detalle que aparece sobre la imagen de fondoEs lo que hicimos con el botón 13. En realidad va a otra página, pero en

ella aparece el mismo fondo, con el detalle o cartel superpuesto. Al hacer quela página ingrese con efecto fade in, parece que el cartel o detalle aparecepaulatinamente en la misma página. Al gráfico de fondo hay que ponerle comoacción que regrese a la página de origen, con lo que la hacer clic en cualquierlugar, se vuelve a la situación original.

Es muy importante que los tráficos estén perfectametne registrados, paraque la ilusión sea total.

Si hay muchos elementos en la página (no sólo un gráfico), puede ser con-veniente colocar al finalizar el armado, un recuadro transparente que cubratoda la página, que funcione como botón de volver.

Colocar información de otro tipoCualquier información, en cualquier formato (no sólo gráficos) se puede

colocar en una página adicional.

Comentario: el circuito notiene nada que ver con elmotor... Es sólo paraejemplificar.

Botones que hacen click

Podemos colocar, en todas las páginas que no tengan otro sonido,un pequeño archivo mp3 que contiene un click de botón. Se llamaclick03.mp3 y le da un toque de realismo al pase de página.




El archivo flash final, definitivo, lo obtenemos con el midmo botón conque hicimos las pruebas durante el trabajo.

1Luego de presionar elbotón, aparecerá unventana que mostrará elavance del proceso.

El producto final




2Inmediatamente 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.1) En la carpeta del

proyectoencontraremos, junto atodos los gráficos ysonidos, variosarchivos:

2) 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.El ícono no va a sercomo el de la captura.Posiblemente una hojitacon con símbolo deFlash.

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

5) Un archivo HTML

1

2

3

3 4

Una vez más insistimos en la importancia de poder ver las extensiones delos archivos, y no guiarnos sólo por los íconos, que pueden 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.




Transparencias

Vamos a hacer un ejercicio para comprobar una de las aplicaciones posi-bles de las transparencias de objetos en Power Bullet.

Como vimos, los algunos botones deben ser desactivados en algunas pá-ginas, pero manteniéndolos visibles e indicando que están inactivos. El «códi-go» que indica esa situación es el grisado. Podemos hacerlo de dos maneras:

Reemplazando el botón por un gráfico grisado y no atribuirleninguna acción al hacer clic (lo que hicimos en el proyecto).

Cubrirlo con un gráfico transparente que lo vuelva grisado.Utilizaremos la segunda opción, para aprender sobre transparencias y ajuste

crítico de posición y tamaño.

11 1) Clic sobre el botón de

insertar recuadros.

2) Aparecerá un recuadroen el vértice superiorizquierdo del escenario.2

En la página 4

El ejercico está diseñadosobre la base de esteproyecto, pero puedehacerse en cualquier otrolugar.




21) Con el puntero del

mouse lo trasladamoshasta cubrir el primerbotón (FOTOS)

2) Tomando los puntos decontrol modificamos sumedida hastaaproximarla a la delbotón.

2

1

3

4


color de relleno.

2) Elegimos el grismediano.

3) Confirmamos conAceptar.

2

2

1) Clic con botón derechodel mouse sobre elrectángulo gris.

2) Aparece menúemergente.

3) Seleccionamos Itemproperties (propiedadesdel objeto).

1

2

3




51

3

4 5

2 1) Aparece la pantalla depropiedades del objeto.

2) Establecemos laopacidad en 50%.

3) Si tuviera sombra,podríamos establecertambién opacidad paral misma.

4) Podemos establecerque tenga relleno,recuadro o ambos.Como el filete nomolesta, lo dejamos.


6Abrimos la lupa de pantallaZZoom y nos ubicamos enla zona del botón.Tomando los puntos decontrol ajustamos eltamaño hasta que cubrasólo el botón, exactamente.Como se ve en la capturade abajo.Al principio cuesta un pocoacostumbrarse, pero sepuede...




Como el gráfico tapa (está por arriba) al botón, el mismo queda inactivo,aunque puede verse a través del gráfico.




Tips

PowerBullet es un programa muy interesante, pero, como los de su tipo,nacidos en pequeños estudios y con exigencias importantes, suele fallar. Tantoen algunas concepciones de diseño como en su funcionamiento.

En este capítulo recopilaremos algunos trucos (tips) que hemos utilizadopara esquivar los problemas.

Perder la selección

Si mientras trabajamos con un objeto hacemos clic sobre el fondo, perde-mos la selección del objeto y no podremos volverlo a seleccionar. Esto suce-de también cuando trabajamos con texto y hacemos clic dentro de la caja detexto, pero no directamente sobre una letra...

1) Si hacemos clic en lazona de la caja, dondeno hay ninguna letra,perderemos laselección.

2) Pero eso sucedetambién en zonas muypróximas a las letras

12

Lo mismo sucede cuando estamos trabajando con imágenes o figuras (re-cuadros y óvalos), pero en este caso, como los objetos tienen mucho mayortamaño, las posibilidades de error son muy pequeñas.

Cuando perdemos la selección, en un proyecto de este tipo, que tiene ungráfico que cubre todo el fondo, lo que sucede es que queda seleccionado esegráfico, y no nos devuelve el control. Hay que tener cuidado, porque cual-quier acción que hagamos, se aplicará sobre el gráfico del fondo.




Inestabilidad

En algunas ocasiones, el programa se vuelve inestable y produce modifica-ciones en los objetos por su cuenta. Por ejemplo, agranda desmesuradamenteun texto. No siempre es sencillo volver a poner las cosas en su lugar.

En esos casos es mejor borrar la página, crear una nueva y comenzar desdeel principio (la página, no el proyecto).

Inestabilidad menor

Otra manifestación de esos arranques temperamentales del programa esque al configurar el tamaño de un texto, y querer reducirlo posteriormente,no acepta los cambios.

La solución que hemos encontrado es modificar otro parámetro (por ejem-plo el alineado) y volver luego a intentar. Si el objeto se sigue resistiendo acambiar, lo más rápido es borrarlo y hacerlo nuevo.

Precaución

Aunque no hemos perdido en ningún momento el trabajo, un par de vecesa lo largo del proyecto, lo guardamos con otro nombre.

El programa vuelve a hacer una carpeta nueva y copia allí todos los ele-mentos vinculados (gráficos y sonidos).

Párafos

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:

Botones del programa Missing

Aunque no hemos podido replicar la falla, alguno de nuestros betatesters(ayudantes que comprobaron el instructivo) nos reportaron que no todos losbotones de comando del programa aparecían. Esta falla, que no pudimosdetectar cómo ni por qué se produce, no significa un problema serio, ya quetodos los comandos a los que se acceden desde los botones se encuentrandisponibles en los menúes del programa.

La soluciónEn realidad la selección no se pierde: se cambia al gráfico del fondo. Como

no hay ningúnas «afuera» para hacer clic y deseleccionar el fondo, la soluciónconsiste en oprimir la tecla Esc para salir de esa selección y poder volver alobjeto que necesitemos.

Cuidado con ésto: elprograma puede mantenerlinks a objetos que quedenen las carpetas anteriores.No borrarlas.

+




Guardar

En nuestra experiencia, la forma más eficaz de guardar los avances en elproyecto, es utilizar el botón de publicar.

Cuidado al pegar

Cuando pegamos culaquier objeto con Ctrl+V o el botón de pegar, si hayalgún objeto seleccionado en el escenario, será reemplazado por el nuevoobjeto. Normalmente vemos y podemos corregir ésto. Pero si lo selecciona-do es un gráfico de fondo, los puntos de selección pueden quedar fuera de lavista. Como precaución, antes de pegar, nos aseguramos de no tener nadaseleccionado con la tecla Esc.

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

+

Windows Vista

Power Bullet tiene problemas con algunos gráficos en formato JPG cuan-do trabaj en el sistema operativo Windows Vista. el síntoma es que no compi-la los archivos (no produce los SWF ni los EXE).

La solución es convertir esos archivos en GIFs, con la opción de ditheringo difusión.

Documents

UNIDAD 3 Producción de pequeños objetos de enseñanza · 2020-01-20 · Unidad 3 - 6 Juan Carlos Asinsten 05 - La producción de material didáctico (2)) Especialización en Entornos