Está en la página 1de 62

Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

CONTENIDO MANUAL

CAPÍTULO1: EL INICIO................................................................................................................................. 4
1. CREAR UN NUEVO PROYECTO. ........................................................................................................ 4
2. RECONOCER LAS DIFERENTES PARTES DE LA INTERFACE DEL PROGRAMA. ...................................... 6
3. AJUSTAR PREFERENCIAS................................................................................................................ 10
4. MODIFICANDO LA CONFIGURACIÓN DEL PROYECTO. .................................................................... 13
CAPÍTULO 2: GRÁFICOS Y TEXTO............................................................................................................... 15
1. COMENZANDO CON EL CAPÍTULO. ................................................................................................ 15
2. ELIGIENDO UN FONDO DE PÁGINA. ............................................................................................... 15
3. AÑADIR OBJETOS DE IMAGEN. ...................................................................................................... 22
4. AÑADIR OBJETOS DE ETIQUETA (LABEL). ....................................................................................... 29
5. AÑADIR OBJETO PÁRRAFO. ........................................................................................................... 31
6. AÑADIR OBJETO TEXTO ENRIQUECIDO (RICH TEXT). ...................................................................... 32
7. DUPLICAR OBJETOS. ...................................................................................................................... 34
CAPÍTULO 3: BOTONES, ACCIONES Y PÁGINAS ........................................................................................ 35
1. AÑADIR BOTONES. ........................................................................................................................ 35
2. ALINEAR OBJETOS. ........................................................................................................................ 37
3. AÑADIR ACCIONES RÁPIDAS O SIMPLES. ....................................................................................... 38
4. EDITOR DE SCRIPTS. ...................................................................................................................... 40
5. AÑADIR PÁGINAS A NUESTRO PROYECTO...................................................................................... 42
6. NAVEGAR POR LAS PÁGINAS. ........................................................................................................ 43
CAPÍTULO 4: VIDEO .................................................................................................................................. 47
1. AÑADIR UNA IMAGEN DE PANEL COMO FONDO DE NUESTRO VIDEO. .......................................... 47
2. AÑADIR UN OBJETO DE VIDEO. ..................................................................................................... 48
3. AÑADIR CONTROLES DE VIDEO PERSONALIZADOS......................................................................... 49
4. AÑADIR ACCIONES A NUESTRO BOTONES. .................................................................................... 50
CAPÍTULO 5: SONIDO ............................................................................................................................... 51
1. CAMBIAR LOS SONIDOS POR DEFECTO DEL OBJETO. ..................................................................... 51
2. QUITAR EL SONIDO EN LOS OBJETOS. ............................................................................................ 52
3. CONFIGURACIÓN DE EFECTOS DE SONIDO DE UN OBJETO ESPECÍFICO. ......................................... 52
4. AÑADIR MUSICA DE FONDO A NUESTRO PROYECTO. .................................................................... 52

2 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

5. PAUSAR MUSICA DE FONDO. ........................................................................................................ 53


CAPÍTULO 6: PUBLICACIÓN PROYECTO .................................................................................................... 56
1. PUBLICAR EL PROYECTO EN UNA CARPETA EN EL DISCO DURO. .................................................... 56
2. PUBLICAR UN EJECUTABLE COMPRIMIDO. .................................................................................... 59
3. PUBLICAR EL PROYECTO EN UN CD O DVD..................................................................................... 61

3 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

CAPÍTULO 1
EL INICIO

1. CREAR UN NUEVO PROYECTO.

Para crear un nuevo proyecto debemos seguir los pasos siguientes:

1) Abre el AutoPlay.

Utiliza el menú Inicio para iniciar el programa AutoPlay Media Studio.


Inicio > Todos los Programas > Indigo Rose Corporation > AutoPlay Media Studio 7.0 ó hacer doble clic en
el icono de Autoplay que se creó en el Escritorio.

2) Cuando aparezca la ventana de Bienvenida, haz clic en "Create a new project" (Crear un nuevo
proyecto). La ventana de Bienvenida aparece siempre que inicias el AutoPlay Media Studio. Esta te
permite crear fácilmente un Nuevo proyecto, abrir uno ya existente, o restablecer el último proyecto en el
cual trabajaste. (Restablecer el último proyecto automáticamente abre el proyecto que habías abierto la
última vez que tu iniciaste el AutoPlay). Cuando haces clic en “Create a new Project” (Crear un nuevo
proyecto), la ventana de bienvenida se cierra y la ventana New Project (Nuevo Proyecto) aparece.

4 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

3) Explora la ventana New Project.

La ventana New Project, te permite ponerle nombre a tu proyecto y elegir con cuál tipo de proyecto te
gustaría iniciar.
En medio de la ventana New Project hay una lista desplazable con un montón de imágenes miniatura en
ella. Cada miniatura representa una distinta plantilla de proyecto. Una plantilla de proyecto es un
“proyecto iniciador” prefabricado que puedes utilizar para sacarle provecho a tu propio proyecto. Como
puedes ver, las plantillas de proyecto vienen en muy variados estilos temas.
4) Cambia el Nombre del Proyecto a Tutorial.
Es común que quieras reemplazar el texto por defecto "My Project" con el nombre adecuado para este
proyecto, así que selecciona todo el texto en el campo Enter Project Name y reemplázalo escribiendo por
ejemplo Tutorial.

Este será el nombre de la carpeta de proyecto, que es la carpeta que será utilizada para mantener todos
los archivos del proyecto juntos, y también será el nombre del archivo de proyecto, el cual es el archivo
que contiene todas las configuraciones y opciones que confeccionan tu proyecto. (Este es el archivo que
“abrirás” cuando quieras cargar este proyecto en el AutoPlay). Cada proyecto necesita un nombre, y ese
nombre tiene que ser único. No puedes darle el mismo nombre a dos proyectos (y de hecho AutoPlay no
te lo permitirá).
6) Haz clic en la miniatura de la plantilla Blank Project (Proyecto en Blanco). Estarás comenzando el
proyecto tutorial desde cero, así que selecciona la plantilla Blank Project.
Nota: Para seleccionar una plantilla, sólo haz clic en su miniatura.
7) Haz clic en "Create Project New" (Crear un Proyecto Ahora).
Cuando hagas clic en Create Project New, la ventana New Project Options se cerrará, AutoPlay creará la
carpeta de proyecto y el archivo de proyecto con el nombre que elegiste, y el proyecto se cargará dentro

5 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

del ambiente de diseño.


Nota: La interface del programa AutoPlay Media Studio es también conocida como ambiente de diseño.
Puesto que seleccionaste una plantilla de proyecto en blanco, tu proyecto consiste en una página en
blanco, sin objetos ni nada. ¡Una pizarra limpia para que tú la llenes!
Consejo: Una vez que estés en el ambiente de diseño, puedes iniciar desde ahí un nuevo
proyecto eligiendo Archivo > Nuevo o CTRL + N.

2. RECONOCER LAS DIFERENTES PARTES DE LA INTERFACE DEL PROGRAMA.

1) Explorar la ventana del programa Autoplay.


La ventana del programa AutoPlay está dividida en un número de partes distintas. En la parte superior de
la ventana, justo debajo de la barra de título, están los menús del programa. Puedes hacer clic sobre estos
menús para acceder a varios comandos, configuraciones y herramientas
Abajo de los menús del programa están un buen número de barras de herramientas. Los botones de estas
barras de herramientas te proporcionan un fácil acceso a muchos de los comandos que están disponibles
en los menús del programa.
Consejo: Puedes crear tus propias barras de herramientas personalizadas o editar las ya
existentes eligiendo Herramientas >Personalizar.

Barra de Menús Barra de


Herramientas

Pestaña de Páginas

Paneles
de
Control
Área de trabajo o de
página

Barra o Medidor de
Tamaño del Proyecto

Barra de Estado

6 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

En medio de la ventana del programa, la superficie de la página actual está visible en el área del trabajo,
medida en pixeles por un par de reglas.
En la parte inferior de la ventana, una barra de estado refleja tu interacción con el programa y te ofrece
una cantidad de lecturas informativas.
El resto de la ventana del programa está constituida de sub-ventanas individuales conocidas como
paneles. Cada panel puede estar anclado, con pestañas, ser inmovilizado, redimensionado o arrastrado, e
incluso hacer que flote en la parte superior del ambiente de diseño.
Consejo: Para mostrar/ocultar paneles, utiliza el menú Ver > Paneles.

Un panel muy útil es el panel Propiedades (Properties). Por defecto, éste está localizado a la
izquierda del área de trabajo, a todo lo largo del lado izquierdo de la pantalla. Aquí es donde puedes ver y
editar la configuración del objeto o la página actualmente seleccionada.
La configuración en el panel propiedades está organizada en categorías. Puedes expandir o colapsar estas
categorías haciendo doble clic en el encabezado de cierta categoría, o haciendo clic en los pequeños
símbolos + o – que aparecen en la columna a su izquierda

Nombre ó título del Panel

Expandir o colapsar Encabezado ó Título


categorías categoría

Configuración Valor

2) Cierra el panel Propiedades.

Puedes cerrar un panel haciendo clic en la pequeña de su barra de título.


3) Elige Ver > Paneles > Propiedades para abrir de nuevo el panel Propiedades.
Todos los paneles pueden ser activados o desactivados en el menú View. Cuando eliges Ver > Paneles >
Propiedades, el panel Propiedades es restaurado a la misma posición que ocupaba antes de que lo
cerraras.
4) Haz más pequeño el panel Propiedades arrastrando su borde superior hacia abajo.
Puedes cambiar de tamaño los paneles arrastrando sus orillas. En este caso, quieres arrastrar la parte
“entre” dos paneles…el pedacito de panel arriba del panel Propiedades y abajo del panel Explorador de
Proyecto. Al comenzar a arrastrar la orilla de un panel aparecerá una línea que muestra dónde se moverá

7 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

esa orilla cuando sueltes el botón del ratón. Ver la captura de esta acción en la siguiente imagen.

Cuando los paneles están anclados uno junto a otro, al arrastrar una orilla se redimensionarán ambos
paneles al mismo tiempo (haciendo uno más grande y otro más pequeño). Como un hecho dado, cuando
hagas el panel Propiedades más pequeño, el panel Explorador de Proyecto se hará más grande al mismo
tiempo.
5) Cambia de lugar algunos paneles. Prueba moviendo paneles a la orilla de la pantalla para anclarlos, o
arrástralos arriba de otros paneles para combinarlos de distintas maneras.
Puedes cambiar de lugar los paneles arrastrándolos por su barra de título. Al mover un panel, una silueta
te mostrará el área general donde el panel terminará. Si arrastras el panel cerca de la orilla de la pantalla,
o cerca de otro panel, la silueta se “adaptará” para mostrarte que el panel puede ser anclado, puesto con
pestañas o combinado de otro modo con el área enfocada.

Date cuenta que cuando los paneles están con pestañas, al arrastrar su barra de título mueve al mismo
tiempo todos los paneles con pestañas. Puedes “arrancar” una pestaña arrastrándola fuera de las otras.
Puedes también reordenar las pestañas arrastrándolas a la izquierda o a la derecha.
Consejo: Cuando estás arrastrando paneles, es la posición del cursor del ratón la que determina cómo se
acomodará la silueta del panel en un lugar. Por ejemplo, para anclar un panel debajo de otro, arrastra el
panel de tal manera que el cursor esté cerca de la orilla inferior de ese panel. Para “pestañear” un panel
con otro, arrastra el panel de manera que el cursor esté en la orilla superior de la barra de título del otro
panel.

8 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

Los paneles anclados también pueden ser “pinchados” o “despinchados”. Los paneles pinchados
permanecen abiertos cuando no los estás utilizando. (Todos los paneles por defecto están pinchados). Los
paneles despinchados permanecen cerrados hasta que haces clic en ellos o posicionas el ratón sobre ellos.
Cuando los necesites posiciona el ratón sobre ellos y se deslizarán y abrirán por encima de todo, y luego se
deslizarán y cerrarán cuando termines de necesitarlos.

Puedes pinchar o despinchar un panel haciendo clic en el pequeño icono “pin” de la barra de título del
panel.

Pinchado Despinchado
Los paneles recuerdan su posición incluso después de que los despinches. Si despinchas un panel y luego
lo pinchas de nuevo, regresará a la posición que tenía antes de que fuera despinchado.
Nota: Los paneles con pestañas son pinchados y despinchados juntos. Si despinchas un panel que está
“pestañeado”, todos los demás paneles que están pestañeados con él también serán despinchados.
6) Hacer Clic en el menú Ver > Layouts >AutoPlay Menú Studio 3.0.
AutoPlay viene con algunos diseños de espacios de trabajo preconfigurados a los que puedes acceder
desde el menú Ver. El "AutoPlay Menú Studio 3.0" modela el ambiente de diseño de uno de los
predecesores del AutoPlay 7.
Consejo: Puedes crear tus propios diseños de espacio de trabajo ordenando los paneles a tu
gusto y luego eligiendo Ver > Paneles > Save Layout. Cualquier diseño que guardes será
añadido a la lista en el menú View, y puede ser seleccionado igual que cualquier otro diseño
preconfigurado.
7) Hacer Clic en el menú Ver > Layouts > Restore Default.
Esto restaura el ambiente de diseño al espacio de trabajo por defecto, el cual es el único que usaremos a
lo largo de este tutorial.
8) Hacer Clic en el menú Ver > Cuadrícula (Grid) para activar la cuadrícula (Ctrl + Shift + R).
Un esquema de cuadrícula aparecerá en el área de la página. Esta cuadrícula puede ser útil cuando quieras
alinear objetos visualmente en la página.

9 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

Consejo: Puedes hacer que los objetos "se ajusten" a la cuadrícula cuando los muevas
eligiendo Ver > Alinear a Cuadrícula (Ctrl + Shift + R).

9) Hacer Clic en el menú Ver > Cuadrícula (Grid) para desactivar la cuadrícula.
Eligiendo Ver > Cuadrícula (Grid) de nuevo se desactiva la cuadrícula.

3. AJUSTAR PREFERENCIAS.

Hay una cantidad de preferencias que puedes configurar para ajustar el ambiente de diseño de AutoPlay y
satisfacer tu estilo de trabajo. Vamos a dar un vistazo a algunas de ellas.
1) Hacer Clic en el menú Edición > Preferencias.
Esto abrirá el cuadro de diálogo Preferencias, donde todas las preferencias de AutoPlay pueden ser
encontradas.

Las preferencias están ordenadas en categorías. Las categorías están listadas al lado izquierdo del cuadro
de diálogo. Cuando haces clic en una categoría, sus preferencias correspondientes aparecen al lado
derecho del cuadro de diálogo.
Consejo: Si ésta es la primera vez que has abierto el cuadro de diálogo Preferencias, la
categoría Build (Construcción) ya estará seleccionada. Una de las opciones Previsualizar en
esta categoría nos da la opción de habilitar mensajes de notificación. Por ejemplo. La opción

10 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

Mostrar la ventana te permite mostrar información de depuración en una ventana separada cuando das
una vista previa el proyecto. Activar esta opción puede ayudarte a ver qué está pasando “atrás del telón”
durante una vista previa, lo cual puede ser útil si te topas con algún problema mientras estás probando tu
proyecto.
2) Haz clic en la categoría Environment (de Ambiente).
Las preferencias Environment (de Ambiente) te permiten cambiar la manera en que se ve el ambiente de
diseño. Por ejemplo, puedes cambiar los colores que son utilizados cuando los objetos están
seleccionados, o cambiar el color de fondo del área entera de trabajo. Incluso puedes cambiar el color de
la “sombra” que aparece detrás de la superficie de la página (o desactivarla completamente).

Clic para desactivar la


sombra en el área de
trabajo.

Consejo: Desactivar la sombra de la página puede mejorar la visualización de las líneas de los
objetos arriba del fondo y justo en una orilla de la página. Observe el resultado en las siguientes
imágenes.

3) Expande la categoría Environment haciendo doble clic en ella, y luego haz clic en la categoría Project
Size.

11 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

También puedes expandir la categoría Enviroment haciendo clic en el pequeño símbolo “+” a la izquierda
de ésta.

Las

preferencias de Tamaño del Proyecto es donde puedes ajustar el tamaño del medio de salida (CD, DVD), el
cual determina la escala del medidor en el panel Tamaño de Proyecto.

Si ajustas el tamaño de esta escala para que concuerde con el tamaño del medio de salida (CD, DVD) que
estés usando, tendrás un indicador visual que te informa cuánto espacio va abarcando tu proyecto a
medida que le vas añadiendo cosas.
Date cuenta que esta preferencia no afecta el proyecto para nada; el tamaño del medio de salida sólo
afecta el medidor de tamaño en el panel Project Size (Tamaño de Proyecto). Tampoco importa qué tan
grande es tu disco en el quemador, si quieres que el medidor de tamaño se ajuste al tamaño de medio de
salida que estés usando, necesitarás cambiar el tamaño del medio de salida manualmente cuando alternes
de un tamaño de medio a otro.
4) Tienes la libertad de explorar algunas de las otras categorías. Cuando lo hayas hecho, haz clic en
ACEPTAR para cerrar el cuadro de diálogo Preferencias.
Hay muchas otras preferencias que puedes ajustar, tales como el número de niveles de deshacer para el
programa (en la categoría Document), y qué sucede cuando arrastras un archivo dentro de la página (en la
categoría Drag and Drop). Toma algún tiempo para navegar a través de las categorías y familiarizarte con
las diferentes opciones que estén disponibles.
Recuerda que puedes hacer clic en la Ayuda o presionar F1 para obtener más información acerca de

12 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

cualquier configuración de una categoría específica.

4. MODIFICANDO LA CONFIGURACIÓN DEL PROYECTO.

La configuración del proyecto afecta la apariencia y comportamiento de tu aplicación en tiempo de


ejecución como por ejemplo el nombre o título de la ventana de nuestro proyecto, el tamaño de la página,
estilo, cambiar icono para nuestro proyecto, etc.
Nota: Cada proyecto tiene un número configuraciones que pueden ser modeladas sobre una base por
proyecto. A estas configuraciones de amplio proyecto se puede acceder desde el menú Proyecto (Project).
1) Elige Proyecto > Ajustes (Settings).
Esto abre el cuadro de diálogo Project Settings (Configuraciones del Proyecto).

2) Cambiaremos el Título de la ventana.


Por defecto, el título de la ventana es el mismo que el nombre del proyecto. Como este proyecto los
llamamos en principio TUTORIAL, ese es el nombre de nuestra ventana, pero lo podemos cambiar por un
título algo más apropiado.
Para cambiar el título de la ventana, reemplaza el texto del campo TUTORIAL por Mi primer Proyecto en
AutoPlay.
Nota: Este texto aparecerá en la barra de título del programa cuando el usuario corra tu aplicación.
3) Asegúrate que el tamaño de página está ajustado a "Medium".
Configurar el tamaño de página a “Medium” ajusta la anchura y altura a 630 por 425. Este es un tamaño
bueno y seguro para una aplicación, puesto que se ajustará a cada resolución de pantalla común en
Windows que sea 640x480 o superior.
Nota: Esto ajusta la anchura y altura de todas las páginas de tu proyecto.
4) Haz clic en OK para cerrar el cuadro de diálogo Application Settings.

13 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

El resto de las configuraciones están bien, así que haz clic en OK para cerrar el cuadro de diálogo Ajustes
del Proyecto (Project Settings) y regresar a la ventana principal del programa.
5) Ahora haz clic en el menú Publicar > Previo ó F5 para poder ver una vista previa de nuestro proyecto.
La característica de vista previa de AutoPlay te permite “echarle un vistazo” a tu aplicación antes de
construir o quemar el proyecto. En este punto no hay mucho que ver, puesto que el proyecto sólo consta
de una página en blanco. Pero el texto que escribiste para el título de la ventana aparece en la barra de
título, y si puedes medir la página, te darás cuenta que sin duda es de 630 pixeles de ancho por 425 pixeles
de alto.

6) Haz clic en el botón Cerrar de la barra de título para salir de la vista previa.
Cuando salgas de la vista previa, regresarás a la ventana del programa del AutoPlay.
7) Finalmente Grabemos nuestro proyecto clic en Archivo > Guardar ó CTRL + S.
Cuando guardes el proyecto, todos los cambios que le has hecho serán almacenados en el archivo de
proyecto. Puedes abrir ese archivo de proyecto en cualquier momento para continuar trabajando en el
proyecto.
Resumen del capítulo. En este capítulo aprendiste:
ü Crear un nuevo proyecto.
ü Asegurarte que tienes la versión más reciente de AutoPlay Media Studio.
ü Reconocer las distintas partes de la interface del programa.
ü Personalizar el espacio de trabajo.
ü Cargar un diseño preconfigurado de un espacio de trabajo. .
ü Cambiar el título de la ventana del proyecto.
ü Ajustar el tamaño de página del proyecto.
ü Ver una Vista Previa de nuestro proyecto.
ü Grabar nuestro proyecto.

14 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

CAPÍTULO 2
GRÁFICOS Y TEXTO

En esta lección aprenderás acerca de los objetos, los bloques básicos de construcción que hacen única
cada aplicación AutoPlay. Los dos objetos más fáciles de usar son las imágenes y las etiquetas (labels).
Juntos, ellos te permiten llenar tu proyecto con gráficos y texto. Aunque son sencillos de usar, te permiten
hacer cosas muy avanzadas, y al final de esta lección aprenderás a manipular estos objetos como un
profesional.
La mayoría de las técnicas que aprendas en esta lección pueden ser aplicadas a todos los objetos que
usarás en AutoPlay, así que pon atención, ésta es una información muy útil. Por ejemplo, todos los objetos
en AutoPlay pueden ser cambiados de tamaño y de posición libremente, y en esta lección aprenderás
cómo hacerlo. También aprenderás como renombrar objetos, y cómo crear rápidamente un clon de un
objeto existente al duplicarlo, que será un ahorro real de tiempo que dominarás tú mismo con la práctica.
1. COMENZANDO CON EL CAPÍTULO.

Si estás continuando desde el capítulo 1, deberías tener ejecutándose el AutoPlay con el proyecto Tutorial
aún abierto. Si es así, estás listo para avanzar al siguiente ejercicio: Elegir un Color de Fondo. En caso
contrario, necesitarás abrir el archivo de proyecto que guardaste al final del capítulo 1.
1) Abre el archivo Tutorial.am7 que guardaste en la Lección 1.
Cuando guardas un proyecto, AutoPlay automáticamente crea una carpeta de proyecto para él en el
interior de la carpeta Mis documentos\AutoPlay Media Studio 7.0\Projects. Esta carpeta de proyecto es
donde todo lo que le pertenece al proyecto es almacenado, incluyendo el archivo de proyecto, el cual
contiene todas las configuraciones utilizadas en el proyecto.
La carpeta de proyecto y el archivo de proyecto siempre tienen el mismo nombre que le diste al proyecto
cuando éste fue creado. El nombre de los archivos de proyecto finalizan con una extensión de archivo
.am7.
Para abrir el proyecto, sólo necesitas abrir el archivo de proyecto. Clic en menú Archivo > Abrir > el
nombre de tu proyecto
2. ELIGIENDO UN FONDO DE PÁGINA.

Cada proyecto está compuesto por una o más páginas. Una página en AutoPlay es muy parecida a una
página de un libro. Justo como en un libro, cada página puede tener diferentes cosas en ella, tales como
fotografías y texto.
Por supuesto, en AutoPlay hay mucho más cosas que puedes poner en una página, desde texto y gráficos
hasta botones interactivos, video y animaciones. (Verás los diferentes tipos de objetos que puedes colocar
en una página a lo largo de las lecciones de esta guía del usuario). Pero por ahora, sólo enfoquémonos en
la superficie de la página misma.

15 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

1) Haz clic en la superficie de la página.


La Superficie de Página se muestra en medio del Área de Trabajo. (Es el rectángulo blanco grande).
Cuando haces clic en la Superficie de Página, la configuración de página es mostrada en el panel
Propiedades.
En el panel Propiedades, puedes notar que está página es nombrada Page1, y que su estilo de fondo
(BackgroundStyle) está establecido como Solid.

Nombre de Página

Estilo del fondo

Consejo: Puedes hacer clic en la superficie de la página en cualquier momento para seleccionar
la página y ver su configuración en el panel Propiedades.

Puesto que un gran rectángulo en blanco es un poco aburrido para este proyecto, hagamos que la página
tenga un aspecto más interesante.
2) En el panel Propiedades, ajusta el Color de Fondo (BackgroundColor) a Pale Blue (#99CCFF).
La superficie de la página es también llamada el fondo de la página. Cuando inicias un proyecto en blanco,
éste tiene sólo una página en blanco, y su color de fondo es blanco sólido.
Para ajustar el color de fondo a Pale Blue, haz clic en la configuración BackgroundColor del panel
Propiedades, y luego haz clic en el botón Seleccionar para poner a la vista una paleta de colores.

Botón Seleccionar

En la paleta de colores, mantén posicionado el botón del ratón sobre uno de los cuadros de color por uno
o dos segundos, hasta que el nombre del color aparezca. (Si mantienes posicionado el ratón sobre el
cuadro de un color por uno o dos segundos, el nombre del color aparecerá en una ventana contextual).
Ahora mueve tu ratón alrededor y verás los nombres de otros colores. Intenta encontrar el color
nombrado Pale Blue. (Deberá ser el tercer color de derecha a izquierda en la última fila). Haz clic en el
color nombrado Pale Blue para seleccionarlo como el nuevo color de fondo.

16 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

También puedes establecer el color editando directamente su valor hexadecimal. Una forma rápida de
realizar esto es haciendo doble clic en el nombre del campo de texto (en este caso, la parte
BackgroundColor en sí misma), escribe #99ccff y presiona Enter.
Nota: Al hacer doble clic en el nombre del campo de texto, automáticamente se resalta todo el texto del
campo. Si el texto está resaltado, cualquier cosa que escribas reemplazará instantáneamente dicho texto.
Consejo: Cuando escribas valores de color hexadecimal, no es necesario que utilices
mayúsculas. AutoPlay automáticamente las pondrá en mayúsculas por ti.

¿Hexadecimal...?
Los valores de color Hexadecimal no son tan complicados como parecen. Son solamente
una manera compacta de describir los colores.
Cada color está hecho de tres valores: uno para la cantidad de rojo en el color, otro para la
cantidad de verde y el tercero para la cantidad de azul. (Las computadoras forman diferentes colores al
mezclar porcentajes de rojo, verde y azul en la pantalla).
Si has utilizado cualquier herramienta gráfica como PhotoShop (o incluso Paint), probablemente usaste la
configuración de valor RGB para un color empleando números entre 0 y 255. El color hexadecimal
#99CCFF es sólo una manera compacta de decir: ajusta el Rojo a 153, el Verde a 204 y el Azul a 255.
Cada par de dígitos en el color representan ya sea rojo, verde o azul en este patrón: #RRGGBB. (Dos dígitos
para rojo, luego dos dígitos para verde y por último dos dígitos para azul). De modo que ¿cuál es el
significado de las letras FF y CC? Bueno, estas son sólo hexadecimales, las cuales simplemente son una
manera compacta de escribir números. Hexadecimal (o hex para abreviarlo) extiende los números
decimales regulares (0-9) a seis dígitos extra (A-F). De modo que, si estuvieras contando hasta 18 en
hexadecimal, deberías ir: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10,11,12. Entender la configuración
hexadecimal es un poco técnico, pero todo lo que necesitas para hacer colores de valor Hexadecimal es
saber que las letras son más grandes que los números. (A0 es más grande que 99, DB es más grande que
D7, etc.). En la notación #RRGGBB, los valores más grandes significan más de ese color. FF es el valor más
grande que puedes tener, de modo que FF0000 significa 100% rojo, 0% verde, 0% azul. #FFFFFF es blanco
(100% rojo, verde y azul), y #000000 es negro (nada de rojo, ni verde, ni azul).
Con respecto al símbolo de número (#) al inicio, éste simplemente indica que los números hexadecimales
están siendo utilizados, algo así como el símbolo de bolivianos (Bs.) que te da a entender que Bs. 5.24
significa 5 bolivianos y 24 centavos.
3) Cambia el estilo del fondo de Solid Color (Color Sólido) a Gradient (Color Degradado), y ajusta el color
degradado a Tan (#FFCC99).
Para cambiar el estilo de fondo de las páginas, haz clic en la configuración BackgroundStyle del panel
Propiedades, luego haz clic en el botón Seleccionar y elige Gradient de la lista.

17 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

Para cambiar el color de degradado, haz clic en el ajuste GradientColor y luego haz clic en el botón
Seleccionar para buscar el color elegido. Encuentra el cuadro de color llamado Tanit (deberá ser el
segundo color de la izquierda en la fila inferior) y haz clic en él.

El fondo de página ahora deberá ser un degradado entre el color de fondo en la parte superior (Pale Blue)
y el color degradado en la parte inferior (Tan). Un degradado es sólo un matiz suave que va de un color a
otro. Así que la superficie de la página se matiza suavemente de Pale Blue, en la parte superior, a Tan, en
la parte inferior). Nos gusta llamar este degradado Amanecer en el Desierto). El uso de un degradado es
una manera fácil de crear un sencillo y atractivo fondo de página.
4) Cambia el estilo de fondo de Degradado a Imagen.
Al ajustar el BackgroundStyle a Image te permite colocar una imagen de fondo para la página. Esto es
exactamente lo mismo que redimensionar una imagen para que abarque justamente el área de la página,
y cualquier objeto que pongas en la página aparecerá arriba de la imagen. (Bien, seleccionaremos una
imagen de fondo en un momento).

Seleccionar el valor Image

Date cuenta que el color de fondo cambia de un degradado a un simple color, específicamente a la
configuración BackgroundColor. Este es el color que tendrá cualquier parte no cubierta de la página si el
estilo de imagen es fijado a Actual size (tamaño actual) y la imagen es más pequeña que la página.
5) Haz clic en la configuración BackgroundImage y luego clic en el botón Browse (Explorar). Cuando se abra el
cuadro de diálogo Select File, haz clic en el botón Gallery.
Seleccionar una imagen es fácil utilizando el cuadro de diálogo Archivo a Seleccionar (Select File). Para
abrirlo, haz clic en la configuración BackgroundImage y luego en el botón Browse (Explorar).
Clic en este botón para buscar la imagen

Cuando hagas clic en este botón, el cuadro de diálogo Archivo a Seleccionar (Select File) se abre, de modo
que puedes explorar el archivo. Haz clic en el botón Galería (Gallery) al lado izquierdo del cuadro de
diálogo y tendrás acceso a la librería completa de archivos que vienen con AutoPlay.

18 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

Nota: Hay cinco botones a la izquierda del cuadro de diálogo Select File: Mis Imágenes (My Pictures),
Galería (Gallery), Mi Proyecto (My Project), Mis Documentos (My Documents) y Mi Computadora (My
Computer). El botón Mi Proyecto (My Project) es para archivos que ya has añadido a tu proyecto; el botón
Gallery es donde encontrarás los archivos que vienen con AutoPlay; y los otros tres botones te permiten
abrir archivos de otras carpetas en tu computadora.
6) Prueba navegando en el cuadro de diálogo Archivo a Seleccionar (Select File). Cuando encuentres una
imagen que te guste, haz clic en OK para seleccionarla como imagen de fondo.
Debido a que AutoPlay sabe que estás buscando un fondo para la página, cuando haces clic en el botón
Gallery en el cuadro de diálogo Select File, éste automáticamente abre el interior de la carpeta
Backgrounds.
Aunque encontrarás muchos fondos agradables en esa carpeta, puedes navegar a otra carpeta en el
cuadro de diálogo Select File si lo deseas.
Navegar en el cuadro de diálogo Select File es justamente como navegar en archivos de Windows. Para
subir un nivel o ir hacia afuera de una carpeta, haz clic en el botón move up en la parte superior del cuadro
de diálogo.

Si subes un nivel a la carpeta de imágenes madre, deberás ver la carpeta Backgrounds, junto con otras dos
carpetas de la galería de imágenes.

19 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

La carpeta Backgrounds y sus carpetas hermanas vistas desde su carpeta madre. Para ir de nuevo a los
archivos de la carpeta Backgrounds, sólo haz doble clic en ella. Cuando haces doble clic en una carpeta,
entras esencialmente en ella, dejando ver el contenido de la carpeta (que puede incluir archivos o incluso
otras carpetas).
Como puedes ver, la galería está llena de útiles gráficos, incluyendo varias imágenes abstractas de alta
calidad que sirven como excelentes fondos. (Lo cual es grandioso para aquellos cuyo talento artístico va
tan lejos como un Amanecer en el Desierto).
Una vez que encuentres una imagen que te guste, haz clic en OK para seleccionarla como imagen de
fondo. El cuadro de diálogo Select File se cerrará y la imagen aparecerá en la página como el fondo.
Nota: La imagen que seleccionaste será copiada automáticamente en la carpeta Images de tu proyecto.
7) Ir a menú Ver > Paneles > Explorar Galería (Gallery Browser), y luego a Ver >
Paneles > Previsualizar Recurso (Resource Preview).
En la ventana de diseño por defecto, los paneles Galería (Gallery) y Previsualizar
(Preview) no son mostrados. Para desplegar el panel Galería (Gallery), elige Ver >
Paneles > Explorar Galería (Gallery Browser). (Habrá una marca de verificación junto
a Explorar Galería (Gallery Browser) en el submenú Ver > Paneles cuando el panel
Gallery esté visible). Enseguida, haz visible el panel Previsualizar (Preview) eligiendo
Ver > Paneles > Previsualizar Recurso (Resource Preview).
8) Alternar el panel Galería (Gallery) para utilizar la vista Lista (List).
Como en las carpetas de Windows, el panel Galería (Gallery) tiene
varias vistas diferentes que puedes utilizar para ver el contenido de los
archivos. Puedes alternar entre una vista y otra haciendo clic derecho
en un sitio vacío dentro del panel y elegir una vista diferente del menú
contextual la opción Ver. La mayoría de las capturas de pantalla a todo
lo largo de esta guía fueron tomadas utilizando la vista Lista (List).
AutoPlay Media Studio utiliza por defecto la vista Thumbnails
(Miniaturas).
No te preocupes si tus paneles no se ven como los de esta guía del
usuario, puedes alternar a la vista List en el momento que quieras, pero
las otras vistas proporcionan la misma funcionalidad básica. Cada
escenario de vista que utilices es totalmente elección tuya.
9) En el panel Galería (Gallery), haz clic en el botón Imágenes (Images)

20 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

y navega por la carpeta Backgrounds.


El panel Galería (Gallery) te permite navegar por la librería de archivos que vienen incorporados con
AutoPlay. Esta librería está organizada en diferentes secciones, pudiendo acceder a cada una al clic en su
botón correspondiente en la parte superior del panel. Asegúrate que estás viendo la sección Imágenes
(Images) del panel Galería (Gallery); si no es así, haz clic en el botón Imágenes (Images) de la parte
superior para alternar hacia él.
Navegar en el panel Galería (Gallery) es como navegar en el cuadro de diálogo Archivo a seleccionar
(Select File), o como navegar en Windows. Para ver los archivos en el interior de la carpeta Backgrounds,
sólo haz doble clic en ella.
El panel Galería (Gallery) te proporciona otra manera conveniente de cambiar el fondo de página.
Usémoslo para cambiar el fondo por el de una imagen diferente.
10) Localiza el archivo nombrado 630B1151.jpg y arrástralo dentro de la superficie de la página. Cuando
se te pregunte si quieres configurarlo como el fondo de tu página, haz clic en Yes.
Si el panel Gallery y el panel Preview están abiertos al mismo tiempo,
cualquier cosa que selecciones en el panel Gallery automáticamente será
previsualizada en el panel Previsualizar (Preview). Así que, cuando
selecciones 630B1151.jpg, el panel Previsualizar (Preview) desplegará
una muestra fiel del archivo.
Para hacer que el archivo 630B1151 sea la imagen de fondo para la
página, puedes arrástralo desde el panel Galería (Gallery) hacia la
superficie de la página.
Nota: Para arrastrar el archivo, haz clic sobre él con el ratón y,
manteniendo presionado el botón izquierdo, mueve el ratón de tal
manera que el puntero esté sobre la superficie de la página. (Un pequeño
símbolo + aparecerá junto al puntero del ratón para mostrar que estás
arrastrando algo). Cuando sueltes el botón del ratón, el archivo será
colocado sobre cualquier parte en la que esté el puntero del ratón, en este caso la superficie de la página.
Cuando arrastres y coloques una imagen que abarque el 75% o más de la superficie de la página, AutoPlay
te preguntará si quieres que la imagen sea usada como el fondo de la página. (Una imagen que abarcará
toda la superficie de la página).

Si respondes Sí, la configuración de imagen de página será automáticamente establecida para utilizar esa
imagen como fondo. (Si respondes No, la imagen será colocada dentro de la página como un objeto de
Imagen).
Consejo: Puedes cambiar el % de umbral de tamaño y activar o desactivar esta característica
eligiendo Edición > Preferencias y ajustando la configuración en la categoría Drag and Drop.
11) Haz doble clic en la superficie de la página para abrir el cuadro de diálogo Page Properties
(Propiedades de Página).

21 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

Otra forma de acceder a la configuración de página es haciendo doble clic en la superficie de la página. Al
hacer doble clic en una página (o en un objeto) en AutoPlay, se abre un cuadro de diálogo con todas sus
configuraciones.
El cuadro de diálogo Propiedades de Página contiene todas las configuraciones que están disponibles en el
panel Propiedades. Como puedes ver, los cambios que hagas en el panel Propiedades son reflejados en el
cuadro de diálogo Propiedades de Página.

Algunos usuarios prefieren hacer doble clic para realizar sus cambios, mientras que otros prefieren utilizar
el panel Propiedades; los cuadros de diálogo de doble clic son un poco más fáciles de usar en algunos
casos, mientras que el panel Propiedades puede ser más rápido otras veces, como cuando se editan
múltiples objetos a la vez. Tómate la libertad de utilizar cualquier método que prefieras. (En lo particular
yo utilizó los dos métodos, pero más este último por ser más práctico).
En este manual del usuario nos enfocaremos más los cuadros de diálogo de doble clic son más familiares
para la mayoría de los usuarios y son auto-explicativos. Esto porque el propósito del manual y del curso
es de aprender el AutoPlay de manera práctica.
12) Haz clic en Cancel para cerrar el cuadro de diálogo Propiedades.
Al clic en el botón Cancel se cierra el cuadro de diálogo y se cancela cualquier cambio que hayas hecho
mientras estaba abierto. (En este caso no hiciste ningún cambio, así que realmente no importa si haces clic
en Cancel o en OK, pero no está de más ser cuidadoso).
3. AÑADIR OBJETOS DE IMAGEN.

Tan agradables que son los fondos, pero nuestro proyecto sería algo aburrido si es todo lo que hay que
mirar. Puesto que una imagen vale más que mil palabras, pongámonos en marcha añadiendo un objeto de
Imagen en la página.
¿Objeto de Imagen?
En AutoPlay, cualquier cosa que puedas colocar en la página es llamada un objeto. Así,

22 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

cuando añades una imagen a la página decimos que estás añadiendo un objeto de Imagen. Como verás en
un momento, cada objeto en AutoPlay tiene sus propias configuraciones y propiedades, tales como
anchura, altura y posición en la página.
Toma una fotografía por ejemplo. Por sí misma, es sólo una imagen de algo. Pero en AutoPlay la imagen
adquiere una configuración específica, por ejemplo, podría ser la imagen exactamente de 123 pixeles de
ancho por 300 de alto, estar posicionada 200 pixeles desde el borde izquierdo de la página y 100 pixeles
desde el borde superior. Si piensas en la imagen como la fotografía actual en sí misma, el objeto es la
fotografía junto con todas sus configuraciones.

1) Hacer clic ícono Imagen de la barra de Herramientas ó el ir al menú Objeto > Imagen.

2) En el cuadro de diálogo Archivo A seleccionar (Select File) haz clic en el botón Mis Imágenes y luego
selecciona la imagen que deseas añadir a la página y haz clic en el botón Aceptar.

Consejo: El cuadro de diálogo Archivo a Seleccionar automáticamente abre la misma carpeta


en la que estabas la última vez que exploraste un tipo de archivo en particular (tal como una
imagen o un video).
Nota: Cuando agregas un objeto utilizando el menú Objeto o a través de la barra de
Herramientas, el objeto es automáticamente posicionado en la esquina superior izquierda de la página.
Si observas detenidamente, verás que la imagen está rodeada por un rectángulo azul con seis pequeños
cuadros en él. Este rectángulo azul es la caja delimitadora de los objetos.

23 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

Caja delimitadora, con la que se puede


cambiar el tamaño de la imagen.

La caja delimitadora aparecerá siempre que un objeto esté seleccionado. Ella te muestra el tamaño y
posición actual del objeto. (Como puedes ver, cuando añades un nuevo objeto de Imagen, éste queda
seleccionado automáticamente).
3) Haz clic en la superficie de la página para deseleccionar el objeto de Imagen.
Al hacer clic en cualquier parte fuera de la caja delimitadora del objeto lo deselecciona. Puedes seleccionar
alguna otra cosa, en este caso la página.
4) Haz clic en el objeto de Imagen para seleccionarlo de nuevo.
Cuando seleccionas el objeto de Imagen, su caja delimitadora reaparece, y su configuración aparece de
nuevo en el panel Propiedades.
Nota: Para seleccionar un objeto, sólo haz clic sobre él.
Al seleccionarlo, la posición y tamaño del objeto son mostrados en la barra de estado.

Los números en la barra de estado indican las coordenadas actuales desde la esquina superior izquierda de
la caja delimitadora de los objetos, y la anchura y altura actuales de la caja delimitadora de los objetos, o
sea, su posición y tamaño, medidos en pixeles.
5) Arrastra el objeto de Imagen a una posición distinta.
Mover un objeto es fácil: sólo usa el ratón para arrastrarlo donde quieras.
Nota: Para arrastrar un objeto, primero posiciona el puntero del ratón sobre el objeto. Luego presiona el
botón izquierdo del ratón. Mantenlo presionado mientras arrastras el objeto moviendo el ratón.
Al comenzar a arrastrar el objeto, un rectángulo punteado aparecerá, este rectángulo representa el
objeto, y te permite ver dónde será colocado el objeto cuando sueltes el botón del ratón. (De hecho el
objeto no se moverá hasta que finalices la operación de arrastre).
Una vez que hayas posicionado el rectángulo punteado donde quieras que el objeto vaya, libera el objeto
soltando el botón del ratón. Tan pronto como liberes el botón del ratón, el objeto se mueve a su nueva
posición. Al mover el objeto, la lectura de posición cambia en la barra de estado.

Los números indican dónde estará la esquina superior izquierda de la caja delimitadora del objeto cuando

24 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

liberes el botón del ratón.


Consejo: Aquí tienes un pequeño truco: Prueba manteniendo oprimidas al mismo tiempo las
teclas Ctrl y Shift antes de que comiences a mover el objeto de Imagen. Esto provocará que el
objeto sólo pueda moverse vertical u horizontalmente, en cualquier dirección que el objeto es
movido al inicio. De modo que si mantienes oprimidas Ctrl+Shift y luego inicias el movimiento
de un objeto a la derecha, el objeto únicamente se moverá a la izquierda o derecha a menos que sueltes
esas teclas. (Lo mismo sucede al iniciar el movimiento hacia arriba o hacia abajo).
Consejo: También puedes desplazar objetos usando las flechas de dirección. (Los artistas gráficos
comúnmente se refieren a esto como acercamiento del objeto). Esto puede ser útil cuando quieres lograr
un ajuste fino en la posición de los objetos.
6) Asegúrate que el objeto está seleccionado y luego presiona la tecla Suprimir (Supr) para eliminarlo.
No te preocupes, añadiremos el objeto nuevamente en el próximo paso. Sólo queríamos mostrarte cómo
eliminar un objeto de la página.
Date cuenta que esto elimina al objeto de la página junto con todas sus configuraciones, pero de hecho no
elimina el archivo de Imagen. Como verás en el próximo paso, una copia de la imagen original aún está en
la carpeta Images del proyecto.
7) Ir al menú Ver > Paneles > Explorador Proyectos (Project Browser) para abrir el panel Project. Usando
el Panel Project navega por la carpeta Images, localiza el archivo insertaste y arrástralo dentro de la
superficie de la página.

Una vez que una imagen ha sido añadida a tu proyecto, llega a ser incluso más fácil añadirla una segunda
vez. Esto se debe a que al añadir una imagen a tu proyecto se crea una copia local de ese archivo en el
interior de la carpeta Images del proyecto.
Nota: Cada vez que inicias un nuevo proyecto, AutoPlay automáticamente crea una carpeta de proyecto
por ti. Inmediatamente en el interior de la carpeta de proyecto están dos cosas: el archivo de proyecto,
donde todas las configuraciones del proyecto son almacenadas; y una carpeta llamada CD_ROOT. La
carpeta CD_ROOT es donde están organizados todos los archivos de tu proyecto. Cuando quemas tu
proyecto en un CD, es el contenido de la carpeta CD_ROOT el que es colocado dentro del CD. (En otras
palabras, todo lo que pertenezca a la carpeta CD_ROOT del proyecto, terminará en el CD cuando
publiques tu aplicación).
Para aclarar las cosas, los archivos que añades a tu proyecto son almacenados bajo el CD_ROOT en una
carpeta llamada AutoPlay. Esta carpeta está dividida en otras subcarpetas. Las imágenes son guardadas en
una subcarpeta llamada Images, los videos en una carpeta llamada Videos y así por el estilo.
Cada proyecto tiene una colección completa de estas subcarpetas, a las cuales puedes acceder usando el
panel Project. La mayoría del tiempo estas subcarpetas no las verás; mientras estés trabajando en tu
proyecto estarás trabajando en la carpeta CD_ROOT. (No verás la carpeta CD_ROOT en sí misma a menos

25 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

que la busques en Windows).


Así funciona esto: cuando añades una imagen a tu proyecto, ésta es copiada primeramente a la carpeta
Images de tu proyecto. Enseguida el proyecto utiliza esa copia en vez de la original. (Lo que explica el
porqué la configuración del archivo es siempre una ruta como "AutoPlay\Images\MarcaEducacion.jpg"
incluso si agregaste el archivo desde "C:\Mis Documentos\Imagenes".
Esto se hace para que siempre estés trabajando con una copia local del archivo (el cual no será afectado
por cambios que tú o alguien más le puedan hacer después al original). Esto también significa que a tu
proyecto no le importará en lo más mínimo si el archivo original es movido o eliminado. Esto hace a tu
proyecto mucho más robusto. (Así, si alguien viene después y decide que una agradable persona como tú
no necesita todos esos archivos de la carpeta " C:\Mis Documentos\Imagenes " y los elimina, AutoPlay los
tendrá respaldados).
Ahora, la mayoría del tiempo no tienes qué preocuparte en lo más mínimo por esto. Tú solamente explora
el archivo que quieres y deja que AutoPlay se haga cargo de las cosas como copiar los archivos y hacer tu
proyecto confiable. Pero es bueno saber esto porque te ayuda a entender por qué es tan fácil añadir la
misma imagen a tu proyecto una segunda vez.
Carpeta CD_ROOT que es
colocado dentro del CD al
publicar el proyecto

Proyecto de Autoplay, el
cual hay que abrir para
realizar modificaciones.

8) Redimensiona el objeto arrastrando uno de los cuadritos blancos de su caja delimitadora. Prueba
manteniendo oprimidas las teclas Ctrl y Shift mientras redimensionas el objeto para mantener su
proporción dimensional actual.
Los cuadritos blancos de la caja delimitadora de un objeto son llamados manivelas de ajuste de tamaño.

Consejo: También puedes hacer clic derecho sobre un objeto y elegir Keep Aspect para hacer
que siempre mantenga su proporción dimensional, incluso si lo redimensionas sin mantener
oprimidas las teclas Ctrl y Shift.

26 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

Consejo: También puedes abortar la operación de redimensionamiento (a mitad del arrastre)


presionando la tecla Esc.

9) Finalmente para realizar otros cambios en las propiedades del objeto imagen, hacer doble clic sobre la
imagen e inmediatamente les aparecerá una nueva ventana, en la cual se podrá cambiar otras
propiedades de la imagen de manera práctica.

Pestaña Ajustes, donde podremos buscar una


imagen, darle color de transparencia y darle un
efecto especial de opacidad.

Ubicación de la imagen Actual

Aquí podremos cambiar el valor de


Elegiremos un color, al cual será opacidad y otras propiedades como
transparente, con cierto valor de alpha (transparencia) a la imagen
tolerancia.

Finalmente Clic en el botón Aceptar,


para dar efecto a las propiedades.

27 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

Propiedad para dar un


Pestaña Atributos que nos tamaño automáticamente a
permitirá dar propiedades
Esta propiedadnuestra
nos imagen.
como nombre, estado, cambiar
permite activar o
el tamaño automáticamente,
poner visible a nuestra
posición tamaño, cambiar el
imagen.
cursor, colocar sonidos a
nuestra imagen. dar un
Nos permite
nombre al objeto
imagen, esto para fines
de programación.

Podremos cambiar la
posición, en tamaño y
restaurar el tamaño original
de nuestra imagen.

Cambiar el cursor
cuando esta sobre la
imagen.

Se puede agregar
sonido al hacer clic en la
imagen o al pasar.

Recuerda que puedes ajustar la posición y el tamaño u otras propiedades de


un objeto, en este caso imagen escribiendo directamente en los valores de
la derecha en los campos apropiados en el panel Propiedades.

Consejo: También puedes regresar un objeto a su tamaño original haciendo


clic derecho sobre él y eligiendo Restore Size.

28 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

4. AÑADIR OBJETOS DE ETIQUETA (LABEL).

Alguna información es más fácil presentarla con palabras que con imágenes. (Por ejemplo, sería muy difícil
dibujar tu nombre o tu dirección de e-mail). Afortunadamente, los objetos Etiqueta facilitan colocar texto
en la página.

1) Hacer clic en la barra de Herramientas en el ícono Etiqueta ó a través del menú Objeto > Etiqueta
(Label), se añade automáticamente un objeto Label en la esquina superior izquierda de la página.
2) Haz doble clic en el objeto para mostrar el cuadro de diálogo Label Properties, podemos escribir Mi
Primer PROYECTO AUTOPLAY y finalmente hacer clic en el botón Aceptar. El contenido de la configuración
del Texto ya está automáticamente seleccionado. Esto te facilita cambiar el texto de los objetos
directamente.

Pestaña AJUSTES, donde se podrá escribir


Al hacer clic en el botón Fuente, se nos el texto de nuestra etiqueta, cambiar, dar
aparecerá la siguiente ventana en la cual se formato al texto, revisar la ortografía,
dará un formato a nuestro texto. Luego hacer alinear, dar una orientación al texto, etc.
clic en el botón Aceptar para realizar los
cambios. Aquí se escribirás el texto de nuestra
etiqueta, por ejemplo: Mi Primer
PROYECTO AUTOPLAY.

Con Alineación conseguiremos alinear


el texto a la izquierda, centro y
derecha. También dar una
Orientación al texto en 90, 180, 270
grados.

Esta Categoría nos permite dar colores a


cuatro estados de nuestra etiqueta: color
NORMAL al texto tal como se lo va a ver,
DESACTIVADO, el color que va a tener
cuando la etiqueta este desactivado.
RESALTAR, color que va a tener cuando el
puntero del mouse este encima o sobre el
texto y PULSA, color que va a tener cuando
se hace clic en el texto de la etiqueta. El Finalmente, hacer clic en el
botón Igual a Normal, nos ayuda a dar el botón aceptar, para guardar los
mismo color del estado NORMAL a los cambios realizados en la
estados de RESALTAR y PULSAR. A esta etiqueta.
operación se la conoce como
CONCORDANCIA DE COLORES.

29 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

Las propiedades que hay en la pestaña Atributos, son las mismas anteriormente explicadas.

3) Haz el objeto Etiqueta (Label) para cambiar el tamaño, arrastrándolo de una de sus manivelas de
ajuste.
Cuando redimensionas un objeto Label, el texto en su interior se hace más grande o más pequeño. De
hecho, redimensionar la caja delimitadora de objetos Label es sólo otra forma de configurar el tamaño de
letra de los objetos.
Hay dos cosas debes recordar acerca del redimensionamiento de objetos
Label. La primera, los objetos Label siempre mantienen su dimensión
proporcional al cambiarlos de tamaño. (Probablemente lo notaste cuando
redimensionaste el objeto). Esto es porque al cambiar el tamaño de letra
cambia la anchura y la altura del texto al mismo tiempo.
La segunda, el tamaño del objeto Label puede no siempre corresponder
al tamaño que tú lo ajustes. La caja delimitadora podría terminar un
poquito más grande o más pequeña al estirar el texto a un tamaño de
fuente más cercano (es decir, el tamaño del tipo de letra siempre debe
ser un número entero). En ocasiones no podrás hacer que un objeto Label
se ajuste perfectamente a una anchura y altura específicas en pixeles, pero AutoPlay dejará el texto lo más
exacto posible.
Consejo: Cuando redimensiones objetos Label, trata de no pensar en términos de pixeles,
piensa en términos de puntos, como una fuente de 12 puntos por ejemplo. O mejor aún,
solo redimensiona el objeto hasta que se vea como tú quieres, y olvídate de pixeles y puntos.
4) Para reducir el tamaño del objeto Etiqueta (label) a su tamaño original.
Para hacer el objeto Label más pequeño, sólo arrastra la misma manivela de ajuste adonde más o menos
estaba antes.

30 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

5) Para cambiar el texto, color, formato, orientación, alineación, etc. Debemos hacer doble clic en la
etiqueta y realizar el cambio de las respectivas propiedades, en la ventana de propiedades de la etiqueta.
También se puede cambiar las propiedades del objeto Etiqueta, con el Panel de Propiedades.
Consejo: Otra manera de añadir un objeto de manera más rápida es haciendo clic derecho en
la superficie de la página y elegir del menú contextual el objeto que deseo añadir.

Nota: El menú de clic derecho es llamado menú contextual, en el cual se muestran diferentes temas de
acuerdo a lo que le hayas hecho clic derecho. Por ejemplo, hacer clic derecho en la superficie de la página
presentará un menú diferente que si haces clic derecho en un objeto.
Nota: Cuando añades un objeto desde el menú contextual (o menú de clic derecho), éste se posiciona en
la página donde hiciste clic derecho.
5. AÑADIR OBJETO PÁRRAFO.

Existe un inconveniente con el objeto Etiqueta (Label), solo se puede escribir un texto en una línea, pero si
deseamos escribir una oración o párrafo, este objeto no sería el adecuado. Así que la solución a este
problema es utilizar el objeto Párrafo.

1) Hacer clic en la barra de Herramientas en el ícono Párrafo ó a través del menú Objeto > Párrafo,
se añade automáticamente un objeto Párrafo en la esquina superior izquierda de la página.
2) Haz doble clic en el objeto para mostrar el cuadro de diálogo Paragrahp Properties, podemos escribir
una pequeña oración y finalmente hacer clic en el botón Aceptar. El contenido de la configuración del
Párrafo ya está automáticamente seleccionado. Esto te facilita cambiar el texto de los objetos
directamente.

31 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

3) Las acciones para cambiar el tamaño y mover un objeto Párrafo, son las mismas de los anteriores
objetos y en general de todos los objetos que Autoplay tiene.
4) Dependiendo del tamaño de nuestro texto en el objeto Párrafo, la barra de desplazamiento tanto
vertical como horizontal aparecerán automáticamente.

6. AÑADIR OBJETO TEXTO ENRIQUECIDO (RICH TEXT).

Al decir, texto enriquecido nos referimos a que tiene algunas propiedades que no tiene el objeto Párrafo
como por ejemplo, insertar viñetas, también puede detectar automáticamente direcciones URL.
Esta es la principal diferencia entre estos dos objetos.

1) Hacer clic en la barra de Herramientas en el ícono Texto Enriquecido ó a través del menú Objeto >
Texto Enriquecido, se añade automáticamente un objeto Párrafo en la esquina superior izquierda de la
página.
2) Haz doble clic en el objeto para mostrar el cuadro de diálogo Paragrahp Properties, podemos escribir
una pequeña oración y finalmente hacer clic en el botón Aceptar. El contenido de la configuración del
Párrafo ya está automáticamente seleccionado. Esto te facilita cambiar el texto de los objetos
directamente.

32 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

Con este botón podremos


configurar las opciones de
parrafo.

Aquí podemos
Aquí podemos escribir
escribir nuestro
nuestro texto.
texto.

Con este botón


puedo cargar un
archivo
enriquecido
(,RTF)

Dar un estilo al
fondo del texto
enriquecido.
Solido (elegir un
color) y
Transparente.
Con esta opción
se puede cambiar
el estilo de los
scrollbar o barras
de
desplazamientos Cuando se publica el proyecto,
al hacer clic con el botón
derecho en el texto
Al activar esta opción, lo que hace es auto enriquecido, les mostrará el
detectar todas las direcciones web, que hay siguiente menú contextual. Con
en el texto enriquecido. el que pueden realizar las
operaciones comunes.

33 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

7. DUPLICAR OBJETOS.

Una forma realmente rápida de añadir un objeto es hacer un duplicado de un objeto ya existente. Duplicar
es lo mismo que copiar y pegar en Windows, sólo que mediante este método se ejecuta en un solo paso.
1) Asegúrate que el objeto Etiqueta (Label) está seleccionada y elige Edición > Duplicar ó CTRL + D.
Cuando duplicas un objeto, todas las configuraciones del original son copiadas en el nuevo objeto. La única
cosa que cambia en el nuevo objeto son su nombre y posición. Para hacerlo más fácil y seguir la pista de
todo, el nuevo objeto es posicionado un poco más abajo y a la derecha del original. De esta manera
puedes ver que la duplicación fue exitosa.

El nuevo objeto estará seleccionado automáticamente.


Consejo: Para copiar, mover, pegar, borrar un objeto, podemos utilizar el menú Edición ó las
teclas de acceso rápido siguientes: CTRL + C para Copiar, CTRL + X para mover, CTRL + V para
pegar y SUPR para borrar o eliminar.

NOTA: Para terminar este capítulo no se olvide de guardar su proyecto y de previsualizarlo con F5 las
veces necesarias para poder ver cómo está quedando su proyecto.

Resumen del capítulo. En este capítulo aprendiste cómo:


ü Cambiar el fondo de página
ü Añadir un objeto de imagen
ü Redimensionar, Mover, borrar objetos
ü Añadir objetos Etiquetas
ü Cambiar propiedades a los Objetos con el panel de Propiedades.
ü Tres maneras de acceder a la ventana de propiedades de los respectivos objetos, para luego
cambiar sus propiedades.
ü Añadir Objetos Texto Enriquecidos
ü Añadir Objetos Párrafo
ü Añadir Objetos Texto Enriquecidos

34 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

CAPÍTULO 3
BOTONES, ACCIONES Y PÁGINAS

Toda esta lección es acerca de la interactividad. La interactividad es importante porque eleva la aplicación
por encima de las limitaciones de simples folletos y tradicionales tarjetas de negocio que residen en el
humilde reino del papel. La interactividad hace que tu aplicación parezca que tiene vida y sea receptiva, y
realmente le permite al usuario ejecutar importantes tareas, justo como otro programa de Windows.
Hay varias formas de hacer interactiva tu aplicación, pero las tres herramientas más importantes a tu
disposición son los botones, las acciones y las páginas. Los botones son una de las características más
estupendas de AutoPlay. Dan un buen aspecto, son fáciles de utilizar y le añaden instantáneamente a tu
aplicación un toque verdaderamente profesional. Las acciones, y los eventos a los que las añades, te
permiten hacer que tu aplicación realice cosas. Las páginas son las superficies sobre las cuales colocarás
los botones y otros objetos. Y puesto que tu imaginación no debería restringirse a una sola página, te
mostraremos cómo añadir más páginas a tu proyecto.
1. AÑADIR BOTONES.
Los botones son objetos interactivos especiales. Estos responden automáticamente al usuario cambiando
su apariencia cuando posicionan el ratón sobre ellos o hacen clic sobre ellos. De hecho, cada botón tiene
cuatro diferentes apariencias o “estados” incorporados en él: Up, Down, Highlight y Disabled (Normal,
Presionado, Resaltado y Deshabilitado)
Hay una imagen diferente para cada estado incorporada directamente en el archivo de botón. Al alternar
entre estas imágenes, un botón puede parecer animado e interactivo al resplandecer cuando el usuario
mueve el ratón sobre él por ejemplo, y pareciendo oprimido cuando el usuario hace clic sobre él. Al contar
con soporte total para transparencia alfa y opacidad variable, los botones pueden incluir también efectos
incorporados de sombra y tener suaves esquinas redondeadas.
Los botones son un gran lugar para colocar acciones puesto que ellos usualmente tienen el aspecto como
de algo en lo que quisieras hacer clic. Y para ayudarle al usuario a que conozca qué harán los botones,
cada uno de ellos puede tener texto en él, igual que un objeto Label. El texto puede incluso cambiar de
color en cada estado diferente, de modo que éste se ajusta perfectamente con cada apariencia de estado.
1) Debemos recordar que hay tres maneras de insertar o añadir un objeto en este caso un
Botón:
1ra. Hacer clic en la barra de Herramientas en el ícono Botón.
2da. Ir al menú Objeto > Botón
3ra. Clic botón derecho y en el menú contextual elegir la opción Botón.
2) Con cualquiera de las tres formas, aparecerá una nueva ventana en la cual debemos elegir el botón que
vamos a añadir y hacer clic en el botón Aceptar.

35 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

3) Inmediatamente al hacer clic en el botón Aceptar. Nuestro objeto Botón se añadirá en nuestra página.
También podemos cambiar el tamaño haciendo clic, manteniendo presionado con el botón derecho de
nuestro ratón en los cuadritos blancos o manivelas de ajuste de tamaño. Mover de posición como cualquier otro
objeto.

4) Para cambiar el texto por defecto del botón y otras propiedades de este objeto, hacemos doble clic para
ingresar a la ventana de propiedades del Botón.

Aquí se cambia el texto del botón. Los valores de X,Y nos


permiten cambiar la
posición del botón

Los valores Izquierda y


Derecha nos permiten
cambiar la posición del
texto en el botón

Los colores de Estado son


similares a los que ya
anteriormente explicados, es
importante mencionar que se
aplican no al botón sino al texto.

Las otras categorías son de alineación


del texto dentro del botón, estilo
estándar y alinear arriba o abajo el
texto en el botón. Para terminar clic en
el botón Aceptar.

36 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

2. ALINEAR OBJETOS.
Otra función importante, que nos va ayudar en el momento de diseñar nuestras páginas de Autoplay, es la
Alineación de objetos. A continuación daremos un ejemplo de cómo utilizar esta función.
1) Como estamos trabajando con botones, crearemos cuatro botones, como se muestra en la siguiente
imagen.

2) Luego seleccionamos todos los botones, para seleccionar varios objetos presionamos sin soltar la tecla
SHIFT y con el ratón hacemos clic en los objetos que deseamos seleccionar, en nuestro caso todos los
botones.

3) Ahora para alinear objetos hay por lo menos dos maneras:


La Primera, ir al menú Alinear y elegir la opción de alineación que desea, para nuestro ejemplo Alinear >
Centro Horizontal.

La segunda, hacer clic en el primer objeto con el botón derecho, en el menú contextual elegir la opción
Alinear > Centro Horizontal.

37 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

4) El resultado cualquiera de las dos maneras será el mismo. Una alineación horizontal centreada de los
cuatro botones.

Consejo: hay varias opciones de alineación, las cuales debemos probar para saber su
funcionamiento, pero si ven los iconos que tienen a su lado, tendremos una idea de lo que
realizará dicha opción.

Alinea los objetos seleccionados a la izquierda

Alinea Horizontalmente y centreada

Alinea los objetos seleccionados a la derecha


Alinea los objetos superiormente

Alinea Verticalmente y centreada

Alinea los objetos Inferiormente


Distribuye espacio vertical entre objetos

Distribuye espacio horizontal entre objetos

3. AÑADIR ACCIONES RÁPIDAS O SIMPLES.

Ahora haremos que los botones realicen algo.


En AutoPlay, lograr que un objeto haga algo significa añadirle una acción a uno de los eventos a los que el
objeto puede responder.
Los Eventos son simplemente cosas que pueden suceder cuando tu aplicación se está ejecutando. Por
ejemplo, la mayoría de los objetos tienen un evento On Click, el cual es activado cuando se hace clic sobre

38 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

el objeto. Para hacer que algo suceda cuando se hace clic en el objeto, simplemente añádele una acción a
su evento On Click.
Las Acciones son simplemente comandos que le dicen a la aplicación que haga algo. Hay acciones para
hacer todo tipo de cosas, como cambiar el texto en un objeto Etiqueta (Label), ejecutar archivos de
programa externos, decirle a un video que inicie su reproducción, o saltar a otra página.
Las Acciones Rápidas (Quick Actions) son acciones especiales de uso fácil que se ocupan de tareas simples
sin escribir ningún script. Por ejemplo, la mayoría de los objetos te permiten configurar una sencilla Acción
Rápida que será ejecutada cuando se hace clic en el objeto. Añadir una Acción Rápida es una forma fácil de
hacer que suceda algo cuando haces clic sobre un objeto.
Cada objeto tiene sus propios eventos, y cada evento tiene sus propias acciones. Las Acciones que añadas
a cada evento de un objeto son ejecutadas sólo cuando ese evento específico es activado (en otras
palabras, los eventos son objetos específicos). Esto significa que tu aplicación puede hacer cosas
completamente diferentes cuando el usuario hace clic sobre diferentes objetos. Por ejemplo, podrías
hacer clic sobre un objeto se inicie la reproducción de un archivo de audio, mientras que al hacer clic sobre
otro objeto distinto haga que la aplicación salte a otra página. Cada clic accionaría el evento On Click
específico de cada objeto, provocando que la lista de acciones del evento sea ejecutada.
1) Para agregar una acción Rápida a un objeto debemos hacer doble clic en el objeto y elegir la pestaña
Acción Rápida (Quick Action) y hacer clic en Acción a Iniciar y se desplegará una lista de todas las acciones
rápidas que podemos utilizar con el objeto.

Mostrar una Página


Mostrar un Diálogo
Cerrar Diálogo
Ejecutar un Programa
Abrir un Documento
Imprimir un Documento
Enviar un Mail
Ver una Página Web
Explorar una carpeta
Play / Pausar música de fondo
Salir o Cerrar

39 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

2) Agregaremos la acción rápida Salir/Cerrar a nuestro botón SALIR, hacemos doble clic en el botón,
elegimos la acción Exit/Close. Luego Publicamos nuestro proyecto con F5 y verificamos si realizamos bien
este ejercicio, haciendo clic en nuestro botón, debería cerrarse la ventana de nuestro proyecto, si es así,
entonces el ejercicio se realizó correctamente.
4. EDITOR DE SCRIPTS.

El Editor de Script es el lugar donde puedes añadir acciones para cada evento de los objetos. Hay cuatro
pestañas en el Editor de Script, una para cada evento al que puede responder este objeto de Botón.
• On Click, el cual es activado cuando hace clic sobre el botón.
• On Right-Click, el cual es activado cuando haces clic derecho sobre el botón.
• On Enter, el cual es activado cuando el ratón se posiciona dentro del botón (cuando el puntero del
ratón entra a la caja delimitadora del objeto).
• On Leave, el cual es activado cuando el ratón se posiciona fuera del botón (cuando el puntero del
ratón abandona la caja delimitadora del objeto).
También es importante mencionar que con este editor de script y si ya tenemos conocimiento de
programación y del lenguaje que Autoplay utiliza podemos comenzar a escribir código de nuestros propios
script. Otra manera de agregar código es utilizando el Asistente Nueva Acción te guiará a través del
proceso para añadirle una acción al Editor de Script. Este último será el que utilizaremos en nuestro
ejemplo, para ver la funcionalidad de nuestro editor de script.
Nota: Hay una pestaña en el Editor de Script para cada evento al que un objeto puede responder. Si
seleccionas un objeto que tenga cinco eventos, habrá cinco pestañas en el Editor de Script.
1) Agregaremos una acción en el editor de script a nuestro objeto botón, utilizando el Asistente de Nueva
Acción. Entonces añadimos un botón como el de la imagen, luego hacemos doble clic para abrir la ventana
de propiedades, elegimos la pestaña Script y el evento On Click.

40 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

2) Hacer clic en el botón Añadir Acción e inmediatamente le aparecerá el asistente de Nueva Acción.

1er. Paso elegir una categoría,


existen varias, para nuestro ejemplo
elegimos File.

2do. Paso elegimos una acción, de la


categoría que elegimos, también
hay varias, para nuestro ejemplo
elegimos File OpenURL.

Aquí tenemos una pequeña ayuda


acerca de la acción que elegimos.

Clic en el botón Siguiente.

3) Aparecerá la siguiente ventana. En la cual debemos realizar los siguientes cambios.


Ayuda con respecto a la acción.

3er. Paso escribir la url o dirección


web. También se puede abrir
archivos HTML locales haciendo clic

en el botón

SW_SHOWNORMAL es una
constante. Que hará que se abra la
ventana del navegador de manera
normal.

Para terminar clic botón Finalizar.

4) Observaremos que regresará a la ventana de del editor de script, pero esta vez ya no está vacío, al

41 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

contrario tendrá un código que fue generado con el asistente.

Código generado.

Clic en el botón Aceptar.

5) Ahora nos toca hacer la prueba la acción de abrir una URL a nuestro objeto botón. Para esto guardamos
el proyecto y luego lo publicamos con F5. Al hacer clic en el botón veremos el resultado.

Clic en el botón y
se abrirá la
página URL
generado.

5. AÑADIR PÁGINAS A NUESTRO PROYECTO.

1) Hay por lo menos tres manera de añadir una nueva página a nuestro Proyecto:
1ra. Forma. Menú Página > Añadir.

2da. Forma. Clic en el icono Añadir página de la barra de Herramientas.


3ra Forma. Presionar la tecla Insert.
2) Por cualquiera de las tres formas u otras, tendremos una nueva página en blanco en nuestro proyecto.
Puedes ver que una nueva página ha sido añadida observando la parte superior
del área de trabajo, donde una segunda pestaña de página ha aparecido.
3) Ahora es una buena práctica el cambiar nombres más descriptivo a las páginas y dejarlos con los que
aparecen por defecto en nuestro caso como tenemos dos páginas tenemos (Page1 y Page2). Para esto
veremos dos formas:
1ra. Forma. En el Panel de propiedades de la Página, en la categoría Página (Page), doble clic en la

42 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

propiedad Nombre (Name) y escribir el nuevo nombre. Por ejemplo Principal.

2da. Forma. Doble clic en el área de trabajo de la página, aparecerá la venta de propiedades donde
podemos cambiar el nombre de la página. Este procedimiento podemos hacer a manera de práctica en la
Página2 (Page2) y le damos el nombre de Manuales y clic botón Aceptar.

Como resultado lo observaremos en la parte superior del área de trabajo.


4) Para eliminar una página podemos hacerlo por lo menos de tres formas:
1ra. Forma. Menú Página > Remover.

2da. Forma. Clic en el icono Remover página de la barra de Herramientas.


3ra Forma. Presionar las teclas CTRL + SUPR.
5) También podemos duplicar páginas, cuando duplicas una página, todas sus configuraciones y objetos en
ella también serán duplicados. La única cosa diferente en la nueva página es su nombre. Para duplicar
puedes hacerlo de las siguientes formas:
1ra. Forma. Menú Página > Duplicar.
2da. Forma. Presionar las teclas CTRL + SHIFT +D.
6. NAVEGAR POR LAS PÁGINAS.

Ahora que tenemos dos páginas en el proyecto, pero podemos tener varias páginas, necesitamos
implementar algo para que el usuario pueda ir de una página a otra (en otras palabras, que pueda navegar
por la aplicación). Esto es algo increíblemente fácil de lograr. Para este proyecto utilizaremos objetos de
botón para provocar los cambios de página.
Nota: No necesariamente se tiene que utilizar botones para esto, en su lugar podrías utilizar objetos Label,
objetos de Párrafo o cualquier clase de objetos que tengan eventos On Click. Sin embargo para este
ejemplo utilizaremos botones porque tienen un mejor aspecto.
1) En nuestra página Principal tenemos un botón Manuales, vamos a añadir una acción para que cuando
nosotros hagamos clic en ese botón, podamos ir a la página Manuales. Para esto hacemos doble clic en
este botón, aparecerá la ventana de propiedades, seleccionamos la pestaña Acciones Rápidas (Quick
Action) y realizamos lo siguiente:

43 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

En Acción a iniciar: elegimos Show


Page (Mostrar Página).

En Página para Mostrar, tenemos


varias opciones. Como: First,
Previous, Next, Last, Back (History),
Forward (History), Specific Page. La
que elegiremos es Especificar
Página, también podríamos a ver
elegido Siguiente (Next).

Cuando elegimos la opción


Especificar Página se habilita la
opción Nombre de la Página, en la
cual debemos elegir la página
respectiva.

Para terminar clic en el botón


Aceptar.

2) Ahora en nuestra página manuales añadimos un botón que tenga el texto Regresar. Luego hacemos
doble clic en este botón para ingresar a la ventana de propiedades de Botón, clic en la pestaña Acciones
Rápidas y le damos los siguientes valores:

3) En la página Manuales añadimos dos objetos imagen y una etiqueta, de la siguiente manera:

4) Luego hacemos doble clic en el objeto etiqueta, en la venta de propiedades de etiqueta, vamos a la
pestaña Acción Rápida, le damos los valores siguientes:

44 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

Clic en este botón para buscar el


documento que vamos abrir.

3) Una vez realizado estos pasos, nos toca ver el resultado, para esto guardamos el proyecto y publicamos
el Proyecto.

Clic en el botón
para ir a la
página Manuales.

Clic en este
botón y se
cierra la
aplicación.

Clic en el texto e
inmediatamente
se abrirá el
documento.

Clic en este
botón y
regresaremos
a la página
principal.

45 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

Resumen del capítulo. En este capítulo aprendiste cómo:


ü Añadir botones interactivos.
ü Alineación objetos.
ü Anadir acciones Rápidas.
ü Añadir acciones a través del asistente de Acción Nueva.
ü Duplicar objetos.
ü Añadir una página en blanco al proyecto.
ü Duplicar una página existente.
ü Lograr tener un proyecto con botones de navegación de páginas, abrir documentos y salir de la
aplicación a través de un botón.

46 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

CAPÍTULO 4
VIDEO
Si una imagen vale más que mil palabras, ¿cuántas palabras valen un video? En Este capítulo mostraremos
cómo añadirle un video a tu proyecto, cubriremos algunas configuraciones de video básicas y te
enseñaremos cómo controlar un video utilizando unas cuantas acciones simples.
1. AÑADIR UNA IMAGEN DE PANEL COMO FONDO DE NUESTRO VIDEO.

En el capítulo 2 vimos la manera de insertar objetos imagen, a través del panel Galería. Pues dentro de
esta las imágenes están divididas en carpetas o categorías, y una de estas carpetas es la de paneles donde
hay imágenes de paneles. Una imagen de panel es simplemente un objeto de imagen que colocas detrás
de otro objeto para lograr algún tipo de fondo personalizado o efecto de marco de fotografía. Utilizaremos
otra imagen de Panel para proporcionarle un “marco” a nuestro objeto de Video.
1) Comencemos añadiendo una nueva página a nuestro proyecto con el nombre de Video. Luego en
nuestra página Principal, añadimos la acción correspondiente al botón Video Tutoriales para ir a la nueva
página Videos. El procedimiento ya lo vimos en el anterior capítulo. Trate de que la nueva página Video
tenga el siguiente diseño como vemos en la imagen siguiente.

Poner una imagen


630A03471.jpg, como
fondo de nuestra Página.
Esta imagen se encuentra
en la galería del
AutoPlay.
Añadir una Etiqueta,
que servirá de título
para nuestro Video. Añadir un botón que
tenga la acción de
regresar a la página
Principal cuando se hace
clic en este.

2) En esta nueva página Video, vamos al Panel Galería, clic en el botón Imagen, abrimos la carpeta
Paneles y buscamos la imagen 066FC01.png, lo seleccionamos y lo arrastramos a la página.

3) Le damos el tamaño y la posición adecuada en nuestra página.

47 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

Luego hacemos clic con el


botón derecho en la
imagen. En el menú
contextual elegimos la
opción Pin, que sirve para
anclar el objeto, es decir,
que el objeto se quedara
en esa posición y no
podremos moverlo. A no
ser que nuevamente
seleccionemos la opción
Pin, para desactivar el
anclaje.

2. AÑADIR UN OBJETO DE VIDEO.


El objeto de Video en AutoPlay te permite mostrar imagen en movimiento directamente en la página.
Puedes utilizarlo para mostrar todo tipo de archivos de medios, desde videos de aprendizaje y exhibición
de productos, hasta videos caseros y musicales.
Consejo: También puedes utilizar una acción File.Open o File.Run para mostrar un video en un
programa visualizador externo. Por supuesto, el mostrar un video directamente en la página
da como resultado que el usuario experimente algo perfectamente integrado.
Nota: Los objetos de Video siempre aparecen por encima de cualquier otro tipo de objetos,
no importa la forma en la que ordenes los objetos en la página (es decir, independientemente del orden
z). Hay razones técnicas del porqué esto es así, pero basta con decir que esto tiene que ver con la forma
en que los videos son dibujados en la pantalla.
1) Para añadir un objeto de Video podemos hacerlos de las siguientes formas:
1ra. Forma. Menú Objeto > Video.

2da. Forma. Elegir en la barra de Herramientas el icono Video


3ra. Forma. Teclas CTRL + 7.
2) Cuando la ventana Seleccionar Archivo aparezca, haz clic en el botón Galería. Seleccionamos el video
Magnolia y hacemos clic en el botón Aceptar.

3) Después de que hacer clic en OK, el nuevo objeto de video aparece en la esquina superior izquierda de

48 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

la página. Un recuadro sencillo del video aparece en el objeto, de modo que cuando trabajes en el
proyecto puedas tener una idea general de lo que se va a ver cuando éste inicie. En este caso, el recuadro
resulta ser negro debido a que el video Magnolia.mpg inicia con un desvanecimiento a partir de negro.
Observa los controles estándar de video en la parte inferior del objeto de video. Este es el panel de control
del objeto. En el panel de control hay un
botón reproducir/pausar, un botón detener,
un botón deslizador de posición y una
lectura del tiempo transcurrido.
Nota: El botón reproducir alterna entre
reproducir y pausar: cambia al botón pausa
cuando el video está reproduciéndose, y
luego conmuta al botón reproducir cuando
el video es pausado.
Una vez que este en la posición exacta, es
decir, al medio de nuestra imagen de panel,
puedes anclar el objeto Video con CTRL + P.
4) Para realizar algunos cambios en la
configuración de las propiedades de este objeto video, podemos hacer doble clic en este objeto e
inmediatamente saldrá la venta de propiedades, vamos a la pestaña Ajustes.

Con el botón Buscar podemos buscar


otro video y cambiarlo.

El Modo de fase tiene dos opciones:


Mantener el Aspecto (Maintain
Aspect) y Expandir (Stretch).

Está opción también es interesante


deshabilita los botones de control.

Estilo, permite cambiar el estilo de


panel de control de nuestro video, por
ejemplo podemos cambiar a Basic
Blue.

3. AÑADIR CONTROLES DE VIDEO PERSONALIZADOS.

Además de los controles de video incorporados en el panel de control del objeto de Video, puedes utilizar
acciones de video del AutoPlay para incorporar tus propios controles de video “hechos en casa”.

49 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

1) En el Panel de Propiedades del objeto Video dar el valor de None a ControlStyle, con esto se eliminará
completamente el panel o la barra de control del objeto video.

2) Añadimos tres botones debajo del video de la siguiente manera:

Para esto utilizamos las opciones de Alineación, Duplicar objetos, etc. Funciones que ya aprendimos en los
anteriores capítulos.

4. AÑADIR ACCIONES A NUESTRO BOTONES.

1) Hacer doble clic en el botón Play, en la ventana de Propiedades elegir la

pestaña Script, evento OnClick, clic en el botón , para abrir el


asistente de Nueva Acción. Elegir la categoría Video y la acción Video.Play. En
la ventana siguiente dejar con los valores por defecto, clic en el botón
Finalizar. Finalmente clic botón Aceptar en la ventana de Propiedades.
2) En los dos botones restantes agregar siguiendo el mismo procedimiento las acciones siguientes:
Video.Pause y Video.Stop.

Resumen del capítulo. En este capítulo aprendiste cómo:


ü Añadir una imagen de Panel para enmarcar un video.
ü Añadir un objeto de Video.
ü Personalizar el panel de control incorporado del objeto de Video.
ü Hacer tus propios controles de video desde cero.
ü Controlar el video con unas cuantas acciones simples.

50 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

CAPÍTULO 5
SONIDO

El audio es una parte muy importante de cualquier aplicación multimedia. Los efectos de sonido ayudan
a hacer que los objetos interactivos, como los botones, “tengan vida”, y les dan indicios útiles a los
usuarios para ayudarlos a reconocer cuáles objetos son interactivos. La música de fondo puede ayudar
en buena medida a que tu trabajo alcance el impacto emocional que deseas. Y en muchos casos el audio
es una parte integral de la aplicación.
1. CAMBIAR LOS SONIDOS POR DEFECTO DEL OBJETO.

Con excepción de los objetos Flash, RichText, Input, Listbox, Web, Progress, Combobox y Tree, todos los
demás objetos en AutoPlay pueden accionar dos tipos de efectos de sonido: uno para cuando el usuario
posiciona el ratón sobre ellos (un sonido “highlight”), y otro para cuando el usuario hace clic en ellos (un
sonido “click”). Para cada efecto de sonido del objeto tienes tres opciones: a) que no se reproduzca ningún
sonido, b) que se reproduzca un sonido personalizado específico para ese objeto o c) que se reproduzca un
sonido estándar definido en las configuraciones del proyecto. El sonido estándar facilita cambiar los
efectos de sonido para todos los objetos en tu proyecto a la vez, sin tener que ir a cada objeto y cambiar
sus configuraciones de sonido individualmente. Para demostrar cómo trabaja el sonido por defecto del
objeto, cambiemos temporalmente el sonido estándar highlight para todos los objetos del proyecto.
1) Elige menú Proyecto > Audio, en la ventana de Configuración Audio, clic en la pestaña Sound Effect. La
pestaña Sound Effects es donde puedes elegir los sonidos por defecto highlight y click para todos los
objetos del proyecto (o por lo menos para todos los objetos del proyecto que tengan sus sonidos highlight
o click ajustados a “Standard”. Cualquier cambio que hagas en esta pestaña afectará inmediatamente a
todo el proyecto.

Botones buscar para cambiar los


sonidos por defecto.

Clic
Aceptar

AutoPlay viene con un montón de muestras de efectos de sonido que puedes utilizar en tus proyectos.
Todos estos efectos de sonido están en formato Ogg Vorbis. Ogg Vorbis es un formato comprimido de
fuentes de audio similar al MP3, pero capaz de tener una mejor calidad de sonido e incluso un tamaño de

51 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

archivo más pequeño. A diferencia de otros formatos de audio, el Ogg Vorbis está patentado y es de
licencia libre, haciéndolo una excelente opción para la distribución gratuita de audio digital.
Nota: El códec MP3 está licenciado por Fraunhofer IIS-A. Si generas ganancias utilizando música en
formato MP3, tendrás que responsabilizarte de pagarles cierto porcentaje de cada venta.
2) Ahora guardamos el proyecto y al previsualizarlo con F5, veremos y escucharemos el cambio. Muchos
aconsejan mantener los sonidos por defecto.
2. QUITAR EL SONIDO EN LOS OBJETOS.

Para eliminar el sonido en los efectos solamente debemos ir al panel de Propiedades del objeto en la
categoría SONIDO cambiar el valor de y de .
Para que nuevamente tenga sonido por defecto, cambios estas propiedades el valor de Estándar.
3. CONFIGURACIÓN DE EFECTOS DE SONIDO DE UN OBJETO ESPECÍFICO.

No siempre vamos a querer que cada objeto utilice el mismo sonido. Algunos objetos fueron hechos
precisamente para sonar diferente. Afortunadamente, AutoPlay te permite especificar un sonido
personalizado para cada configuración de sonido del objeto. De hecho, si lo quisieras, cada objeto en tu
proyecto podría tener un único sonido.
1) Añade una etiqueta, doble clic en este, en su ventana de propiedades vamos a la pestaña Ajustes y
realizamos los siguientes pasos, como se observa en la imagen.

En Resaltar, es decir, al Clic en el botón Buscar, para


pasar con el puntero del elegir un sonido de la
ratón por el objeto, galería, como por ejemplo
cambiamos el valor a Triangle.ogg.
Custom (personalizar)

Clic en el botón Buscar,


En Pulsar, cuando se hace para elegir un sonido de la
clic en el objeto cambiar el galería, como por ejemplo
valor a Custom. Trend.ogg.

2) Clic en el botón Aceptar y listo. Solo debemos probar este cambio.

4. AÑADIR MUSICA DE FONDO A NUESTRO PROYECTO.

En AutoPlay es realmente fácil añadir una lista de canciones y reproducirlas como música fondo. Como un
soundtrack en una película, la música de fondo puede manipular el estado de ánimo y añadirle a tu
aplicación una atmósfera de emoción.

52 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

1) Clic menú Proyecto > Audio, en la ventana de propiedades hacemos clic en la pestaña Música de Fondo
(Background Music), realizamos los siguientes pasos.
Reproducir la canción
seleccionada.
Clic en el botón Añadir
para poder adicionar Para la Reproducción de
archivos de música. Por la canción seleccionada.
ejemplo Easy
(short).ogg
Opción para cambiar el
Clic para eliminar el archivo volumen de
de música de la lista. reproducción de las
canciones.
Modo de reproducir de
las canciones de la lista
secuencial o
aleatoriamente.

Finalmente clic en el
botón Aceptar.

2) Ahora guardamos el proyecto y lo publicamos, para poder en este caso escuchar la música de fondo de
nuestra aplicación.
5. PAUSAR MUSICA DE FONDO.

Hay ocasiones que se debe detener la reproducción de la música de fondo. Por ejemplo, si tienes un
objeto de Video que cuenta con su propio soundtrack, probablemente no quieres que entre en conflicto
con la música de fondo, así que querrás pausar la música de fondo mientras el video esté siendo
mostrado. En nuestro caso, el video se muestra mientras el usuario está en la página Video, así que
necesitamos desactivar la música de fondo cuando él se dirija a esta página, y después activarla de nuevo
cuando él abandone la página.
Consejo: Puedes utilizar esta misma técnica que realizaremos a continuación, para añadir un
botón alternador de modo que el usuario pueda activar o desactivar la música (por si acaso sus
preferencias musicales son un poco diferentes de las tuyas).
1) Doble clic en la página Video, en la ventana de propiedades vamos a la pestaña Script. Escogemos el
evento OnShow luego clic en el botón Añadir Acción. Seleccionamos la categoría Audio y la propiedad
Audio.Toggle.Play, clic botón siguiente. Como tercer paso cambiamos el valor de Channel por el de
CHANNEL-BACKGROUND.
NOTA: En los parámetros de la acción puedes especificar el canal que quieres que la acción alterne. En
este caso queremos alternar el sonido del canal de audio de fondo, así que necesitas cambiar la
configuración Channel a CHANNEL_BACKGROUND.
Una vez que tengas la acción configurada, haz clic en Finalizar para cerrar el asistente. La acción
Audio.TogglePlay aparecerá en el editor de Script.
A continuación mostramos las respectivas capturas de pantallas de todo el procedimiento realizado.

53 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

No cierres el editor de Script aún; necesitas añadirle también una acción al evento OnClose.

El evento On Show se activa o entra en acción cuando la página se abre. La música de fondo aún estará
reproduciéndose cuando el usuario abandone la Página Principal, así que esta debería pausar la música
cuando el usuario se dirija a la página Video.
2) Lo que vamos a realizar es seleccionar y copiar la acción Audio.ToggePlay al evento OnClose de la
página. Queremos añadir otra acción Audio.TogglePlay pero ahora al evento OnClose de esta página para

54 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

activar de nuevo la música de fondo cuando el usuario salte a la página principal. Esta necesita ser igual a
la acción que le añadiste al evento OnShow debido a que queremos que las dos acciones se compensen
una con otra (una para desactivar el audio y la otra para volverlo a activar).
Podrías hacer clic en la pestaña OnClose y luego añadir otra acción de la misma forma que lo hiciste en el
paso 2. Pero puesto que queremos que esta acción tenga los mismos parámetros que la primera, podrías
también ahorrarte un poco de tiempo y tan solo copiar el texto desde una pestaña hacia la otra.
Para hacer esto, simplemente selecciona la línea completa de texto y presiona Ctrl+C para copiarla en el
portapapeles. Luego haz clic en la pestaña OnClose y presiona Ctrl+V para pegar el texto dentro de ese
evento.
Debemos darnos cuenta que esto no le afectará para nada a la acción que añadiste en la pestaña On Show
(las acciones que añadas a una pestaña permanecen igual cuando conmutas o cambias hacia otra
pestaña). Simplemente le estás haciendo un cambio a ambos eventos al mismo tiempo.
Una vez que hayas configurado la acción para el evento OnClose, haz clic en Aceptar para cerrar el editor
de Script y confirmar tus cambios.
3) Guarda el proyecto y dale F5 para previsualizar el proyecto y así hacer la prueba del correcto
funcionamiento de este procedimiento que hicimos.

Resumen del capítulo. En este capítulo aprendiste cómo:


ü Cambiar los sonidos por defecto del objeto en tu proyecto.
ü Ajustar los efectos de sonido para un objeto específico.
ü Añadir música de fondo.
ü Pausar el audio de fondo mientras una página es mostrada.

55 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

CAPÍTULO 6
PUBLICACIÓN PROYECTO

En este último capítulo avanzaremos a la etapa final del desarrollo del proyecto AutoPlay: construcción y
publicación de tu aplicación AutoPlay.
1. PUBLICAR EL PROYECTO EN UNA CARPETA EN EL DISCO DURO.

El método más rápido de publicación es construir el proyecto hacia una carpeta de tu disco duro. Cuando
publicas tu proyecto en una carpeta, AutoPlay utiliza las configuraciones en el archivo de proyecto para
generar un ejecutable para tu aplicación. Luego copia este ejecutable (junto con todo el contenido de la
carpeta CD_ROOT de tu proyecto) a alguna carpeta externa que elijas.
La única diferencia entre construir hacia una carpeta y quemar en CD, es dónde termina tu aplicación. La
construcción hacia una carpeta es esencialmente igual que preparar el contenido de un CD en una carpeta
antes de quemarlo.

1) Vamos al menú Publicar > , para abrir el asistente de Publicación. En este asistente
elegimos la opción Carpeta del Disco Duro (Hard Drive Folder) y haz clic en Next.

2) Al hacer clic en Next te llevará a la segunda página del asistente donde podrás especificar la carpeta de
salida.
Consejo: Incluso si estás planeando quemar tu proyecto en un CD, es una buena idea
construirlo antes hacia una carpeta por lo menos la primera vez. De este modo, puedes
probar primero tu aplicación sin desperdiciar un CD-R, o tener que esperar con un quemado
lento en CD-RW. Una vez que estés seguro que todo trabaja de la forma que quieres, puedes
volver a publicar tu proyecto utilizando un método diferente, o bien quemar el contenido de la carpeta de
salida utilizando un programa quemador externo.

56 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

Buscamos en que unidad y


carpeta se realizara la
publicación.

Nombre por defecto del


ejecutable que se creará.

Tendrá todas las características


para luego copiarlo en un CD.

Clic en el Botón Build para realizar


la publicación.

Puedes utilizar una carpeta ya existente para este propósito, pero es mejor crear una nueva carpeta
debido a que cualquier archivo que se encuentre en ella será borrado antes de que la aplicación sea
construida.
¡Advertencia! ¡Cualquier archivo en la carpeta de salida será borrado durante el proceso de
construcción! Ten cuidado de no utilizar una carpeta que contenga algún archivo o sub-carpeta

que quieras conservar.


Consejo: La carpeta de salida que elijas no tiene que estar en el disco duro local; podrás dirigir
fácilmente la salida hacia una carpeta en una unidad de red compartida, o incluso hacia alguna
otra forma de almacenamiento, tal como una memoria USB. El único requerimiento es que
haya suficiente espacio libre en el dispositivo para tu aplicación AutoPlay. .
3) AutoPlay construirá el proyecto y te informará cuando tu aplicación esté lista. Debido a que el proyecto
es algo pequeño y el proceso de construcción es muy rápido, no deberías tener que esperar demasiado.
(En un sistema rápido esto deberá realizarse como en cinco o seis segundos).

Esta opción debe estar


seleccionando, para abrir la
carpeta de salida

4) Haz clic en Close para salir del asistente de Publicación. Cuando la carpeta de salida se abra, haz doble
clic en el archivo autorun.exe para lanzar tu aplicación. Cuando cierres el asistente de Publicación,
AutoPlay automáticamente abrirá por ti la carpeta de salida.

57 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

5) El contenido de esta carpeta es exactamente lo que verás en el directorio raíz del CD o DVD si quemas
tu proyecto en un disco en lugar de construirlo hacia una carpeta.
En efecto, todo aquí es construido y está listo para funcionar. Podrías seleccionar todo en la carpeta de
salida, arrastrarlo a tu software de quemado de CD y quemarlo. O podrías utilizar una herramienta como
Setup Factory para empacarlo dentro de un instalador, de modo que pueda ser instalado en el disco duro
del usuario como cualquier otra aplicación. Por supuesto, antes de distribuir tu proyecto, siempre deberías
probarlo completamente. Para lanzarlo sólo haz doble clic en el archivo Autorun.exe.

Clic para ejecutar la aplicación.

6) Una vez que has tenido la oportunidad de probar tu aplicación, cierra la aplicación y regresa al ambiente
de diseño del AutoPlay.
Ahora probemos la construcción del proyecto como un ejecutable comprimido.

58 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

2. PUBLICAR UN EJECUTABLE COMPRIMIDO.


Para proyectos más pequeños, la construcción de un ejecutable comprimido es un gran método para
hacer portable la aplicación. El proyecto total será comprimido dentro de un único archivo ejecutable, con
todo el contenido del proyecto dentro de él. Cuando hagas doble clic en este archivo para lanzarlo, el
contenido será extraído en una localización temporal del disco duro local, y la aplicación arrancará desde
ahí.
Incluso puedes elegir encriptar el contenido para prevenir cualquier acceso a él sin lanzar la aplicación.
Aunque técnicamente puedes construir un ejecutable comprimido para un proyecto de cualquier tamaño,
es mejor reservar este método para los proyectos más pequeños. La longitud del proyecto es la misma
longitud que llegan a tener los datos cuando el usuario lanza tu aplicación. (El contenido debe ser extraído
cada vez que la aplicación sea iniciada).
Consejo: Si la aplicación va a ser utilizada repetidamente, o si es relativamente grande, es
posible que quieras utilizar una herramienta de desarrollo profesional, tal como Setup
Factory, para crearle un instalador tradicional. De esta forma, el contenido puede ser
desempacado una vez (en tiempo de instalación) y luego se puede acceder a él como
cualquier otro programa, reduciendo significativamente las veces de lanzamiento.
1) Presiona F7 para abrir nuevamente el Asistente de Publicación, seleccionamos la esta vez la opción
Web/Email Executable y clic en el botón Next.

2) En la ventana siguiente podrás especificar una ruta y un nombre de archivo para el ejecutable. Luego
selecciona la opción Ventana de progreso y clic en el botón Build.

59 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

La configuración Ventana de progreso en este cuadro de diálogo te permite configurar el pequeño


mensaje contextual “Loading” que aparece mientras la aplicación está extrayendo los datos del proyecto
dentro del disco duro local. Por ejemplo, podrías cambiar el mensaje “Loading” por el de “Por favor
espere…”, o hacer que no aparezca ningún mensaje.
La opción Encrypt data segment le indica a AutoPlay que encripte todos los datos del proyecto que se
almacenen en el ejecutable comprimido. Esto le añade un poco de seguridad a la aplicación, de modo que
el usuario no pueda extraer los archivos del proyecto directamente desde el ejecutable al utilizar un
descompresor externo como WinZip, WinRar o algún otro.
3) Haz clic en Build y espera a que el proceso de construcción finalice. AutoPlay construirá el proyecto y te
informará cuando tu aplicación esté lista. Este proceso de construcción es casi tan rápido como la opción
Hard drive folder, así que no tendrás que esperar demasiado tiempo.

4) Haz clic en Close para cerrar el asistente de Publicación. Cuando la carpeta se abra, haz doble clic en el
archivo ejecutable para lanzar tu aplicación. La aplicación completa está contenida dentro de este archivo.
Cuando hagas doble clic sobre él, el mensaje “Por favor espere…” aparecerá y el contenido será extraído
automáticamente a una carpeta temporal del disco duro, y luego la aplicación arrancará igual que antes.

Doble Clic para ejecutar la


aplicación.

60 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

Nota: Cuando construyes un ejecutable comprimido, hay solamente un archivo a distribuir.


6) Sal de la aplicación y regresa al AutoPlay Media Studio.
Una vez que has tenido oportunidad de probar tu aplicación, ahora ciérrala y regresa al ambiente de
diseño del AutoPlay.
Nota: Un poquito de magia sucede detrás de escena después de que tu aplicación se cierra, ésta
automáticamente elimina los archivos que fueron extraídos a la carpeta temporal cuando fue lanzada. No
tienes que preocuparte de que los archivos continúen disponibles en la carpeta temporal del usuario, o de
que ocupen espacio en su disco duro. Como un programa “bien portado”, tu aplicación AutoPlay “deja
todo limpio antes de irse”.
3. PUBLICAR EL PROYECTO EN UN CD O DVD.

Con su motor de quemado incorporado, AutoPlay Media Studio hace que la publicación a un CD-R, CD-RW,
DVD±R o DVD±RW sea pan comido.
Para este ejercicio, describiremos las etapas de quemado a un disco compacto, así que no tienes que estar
leyendo "CD-R, CD-RW, DVD±R o DVD±RW” una y otra vez. Pero los mismos principios aplican para el
quemado a DVD±R o DVD±RW.
Nota: Necesitarás una unidad quemadora de CD-R o CD-RW y un disco CD-R o CD-RW para poder
completar este ejercicio.
1) Inserta un CD o un CD-RW en blanco dentro de tu quemador de CD y presiona F7 para abrir el Asistente
de Publicación.
Nota: Te recomendamos utilizar un disco CD-RW de modo que puedas reutilizarlo posteriormente.
2) Selecciona la opción Grabar Datos CD/DVD y haz clic en Next. Esta vez vamos a quemar el proyecto en
un CD regrabable.

Al hacer clic en Next te llevará a la segunda página del asistente donde podrás especificar las opciones de
quemado.
3) Selecciona tu unidad quemadora de CD de la lista desplegable y cambia la configuración Volume
identifier a algo más apropiado como MiTutorial. La lista desplegable Grabadora de CD/DVD, es
proporcionada en caso de que tengas varias unidades de CD o DVD en tu sistema. Selecciona la unidad que
será utilizada para quemar el CD. El campo Nombre del Ejecutable te permite especificar el nombre del CD
que aparecerá en la carpeta Mi PC en Windows.

61 AUTOR: FAUTAPO – VISCARRA 2011


Diplomado en Educación Superior Formación Basada en Competencias – Módulo 4: TIC’s en la Educación

4) Haz clic en Burn y espera a que finalice el proceso de quemado. Si estás utilizando un disco CD-RW, un
cuadro de diálogo de advertencia aparecerá preguntándote si estás seguro de que quieres hacer eso. Si el
CD-RW no está vacío, aparecerá un cuadro de diálogo preguntándote si quieres borrar el disco. Si estás
seguro que no hay nada importante en ese disco que quieras conservar, entonces haz clic en OK y
AutoPlay borrará por ti el disco antes de quemar el proyecto. (Si colocas el disco equivocado por error, tan
solo expúlsalo y reemplázalo por otro en blanco). Una vez que el quemado se complete, la unidad
automáticamente expulsará el CD.
5) Clic en Close para salir del Asistente de Publicación. Cierra la bandeja del CD para reinsertarlo de nuevo
en la unidad. Después de que insertes el CD en la unidad, deberás escuchar que el lector da vueltas
cuando la unidad comienza a leer el contenido. La unidad buscará en la carpeta raíz del CD un archivo
llamado autorun.inf, el cual le indica a tu computadora el nombre del programa que debe cargar cuando el
CD sea insertado.
Nota: AutoPlay crea automáticamente por ti el archivo autorun.inf cuando está activada la opción Activar
característica AutoPlay.
Tu aplicación AutoPlay deberá iniciar automáticamente. (Si no lo hace, entonces la característica de
autoarranque está deshabilitada en tu computadora. Necesitarás rehabilitarla tú mismo, o bien abrir el CD
desde “Mi PC” y luego hacer doble clic en el archivo autorun.exe).
6) Sal de la aplicación y regresa al AutoPlay Media Studio. ¡Eso es todo! Acabas de publicar tu proyecto
AutoPlay en un CD.
Ahora sabes todo lo necesario para poder construir y publicar los proyectos que elabores con el AutoPlay.
Resumen del capítulo. En este capítulo aprendiste cómo:
ü Publicar el Proyecto en una carpeta en disco duro.
ü Publicar un ejecutable comprimible.
ü Publicar el proyecto en un CD o DVD.

62 AUTOR: FAUTAPO – VISCARRA 2011

También podría gustarte