Cuaderno de Trabajo

Cuaderno de trabajo
Unidad de Aprendizaje Aplicaciones de

Informática
Comercial para la Licenciatura en relaciones
comerciales
1
Índice
Unidad l. Creación y edición de imágenes usando Photoshop

1. Ejercicio 1. Configuración del Área de Trabajo de Photoshop CS4
2. Ejercicio 2. Edición sencilla de imágenes
3. Ejercicio 3. Creaciones de pinceles y motivos
4. Ejercicio 4. Aplicación de color a Imágenes y Figuras
5. Ejercicio 5. Retoque de imágenes
6. Ejercicio 6. Creación de imágenes a partir de capas
7. Ejercicio 7. Transformación de imágenes a partir de capas y máscaras
8. Ejercicio 8. Organización de las capas y trabajo con capas
9. Ejercicio 9. Creación y animación de textos
10. Ejercicio 10. Formato de un archivo para una página web o impresión
11. Realización de la práctica 1: Cartel publicitario
Unidad lI. Creación y edición de videos usando Premiere

1. Ejercicio 1. Configuración del Área de Trabajo
2. Ejercicio 2. Creación del video “El Futbolista”, a partir de imágenes
3. Ejercicio 3. Creación del video “El juego la escalera”, a partir de imágenes
4. Ejercicio 4. Creación del video “Mi álbum de fotos con efectos”
5. Ejercicio 5. Creación del video “Mi línea de la vida en transición”
6. Ejercicio 6. Editando sonido para mis videos
7. Ejercicio 7. Edición y montaje de varios videos
8. Ejercicio 8. Creación y animación de texto para los videos
9. Ejercicio 9. Edición y aplicaciones de transiciones a los videos
10. Ejercicio 10. Exportación de mis proyectos a clip de película
2
Unidad III. Creación y edición de animaciones con Flash
1. Ejercicio 1. Configuración del Área de Trabajo
2. Ejercicio 2. Creación de imágenes/ Mi primer dibujo
3. Ejercicio 3. Edición de trazos y personalización de colores
4. Ejercicio 4. Creación de textos
5. Ejercicio 5. Animación de textos
6. Ejercicio 6. Agregando música y sonido a mis proyectos
7. Ejercicio 7. Transformación y organización de objetos a partir de capas
8. Ejercicio 8. Creación y edición de símbolos e instancias
9. Ejercicio 9. Creación de vínculos a partir de botones a clips
10. Ejercicio 10. Formato de un archivo para una página web o DVD
3
Unidad l. Creación
y edición de
imágenes usando
Photoshop
4
Ejercicio 1. Configuración del Área de Trabajo de Photoshop CS4
El área de trabajo de Photoshop CS4 está compuesta por una serie de barras, de paneles y del escenario en donde se sitúa el
lienzo de trabajo. Es importante antes de empezar a trabajar, saber cuál es el objetivo del proyecto a desarrollar para configurar el
área de trabajo de la manera adecuada.
Realiza tu primera práctica con Photoshop revisando y configurando el área de trabajo.
1. Abre Photoshop y observa que…
De manera automática muestra una ventana única en la que sí se abren diferentes archivos estos se distribuyen a través de
una barra de pestañas, en la cual cada archivo queda como si fuera una hoja, Y para cambiar de un documento a otro
solamente es necesario hacer clic en la pestaña del documento requerido (1) .
En la esquina superior derecha de la ventana se encuentra un botón selector del espacio de trabajo que permite adaptar la
ventana a las necesidades del usuario (2).
En esta barra de Aplicación se encuentran también las distintas herramientas de visualización del documento y los menús.
2. Da clic en el menú Archivo selecciona la opción Nuevo para agregar un nuevo archivo y que aparezca el lienzo de
trabajo, acepta los parámetros establecidos.
Debajo de la barra de Menú se encuentra la barra de Opciones de herramienta, la cual muestra las diferentes funciones de
la herramienta seleccionada o que se está utilizando.
Ubicada a lo largo del lado izquierdo se encuentra el panel de herramientas, y en el lado derecho se muestran el resto de
todos los paneles, los cuales pueden activarse u ocultarse por medio del menú ventana. Éstos también pueden distribuirse
por el área de trabajo, modificando su posición y tamaño.
5
3. Da clic en el panel de herramientas en la herramienta de Texto y configura en la barra de Opciones de
herramientas, el tipo de letra en Arial, tamaño 72 en color Azul y escribe en el centro tu Nombre completo. Da clic
en la herramienta Mover para salir de la herramienta de Texto. Como se muestra en la siguiente imagen:
1 2
En esta versión de Photoshop la barra de Título se ha sustituido por la barra de Aplicación, donde se muestran las diferentes
opciones de visualización de un documento así como también el selector de espacio de trabajo…
6
4. Da clic en el botón del selector que muestra de manera automática la opción Aspectos Esenciales, para observar las
otras disposiciones
Las siguientes imágenes muestran el aspecto de los diferentes modos de trabajo para el entorno de Photoshop.
7
Selecciona Aspectos básicos
8
Ahora selecciona Web
9
Como puedes observar se pueden seleccionar de manera rápida otros espacios de trabajo para utilizar según las necesidades que
se tengan. Asi pueden seleccionarse la opción Básico de espacio de trabajo , así como hacer que queden resaltadas las
novedades de la versión de CS4. Es importante resaltar que estas opciones tabien se encuentra en el comando Espacio de
trabajo localizado en el Menú Ventana.
De clic en este menú para observar lo que se mencionó:
10
También es este menú Ventana se pueden activar los paneles necesarios a desplegar según la actividad que se vayan a
realizar.
En el lado derecho de manera automática en el modo de Aspectos Esenciales se muestran de manera automática tres grupos de
paneles. El de Ajustes y Mascarás. El de Color, Muestras y Estilos, y el de Capas, Canales y Trazados.
Todos los paneles pueden modificar su tamaño o moverse a otro lugar.
11
Para contraer los paneles de clic en el botón de doble flecha que aparece en la barra de título del panel.
5. Para finalizar el ejercicio da clic en el Menú Ventana y selecciona el panel Historia. El cual permite visualizar de
manera secuencial las acciones que se han realizado, con solo mover el control Botón de arrastre se pueden deshacer
acciones que no se desean.
La ventana de Photoshop debe mostrarse como la siguiente imagen:
6. Imprime la pantalla con esta configuración de Photoshop (Utiliza el botón de Imprimir pantalla (ImprPant) y pégala con el
botón derecho del Mouse o Ctrl+ V, en un documento de Word como evidencia de la actividad realizada.
12
7. Da clic nuevamente en botón de flechas de la barra del título del panel para expandirlos nuevamente. Da clic en el Botón
de Aspectos Esenciales nuevamente para restablecer las opciones por deafult e Imprime nuevamente la pantalla para pegar
nuevamente la imagen en el documento de Word.
Finalmente tu espacio de trabajo debe observase como en la siguiente imagen.
8. Al terminar, guarda el documento en la opción de Word 97-2003 utilizando el formato S1A4_apellido paterno + inicial del
apellido materno + nombre completo del alumno, por ejemplo: S1A4_lopezc_eduardo
Esta actividad tiene vigencia de entrega durante la primera semana. Podrás enviarlo al “Buzón de tareas”.
13
Ejercicio 2. Edición sencilla de imágenes
Después de configurar el área de trabajo empezaremos a usar las herramientas de dibujo para familiarizarse con su función.
Para lo cual esta actividad consiste en crear un dibujo de un paisaje similar al que se muestra en la imagen o de acuerdo a tu
gusto.
 Para esta actividad revisa el tema de Uso del panel de Herramientas
Las herramientas a usar en esta actividad son: El pincel en diferentes diámetros y en el estilo de Hierba, el Pincel corrector, la
Herramienta cuentagotas.
El punto de partida para crear una imagen es la preparación del lienzo sobre el que se va a trabajar.
Para elegir el lienzo adecuado se debe tener en cuenta distintos aspectos tales como:
Las dimensiones de la imagen, el modo de color, la resolución, etc.
14
En Photoshop se cuenta con la ventaja de que si durante la realización del trabajo se necesitan modificar posteriormente las
propiedades del lienzo, esto se puede hacer de manera muy fácil.
Para iniciar la creación de tu primer dibujo, realiza lo siguiente:
1. Selecciona el menú Archivo y después la opción Nuevo.

2. En la ventana que aparece establece los siguientes parámetros:
Nombre: Mi dibujo Predefinir. A medida
Anchura: 1200 pixeles Altura: 800 pixeles
Resolución: 300 ppp Color: RGB
3. Haz clic en OK
Un aspecto importante a considerar en la realización de la imagen es la resolución, ya que esta propiedad define el nivel de
detalle de la imagen, de acuerdo al medio en el que se va a publicar.
Algunas resoluciones típicas son las siguientes:
72 ppp (pixeles por Esta resolución se utiliza para el diseño de gráficos que
pulgada): se emplearan en páginas Web o productos multimedia.
La limitación del valor de esta resolución está dada por
las características del medio en que serán difundidas las
imágenes. Por ejemplo una pantalla de monitor.
150 ppp: Esta resolución es adecuada para aquellos trabajos que
serán impresos en cierta calidad. Tales como carteles o
pancartas destinados a ser vistos desde una cierta
distancia.
300 ppp: Esta resolución se usa cuando se requiere de resultados
óptimos en los proyectos de impresión. El inconveniente
que tiene es que los archivos de imágenes de gran
tamaño superan los 20 mb.
15
Con esto ya esta creado el lienzo de la primera capa en tu documento, en la cual vas a trabajar. Ahora vamos a ver el panel de
Herramientas para que puedas trabajar.
El panel alargado El botón de algunas de herramientas tiene un pequeño triángulo en la

que se ve en la esquina inferior derecha . Éste es el indicador de que existe un de
imagen de la grupo de herramientas.
derecha es el
Panel de Si se coloca el cursor sobre alguno de estos iconos y se mantiene
Herramientas, ahí presionado un instante el botón izquierdo del ratón (o se presiona el botón
se puede ver en derecho), se desplegará la lista de herramientas que pertenecen al grupo.
forma de iconos
todas las
herramientas
disponibles en
Photoshop. De este menú se puede seleccionar la opción que se vaya a utilizar
Como se puede observar dentro del grupo de herramientas de dibujo se localiza

el Pincel, el Lápiz y la Herramienta Sustitución de color. La letra que aparece
a la derecha del nombre de la herramienta proporciona información para
acceder a la función por medio del método abreviado de teclado. La herramienta
activa se encuentra siempre marcada por un cuadrado negro a la izquierda del
icono.
16
En el panel de herramientas se localiza también el selector de color en Photoshop se trabaja siempre con dos colores
activos, que pueden ser totalmente configurados por el usuario.
El color situado al frente será el color Frontal, la mayoría de las herramientas lo tomarán como color de trabajo.
El que se encuentra detrás es el color de Fondo, se puede establecer este color como el color del fondo del documento, así se
puede utilizar herramientas que pinten con el color de fondo y con esto se puede imitar de alguna forma el borrado de píxeles.
Al seleccionar una herramienta lápiz o Pincel o alguna otra, en la barra de aplicaciones
Se pueden establecer los parámetros necesarios para trabajar con la herramienta seleccionada. Tales como el grosor o la dureza
del lápiz o el pincel, el Modo, la opacidad, el flujo, etc. El color lo establecemos con el selector de color y si en algún momento
queremos volver a usar un color que ya aplicamos al dibujo, se puede usar la herramienta de Cuentagotas . La cual sirve
para seleccionar el color requerido en nuestro dibujo y cambiar así, a este color el color frontal del selector de color.
Después de revisar el tema da clic en el icono de la de pincel y configura en la barra de aplicación los parámetros de tamaño y
color del pincel para que inicios a dibujar en el lienzo tu primer dibujo. Recuerda que puede variar el grosor del pincel y que
puedes seleccionar también un estilo de pincel.
También puedes utilizar la herramienta de Rectángulo, Elipse, Forma libre para crear formas en tu dibujo.
Al concluir tu dibujo lo vas a guardar de dos formas:
17
Como proyecto PSD que es el guardado normal que hacer Photoshop para tener el archivo disponible si se quieren hacer
modificaciones.
Al terminar, guarda el documento:
1. Menú Archivo - Guardar como
2. Guardar en la opción de Photoshop (*PSD; *PDD) utilizando el formato para el nombre S1A4_mi_dibujo_apellido paterno +
inicial del apellido materno + nombre completo del alumno, por ejemplo: S1A4_mi_dibujo_lopezc_eduardo
3. Guardar como imagen como tipo JPEG, con el mismo nombre del proyecto
o Menú Archivo-guardar como
o Seleccionar en la opción de formato el tipo de JPEG
18
o El archivo en imagen quedaría como el siguiente:
Ejercicio 3. Creación de pinceles y motivos
En Photoshop las Herramientas de Pincel y Tampón de Motivo son muy útiles para creación de imágenes o dibujos.
Revisa en la unidad 3 del manual o del curso de Aula Clic, el tema para la creación de Pinceles y motivos.
Se puede observar que en el tema de pinceles, se tiene la opción para seleccionar un estilo de pincel y que hay pinceles con la
forma de hojas, de estrellas, pasto, etc.
En Photoshop de tiene la opción para poder crear pinceles y motivos personalizados, lo cual será el propósito de este ejercicio.
Las Funciones a usar son: Importar imagen, Ingresar texto, seleccionar con Marco rectangular deseleccionar, Menú edición
definir pincel y definir motivo. Aplicar un fondo con motivo y aplicar un pincel.
19
A. Creación de pinceles
La primera actividad a realizar es crear un pincel partir de un texto con tu nombre.
Para hacer un pincel personalizado con tu nombre, realiza lo siguiente:
1. Inicia Photoshop y crea un nuevo archivo. Acepta los parámetros que aparecen de manera automática para el lienzo de trabajo
y realiza lo siguiente en la Capa que contiene el documento.
2. Selecciona la herramienta de Texto y escribe tu nombre, aplica un color de fuente y un tamaño adecuado. Observa que
al insertar el texto se agrega una nueva capa al documento, una capa exclusiva para este texto que escribiste.
3. Da clic en la herramienta Marco rectangular y selecciona con esta herramienta el nombre que escribiste.
4. En el menú Edición selecciona la opción Definir valor de pincel
5. En el cuadro que aparece escribe un nombre para el pincel; con tu nombre.
6. Haz clic en Aceptar.
7. Para quitar la selección al texto que escribiste da Clic en el menú selección y activa la opción deseleccionar.
8. Ahora para probar el pincel, Selecciona la herramienta pincel y abre en el menú ventana el Panel de pinceles que aparece
localiza el Pincel que creaste con tu nombre, en el panel izquierdo de la ventana de Pinceles, en la opción formas de la punta del
pincel, selecciona el estilo dinámica de forma y dispersión
9. Selecciona la capa fondo en el panel de capas y aplica el pincel con la forma de tu nombre en el lienzo. Debe quedar como
en la imagen del ejemplo.
20
21
22
Y en la barra de aplicación seleccionar el motivo que se creó para aplicarlo al lienzo de dibujo.
Imprime la vista de esta pantalla y pégala en un documento de Word como evidencia de la actividad realizada.
Al terminar, guarda el documento en la opción de Word 97-2003 utilizando el formato S1A4_mi_pincel_apellido paterno + inicial del
apellido materno + nombre completo del alumno, por ejemplo: S1A4_mi_pincel_lopezc_eduardo
23
B. Creación de motivos
1. Para crear un motivo deberemos seleccionarlo primero de una imagen ya existente o creado por nosotros mismos. Abre con
Photoshop la imagen Flores.jpg que se encuentra en la carpeta de recursos.
2. Selecciona un área de la imagen que posteriormente será el motivo. Intenta que los bordes de éste tengan colores y tonalidades
similares para mejorar la calidad del motivo. Para ello utiliza la herramienta Marco Rectangular
24
3. Una vez seleccionado, haz clic en Edición → Definir Motivo para guardarlo en el sistema. Para que se muestre esta opción,
primero debes de pulsar en Mostrar todas las opciones del menú.
4. Se abrirá un cuadro de diálogo donde deberás introducir el nombre del nuevo motivo. En este ejemplo se le llamará Flor verde.
25
5. Una vez guardado, podremos acceder a él, Seleccionando la herramienta de Tampón de Motivo , buscar el motivo creado
en la barra de Aplicación y utilizarlo como deseemos.
6. Al Aplicarlo en una nueva capa de un archivo de Photoshop el motivo se empezara a observar como en la siguiente imagen
26
7. Imprime la pantalla con esta ventana de Photoshop en un documento de Word como evidencia de la actividad.
8. Al terminar, guarda el documento en la opción de Word 97-2003 utilizando el formato S1A4_mi motivo_flores_apellido paterno +
inicial del apellido materno + nombre completo del alumno, por ejemplo: S1A4_lopezc_eduardo
Ejercicio 4. Aplicación de color a imágenes y Figuras
En este ejercicio se practicará con las herramientas para la aplicación de color a las imágenes, para lo cual se requiere que revises
los temas de Pincel, Selección Varita Mágica, Color frontal, Bote de pintura, Degradado, Sobreexponer que encontrarás en el
“Manual de Photoshop”.
27
A. Pasos para modificar el archivo muñeca
Abre el archivo Muñeca.psd que se encuentra dentro de la carpeta de “Recursos”.
En el panel de herramientas Cambia el Color de frontal (Foreground color) a café.
Utiliza la herramienta de Zoom o <Ctrl+Barra Espaciadora, clic botón izquierdo>, para magnificar la imagen y que puedas ver los
detalles de la selección.
Haz clic en la Barra de herramientas Varita Mágica (Magic Wand Tool) y con ella selecciona la cabeza y la trenza derecha de la
muñeca. Recuerda que puedes modificar la tolerancia de la herramienta si es necesario en la barra de Aplicaciones, con el
objetivo de seleccionar con mayor exactitud. También puedes usar las teclas <Shift> o <Alt> para ir agregando o quitar áreas a la
selección.
1. Haz clic en la herramienta Bote de pintura (Paint Bucket Tool) y úsala para rellenar con el color las zonas seleccionadas.
2. Quita la selección de las áreas que acabas de colorear, Haz clic en el Menú selección – Deseleccionar o con las teclas <Ctrl
+ D>
3. De forma similar, utiliza las herramientas de Selección y Pintura para rellenar colorear las bolitas del vestido, la cara, la
mano, el delantal, los motivos del delantal, los zapatos, las calcetas, el pastel, las velas y la peineta en la cabeza.
4. Falta aplicar color a la trenza izquierda. Es difícil seleccionarla con la Varita mágica porque hay una zona donde la línea está
incompleta. Elige la herramienta Lápiz (Pencil Tool), que se encuentra en el menú adicional de las herramientas del pincel.
5. Cambia el Color de frontal a negro y usa el Lápiz para completar las áreas en donde quedó inconclusa la línea.
6. Ahora si puedes seleccionar con la Varita Mágica y aplicar color a la trenza que falta. Utiliza el mismo color que usaste para
el resto del cabello de la muñeca, usa la herramienta de gotero para copiar los colores al Color frontal.
28
7. Selecciona el plato del pastel con la Varita Mágica. Vas a aplicar un degradado con las opciones del Bote de pintura. Para
ello primero selecciona la herramienta Degradado (Gradient Tool) Que está en el mismo botón que el Bote de pintura.
8. En la paleta de opciones de la herramienta utiliza el menú colgante de Edición de degradado (Edit Gradient) y elige el
Degradado que va de Color frontal a transparente (Foreground to Transparent). Elige también la forma Lineal (Linear
Gradient), el Modo (Mode) de Luz suave (Soft Light) y una Opacidad del 60%.
9. Una vez establecidas las opciones de la herramienta, da un clic sobre la imagen. Verás que el cursor forma una línea que
debes arrastrar sobre el plato para colorearlo.
10. Colorea con degradados similares los aros de luz y las llamas de las velas, pero en este caso usa la opción
Naranja/Amarillo/Naranja (Orange/Yellow/Orange).
11. Quita cualquier selección y ahora cambia el Color de frente a amarillo.
12. Toma la herramienta de Pincel en el Modo Sobreexponer (Dodge Tool) y establece en la paleta de opciones de herramienta
los siguientes parámetros:
 Pincel (Brush): 65 px.

 Rango (Range): Medios tonos (Midtones)
 Exposición (Exposure): 50%
13. Con la herramienta Que has establecido, empieza a pintar brillos en el cabello, el pastel, las manos, las velas y los aros de
luz.
14. Ahora harás algo similar para pintar sombras. Cambia el Color frontal a negro y selecciona la herramienta de Subexposición
(Burn Tool). Establece las mismas opciones que en el caso anterior. Con esta herramienta dibuja las sombras a la imagen.
15. Aplica un Desenfoque a las rayas del pastel. Para ello simplemente selecciona la herramienta Desenfoque (Blur Tool).
29
En la paleta de opciones establece estos valores:
 Brocha (Brush): 59 px. t

 Modo (Mode): Normal
 Intencidad (Strenght): 100%
Pinta con la brocha sobre las rayas del pastel.
16. Para resaltar las mejillas de la muñeca, pinta con la herramienta Brocha (Brush Tool) usando una opacidad del 50% y color
rojo.
Al terminar, guarda el documento, selecciona Menú Archivo - Guardar como, guardar en la opción de Photoshop (*PSD;
*PDD) utilizando el formato para el nombre S1A4_mueñaca_color__apellido paterno + inicial del apellido materno + nombre
completo del alumno, por ejemplo: S1A4_muñeca_color_lopezc_eduardo. Guardar como imagen como tipo JPEG, con el
mismo nombre del proyecto.
Ejercicio 5. Retoque de imágenes
Cuando se toman fotografías pueden salir en las fotos elementos que las hacen lucir mal, y sin los cuales las fotografías
quedarían mucho mejor.
30
En Photoshop se cuentas con funciones que permiten corregir de manera exitosa una foto que presenta esta característica. En
este ejercicio se trabajara con los comandos para corregir una imagen especialmente usando la técnica de clonación.
1. Abre la imagen calle2.jpeg que se encuentra dentro de la carpeta de “Recursos”. El objetivo de esta actividad es
eliminar los cables de la fotografía y el poste de luz. Para ello debes usar como referencia áreas similares donde no
aparezcan los cables y el poste y clonarlas sobre la zona de elementos a eliminar.
2. Selecciona la herramienta Zoom o usa las teclas <Ctrl+Barra espaciadora+ clic botón izquierdo> para agrandar el área en la
que vas a trabajar. Para mover el área de trabajo utiliza la herramienta Mano (Hand Tool), oprimiendo <H> o <Barra
espaciadora>.
3. Selecciona la herramienta Tampón de clonación (Stamp Clone Tool) <S> de la barra de herramientas.
4. En la paleta de la barra de Aplicación de la herramienta establece los siguientes parámetros:
 Tamaño del pincel (Brush): 12 px.

 Modo (Mode): Normal
 Opacidad (Opacity): 100%
 Corriente (Flow): 100%
5. Ahora decide cuál será el punto de referencia en la imagen. Se trata de un punto que se pretende clonar y que está próximo
a la zona a corregir. En este caso el punto de referencia ideal es una zona del cielo donde no haya cables.
6. Mantén presionada la tecla <Alt> Y haz clic sobre el punto de referencia elegido. Esto fija el punto de referencia de la
herramienta. Ahoca empieza e a pintar sobre el cable a eliminar. Si es necesario, puedes redefinir el punto de referencia
tantas veces como quieras. También puedes jugar con el tamaño de la brocha para adaptarla a las necesidades del elemento
sobre el que hay que pintar.
7. Guarda tu archivo de trabajo con tu nombre y guarda la imagen como calle2_tunombre_jpeg
31
8. Al terminar, guarda el documento:
9. Para esto seleccionas Menú Archivo - Guardar como.
10. Primero, lo guardas en la opción de Photoshop (*PSD; *PDD) utilizando el formato para el nombre S2A4_calle2_apellido
paterno + inicial del apellido materno + nombre completo del alumno, por ejemplo: S1A4_calle2_lopezc_eduardo
11. Segundo, lo guardas como imagen como tipo jpeg, con el mismo nombre del proyecto
12. Ahora corrige la fotografía del archivo la escuela.psd que se encuentra dentro de la carpeta de “Recursos”. Te debe
quedar como la siguiente.
14. Para esto seleccionas Menú Archivo - Guardar como
15. Primero, lo guardas en la opción de Photoshop (*PSD; *PDD) utilizando el formato para el nombre S2A4_escuela_apellido
paterno + inicial del apellido materno + nombre completo del alumno, por ejemplo: S1A4_escuela_lopezc_eduardo
16. Segundo, lo guardas como imagen como tipo jpeg, con el mismo nombre del proyecto.
17. Esta actividad tiene vigencia de entrega durante la primera semana. Podrás enviarlo al “Buzón de tareas”.
32
Para realizar este ejercicio será necesario que revises en los manuales los temas de: creación y uso de capas, selección,
aplicación de color, degradado, Transformación, Líneas guías, Opciones de fusión, guardar como imagen con formato gif.
Ejercicio 6. Creación de imágenes a partir de capas
El objetivo de este ejercicio es aprender a trabajar la creación de imágenes a partir de otras imágenes y por medio del uso de las
capas.
Archivos requeridos: botella.jpeg, etiqueta.jpeg que se encuentran dentro de la carpeta de “Recursos”.

Instrucciones:
1. Inicia Photoshop da clic en y Abre un Archivo Nuevo, en el cuadro que aparece escribe el nombre: botella.
Selecciona la opción “A medida”, con un tamaño del lienzo de 800 pixeles de ancho por 600 pixeles de alto, y con fondo
transparente.
2. Cambia el nombre a la capa dando doble clic sobre su nombre en el panel de capas: escribe el nombre de fondo color.
3. Establece dos líneas guías exactamente a la mitad horizontal (400 pixeles) y a la mitad vertical (300 pixeles) del
documento. Para activarlas recuerda que deben de estar a la vista las reglas tanto vertical como horizontal. Da clic botón
izquierdo del mouse en la orilla de las regla y arrastra para colocar las líneas guías en el documento.
4. Selecciona la herramienta Degradado , da clic en la opción circular en la barra de Aplicación y en las muestras de
colores selecciona la opción amarillo, violeta, naranja y azul, con una opacidad del 100%.
5. Da clic al cuadro donde aparecen los colores del degradado, en la barra de opciones de la Aplicación, para editar el color del
degradado y cambia el color del marcador de nivel de color de la izquierda a color lila. Observa la siguiente figura.
33
6. Deja solamente dos marcadores el del inicio en color Lila y el del final en color Naranja. Para quitar los otros dos
marcadores sobre da clic sobre ellos y arrastra hacia afuera de la barra de color para eliminarlos.
7. Para aplicar el color del degradado da clic en el centro del documento, donde se cruzan las líneas guías y arrastra con el
mouse hacia la derecha, hasta la orilla del lienzo, para aplicarlo suelta el botón del Mouse, aplica el color dos veces. Debe
quedar similar al de la imagen al final del documento. Con esto ya se tiene la primera capa de la imagen.
8. Da clic en el icono del candado en el área de las capas para bloquear la capa de fondo, y con esto evitar que sufra
modificaciones de manera accidental. Ahora se van a trabajar las capas de la imagen de la botella.
9. Abre el archivo botella.jpeg en Photoshop. Se agrega una nueva pestaña con la imagen de la botella. Ahora ya tienes dos
documentos abiertos en Photoshop.
34
10. Toma el documento de la botella de la etiqueta de la pestaña con el nombre en el área de trabajo y arrastra hacia el centro
del área de trabajo para tenerlo en una ventana flotante, reduce el tamaño de la ventana para poder ver el área de trabajo
de tu archivo anterior.
11. Da clic con el botón izquierdo del mouse en el área de la botella, arrastra la imagen y suéltala en el área de trabajo del
documento que ya estás trabajando. Después de tener la copia de la botella en tu documento Cierra el archivo de la botella.
12. Da clic en la capa que se agregó de la imagen y cambia el nombre al de: botella. Ya tienes una capa con el nombre botella.
13. Ahora se necesitan otras dos copias de esta imagen en distintas capas. Vas a dar clic con el botón derecho del mouse en la
capa de la botella del panel de capas, en el menú que aparece selecciona la opción duplicar capa. Aparece una nueva capa
llamada botella_copia. Da Clic sobre el nombre para cambiar al nombre de sombra.
14. Primero vas a trabajar en la capa sombra. Selecciona con la herramienta Selección rápida y ve seleccionando poco a poco
el área externa de a la silueta de la botella y da clic en la tecla suprimir para eliminar esa área. Debe de quedar solamente la
silueta de la botella
15. Antes de seguir trabajando duplica esta capa, es decir repite la operación para tener otra copia de la imagen de la silueta de
botella en otra capa, cambia el nombre al de copia_botella. Regresamos a trabajar en la capa de sombra. Vamos a crear la
sombra.
16. Ahora da clic en la herramienta de Lazo magnético (tercera en la barra de herramientas) para seleccionar el contorno
de la botella, da un clic en la base de la imagen de la botella y ve dando clic para situar los nodos en el contorno de toda la
imagen hasta llegar al primer nodo que colocó. Al unir todos los nodos quedará por completo seleccionado todo el contorno
de la imagen.
17. Ahora con el color negro en el color frontal selecciona el Bote de pintura y aplica este color a la selección de la botella.
Con esto se mostrará la botella en color negro.
35
18. Para dar el efecto de sombra se aplicará un filtro de desenfoque. Da clic en el Menú Filtro – Desenfocar y en las opciones
selecciona Desenfoque gaussiano. En el cuadro de diálogo del filtro cambia en la opción de Radio, el valor a 5 pixeles.
19. Luego para dar la inclinación de la sombra es necesario aplicar una transformación. Da clic en el menú Edición-Transformar
en la opción Perspectiva y con el mouse modifica la inclinación de la imagen hacia la derecha arrastrando el nodo de la
esquina superior derecha.
20. Ahora vas a trabajar en la capa de la copia de la botella. .Selecciona con la herramienta Varita mágica el área interna
de la botella y aplica a la selección un color vino con la herramienta de Bote de pintura. Solamente esta parte de la botella
tendrá color.
21. Ahora abre el archivo de etiqueta en Photoshop. Otra vez ya tienes dos documentos abiertos en Photoshop. Da clic en la
pestaña del documento de la etiqueta y arrastra hacia el centro del área de trabajo para tenerlo en una ventana flotante,
reduce el tamaño de la ventana para poder ver el área de trabajo de tu botella.
22. Da clic con el botón izquierdo del mouse en el área de la etiqueta y arrastra la imagen y suéltala en el área de trabajo del
documento de la botella.
23. Da clic en la capa que se agregó de la etiqueta y cambia el nombre al de: etiqueta
24. Vamos a cambiar el tamaño de la imagen de la etiqueta. Primero Da clic en el menú Edición y selecciona Transformar en la
opción Escala. Empieza a reducir el tamaño de la etiqueta acortando su tamaño por medio de los nodos del contorno. Da
clic en la esquina y arrastra hacia adentro de la imagen para hacerla más pequeña de manera proporcional.
25. Para aplicar la trasformación da clic en el icono de la herramienta Mover y en el cuadro que aparece preguntando si
deseas aplicar la transformación da clic en Aceptar. Coloca la etiqueta encima de la imagen de la botella y acomódala de tal
manera que se vea como una etiqueta a la mitad. Extiéndela hasta los bordes del contorno de la botella.
36
26. Ahora vamos a darle una sensación de curva a la etiqueta en el borde superior y en el borde inferior (ve la imagen). Da clic
nuevamente en el menú Edición –Transformar- Deformar. Y con el botón izquierdo del mouse, selecciona los dos
marcadores centrales del borde superior y del inferior muévelos ligeramente hacia abajo para que la línea recta se muestre
cono una curva. Para aplicar la trasformación da clic en el icono de la herramienta
27. Mover y en el cuadro que aparece preguntando si deseas aplicar la transformación da clic en aceptar. La imagen
debe verse como la siguiente:
28. Finalmente vas a trabajar en la primera capa de la botella. La que está intacta que no ha sufrido cambios. Da clic con el
botón derecho sobre el nombre de la capa y selecciona opciones de fusión. En la ventana que aparece de estilos de capa da
clic para activar las siguientes opciones de Fusión; sombra paralela, sombra interior y bisel y relieve. Para dar un efecto al
fondo cuadrado de la imagen de la botella. Tu imagen debe quedar similar a la siguiente:
37
Para que la imagen se vea así, el orden de las capas debe ser el siguiente de arriba hacia abajo:
1. Etiqueta
2. Botella_copia
3. Sombra
4. Botella
5. Fondo color
Al terminar, guarda el documento:
Para esto seleccionas Menú Archivo - Guardar como
Primero, lo guardas en la opción de Photoshop (*PSD; *PDD) utilizando el formato para el nombre
S2A6_imagen_botella__apellido paterno + inicial del apellido materno + nombre completo del alumno, por ejemplo:
S2A5_imagen_botella_lopezc_eduardo
Segundo, lo guardas como imagen como tipo Gif, con el mismo nombre del proyecto: S2A6_imagen-botella_lopezc_eduardo.
Esta actividad tiene vigencia de entrega durante la segunda semana. Podrás enviarlo al “Buzón de tareas”.
38
Ejercicio 7. Transformación de imágenes a partir de capas y máscaras
Cuando se toman fotografías, a veces la foto no muestra los resultados que se desean. Photoshop es una herramienta muy
poderosa para cuando se quiere editar o corregir imágenes o fotografías. Una de las opciones con las que se cuenta es la
utilización de capas. Una capa es parecida a un acetato en el cual se colocan cada uno de los elementos que integraran la
imagen, y a los cuales se les puede dar un tratamiento individual. Por norma general los documentos formados por capas
siempre cuentan con una capa de fondo que podrá ser creada por el usuario o por Photoshop. Se pueden apilar tantas capas
como sea necesario, y pueden ser controladas y organizadas a través del panel de Capas.
Este ejercicio tiene como propósito aprender a utilizar las capas para trabajar en la edición de imágenes o fotografías a través
del uso de las funciones que Photoshop tiene para la edición de imágenes.
Para la realización de este ejercicio se te pide revisar los temas de Pincel correcto, tampón de clonar, corrector de ojos rojos,
máscara de capa, en la unidad 10 del curso de Photoshop y en manual de “Photoshop” el tema Retoque y reparación en
el capítulo 6.
Instrucciones:
1. Abre el archivo señora.jpeg con Photoshop, esta imagen se encuentra dentro de la carpeta de “Recursos”. Observarás
que es una fotografía de una señora que muestra poca calidad al momento que fue tomada. Se desea realizar correcciones a
esta foto por lo cual vamos a empezar a editarla.
2. Da doble clic sobre el icono del candado que aparece en al final de la capa, en el panel Capas. Con esto se liberará la
imagen original y se trabajará con una copia del archivo señora, escribe el nombre de señora para la capa. Vamos a corregir
el color rojo de los ojos.
3. Amplia la zona de los ojos para trabajar con mayor comodidad, usa la herramienta de Lupa, para trazar un rectángulo en el
área de los ojos y aplicar un zoom a esta zona.
39
4. Para quitar los ojos rojos se utilizara la herramienta de Pincel de ojos rojos, localizada en el panel de Herramientas. Da clic en
la séptima herramienta, de la Barra de herramientas, y selecciona de la lista la opción Pincel de ojos rojos.
Esta herramienta muestra en la barra de aplicaciones solamente dos opciones: Tamaño de pupila y cantidad de
oscurecimiento, ambas con un 50% como valor de aplicación.
5. Para corregir el efecto de rojo en los ojos da clic en la zona roja de la pupila. De inmediato el área de pondrá de color oscuro
de acuerdo a la intensidad establecida en el porcentaje de cantidad de oscurecimiento. Si se desea que se muestre más
negro, se puede subir el porcentaje en el valor de la Cantidad de oscurecimiento. Ahora se va a cambiar el color de los ojos,
para lo cual vamos a seguir el siguiente procedimiento.
6. Usa la herramienta de zoom para acercar el área de los ojos.
7. Crea una nueva capa y ponerle el nombre de Color de ojos.
8. En el selector de color cambiar el color, seleccionar un color en tono azul claro tendiendo a gris, no se puede seleccionar
blanco o negro.
9. En la capa Color de ojos, vamos a pintar con el pincel toda el área de la pupila. No hay problema si se sale del área después
se puede borrar. Quedan así en la capa de color de ojos, los dos círculos coloreados con el color seleccionado.
10. Ahora en el panel de capas da clic en el cuadro donde dice Normal, selecciona la opción Superponer y la imagen
aparecerá con el color de ojos aplicado, en este caso azul claro.
40
11. Ahora vamos a corregir la piel del rostro, para esto vas a trabajar en la capa señora. Para esto vamos a usar la herramienta
Pincel corrector, la cual se utiliza para corregir imperfecciones de una imagen, ya que permite copiar partes de una imagen y
añadirlas uniformemente haciendo coincidir la textura, la iluminación y el sombreado de los pixeles.
12. Usa la herramienta de zoom para acercar el área del rostro en donde se localizan arrugas o imperfecciones a corregir.
13. Da clic en el séptimo icono de la barra de herramienta y selecciona Pincel corrector.
14. En las opciones de la barra de Aplicaciones para esta herramienta selecciona una punta de pincel de tamaño pequeño y
después selecciona un área de la piel con el tono y la apariencia adecuada para copiarla.
15. Para copiar el color ubica el puntero del cursor sobre el tono a copiar, después mantén presionada la tecla Alt a la vez que
das clic con el mouse para tener el color.
16. Después para ir sustituyendo poco a poco en la cara las líneas de expresión que se desea borrar, ve dando clic con el
mouse en la zona del rostro a modificar.
17. Para corregir de manera uniforme ve cambiando el color en el pincel el tono del color que se debe aplicar según la zona que
se va a corregir. Con el Pincel corrector también elimina la porción de pelo localizada en el cuello, debe observarse solo la
piel del cuello. Ahora vamos a cambiar el color de pelo a un color caoba.
18. Primero crea una capa nueva y asígnale el nombre de pelo
41
19. Cambia el color frontal del panel de color a un color café caoba, similar al de la imagen.
20. Vas a pintar sobre la capa pelo, aplica el color a toda la cabellera de la señora con cuidado, cambia el tamaño de la punta de
pincel, por ejemplo a 13 pixeles, para poder colorear con detalle el contorno del pelo.
21. Al terminar de colorear, da clic en el panel de capas en el icono para crear una máscara de esta capa. En esta
máscara de capa se va a terminar de retocar el color de pelo.
22. Primero selecciona la herramienta borrador y elimina en el contorno del pelo los excedentes de color. Después
selecciona la herramienta Desenfocar y con el tamaño de punta de pincel en 19 y pásalo seleccionando el área
del nacimiento del pelo en la frente para que se vea más natural el color del pelo. Y en el contorno de toda la cabellera, para
suavizar los bordes del color aplicado.
23. A continuación da clic en el cuadro modo de Fusión, donde dice Normal, del panel de capas, y selecciona la opción
Superponer y la imagen aparecerá con el color de pelo que aplicaste.
24. Finalmente en la barra de menú selecciona Filtro- Desenfocar y de las opciones da clic en Desenfoque gaussiano, cambia el
valor de Radio a 6 %, para dar un tono más natural a la cabellera.
25. Como parte final del ejercicio, elimina del fondo de la imagen, los elementos externos que la rodean a la señora, el fondo
debe quedar como lo muestra la imagen ya editada. La cual se muestra al final de este texto.
Antes. Imagen sin editar. Después. Imagen editada.
42
Primero, lo guardas en la opción de Photoshop (*PSD; *PDD) utilizando el formato para el nombre
S2A5_señora_editada__apellido paterno + inicial del apellido materno + nombre completo del alumno, por ejemplo:
S2A5_señora_editada_lopezc_eduardo
Segundo, lo guardas como imagen como tipo jpeg, con el mismo nombre del proyecto
Ejercicio 8. Organización de las capas y trabajo con capas
Una imagen puede estar compuesta por muchas otras imágenes y otros elementos. Para trabajar de manera organizada es
muy importante ir trabajando los elementos dentro de las capas, y las capas organizarlas dentro de una carpeta de grupo de
capas. Para poder manipularlas de manera integral.
Es este ejercicio se tiene como propósito aprender a trabajar con la organización de las capas. Por lo que se te pide revises el
tema de capas en la unidad 6 del curso de Photoshop en Aula Clic y en el capítulo 8 del manual de Photoshop.
Los temas a revisar son: mover capas, alinear capas (vertical y horizontal), selección múltiple de capas, crear grupos de capas,
combinar capas, enlazar capas.
Para realizar el ejercicio se requiere el archivo organizacion_capas_ejercicio.psd que se encuentra dentro de la carpeta de
“Recursos”.
Instrucciones:
43
1. Abre el archivo organizacion_capas_ejercicio.psd que se encuentra dentro de la carpeta de Recursos.
2. Observa las 15 capas, hay 6 marco numerados y 6 fotos también numeradas, dos textos y un fondo
3. Deberás ordenarlas y colocarlas de tal manera que la foto 1 se encuentre encima del marco 1, la foto 2 encima del marco
2, etc.
4. Además deberás centrar la foto dentro de su marco correspondiente para se vea el borde café del marco.
5. Luego tendrás que acomodarlas las fotos con su marco y los textos por el lienzo de forma para que tengan la siguiente
distribución:
44
6. Agregar en la capa Fondo tu nombre con el Pincel que creaste en los primeros ejercicios, en la parte central inferior.
Después del texto Favoritas.
Procedimiento:
 Seleccionar la herramienta Mover. Marcar la opción Mostrar controles Trasf., localizado en la barra de Aplicaciones, para
que se vea el elemento seleccionado en panel capas.

 Organizar las fotos con su marco, poniendo juntas las capas pero dejando el marco en la parte de abajo.
 Seleccionar las dos capas, de la foto y del marco. Da clic en la foto mientras se presiona la tecla Ctrol. Y después da
clic en la capa del marco.
 Ahora coloca la foto exactamente en el centro del marco, utiliza los comandos de alineación centrar vertical
y la horizontal. . Las capas de Marco y foto quedan asá alineadas.

 Agrupar las capas de cada fotografía (el marco y la foto) arrastrando las dos capas hacia el icono de crear grupo
localizado en la parte inferior del panel Capas, así ya quedan integradas las dos capas en una carpeta llamada Grupo 1.
Trabajar los elementos de cada fotografía de la misma manera.
45
 Seleccionar también los dos textos y arrastrar las dos capas hacia el icono Nuevo grupo de capas, Asignar el nombre de
Grupo Texto. Para observar los elementos que integran la carpeta de cada grupo de capas da clic en la flecha localizada
a la derecha del icono de la carpeta para abrirla y que muestre su contenido. Ahora el panel debe de mostrarse como el
siguiente:
 Ahora es necesario colocar las fotografías en su posición final en columnas. En una columna la foto 1, la foto2 y la foto 3,
en la segunda columna las fotos 4, 5 y 6. Para ello arrastra cada una de las fotografías y colócalas en el lienzo de acuerdo
a la posición indicada. Con el comando mover puedes colocar las fotos aproximadamente en su posición final.
 Ahora es necesario alinear las fotografías en la columna. Para esto selecciona de manera múltiple (Usa la tecla Control
para ir seleccionando) las capas de fotos de la primera columna, es decir Grupo 1, Grupo 2, Grupo 3.
 Y da clic en Centrar los elementos de la columna, segunda opción del siguiente botón y también da clic en
Igualar los espacios, segunda opción del siguiente botón
46
 Alinea los elementos de la segunda columna, alinea primero de manera horizontal la capa de la fotografía 4 con de la
fotografía 1. Después selecciona otra vez de manera múltiple las fotografías 4, 5 y 6 y alinéalas verticalmente.
 Acomoda las columnas sobre las líneas guías ya establecidas.
 Para mover toda una columna se pueden enlazar las capas de los elementos seleccionadas, dando clic en el icono de la
cadena. localizado también en la parte inferior del panel de capas.
 Al terminar, guarda el documento:
Lo guardas en la opción de Photoshop (*PSD; *PDD) utilizando el formato para el nombre S2A5-
8_organización_capas__apellido paterno + inicial del apellido materno + nombre completo del alumno, por ejemplo: S2A5-
8_organizacion_capas_lopezc_eduardo
Ejercicio 9. Creación y animación de textos
El Texto es un elemento importante en cualquier diseño de publicidad. Photoshop contiene herramientas que permiten crear y
editar textos vistosos y novedosos.
Para la realización de este ejercicio se te pide revises los temas de Introducción de texto, tipos de textos, propiedades del texto, en
el sitio de Aula clic en la unidad 8 y cap. 12. Textos del manual de Photoshop.
Necesitarás para trabajar la imagen girasoles.jpeg que se encuentra dentro de la carpeta de “Recursos”.
Parte A. Textos animados
1. Inicia Photoshop y crea un proyecto nuevo, recuerda da clic en menú Archivo selecciona Nuevo.
47
2. Establece las medidas de 800 px de ancho por 600 px de alto. Los demás parámetros quedan como están.
3. Establece el color frontal en color azul claro, y aplica al lienzo con el bote de pintura.
4. Vamos a dibujar una forma personalizada, da clic en la forma rectángulo y selecciona la forma Personalizada
5. En la barra de aplicaciones abre el menú de Formas en el icono de la flecha y selecciona la categoría Web.
Acepta el cambio de formas.
6. Selecciona la opción Volumen
7. Ahora crea una capa en el panel de capas.
8. En esa nueva capa dibuja la forma de la bocina de volumen, antes de iniciar el dibujo da clic en el botón rellenar pixeles
, localizado al principio de la barra de Aplicaciones.
9. Al dibujar mantén presionado el botón de Shift para hacer un dibujo de una bocina proporcionada en ancho y largo.
10. Rota el dibujo 180 grados, dando clic en el Menú edición – opción transformar- Rotar 180 grados o voltear horizontal.
11. Cambia de forma, ahora en el menú desplegable selecciona la categoría Música, acepta la sustitución de formas.
12. En las opciones de Música se encuentran diferentes estilos de notas. Ahora se trata de dibujar notas musicales, trata de dibujar
una nota por capa, para poder modificarlas de manera individual.
48
13. Crea nuevas capas para dibujar las notas de música. Una vez dibujadas aplícales Transformación para cambiar su tamaño y
rotarlas. Aplica un color diferente a cada nota, utilizando el bote de Pintura y el panel de color Fontal. Con la herramienta de
mover colocas las notas dispersas por el lienzo. Una vez tengamos todas las formas añadiremos el texto. Selecciona la
herramienta Texto . horizontal. Escoge una fuente que te guste y aumenta su tamaño sobre los 70 puntos.
14. Haz clic sobre el lienzo y escribe la frase Mi canción, entre las notas y a la altura de la bocina.
15. Pulsa el botón para aceptar los cambios.
16. Ahora se aplicará una deformación el texto. Da clic en el botón .
17. Elige el estilo Elevar y modifica su curva al +80 y la distorsión horizontal a +36 Distorsión vertical + 9
18. Ahora selecciona nuevamente la herramienta de texto ahora en formato vertical y escribe el texto Sonido detrás de la
bocina, establece el tamaño de letra y fuente que consideres adecuado, aplica una deformación de Texto Inflar modifica la
propiedad de curva a +50 lo demás lo dejas en 0. Para finalizar y firmar tu actividad.
19. En la capa de la bocina aplica como marco o contorno en el lienzo el motivo que creaste en la primera semana y en la
esquina inferior derecha aplica el pincel con tu nombre. Tu actividad debe de quedar semejante a la muestra de ejemplo
localizada al final de este ejercicio.
20. Pulsa OK para aceptar los cambios.
21. Con la ayuda de la herramienta Mover coloca todas las capas de la forma que creas conveniente.
22. Guarda tu actividad como documento PSD y como imagen JPEG de acuerdo al formato.
Primero, lo guardas en la opción de Photoshop (*PSD; *PDD) utilizando el formato para el nombre S2A5-9A_texto__apellido
paterno + inicial del apellido materno + nombre completo del alumno, por ejemplo: S2A5-9A_texto_lopezc_eduardo
49
Parte B. Formas, textos y recorte
1. Abre con Photoshop la imagen girasoles.jpg de la carpeta de “Recursos”.
2. Utilizando recortes de capas deberás crear un nuevo documento con formas y texto donde utilizarás como fondo la
imagen de girasoles.jpeg (localizada en la carpeta de recursos) para el recorte zonas de esta imagen hasta conseguir
la composición que se muestra al final.
3. Ahora crea un documento en blanco, de 800 por 600 pixeles. Aparece el lienzo en Blanco.
4. Selecciona la herramienta forma personalizada, selecciona la forma marco 7, selecciona la opción rellenar pixeles.
5. Crea una nueva capa, y en ella dibuja la forma en el contorno del lienzo.
50
6. Ahora agrega el texto, selecciona la herramienta de texto y configura para un estilo de letra de Gill Sans Ultra Bold de
72 puntos, se agrega en otra capa. Escribir en el centro el texto “LOS GIRASOLES DE…
7. Combinar las dos capas forma y texto, seleccionar las dos capas con Shift y clic del mouse. Da clic en botón derecho al
final de la barra del panel de capas y secciona la opción Combinar capas.
8. Da clic en la pestaña del archivo de la imagen de girasoles para el recorte.
9. Selecciona con la herramienta de marco rectangular un área de la imagen que se quiere incluir.
10. Copia la selección y pegarla en el otro archivo. Se agrega pegándose en otra capa.
11. Usa la herramienta Transformar para modificar la escala al tamaño del lienzo.
12. Ahora con las dos capas en posición, realiza el recorte dando clic en medio de las dos capas.
13. Presiona la tecla Alt, y coloca el puntero entre las dos capas, cuando cambia de forma da clic. Con esto se aplica el
recorte.
14. Para finalizar firmar tu imagen, aplica el pincel que creaste con tu nombre. Da clic varias veces para que se visualice
mejor tu nombre.
La imagen debe quedar similar a la siguiente:
51
Guarda tu actividad como documento PSD y como imagen JPEG de acuerdo al formato
Primero, lo guardas en la opción de Photoshop (*PSD; *PDD) utilizando el formato para el nombre S2A59B_texto__apellido
paterno + inicial del apellido materno + nombre completo del alumno, por ejemplo: S2A59B_texto_lopezc_eduardo
Para realizar este ejercicio será necesario que revises en los manuales los temas de: Guardado y exportación de imágenes
(Cap. 13 del manual de Photoshop), Impresión de imágenes (Unidad 11 en Curso Photoshop de Aula Clic y cap 14 del
“Manual de Photoshop”).
Ejercicio 10. Formato de un archivo para página web e impresión
Cuando un proyecto se ha terminado, es importante identificar cual va a ser el medio de difusión de nuestras imágenes. Si se
van a publicar como páginas web en Internet o se van a imprimir.
Con la realización del siguiente ejercicio se tiene el propósito de que aprendes a guardar un archivo para su utilización ya sea
en una página Web o para su impresión.
Como evidencia de esta actividad se te pide que vayas imprimiendo las ventanas de los pasos que realizas durante la actividad
y que pegues las imágenes en un documento de Word que guardaras con el nombre del ejercicio.
Parte A. Archivo con formato de salida para Web o multimedia
Uno de los formatos más utilizados para mostrar imágenes en páginas web o soportes multimedia es el formato JPEG.
Photoshop permite optimizar imágenes de diversos formatos y convertirlas a un formato JPEG. También permite establecer
una calidad para los archivos generados de forma que se puede obtener hasta tres archivos con formato JPEG de distinta
calidad.
52
Otro formato también utilizado para imágenes es el de GIF, el cual es un formato de intercambio de gráficos que suele
emplearse para imágenes de color indexado en documentos HTML y preserva la transparencia de imágenes.
El objetivo de este ejercicio es aprender a optimizar las imágenes GIF convirtiéndolas en un archivo con formato JPEG.
1. Abre con Photoshop el archivo de la imagen de la botella.gif que trabajaste en el ejercicio 4.6,
2. Ya que está abierta como un documento de Photoshop. Da clic en el menú Archivo. Después selecciona la opción
Guardar para Web y dispositivos.
3. Aparece el cuadro de diálogo Guardar para Web y dispositivos, en el cual es posible visualizar imágenes optimizadas en
diferentes formatos y con diferentes atributos.
4. Desde este cuadro se pueden modificar los parámetros de optimización, mientras se visualiza la imagen para aplicar así
los ajustes que más se adecuen a nuestras necesidades.
5. En esta ocasión, se optimizará la imagen gif a una imagen con formato JPEG de alta resolución.
6. Da clic en el en botón de punta de flecha del campo formato de archivo optimizado, del apartado Ajuste preestablecido y
selecciona el formato JPEG.
7. Ahora da clic en el botón de punta de flecha del campo Calidad de compresión y selecciona la calidad máxima.
8. Aparece el campo Calidad que muestra el valor 100. Se puede disminuir manualmente este valor para mejorar la
compresión. Mientras mayor sea la calidad, más detalle conservará la compresión. No obstante una calidad alta
genera un archivo de mayor tamaño, por lo que debe encontrarse el equilibrio adecuado entre la calidad y el tamaño del
archivo. Para ver la imagen original y la optimizada en la misma ventana, da clic en la pestaña 2 copias.
9. En la parte inferior de cada imagen aparecen sus datos básicos. Puesto que la optimización de imágenes se suele llevar a
cabo con el fin de publicarlas como páginas web o en soportes multimedios, un dato importante es el tiempo de
descarga aproximado. Si lo deseamos, de forma automática Photoshop puede crear hasta tres archivos con formato
JPEG de calidades distintas. Para realizar esto, da clic en la pestaña 4 copias. Ahora Imprime está pantalla (recuerda
53
que se imprime con la combinación de botones Ctrl+ ImprPant) y pégala en un documento de Word como Evidencia de
la realización de la actividad.
10. En la ventana se tienen cuatro archivos empezando por el Original y terminando con el de calidad más baja. Vamos a
observar las características de cada archivo. Observa que existen diferencias en cuanto a velocidad de descarga y la
calidad existente entre ellas. Vuelve a mostrar únicamente la imagen optimizada dando clic en la pestaña Optimizado.
54
11. Da clic en el botón situado a la derecha de la velocidad de descarga y elije la opción Tamaño/Tiempo de descarga
(2MBps).
55
12. La velocidad de descarga disminuye notablemente por último se guardara la imagen optimizada. Da clic en el Botón
guardar y aparece un cuadro.
13. En el cuadro Guardar optimizada como aparece seleccionado el formato elegido para la optimización.
14. Da clic en guardar y da el nombre de botella_optimizada_más las iniciales de tu nombre.
15. utilizando el formato para el nombre S2A5_mueñaca_color__apellido paterno + inicial del apellido materno + nombre
completo del alumno, por ejemplo: S2A5_muñeca_colocr_lopezc_eduardo
16. Deja el archivo abierto para la realización de la siguiente parte del ejercicio.
Parte B. Formato de archivo para Impresión
Tanto si imprime una imagen en una impresora de escritorio como si la envía a un servicio de preimpresión, es recomendable
conocer algunos puntos básicos sobre la impresión para que el trabajo se imprima sin problemas y la imagen final no presente
errores inesperados.
Así, antes de imprimir un documento desde Photoshop, es necesario configurar las opciones de la impresora y el tipo de papel.
Esta configuración se realiza desde el cuadro de dialogo Configurar, en el cual se puede especificar, el tamaño de papel, su
orientación y el origen.
El objetivo de este ejercicio es aplicar el proceso para realizar los ajustes necesarios de la impresión del documento de acuerdo al
tipo de papel y la impresora.
1. Con archivo de botella de botella que tienes abierto Photoshop.
2. Da clic el menú Archivo y selecciona la opción Ajustar página. (Debes tener una impresora instalada para poder realizar
esta acción)
56
Aparece el cuadro de diálogo Configurar página, el cual muestra las opciones necesarias para establecer el tamaño del papel, la
orientación y el origen de alimentación que la impresora utilizará para imprimir el archivo. De manera automática el tamaño de
papel establecido es el formato estándar A4 210 X 297 mm, aunque si se desea puede establecerse otra medida. Para esto da
clic en el botón de punta de flecha del campo Tamaño, y observa que son muchos los formatos disponibles. Oculta la lista
dando clic de nuevo en el botón de punta de flecha de ese campo.
57
 Las opciones de campo de Origen permiten establecer si la alimentación del papel será manual o automática. Ahora se
modificará la orientación del papel. Da clic en el botón de la opción Horizontal, en el apartado Orientación.
58
 En el apartado Márgenes se puede establecer un margen para todos los lados de la página del documento. Aumentar los
márgenes superior e inferior. Da clic en el campo superior y escribir el valor 1. Observa como el margen se aplica a la Pre
visualización. Ahora da clic en el campo Inferior y escriba también el valor 1.
 Se debe tener en cuenta que las opciones que se muestran en este cuadro dependen de la impresora, de los controladores
de y del sistema operativo con el que cuente la computadora.
 Antes de dar clic en aceptar. Imprima la pantalla con el cuadro de dialogo de la configuración y pegue esta imagen en el
documento de Word.
 De clic en Aceptar para aplicar la configuración establecida.
 Y ahora ya está lista para imprimir. Da clic en el Menú archivo selecciona la opción Imprimir y observa los parámetros de la
impresión.
 En la sección de Tamaño de impresión escalada selecciona la opción Cambiar escala para ajustar a medios, debe quedar
la casilla de verificación seleccionada con una palomita.
 Como evidencia Imprime esta pantalla y pega la imagen en tu documento de Word de la actividad.
 Cancela la impresión.
59
Al terminar, guarda el documento el documento de Word donde fuiste pegando las pantallas sobre las acciones realizadas y que es
la evidencia de la realización de la actividad.
Guarda el documento en la opción de Word 97-2003 utilizando el formato S2A5_apellido paterno + inicial del apellido materno +
nombre completo del alumno, por ejemplo: S2A5_lopezc_eduardo
Realización de la práctica N° 1: Proyecto: “Cartel publicitario”
Con la finalidad de elaborar un cartel con publicidad integrando todos los elementos del software editor.
Para la realización de esta actividad se requiere que integres las funciones de Photoshop que se han revisado con la finalidad de
crear un proyecto de Cartel publicitario para una Agencia de Viajes.
En la carpeta de “Recursos” se encuentran las imágenes necesarias para trabajar: carita3.jpeg, avion2.jpeg, lago.jpeg,
cactus.jpeg.
Instrucciones: Observa la imagen que se muestra enseguida. Utiliza las funciones de Photoshop y realiza las acciones necesarias
para obtener una imagen igual.
60
Abre Photoshop.
1. Cada elemento que se muestra en la imagen debe de ir en una capa.
2. Utiliza líneas guías para realizar el acomodo de los elementos en el lienzo.
3. La primera capa es la del fondo y debe de tener un color degradado en tono lila y blanco
4. Utiliza las imágenes de Lago y Cactus de la carpeta de archivos para integrar la imagen, cada una va en su capa, cambia su
tamaño de acuerdo a como se observa en la imagen.
5. El texto : Viajes Paraíso, va en la siguiente capa, y debe de tener las siguientes características de estilo:
a. Deformación estilo Pez
b. Sombra paralela
 Resplandor interior
 Bisel y relieve
 Opacidad 75 %
 Distancia 25%
 Tamaño 5%
6. El texto: Lo llevamos a lugares increíbles, va en la siguiente capa. Con las siguientes características: Fuente Lucyda
Caligraphy, itálica, tamaño 14.
7. El texto: Solo llame…Va en la siguiente capa. Con las siguientes características: Fuente Arial, Regular, tamaño 12.
8. Para La carita debe ajustarse su tamaño y colocar la imagen en la posición.
9. Guarda el archivo como Imagen JPEG con el nombre de Mi_imagen_Apellido, en la carpeta de evaluación con tu nombre.
61
Al terminar, guarda el documento: Menú Archivo - Guardar como
Primero, lo guardas en la opción de Photoshop (*PSD; *PDD) utilizando el formato para el nombre S2A6_cartel__apellido paterno
+ inicial del apellido materno + nombre completo del alumno, por ejemplo: S2A6_cartel_lopezc_eduardo
Segundo, lo guardas como imagen como tipo jpeg, con el mismo nombre del proyecto.
62
Unidad lI. Creación y
Edición de Videos
usando Premiere
63
Ejercicio No 1. Área de trabajo
1. Ver el video “Área de trabajo web”.
2. Como iniciar Premiere.
3. Botón de Inicio.
4. Vemos si en esta ventana esta premiere, desde aquí se puede ejecutar.
5. Si no aparece damos clic en Todos los programas.
6. En la ventana que nos muestra damos clic en Adobe Master Collection CS4.
7. En la siguiente ventana damos clic en Adobe Premiere Pro CS4
8. Finalmente visualizaremos la siguiente pantalla: es importante tener presente que las pantallas para acceder a la aplicación
son diferentes, esto depende de la versión de sistema operativo que se tenga en el equipo.
64
Para Windows Xp
65
Pantalla para Windows 7
clic
66
Las siguientes pantallas son las de Adobe Premiere CS4
Esta pantalla nos muestra la barra de menú y tres carpetas que corresponden a nuevo proyecto abrir proyectos y ayuda, la que se
usa mas es la de nuevo proyecto, en la de abrir proyectos nos muestra los proyectos viejos que hemos realizado antes, también
podemos observar en la parte de arriba los proyectos recientes en los que se ha trabajado.
67
Al darle clic en nuevo proyecto nos despliega la siguiente pantalla:
68
Si nuestro proyecto va a ser de 16 ó 35 mm, en fotogramas, usualmente lo dejamos en código de tiempo.
Otra opción que se puede modificar desde aquí es el audio, si lo queremos en milisegundos o muestras de audio que es la que está
por default.
69
La pantalla siguiente nos la presenta cuando salimos de las opciones anteriores y damos el nombre de nuestro proyecto y damos
enter.
70
Seleccionamos en ajustes preestablecidos la opción DV-NTSC, corresponde al formato de televisión en América.
Entrar a las pestañas de Generales y Pistas para observar las opciones que se presentan, no cambiaremos nada de estas opciones.
Finalmente llegamos a la pantalla de premiere, vamos a ver los paneles principales que la integran:
Los siguientes paneles corresponden al área de trabajo de edición, premiere nos presenta varias áreas de trabajo, que podemos
activar y usar de acuerdo a nuestras necesidades:
Este panel es de proyecto. En este panel vemos el nombre que le dimos a nuestro proyecto
71
Abajo de secuencia van a aparecer los elementos que vamos a usar para nuestro proyecto, como son videos, imágenes y sonido.
Panel para trabajar con los controles de efecto.
En este panel iremos probando como va quedando nuestro proyecto, ya

que aquí podemos ver todo lo que hemos aplicado a nuestros elementos
que conforman nuestro video.
72
En este panel podremos visualizar los medios que están conectados a nuestro equipo.
Los discos duros, memorias USB, discos duros externos etc.
Este panel corresponde a la línea de tiempo. Está integrado por tres canales de video y tres de audio, también en la parte inferior se
localiza el zoom de la línea de tiempo.
73
Este panel corresponde a los Este es el panel de
controles de audio, aquí se herramientas, es muy útil ya
manipulan los niveles de que en él se encuentran las
audio. herramientas de selección,
zoom.
Ya estamos listos para hacer nuestro primer proyecto.
Captura las pantallas de los pasos que seguiste e insértalas en un archivo. Al terminar, guarda el documento en la opción de Word
97-2003 utilizando el formato S3A4_apellido paterno + inicial del apellido materno + nombre completo del alumno, por ejemplo:
S3A4_lopezc_eduardo
Esta actividad tiene vigencia de entrega durante la tercera semana. Podrás enviarlo al “Buzón de tareas”.
Ejercicio No. 2 Creación del video “El Futbolista”, a partir de imágenes
Ver el video “Video Golf”.
Para realizar este ejercicio se nos va a proporcionar una serie de imágenes, que estarán en la carpeta el “Futbolista”.
Nota: Localiza todos tus recursos en la carpeta que se titula “Recursos” y selecciona la carpeta correspondiente al ejercicio.
 Importar imágenes de futbolista y realizar video.
74
 Para realizar este video es importante generar una carpeta en donde vamos a colocar las imágenes de un futbolista.
 Esta carpeta la podemos ubicar en el escritorio o en la carpeta de mis documentos, donde se nos facilite más localizarla.
Si la generamos en el escritorio, es conveniente moverla cundo terminemos nuestro proyecto, para que nuestro equipo no se vaya
haciendo lento, la única finalidad de ubicarla en el escritorio es para localizarla rápidamente si es que vamos a movernos a otros
equipos para realizar nuestro proyecto.
Tiene que importar:
 Primero al panel de proyecto.

 Reducir tiempos desde el panel secuencia o del otro.
 Pasos.
 Generar nuestra carpeta Futbolista.
 Colocar las imágenes del futbolista en la carpeta generada.
 Abrir nuestra aplicación de premiere.
 En ubicación dar clic donde se encuentra la carpeta que generamos.
 Darle el nombre al proyecto “Futbolista”.
 Dejamos las otras opciones como están.
 En la siguiente pantalla seleccionamos el formato de salida DV-NTSC y el parámetro para la salida de audio que sea de
48khz o Standard o Widescreen.
 En secuencia poner el nombre Imágenes Futbolista o la podemos dejar con el nombre que nos presenta y luego se lo
cambiamos.
 En la siguiente pantalla nos aseguramos de estar en el Espacio de trabajo de Edición
 Nos colocamos en la cinta de opciones y seleccionamos la pestaña de archivo
 Y seleccionamos la opción de importar (Para irnos de manera rápida a esta opción lo hacemos con Ctrl+I)
 En la ventana de dialogo localizamos la dirección de ubicación de las imágenes.
 Seleccionamos nuestra imágenes para este proyecto serán todas, pero también podemos importar de una en una, lo que
nos facilite mas tener control sobre lo que estamos haciendo.
75
 Damos clic en la pestaña abrir, y esperamos a que nos importe las imágenes al panel de proyecto.
 Observemos que ya están numeradas, menos las dos últimas, lo siguiente es visualizarlas en el panel de origen y ponerlas
en nuestra línea de tiempo en el orden que creamos que corresponda a la secuencia del video.
 En este panel damos clic derecho y clic en la pestaña Velocidad/duración, para cambiar la velocidad de nuestras
imágenes en la proyección del video.
 Cambiamos la velocidad de duración de cada imagen, lo podemos hacer en el panel de origen.
 Damos doble clic sobre la imagen para que la pase al panel de origen, nos posicionamos sobre la imagen y damos Clic-
derecho y seleccionamos Velocidad/duración, y en duración cambiamos la velocidad (00:00:00:00), el sistema siempre les
va asignar la siguiente velocidad 00:00:05:00, tenemos que poner una velocidad menor por ejemplo, 00:00:00:01, esta es
una velocidad muy baja es solo un ejemplo, nosotros debemos identificar qué valor ponemos para que nuestro video se vea
lo más real posible.
 Para visualizar cualquier panel en toda la pantalla presionamos la tecla donde está el acento y el panel se va a cambiar su
tamaño además se va a desplegar en toda la pantalla.
 Nos colocamos en el panel proyecto y presionamos la tecla del acento, para que nos presente el panel con todos sus
elementos en la pantalla completa.
 Para saber que tenemos seleccionado el panel, debemos observar un marco naranja en el panel seleccionado.
 Para poder realizar lo anterior es necesario ver el video de con el nombre Video Golf.
 En este video vamos a aprender a importar nuestras imágenes primeramente al panel de proyecto, y después insertarlas en
la línea de tiempo, también vamos a ver donde podemos cambiar la velocidad de duración de cada imagen.
 Finalmente vamos a exportar nuestro proyecto a diferentes formatos de salida, para poder ver la película que generamos en
diferentes programas de video.
 Todas las indicaciones son las mismas para el ejercicio No. 3, creación del video “El juego la escalera”, a partir de
imágenes.
 Debemos generar las carpetas necesarias para desarrollar este trabajo.
76
Para este ejercicio se proporciona la carpeta “Futbolista” con imágenes de diferentes tomas a una misma persona,
relacionadas a jugadas de futbol.
Generar una carpeta con el nombre Proyectos Premiere, dentro de esta carpeta generar las carpetas correspondientes a cada
ejercicio:
El procedimiento es el siguiente:
1. Abrir la aplicación.
2. Respetamos todos los parámetros, solo cambiamos la ubicación para guardar los archivos resultantes de este proyecto.
3. Nombre ImagenesFutbol, o un nombre que se relacione con el proyecto, el que guste pero que tenga relación con las
imágenes.
4. En la siguiente pantalla damos aceptar, la secuencia la cambiamos cundo entremos a la pantalla de panales.
5. Importamos nuestras imágenes de la carpeta “Futbolista”. para este proyecto seleccionaremos todas las imágenes que
se encuentran en nuestra carpeta.
6. Bajamos las imágenes a la línea de tiempo. Se pueden bajar todas o de una en una, también antes de bajarlas se puede
cambiar la velocidad/duración.
7. Cambiamos la velocidad/duración (cada alumno tiene que ver qué velocidad es la más conveniente para que dé el efecto de
que es una película)
8. Vemos que las imágenes estén en secuencia lógica para que se vea el avance de las tomas.
77
9. Ver video “Fucho”, en el video damos brevemente el procedimiento, con diferentes opciones para bajar sus imágenes y
cambiar la velocidad de duración.
10. Al final generamos nuestro video en diferentes formatos de salida. El nombre de salida para este proyecto será
ImagenesFutbolista.
Ejercicio No. 3 Creación del video “El juego la escalera”, a partir de imágenes
Para este ejercicio se proporciona la carpeta el “Niño Escalera” con imágenes de diferente toma o secuencia.
Anteriormente para realizar una escena de una caricatura, se hacían dibujos para dar movimiento a la imagen, por medio de la
sobreposición en secuencia los dibujos.
Tenemos que saber:

 Qué es importar, y en qué panel aparecen los elementos que estoy importando.
 Qué elementos son los que puedo importar.
Con las imágenes de la carpeta el “Niño Escalera” deberá crear un video en el cual se importan las imágenes al panel del
proyecto, puede cambiarles la velocidad/duración antes de pasarlas a la línea de tiempo, o las puede bajar a la línea de tiempo y
después cambiar la velocidad, también tiene que ver en qué orden van las imágenes para mostrar secuencia entre ellas. El video
deberá mostrar la animación de un niño subiendo y bajando en una resbaladilla. Este ejemplo es una caricatura.
El procedimiento es el siguiente:
78
1. Abrir la aplicación
2. Respetamos todos los parámetros, solo cambiamos la ubicación para guardar los archivos resultantes de este proyecto.
3. Nombre El juego la escalera.
4. En la siguiente pantalla damos aceptar, la secuencia la cambiamos cuando entremos a la pantalla de panales.
5. Importamos nuestras imágenes de la carpeta “Niño Escalera” que se encuentra dentro de la carpeta de
“Recursos”.
6. El proceso para importar imágenes es:
Menú>Archivo>importar>Seleccionar la ruta donde se encuentran los elementos a importar.
7. Seleccionar los elementos a importar, se pude importar uno a uno los elementos o parte de ellos o todos juntos, para esto
tenemos que saber cómo funciona las combinaciones de teclas.
Shift+Clic o Ctrl+Clic (Clic normalmente es presionar el botón izquierdo del mouse).
8. Bajamos las imágenes a la línea de tiempo.
9. Cambiamos la velocidad/duración (cada alumno tiene que ver qué velocidad es la más conveniente para que dé el efecto de
que es una película).
10. Vemos que las imágenes estén en secuencia lógica para que se vea el avance de las tomas.
11. Ver video “Escalera”, en el video damos brevemente el procedimiento para bajar sus imágenes y cambiar la velocidad
de duración.
79
12. Al final generamos nuestro video en diferentes formatos. Y lo guardamos en la ruta
TrabajosPremiere>EjerciciosPremiere>EjercicioNo3>Eljuegolaescalera
No trabajar los accesos a archivos o rutas directamente en la memoria, ya que si nos movemos de equipo se pierde el enlace con
los archivos, debido a que cada equipo al reconocer el dispositivo le asigna diferente dirección al dispositivo.
Lo ideal es bajar al disco duro de mi equipo o generar en el, las carpetas que se requieran para cada proyecto.
Ejercicio No. 4 Creación del video “Mi álbum de fotos con efectos”
1. Generar un video con imágenes nuestras o una secuencia de imágenes que seleccionemos para este ejercicio.
2. El objetivo de este ejercicio es manejar varios efectos al presentarse cada una de las imágenes.
3. Tendremos que colocar varias imágenes en nuestra pantalla principal, haciendo su aparición cada imagen, y después de
aparecer, colocarse en un lugar de mi pantalla sin que desaparezca.
4. Para realizar este ejercicio tendremos que importar nuestras imágenes. Pasar cada imagen al panel origen y darle la
velocidad de duración.
5. Pasar la imagen a la línea de tiempo y aplicar los efectos.
6. En el panel de origen seleccionar el panel controles de efecto para modificar o activar las acciones necesarias.
80
7. Para realizar este trabajo veamos los siguientes videos: “Efecto”, “Efecto A” y “Efecto B“.
8. Ver el capítulo 11 del “Manual de Premiere” página 280.
9. Después de ver los videos Efecto, Efecto A y Efecto B vamos a realizar nuestro proyecto que le vamos a llamar Mi
Album
10. Requiere tener en una carpeta alojada en la carpeta Ejercicio No.4 con varias imágenes.
11. La carpeta de imágenes generarla con el siguiente nombre FotosEjer4
12. Las imágenes deben tener las mismas medidas (800x600, 650x400 pixeles).
13. Estar en el mismo formato.
14. Importar las imágenes a la línea de tiempo.
15. Para el procedimiento, en cada canal de video se puede poner una imagen, o todas en un mismo canal de video,
dependiendo el efecto que queramos aplicarle a las imágenes.
16. Activar el panel de efectos.
17. Seleccionar efectos de video.
18. Dentro de la gama de opciones seleccionar el efecto que mejor nos guste y aplicarlo a mis imágenes.
19. El efecto se puede aplicar a cada imagen o a todas.
81
20. Finalmente salvar nuestro proyecto.
21. Renderizar para generar nuestro video Mi Album.
Ejercicio No.5 Creación del video “Mi línea de la vida, en transición”
1. Generar un video con imágenes nuestras o que muestren diferentes etapas de nuestra vida, desde bebés hasta la
actualidad.
2. El objetivo de este ejercicio es manejar varios efectos al presentarse cada una de las imágenes.
3. En un mismo canal de video colocar las imágenes de manera secuencial, para generar un video que represente las
diferentes etapas de nuestra vida.
4. Para realizar este ejercicio tendremos que importar nuestras imágenes. Pasar cada imagen al panel origen y darle la
velocidad de duración.
5. Pasar la imagen a la línea de tiempo y aplicar los efectos.
6. En el panel de origen seleccionar el panel controles de efecto para modificar o activar las acciones necesarias.
7. Para realizar este trabajo veamos el siguiente video “Mi vida en imágenes”.
8. Requiere tener en una carpeta alojada en la carpeta Ejercicio No.5 varias imágenes, desde nuestro nacimiento hasta la
época actual.
82
9. La carpeta de imágenes generarla con el siguiente nombre ImagenesEjer5
10. Las imágenes deben tener las mismas medidas (800x600, 650x400 pixceles).
11. Estar en el mismo formato.
12. Importar las imágenes a la línea de tiempo.

13. Procedimiento se puede usar un solo canal de video, o más dependiendo de los efectos que queramos aplicarle a las
imágenes.
14. Activar el panel de efectos. Debemos activar este panel para poder darle efectos a nuestros elementos que
previamente hemos colocado en nuestro panel de la línea de tiempo.
15. Se selecciona efecto de video, y cuando nos abre esta opción, nos muestra varias carpetas las cuales contienen
diferentes efectos.
16. Dentro de la gama de opciones seleccionar el efecto que mejor nos guste y aplicarlo a mis imágenes.
17. El efecto se puede aplicar a cada imagen o a todas.
Guarda tu video con los efectos indicados con el nombre: ejercicioNo5
83
Ejercicio No.6 Editando sonido para mis videos
En este ejercicio vamos a aprender a insertar sonido a nuestros videos, se puede tomar los archivos de los ejercicios anteriores y
solo insertar el sonido.
Debemos tener en las carpeta del ejercicio correspondiente los archivos de sonido que se van a trabajar.
Al igual que las imágenes, los sonidos o pistas de audio se deben importar al Panel de proyecto.
Los sonidos se bajan directamente a las pistas de audio.
Par bajarlos se pueden seleccionar y arrastrar directamente a la línea de tiempo.
Para ver los elementos esenciales de la edición de sonido, es necesario ver los siguientes videos.
“Sonido A”, es este video verás los elementos básicos para empezar a trabajar con clips de sonido.
“Sonido Desvinculado”, Este video nos muestra como desvincular el sonido de nuestros videos, y las diferentes formas de
pasar a nuestros canales de audio, un clip de sonido.
“Sonido dos audios”, en este video verás cómo podemos manipular más de un sonido, y editarlos en nuestra línea de tiempo.
“Sonido narrador”, verás como introducir sonido desde un micrófono a nuestro proyecto.
“Son Pan Proy”, En este video verás cómo controlar la opacidad de un video, y el volumen del sonido moviendo mi línea de
control (color amarillo en ambos canales).
Los videos anteriores nos ilustran las opciones básicas para poder trabajar con sonido en nuestros proyectos.
84
Procedimiento para insertar sonido.
1. Primero abrimos nuestra aplicación Premiere.
2. Pasamos a nuestro panel de proyecto los archivos de sonido que queremos insertar a nuestro video. Estos archivos
pueden estar en diferentes formatos de audio mp3, WAV, etc.
3. Nos vamos a la pestaña Archivo, Importar, buscamos en nuestros medios los archivos de sonido que deseamos importar.
4. Ya que seleccionamos nuestros archivos de audio, en la ventana que nos muestra damos Clic en abrir y de manera
inmediata nos los empieza a importar a nuestro panel proyecto.
85
5. Los archivos de sonido seleccionados nos los importa a nuestro panel de proyecto, los vamos a identificar con su nombre y
formato de audio, además tienen la imagen de una bocina al inicio de su nombre.
86
6. Cuando insertamos una pista de sonido esta puede durar más que nuestro video o las imágenes que tenemos colocadas en
la línea de tiempo, entonces hay que recortar el sonido, y una forma de hacerlo es colocar la línea de tiempo hasta el final
de las imágenes, esto una vez que ya tenemos el sonido en el panel de la línea de tiempo, y colocado en un canal de audio.
7. Nos posicionamos al final de nuestra imágenes y presionamos las teclas Ctrol+k para dividir el sonido, de esta manera
podemos eliminar el sonido que nos queda después de la terminación de nuestras imágenes o video, opra tomar solo una
parte de la pista de sonido.
8. Aparece la pista dividida a partir de donde dejamos nuestro cabezal de la línea de tiempo.
87
9. Suprimimos la parte derecha después de haber dividido la pista de audio, solo nos posicionamos en la parte que se quiere
eliminar y damos suprimir.
10. Para bajar el volumen en una parte del video tenemos que insertar un keyframe y mover la línea amarilla del sonido, para
restablecer el volumen insertar otro keyframe y moverla al sonido o volumen que requiera nuestro video.
Esta actividad tiene vigencia de entrega durante la cuarta semana. Podrás enviarlo al “Buzón de tareas”.
Ejercicio No.7 Edición y montaje de varios videos
En este ejercicio vamos a ver diferentes maneras de trabajar con video clips.
Para poder explicar las funciones que se utilizan con mayor frecuencia en el montaje de videos, es conveniente ver los siguientes
videos en este orden:
88
“Video Esqueleto”
“Tres Videos Esqueleto”
“Quitar Fondo”
“Pequeños Esqueletos”
“Montaje”
1. Primero vamos a ver como generamos un video a partir de imágenes que fueron tomadas con fondo azul, las imágenes se
tomaron a una figura que representa un esqueleto humano, fueron realizadas capturando la secuencia de los movimientos
necesarios para dar un paso, a la serie de imágenes resultante las pasamos a nuestro panel de proyecto para generar el video.
En los estudios de grabación cuando se requiere pasar imágenes o videos, donde aparece un narrador, se tiene que tener un
estudio con fondo verde o azul para tomar las imágenes o videos del narrador, y nos permita tener un fondo con otras
imágenes o videos.
2. Ver el video “Video Esqueleto”.
En el siguiente ejercicio unimos tres videos ya hechos para generar uno solo, en estos videos tenemos el esqueleto del ejercicio
anterior en diferentes posiciones, tenemos las imágenes de perfil, de frente y cuando se desplaza dándonos la espalda. Para que
quede más claro veamos el video “Tres Videos Esqueleto”.
En el siguiente ejercicio vamos a eliminar el fondo azul o verde de un video, en este ejercicio ya estamos manejando efectos.
Para generar un video donde aparezca una persona o un logotipo, el video de la persona o logotipo debe ser tomado sobre un
fondo verde o azul, ya que si el fondo es de otro color al tratar de eliminarlo se puede perder parte de nuestros elementos, en las
89
personas tenemos una pigmentación en la piel con tonos que tienden a los colores rojos, y esto puede ocasionar perdida de partes
de la imagen. Ver el video “Quitar Fondo”.
Si quiero poner un video sobre otro, uno de los dos videos debe tener fondo azul o verde, para poder aplicarle el efecto del chroma
key , y solo proyectar la imagen sin fondo, les dejaremos en la carpeta “Videos” diferentes videos con fondo azul o verde.
Los videos con fondo rojo o colores derivados de este, no se pueden eliminar, ya que si hay una imagen humana, nos eliminara
parte de esta, porque los seres humanos tenemos pigmentación en la piel que depende del color rojo.
En el video “Pequeños Esqueletos”, aplicamos efectos para hacer más chicas las imágenes de los esqueletos, los cuales nos
sirven para introducirlos en alguna parte de un video clip.
“Montaje”, en este video vamos a ver la forma de pasar varios videos y sonido a nuestra línea de tiempo.
Para reafirmar lo visto en los videos anteriores deberás:
 Hacer un montaje sobre un video nuestro.

 Poner varios videos diferentes, pueden ser nuestros o videos que sean interesantes para nosotros. El objetivo es
generar un video de salida utilizando los videos que hayamos seleccionados, estos videos pueden ser de temas
diferentes, lo que importa es ver que podamos generar un video de salida con todos nuestros videclips.
 Se pueden colocar los videos en cada canal de video.
 Ponerle a cada video efectos.
 Generar un video con los videos que bajamos a nuestra línea de tiempo.
El objetivo de este ejercicio es generar un video con la unión de varios clips de video.
90
Tomar los videos de nuestra carpeta “Videos”.
Ejercicio No.8 Creación y animación de texto para los videos
En este ejercicio aprenderás a insertar texto y aplicarle efectos al mismo, para poder colocarlo en nuestros videos, en diferentes
lugares o espacios.
Para insertar texto lo hacemos desde el menú en la opción de título, nuevo título, Imagen fija predeterminada, y nos abre el panel
para poder insertar el texto que llevará mi título.
91
Después se abre la siguiente ventana que corresponde al panel de titulo.
Damos clic en aceptar, y el nombre que dimos va a aparecer en nuestro panel de proyecto, como un elemento más. Además nos
abre el panel de título, en este podemos empezar a introducir texto y aplicar estilos y otros efectos.
92
En la pantalla anterior se puede observar el nombre de título en el panel de proyecto así como los estilos de título y propiedades
de título.
93
Para el ejercicio de este tema vamos a introducir texto en el proyecto Mi Álbum, el cual lo realizamos en el ejercicio 4. En los
siguientes videos vamos a observar como aplicamos algunas de las funciones vistas, para obtener un video final en el cual se
pueda ver la aplicación de lo aprendido.
“Primera Parte”
“Segunda Parte”
“Tercera Parte”
“Cuarta Parte”
“Quinta Parte”
Captura tus pantallas en un archivo y guárdalo con el nombre: ejercicioNo8
94
Ejercicio No.9 Edición y aplicaciones de transiciones a los videos
Vamos a tomar como base el proyecto Mi Álbum, el cual lo realizamos en el ejercicio 4, en estos siguientes videos vamos a
observar como aplicamos algunas de las funciones vistas en los ejercicios anteriores, para obtener un video final.
En los siguientes videos veremos cómo insertar un titulo, efectos; así como la función para aplicar efectos de transición a los
elementos que tenemos en la línea de tiempo, cómo poner efectos de transición entre los video clip.
“Primera Parte”
“Segunda Parte”
“Tercera Parte”
“Cuarta Parte”
“Quinta Parte”
El archivo que se usa como ejemplo para este ejercicio está en la carpeta Recursos Ejercicio9
95
Ejercicio No.10 Exportación de mis proyectos a clip de película
Vamos a ver cuál es el proceso, para generar la salida de nuestros proyectos realizados en diferentes formatos de clip de película.
1. Entramos a la pestaña archivo, Exportar Medios
96
2. En la pantalla anterior puedo dejar el formato que me presenta de salida, puedo cambiar la ruta donde se va a almacenar mi
proyecto de salida.
3. Damos aceptar en la pestaña que se encuentra en la parte inferior derecha de esta pantalla.
4. Esperamos a que cargue y aparezca la pantalla de Adobe Media Encoder.
5. Cuando nos presenta la pantalla de Encoder, podemos duplicar nuestro proyecto para generar la salida en otros formatos.
97
Cambiamos el formato de salida de las copias hechas para generar otros tipos de salida.
98
El paso siguiente es generar nuestros clips de salida, para esto damos clic en Start Queue y esperamos a que se generen
nuestros videos de salida. Debemos de tener muy presenta la dirección donde los estoy alojando.
99
Unidad lII.
Creación y Edición de
animaciones y páginas
Web con Flash
100
Primera parte
Para la realización de este ejercicio se te pide Abrir un documento de Word Nuevo y ponerle por título Configuración del área de
trabajo de Flash, y al ir realizando las acciones solicitadas, ve imprimiendo la pantalla, en donde se muestre el resultado de la
acción. Y pega estas imágenes en el documento de Word como evidencia de la realización del ejercicio. Guarda el documento
con el mismo formato que se ha solicitado y envíalo a tu portafolio.
Ejercicio 1. Configuración del área de trabajo
La aplicación de Flash permite configurar las herramientas disponibles en el área de trabajo y guardar una disposición
determinada de los paneles y de las paletas.
La posibilidad de conservar la configuración del área de trabajo es muy útil puesto que permite disponer de una configuración de
colores, herramientas y disposición de los paneles concreta que facilitará el trabajo en ciertos momentos, según el tipo de tareas
que se vayan a desarrollar.
Al guardar un área de trabajo, Flash almacena la disposición de las paletas, incluso aquellas que están abiertas con las pestañas
activas en ese momento, y su ubicación. Cualquier área de trabajo personalizada puede tanto eliminarse como ser devuelta a su
estado inicial.
Flash CS4 ofrece seis espacios de trabajo con una configuración definida, y son los siguientes: Animador, Clásico, Depurar,
Diseñador, Desarrollador y el espacio de trabajo predeterminado que es el de Conceptos básicos.
101
En este ejercicio aprenderás a personalizar el área de trabajo en distintos aspectos, personalización que, guardaremos de modo
que podamos disponer de ella cuando lo creamos oportuno.
Instrucciones
1. Inicia el Programa Flash, creando un nuevo documento como un archivo de Flash (AS 2.0)
2. Vamos a ocultar uno de los paneles predeterminados, situado en la parte inferior de la pantalla. Da clic en el menú ventana y haz
clic sobre el comando de línea de tiempo.
102
3. Al ocultar la línea de tiempo también se oculta el nuevo editor de movimiento. Como segunda modificación en el área de trabajo,
abriremos el panel Color y lo ubicaremos con el resto de paneles. Da clic de nuevo en el menú Ventana y haz clic sobre el
comando Color.
4. El panel Color se sitúa flotante en el centro del área de trabajo. Vamos a ubicarlo con el resto de paneles. Para ello, haz clic
sobre la cabecera de este Panel y, sin soltar el botón del ratón, arrástralo hacia la derecha, hasta situarlo por debajo del panel
Biblioteca.
103
5. Ahora vamos a guardar esta área de trabajo. Haz clic en el menú Ventana, da clic sobre la opción Espacio de trabajo y
selecciona la opción Nuevo espacio de trabajo.
6. En el cuadro de diálogo Nuevo de espacio de trabajo, debes escribir el nombre con el que deseas guardar el estado actual del
área de trabajo. Para ello, uno de los criterios que puedes seguir es utilizar el nombre del proyecto con el que estás trabajando, y
para el cual hayas personalizado el área de trabajo. En cualquier caso, te recomendamos dar siempre nombres que puedas
identificar fácilmente cuando debas recuperar un área de trabajo en concreto. En este ejercicio escribe el término Mi espacio de
trabajo en el campo Nombre y da clic después en el botón Aceptar.
104
7. El programa ha guardado la configuración actual del espacio de trabajo y adapta la interfaz al cambio. Comprueba en la barra de
aplicación, la cual contiene ahora la barra de menús que aparece el nombre Mi espacio de trabajo aplicado en estos momentos. Y
la ventana debe observarse como la siguiente imagen.
8. Otra opción interesante en cuanto a la personalización del área de trabajo es la selección de una disposición predeterminada
por el programa. Para ello, despliega el campo que en este momento muestra el nombre Mi espacio de trabajo y elige la
opción Diseñador.
105
9. Se observa un cambio en la disposición de los paneles que es evidente. Así, el programa adapta el área de trabajo con aquellos
paneles y barra de herramientas que más se utilizan en el sector del diseño.
Para recuperar la configuración que se ha guardado anteriormente da clic en el menú Ventana selecciona la opción Espacio de
trabajo y selecciona la opción Mi espacio de trabajo.
10. Cualquier espacio de trabajo personalizado se puede eliminar una vez que se considere que ya no se volverá a utilizar. Para
realizar esto despliega de nuevo el campo de Espacios de trabajo de la barra de aplicación y dar clic en la opción Administrar
espacios de trabajo.
106
11. En el cuadro de diálogo Administrar espacios de trabajo se listan todas las configuraciones personalizadas del entorno de
trabajo. Desde este cuadro, es posible cambiar su nombre así como eliminarla. Selecciona con un clic el Mi espacio de trabajo
que aparece en el cuadro y da clic en el botón Eliminar.
En el cuadro de advertencia que aparece, da clic sobre el botón Sí para confirmar la eliminación y después da clic en el botón
aceptar.
Con esta acción concluye el ejercicio y terminamos de revisar los temas relacionados con la configuración del área de trabajo.
Esta actividad tiene vigencia de entrega durante la quinta semana. Podrás enviarlo al “Buzón de tareas”.
107
Ejercicio 2. Creación de imágenes: Mi primer Dibujo
Antes de empezar a trabajar la primera animación en Flash es importante ver los tipos de objetos con los que se puede trabajar.
Los tres objetos principales con los que trabaja Flash son: gráficos, botones y clips de película. Cada uno de estos objetos posee
una identidad y características propias.
Gráfico
Es un objeto cualquiera que puede haber sido dibujado directamente con las herramientas del programa, o bien importado debe
otra aplicación y convertido al formato vectorial. En principio, los objetos carecen de cualquier tipo de animación pero son la base
desde la que se parte para crearlas, es decir, si deseamos por ejemplo, crear la animación de un círculo que se mueve, primero se
deberá crear el objeto gráfico círculo y a partir de ahí, aplicarle las operaciones necesarias para que se mueva.
Botón
Es un elemento al que se le han añadido una serie de propiedades que le permiten actuar como un botón, es decir, un gráfico al
que se le podrán añadir acciones para que al pasar el cursor por encima o hacer clic sobre él, suceda algo.
Clip de película
Es un símbolo de animación en donde el objeto va cambiando de posición, tamaño, forma, color, etc.
Símbolos
Se puede crear un gráfico directamente en el lienzo del escenario o escena utilizando las herramientas de dibujo del programa, y
cuando el gráfico esté terminado se podrá, por ejemplo, dotarlo de animación también directamente en el escenario. Esto podrá
resultar práctico en algunos casos, pero lo usual será crear un SÍMBOLO de este gráfico.
Cuando se dibuje, por ejemplo, un círculo directamente en el escenario, el archivo de la película final contendrá la información de
ese círculo y la de su posición en el lienzo. Si se necesitan varios círculos, se podrá duplicar para que aparezca varias veces en la
escena; sin embargo, el archivo final contendrá todos esos duplicados y la información de la posición de cada uno, con lo cual el
tamaño del archivo necesariamente tenderá a ser grande.
108
En cambio, sí se crea el círculo original y se define como símbolo gráfico, ese círculo pasará directamente a formar parte de la
biblioteca y se podrá reutilizar tantas veces como quiera, es decir, arrastrarlo de la biblioteca a la escena las veces necesarias. No
obstante, y esto es lo importante, el archivo final sólo contendrá la información correspondiente a un solo círculo y la posición de
todos, con lo cual el tamaño del archivo será siempre mucho menor.
Eso sucede porque cuando se lleva un símbolo gráfico a la escena lo que realmente se coloca en ella no es el objeto en sí, sino
una representación visual de ese objeto a la cual se le da el nombre de INSTANCIA. De este modo, por muchas veces que se
tenga ese objeto repetido en el escenario, el archivo se mantendrá pequeño porque sólo contendrá la información del objeto
original y las coordenadas de sus repeticiones en la escena. Además, si se modifica el objeto original, todas sus reproducciones
cambiarán automáticamente, con lo cual puede verse que es mucho más práctico definir todos los gráficos como símbolos en lugar
de dibujarlos directamente en la escena.
Ahora vamos a realizar nuestro primer dibujo.
Comenzaremos realizando unos dibujos gráficos que después convertiremos en símbolo.
Instrucciones:
1. Inicia el Programa Flash, y crea un nuevo documento como un archivo de Flash (AS 2.0)
2. Selecciona la herramienta Ovalo en la Barra lateral de Herramientas y arrastrar en el lienzo de la escena, para dibujar un
círculo de 1 cm de diámetro (W=50, checa en las propiedades del gráfico) aproximadamente. Si mantienes presionada la tecla
(Shift) mientras arrastras, dibujarás un círculo perfecto.
109
Ahora selecciona la herramienta Flecha y da clic en la orilla del círculo para seleccionar su borde o contorno. Observa que, si
arrastras el borde, podrás moverlo de forma totalmente independiente. Ahora, presiona la tecla Suprimir (Supr o Del) y el borde
del círculo desaparecerá.
3. En la zona de colores, de la barra lateral de herramientas selecciona un color de contorno dando clic en el siguiente icono
, en las muestras de colores que aparecen selecciona el color que te guste. Ahora da clic en el icono y selecciona un color
de relleno. Estos colores se aplicaran a los próximos dibujos que realices.
4. Selecciona la herramienta Rectángulo en la barra lateral de herramientas, da clic en el lienzo y arrastra para dibujar un
rectángulo. Si mantienes presionada la tecla (Shift) se dibujará un cuadrado perfecto.
5. Con la herramienta de selección Flecha haz clic en el círculo que dibujaste para seleccionarlo. El círculo aparecerá
cubierto por una trama que indica que está seleccionado. En la zona de colores en la barra lateral de herramientas, da clic en el
icono para abrir la lista colores de relleno y selecciona uno de los colores que aparecen en ella. El círculo adoptará el color de
relleno elegido.
Acabamos de dibujar un par de gráficos sencillos y ya se podrán utilizar directamente para crear una animación en la escena.
Ahora vamos a convertirlos a símbolo para que pase a formar parte de la Biblioteca y podamos reutilizarlos las veces que
queramos.
6. Seleccione el círculo que dibujaste, con la herramienta Flecha, da clic en la opción Modificar de la barra de Menús y da clic en
la opción Convertir en símbolo o también presiona la tecla de función F8.
Con cualquiera de estas dos opciones se abre un cuadro en el que se debe introducir el nombre del nuevo símbolo y determinar en
qué tipo de símbolo se desea convertir el gráfico. Selecciona tipo Gráfico e introduce el nombre <círculo>. En la opción de Registro
observa que esté sombreado el pequeño cuadro del centro. Da clic en Aceptar.
110
Ahora observa como al seleccionar el gráfico ya no aparece la trama de antes sino que aparece bordeado por un marco, lo cual
indica que ahora se trata ya de un símbolo. Sí se da clic en el botón del panel de la biblioteca se mostrará el símbolo gráfico
creado. Si das clic sobre su nombre verás como la Biblioteca muestra una vista previa del símbolo en la parte superior.
7. Ahora, también con la herramienta Flecha arrastra para enmarcar el rectángulo y seleccionarlo, de esta manera seleccionarás
tanto el contorno como su relleno, cosa que no sucedería si das clic simplemente en la parte interior del rectángulo.
111
8. Da clic en la tecla de función F8 para convertirlo en símbolo. Asígnale el nombre <rectángulo> y sigue las mismas instrucciones
realizadas con el círculo.
Observa cómo aparece automáticamente en el panel de la Biblioteca. El icono que aparece a la izquierda de cada elemento de la
biblioteca indica su tipo de comportamiento, en este caso aparece el icono , con el cual se identifican los símbolos gráficos.
9. Por último vamos a usar los símbolos para realizar nuestro dibujo. Limpia el lienzo de dibujo del escenario, seleccionando los
elementos creados y da clic en la tecla suprimir.
10. Utiliza los símbolos que creaste para hacer el dibujo. Abre la Biblioteca para tener a la vista los símbolos. Para llevarlos al
lienzo simplemente da clic en uno, de ellos (por ejemplo el círculo) y arrastra el mouse sosteniendo el botón izquierdo, hasta el
lienzo de la Escena y suelta el botón.
11. Ya que tengas el primer círculo en la escena, selecciónalo y da clic en el panel Propiedades para cambiar el color, disminuye
también su tamaño con la herramienta Tranformación , haciéndolo más pequeño para poder crear las flores. Ya que hayas
realizado las modificaciones, puedes seleccionar nuevamente este círculo y copiarlo, luego pégalo en el escenario tantas veces
como lo necesites (Para copiar y pegar puedes utilizar los comandos de copiar y pegar del Menú edición o las teclas Ctrl+C y
Ctrl+V).
12. Utiliza la herramienta del Pincel en color verde para dibujar los tallos de las flores. Puedes cambiar el color seleccionando
primero la herramienta y después en el panel de Propiedades seleccionar el color.
13. Arrastra el símbolo del rectángulo a la escena para crear la base de las flores.
Los elementos gráficos seleccionados pueden moverse, arrastrándolos con el mouse o moviéndolos con las teclas de flechas de
navegación.
Tu dibujo debe quedar similar al siguiente:
112
14. Para conservar los elementos dibujados vamos a guardar el archivo. Da clic en la opción Menú Archivo -Guardar como, y en
la ventana que se abre asígnale el nombre Mi primer dibujo + las iniciales de tu nombre. Esto creará un archivo con extensión (.fla)
que podrá recuperarse en cualquier momento con la opción Menú Archivo / Abrir.
Ejercicio 3. Edición de trazos y personalización de colores
Flash presenta herramienta de dibujo que permite el trazado de formas. La herramienta Lápiz está destinada a dibujar trazos,
la herramienta Pincel , en cambio, está destinada a pintar y crear rellenos de diferentes tamaños y estilos. Y la herramienta
Pluma permite la creación de segmentos de líneas rectas o curvas. Aunada a esta herramienta, la herramienta Subselección
posibilita mostrar los puntos de las líneas y los contornos de la forma y así modificar la línea y contorno desplazando o
ajustando esos puntos.
113
Instrucciones:
a) Vamos a realizar ahora varios trazos con estas herramientas y a editarlas con diferentes opciones.
1. Inicia el Programa Flash, creando un nuevo documento como un archivo de Flash (AS 2.0)
2. Haz clic sobre la herramienta lápiz, décimo icono del panel herramientas.
Esta herramienta se utiliza de manera muy similar a como se emplea un lápiz para realizar un dibujo, es decir, a mano alzada.
Para aumentar el grosor del borde sólido definido, haz doble clic en el interior del cuadro de Grosor, a continuación en el
control deslizante de Trazo, introduce el número tres y presiona la tecla Intro.
3. Ahora dibuja un triángulo en la esquina derecha del escenario, da clic en el lienzo y empieza a dibujar. Arrastra en línea recta
hacia la derecha y después sin levantar el puntero, en diagonal hacia arriba y después desciende hacia la izquierda hacia el
inicio de la línea.
El programa corrige automáticamente el trazo al soltar el botón del mouse.
4. La herramienta Lápiz cuenta con un modificador Enderezar, localizado al final de la barra de herramientas. Este modificador
presenta una pequeña punta de flecha junto al icono lo que indica que contiene un menú emergente, con las siguientes
opciones: Enderezar (Interpreta el trazado en clave de segmentos rectos), Suavizar (corrige automáticamente los trazados
convirtiéndolos en suaves segmentos curvos), Tinta (no aplica modificaciones, respeta el trazado a mano alzada). Selecciona
la opción Suavizar y dibuja un trazo similar al anterior, ahora en el centro al lado del triángulo anterior.
114
5. Si al momento de dibujar con el Lápiz se presiona además la tecla Shift, solamente se dibujarán rectas horizontales o
verticales. Dibuja un cuadro utilizando esta opción, en lado izquierdo del lienzo.
6. Ahora vamos a usar la herramienta Pincel, da clic en el onceavo icono del panel de herramientas. El Pincel únicamente pinta
rellenos. Traza una línea recta en algún punto del lado inferior derecho del lienzo.
7. También el trazado de la pincelada se corrige automáticamente suavizándose.
8. Cambia ahora el color de relleno a un tono azul oscuro, para distinguir las nuevas pinceladas. Da clic sobre la muestra de color
de relleno del panel Herramientas y en la paleta desplegada, selecciona el tono azul oscuro.
9. Los dos últimos cuadros desplegables de la sección Opciones del panel de herramientas permiten cambiar el tamaño y la
forma del pincel. Selecciona los parámetros a tu gusto para estas dos características y dibuja de nuevo una línea recta para
ver los efectos que producen esta modificaciones.
10. La opción Pintar Normal, solapa tanto las líneas como los rellenos. La opción, Pintar rellenos, pinta los rellenos y las áreas
vacías, pero no afecta a las líneas. Y con el modificador Pintar detrás activado, los rellenos del pincel solo afectan a las áreas
vacías del documento respetando tanto los bordes como los rellenos preexistentes. Selecciona cada una de estas opciones y
aplica a los dibujos de triángulos y cuadrado.
11. Ahora da clic en la herramienta Pluma, sexto icono del panel de herramientas. Con esta herramienta se van creando uno a
uno los puntos de anclaje que definen el trazado de una forma. Haz clic en un punto en la parte inferior izquierda del
documento, y a continuación da clic en un punto en la esquina derecha del documento para crear el primer segmento.
12. El siguiente clic sobre el área generará un tercer punto con su segmento respectivo. Sigue dando clic sobre el documento
alrededor de las formas trazadas anteriormente, de manera que queden delimitadas por una línea.
Para cerrar el trazo el último clic lo debes de dar en el primer punto de anclaje (donde iniciaste el trazo).
115
13. La herramienta Subselección , segunda del panel de herramientas permite mostrar los puntos de anclaje de los
contornos de las formas, así como ajustar los puntos para modificar las líneas. Da clic en el icono de esta herramienta.
14. Para editar o remodelar la figura creada da clic en uno de los puntos de anclaje del trazo anterior y sin soltar el botón del
ratón arrástralo hasta cambiar la forma.
15. Los puntos que conforman un trazado también pueden ser eliminados. Para ello da clic en el botón punta de Flecha de la
herramienta Pluma y selecciona la opción Eliminar punto de ancla, después da clic en uno de los puntos de ancla de la forma
para eliminarlo.
16. La herramienta Pluma permite crear segmentos curvos. De clic en la herramienta Pluma. Para crear un segmento da clic en
un punto del documento y arrastra hasta otro punto.
17. Aparecen unos tiradores que definen la orientación de la curva, según hacia donde se arrastren. Para crear el segundo punto
del trazado da clic en un tercer punto del documento y mueve el tirador para ir dando la curvatura a la línea hacia diferentes
lados, ve dando clic en otros lugares del documento para seguir creando segmento curvos.
Tus trazos deben quedar similares a la siguiente imagen.
116
b) Ahora vamos a personalizar los colores.
Flash ofrece, de forma predeterminada, una serie de muestras de colores sólidos para su aplicación en un documento. Su
selección se efectúa a través de las paletas emergentes de los cuadros Color del trazo y Color del relleno.
El cuadro de dialogo Color posibilita la personalización de los tonos a través de seis parámetros. Tres hacen referencias a los
colores primarios utilizados en la mezcla y los otros tres son referentes al matiz, la saturación y el brillo de la misma.
1. Vamos a personalizar colores sólidos. Para empezar da clic en el cuadro Color del Trazo, del panel de herramientas y da clic
en el botón de la esquina derecha de la paleta emergente.
2. En este ejercicio se cambiarán los valores del color negro hasta conseguir una tonalidad verdosa. Flash utiliza seis parámetros
para definir los colores, tres de los cuales hacen referencia al sistema de color empleado. Este sistema, RVA en castellano y
como RGB en inglés, compone los tonos a partir de tres colores primarios: rojo, verde y azul. Tras seleccionar el color básico
117
negro entre las muestras de la izquierda del cuadro, introduzca el Valor 78 en el campo Rojo, el Valor 177 en el campo Verde
y el Valor 148 en el campo al azul.
3. Da clic en el botón agregar a los colores personalizado y haz clic en Aceptar.
4. El cuadro Color del trazo del panel Herramientas muestra ahora la tonalidad definida, dispuesta para ser aplicada al contorno
de las figuras. Da clic sobre el botón de flecha de la Herramienta Bote de Tinta y da clic en el interior de algunas de las
figuras que cuentan con bordes para aplicar a estos bordes el color definido.
118
5. Flash cuenta con un panel destinado específicamente a personalizar tonos: el panel Color. Para mostrar este panel, despliega
el menú Ventana, da clic sobre el comando Color y arrastra el panel hace la parte derecha de la ventana, por debajo del panel
Propiedades.
119
6. El Valor que figura en el cuadro Alfa puede oscilar entre el 0, transparencia absoluta, y el 100, completa opacidad del tono.
Introduce en este cuadro la cifra 50 y da clic en la tecla y Intro o Enter.
7. Las muestras de color del trazo de los paneles Herramientas y Color se actualizan, al igual que la vista previa de la parte
inferior de éste último panel. Da clic en el icono del menú de opciones del panel y selecciona la opción MSB.
8. El mezclador pasa a mostrarse en modo de visualización MSB (Matiz, Saturación, Brillo). Introduce el valor 50 en el campo
Matiz, el Valor 90 en el campo Saturación y el valor 90 para el campo Brillo.
120
9. Introduce el Valor 80 en el campo Alfa, da clic en la tecla Intro y da clic dentro de la figura para aplicar a sus bordes el nuevo
color personalizado.
Para conservar los elementos dibujados vamos a guardar el archivo. Da clic en la opción Menú Archivo - Guardar como, y en la
ventana que se abre asígnale el nombre Dibujo_trazos + las iniciales de tu nombre. Esto creará un archivo con extensión (.fla) que
podrá recuperarse en cualquier momento con la opción Menú Archivo - Abrir.
Ejercicio 4. Creación de textos
Para la realización de este ejercicio es importante que revises los temas: Textos en la unidad 4 del curso de Flash, en aula
clic, Uso de las reglas, guías y la cuadrícula.
Flash abarca todo aquello que pueda hacer falta a la hora de crear una animación, y por tanto, también todo aquello relativo a los
textos. Sin embargo, Flash fue concebido para crear animaciones gráficas, de modo que tratará cualquier texto como si se tratase
de un objeto más, listo para ser animado de acuerdo a lo que se requiera.
Esto permitirá posteriormente animar textos y crear espectaculares animaciones con muy poco esfuerzo.
Flash distingue entre 3 tipos de texto: estático o normal, dinámico y texto de entrada (para que el usuario introduzca sus datos, por
ejemplo),
121
Así, se dispone de una herramienta que permite incluir texto, cuyo contenido y apariencia pueden ser modificados durante su
introducción o posteriormente.
Al crear un texto nuevo, Flash emplea los atributos del texto predeterminados por el programa. Para cambiar los atributos de fuente
o párrafo del texto existente, es necesario seleccionar lo primero. Cuando hay texto seleccionado, los atributos se modifican
mediante el panel Propiedades.
Flash permite la creación de tres tipos de bloques de texto: estáticos, dinámicos y de introducción.
En este ejercicio vamos a practicar la realización de varios tipos de texto.
Instrucciones
1. Para poder trabajar con los objetos de manera alineada y organizada en el lienzo, Flash incluye Reglas, Guías y una
Cuadrícula. Vamos a mostrar la Regla, da clic en el Menú Ver y selecciona la opción Reglas
122
2. Las reglas adaptan la numeración al grado de visualización del documento y a partir de ellas pueden crearse guías
horizontales y verticales mediante la técnica del arrastre. Da clic en centro de la Regla horizontal y arrastra el puntero del
mouse hasta situar la guía en la mitad del área de trabajo.
3. Ahora coloca una guía vertical, da clic en el centro de la Regla vertical y arrastra la guía también hasta la mitad del
documento. En el momento que ya no se quiera tener las guías en el documento se pueden desactivar con la opción Menú
Ver y seleccionar la opción Mostrar guías, para desactivarla.
4. Además de las reglas y las guías, Flash permite la colocación de una cuadrícula. Abre el menú Ver, selecciona la opción
Cuadrícula y haz clic sobre el comando Mostrar cuadrícula.
5. El tamaño del cuadro de la cuadrícula puede establecerse de la siguiente manera: da clic en el menú Ver, da clic sobre la
opción Cuadrícula y luego da clic en el comando Editar cuadrícula.
123
6. Los cuadros Espaciado horizontal y Espaciado vertical permiten establecer la distancia en pixeles que separa cada una de las
líneas verticales y horizontales en la cuadrícula. Escribe en cada uno de los cuadros el valor 20 px.
Ahora empezaremos a trabajar con el texto.
7. Empezaremos este ejercicio dibujando una figura para comprobar el comportamiento de los textos. Da clic sobre la
herramienta Rectángulo del panel de Herramientas y traza esta figura en el lado superior izquierdo del lienzo abarcando un
área en la cuadrícula de 8 cuadros de ancho por dos de alto
8. Ahora vamos a agregarle un texto. Da clic en la herramienta Texto, identificada por una T mayúscula el panel de Herramientas.
Activa dicha herramienta y da clic en el centro del rectángulo que dibujaste.
9. Automáticamente aparece una caja de texto con el correspondiente cursor de edición. Escribe la palabra Video y activa la
herramienta Selección para comprobar el aspecto.
10. La palabra introducida se muestra dentro de un marco rectangular azul, que representa la selección del bloque de texto que la
contiene. Cada bloque de texto o de un documento funciona de manera independiente y sus atributos pueden ser modificados
124
desde el apartado carácter del panel propiedades. Da clic en el botón de flecha del cuadro Familia y elige la fuente que
prefieras.
11. El campo Estilo permite elegir a partir de un menú desplegable un atributo de texto, por ejemplo Negrita o Cursiva. Da clic en el
campo Estilo y elige la opción Bold.
125
12. El tamaño de los textos viene indicado en puntos. Da clic en el campo tamaño de fuente que introduce el valor 16, ahora da
clic en el campo Espaciado entre letras y cambia el valor a 15.
13. Para cambiar el color del texto, da clic sobre la muestra del cuadro Color y selecciona con un clic el color que prefieras de la
paleta emergente.
14. Los atributos seleccionados se aplicarán a todos los textos introducidos a partir de este momento. Activa nuevamente la
herramienta Texto dando clic sobre ella en el panel Herramientas y luego da clic en un punto o fuera del rectángulo para crear
un nuevo bloque de texto.
15. Escribe ahora tu nombre y activa la herramienta Selección.
16. La palabra introducida presenta los atributos de fuente seleccionados para el bloque anterior.
17. Para terminar el ejercicio da clic en la punta de flecha del Cuadro Color del texto y en la paleta emergente, da clic sobre la
muestra de color negro de la primera columna.
18. Vamos a cambiar la orientación del texto. Da clic en el icono Cambiar dirección del texto, situado en la parte inferior del
apartado Párrafo, selecciona la opción Vertical, Izquierda a derecha.
19. Ahora da clic en el comando Rotación, situado a la derecha del icono Cambiar la orientación, y el texto rotará mostrando las
letras en forma vertical.
126
20. Imprime la pantalla con la última parte del ejercicio, pega la imagen en un documento de Word como se ha hecho
anteriormente con otros ejercicios y guarda el archivo como evidencia, de la manera ya establecida.
Vamos a guardar el archivo. Da clic en la opción Menú Archivo / Guardar como, y en la ventana que se abre asígnale el nombre
Dibujo_trazos + las iniciales de tu nombre. Esto creará un archivo con extensión (.fla) que podrá recuperarse en cualquier momento
con la opción Menú Archivo / Abrir.
Envía los dos archivos, el documento de Word y el documento de Flash al Buzón de tareas.
127
Ejercicio 5. Animación de textos
Para la realización de este ejercicio es importante que revises los temas: línea del tiempo, capas, tipos de fotogramas, en
la unidad 4 del curso de Flash, en aula clic,
El procedimiento que utiliza Flash para crear las animaciones se basa en el de las películas de cine. Una película de cine no es
más que una sucesión de fotogramas en los que cada uno de ellos muestra una imagen ligeramente diferente a la anterior.
Así, Flash utiliza un método similar para recrear la ilusión del movimiento. Para esto utiliza una línea de tiempo en la que aparecen
los fotogramas de la película y cada fotograma puede contener lo que se quiera. Al poner en marcha la reproducción de la película,
la pantalla mostrará uno tras otro el contenido de cada fotograma a la velocidad especificada. Dependiendo de lo que se haya
dibujado o hecho en cada fotograma, obtendremos efectos de movimiento suave, brusco, cambios de forma, etc.
La línea de tiempo es la encargada de organizar y controlar el contenido de una película a través del tiempo. Esa organización se
realiza a base de capas y de fotogramas. Un puntero o cabezal de lectura que corre por la parte superior de la línea de tiempo es el
encargado de indicar en todo momento en que fotograma de la película se encuentra la reproducción.
Los fotogramas son los cuadritos o cajitas que contendrán los elementos que formaran la película.
Si se arrastra el puntero con el ratón, se podrá reproducir la película hacia delante, hacia atrás de forma totalmente manual más o
menos como se hacía con aquellos proyectores de cine de juguete, en los que mediante una manivela los niños podían reproducir
la película sin fin en cualquier sentido y a cualquier velocidad.
Cada capa dispone de su propia línea de tiempo y con sus propios fotogramas; sin embargo, durante la reproducción de la película
los fotogramas de cada capa se reproduce al mismo tiempo, es decir, cuando se reproduzcan por ejemplo, el fotograma número
14, se estarán reproduciendo también el fotograma 14 de todas las capas.
128
Cuando se realiza una animación es importante que cada elemento (sean dibujos, imágenes o texto) que integra esa animación se
encuentre en una capa diferente, así tendrá cada uno su propia línea del tiempo.
El Panel Propiedades contiene las principales propiedades de todos los objetos que se emplean durante la película, de modo que
si se selecciona un texto, podremos ver en él todo lo que hace falta conocer sobre nuestro texto.
Pasos para la Animación de textos
Es indudable que para comunicar algún mensaje, en la mayoría de las ocasiones, no basta con imágenes o iconos, y es aquí
donde el texto cobra gran importancia. No obstante, se debe tener cuidado con la animación de los textos, ya que resulta
bastante complicado leer un texto que se desplaza o cambia de tamaño.
Por este motivo, un texto animado debería estar sólo en las presentaciones o bien formar parte de una animación corta y, lo que
es más importante no debería estar reproduciéndose infinitamente.
En las presentaciones, se utilizan multitud de efectos. Una animación puede hacerse fotograma a fotograma, o usando la
función de Interpolación.
Primero vamos a realizar un ejercicio con una animación de texto fotograma por fotograma. La cual es una de las opciones más
utilizadas y consiste es separar las letras de los textos y animarlas independientemente
Objetivo del ejercicio
Crear una animación sobre un texto separándolo en bloques de letras cuyo movimiento será tratado de manera independiente,
dando al texto un efecto vistoso que pudiera servir como presentación de entrada a una web u otro tipo de película.
Ejercicio A. Creación de una animación de texto Fotograma por Fotograma.
Instrucciones: Vamos a realizar un ejemplo sobre la creación de un texto, para tener claro el procedimiento. Luego se podrá
extrapolar a cualquier otro texto. Veamos cómo conseguir esos efectos combinando las técnicas vistas hasta el momento.
129
1. Abre Flash en un nuevo documento, muestra las reglas y a partir de la regla vertical arrastra una Guía hasta el 200 de la
regla. En la capa 1 escribe el texto en cuestión apoyando sobre la guía, en este caso se pide que escribas tu nombre, en el
ejemplo presentado se usa la palabra Hola.
2. Selecciona el texto recién escrito, es decir tu nombre.
3. Abre el panel Propiedades (con el texto seleccionado) y selecciona el tipo de letra. En el ejemplo se ha elegido “Arial”, pero
cualquiera letra es válida.
4. Accede al menú Modificar - Separar. Con esto vas a separar cada letra ya que de no hacerlo Flash trataría todo el texto
como un bloque y no se podría dar el efecto a las letras.
Vamos a separar el texto en bloques: se creara un bloque por cada letra de tu nombre. En el ejemplo se creó un bloque por
cada letra de la palabra Hola
Con esto Podríamos cambiar los bloques si quisiéramos dar otro efecto en concreto.
5. Selecciona uno por uno los bloques resultantes y los conviertes a símbolos, dándoles un nombre identificativo y el Tipo
Gráfico, ya que no se animarán "internamente".
130
6. Ahora selecciona los bloques de letras para Crear nuevas capas, una por cada bloque que se ha creado. Utiliza la
opción Modificar –Línea del tiempo-Distribuir en capas.
7. Se crearan nuevas capas, una para cada letra de tu nombre, ordenadas de la primera, ubicada en la parte de abajo y la
última en la parte superior de las capas. Cada letra estará ingresada en el primer fotograma de la capa.
Esto último es necesario ya que si no lo hiciéramos Flash aplicaría el movimiento a todo aquello que encontrara en dicha
capa, ya que como hemos comentado anteriormente, lo convertiría todo a símbolo automáticamente.
8. Cambia el nombre a cada una de las capas según el bloque de texto que vaya a contener, pero en orden inverso en el que
vaya a producirse la animación, para que el objeto en movimiento se superponga a los que no lo están. Esto es, la capa de
más arriba se llamará de acuerdo a la última letra de tu nombre, la siguiente con la penúltima y así sucesivamente.
9. Hacemos clic con el botón derecho sobre el único fotograma con elementos que tenemos en la línea de tiempo y en el
menú emergente seleccionamos Copiar Fotogramas. A continuación vamos pegando los fotogramas (botón derecho-
Pegar Fotogramas) en todas las capas.
10. Seleccionamos cada capa y en el fotograma 1 vamos moviendo las letras del texto hacia fuera del documento, hacia los
lados y hacia arriba y abajo, distribuyendo las letras. Es importante bloquear, dando clic en icono del candado en el
131
panel de capa, el resto de capas. Se hace esto para asegurarnos de que movemos solamente las letras de esa capa (hay
que tener en cuenta que al principio todas las capas contienen lo mismo y superpuesto).
11. Mueve las letras desde fuera del lienzo (posición que tienen en el fotograma 1) para situarlas en diferentes lugares
(arrastrando) en los siguientes fotogramas clave que insertaras (como se muestra en la figura anterior) de cada capa. En el
caso de tu nombre aumentarías o disminuirías los fotogramas de acuerdo con el número de letras:
Fotograma 5.
Fotograma 10.
Fotograma 15.
Fotograma 20.
Fotograma 25.
Copia el fotograma 25 y pégalo en el 30.
En cada uno de estos fotogramas se debe ir variando la posición de las letras, para dar la sensación de movimiento.
12. Para insertar fotogramas clave selecciona el fotograma que ocupa cinco posiciones después del fotograma 1 de cada
capa y pulsa F6 cada vez. Con esto se está insertando un Fotograma clave, el cual debe de contener el objeto o elemento,
o también puedes dar clic botón derecho sobre la línea del tiempo en el lugar donde se quiere insertar el fotograma, y en el
menú contextual selecciona la opción Insertar fotograma clave.
132
13. Estando seleccionado el fotograma clave, da clic en la letra y mueve su posición. Y así ve realizando esta acción en cada
fotograma clave que se ha indicado. La animación dará la idea de que las letras llegan volando desde fuera del lienzo para
formar la palabra en el centro.
133
134
14. Extendemos los últimos fotogramas de cada capa hasta que ocupen el fotograma 40 ( Clic Botón derecho- Insertar
Fotrograma Clave).
15. Y ya tenemos la animación creada. Ahora para probar la animación presionamos la tecla Ctrl+Enter, para que se ejecute
nuestra animación.
16. Guarda tu archivo con el nombre Texto animado1_ más las iniciales de tu nombre.
Ejercicio B
Creación de Animación de texto con interpolación.
1. Inicia un nuevo documento de Flash con la configuración que ya se ha estado trabajando.
2. En el panal Propiedades del documento cambia en el cuadro de color, de blanco a color Negro.
3. Tenemos solamente una capa. En esa capa en el fotograma 1, vas a ingresar un primer texto.
4. Selecciona la Herramienta de Texto y en la esquina superior izquierda escribe tu nombre ( únicamente el nombre).
135
5. En las propiedades selecciona el tipo de letra que tú quieras, en el color selecciona el blanco y selecciona un tamaño
más o menos grande.
6. Agrega un fotograma clave en el fotograma 50. Selecciona nuevamente la herramienta Texto y en este fotograma escribe
nuevamente tu nombre ahora seguido de tu primer apellido., en la esquina inferior derecha.
7. Establece otras propiedades del texto: cambia tipo de fuente, tamaño más pequeño y en color rojo.
136
8. Ahora es necesario sacar los caracteres del cuadro de texto, en cada uno de los textos que escribiste. Selecciona el texto
del fotograma 1 (Nombre) y da clic en el menú Modificar-Separar, Dos veces. Con la primera vez el texto tendrá la
siguiente apariencia.
Con la siguiente separación cada letra del texto quedará convertida a una forma.
9. Ahora selecciona el texto del nombre y apellido y realiza la misma acción para separar el texto.
137
10. Ahora se va a crear el movimiento con el comando de Interpolación. Da clic sobre el área de los fotogramas en la línea del
tiempo, y en el menú desplegable selecciona la opción Crear interpolación de forma.
11. La línea del tiempo cambiara a un color verde claro con una flecha que va del primer fotograma al último. Y si se
selecciona algún fotograma intermedio se observará como va cambiando la forma del texto.
138
12. Con esto ya está terminado el ejercicio. Prueba la película presionando al mismo tiempo las teclas Ctrl+Enter (Intro) y
observa la película el cambio que sufre el texto.
13. Guarda tu archivo con el nombre Texto animado2_ más las iniciales de tu nombre.
139
Ejercicio 6. Agregando música y sonidos a mis proyectos
Para la realización de este ejercicio es importante que revises los temas: línea del tiempo, capas, tipos de fotogramas, en
la unidad 4 del curso de Flash, en aula clic, importación de sonidos, en la unidad 5.
Flash permite insertar cualquier sonido que se quiera en las películas creadas (.wav, .aiff, .mp3, etc...) de forma fácil y muy
efectiva, ya que es capaz de acelerar la descarga del sonido siempre y cuando se descargue junto con nuestra película.
Se puede agregar a la película efectos simples (el típico "clic" al pulsar un botón) efectos complejos (música de fondo) e incluso
podemos hacer que la animación se desarrolle conjuntamente con una música (si bien esto último necesitaría que toda la película
estuviera descargada previamente, para evitar "atascos" durante el desarrollo de la animación).
Flash permite importar todo tipo de archivo de sonido (WAV, AIFF, MP3…) para su empleo en los documentos. Una vez
importados, los sonidos quedan almacenados en la biblioteca del documento y pueden ser y agregados como instancias en el
escenario tantas veces como sea necesario.
Su uso repetido en una película no implica un aumento en el tamaño de la misma. El tamaño añadido al documento viene
determinado por la compresión de los sonidos importados en los archivos finales, una vez exportados o publicados.
La compresión de un sonido determina su relación calidad/tamaño. Por defecto, Flash aplica a todo los sonidos la compresión
propia el formato de Audio MP3.
Esta opción puede ser cambiada en el cuadro de diálogo Configuración de la publicación. Pero en todo caso, podemos especificar
la compresión de cada uno de los sonidos individualmente, acudiendo, desde la biblioteca, al cuadro de propiedades de cada uno
de los mismos.
Si el destino final de los documentos es su colocación en Internet, resulta aconsejable utilizar sonidos cortos y altamente
comprimidos.
El propósito de este ejercicio es aprender cómo insertar sonidos en un proyecto de Flash, para lo cual realiza lo que se te pide a
continuación.
140
Instrucciones:
1. En este ejercicio insertaremos un sonido en una capa de Audio, que se creará en el ejercicio anterior. Para ello, lo primero que
debes hacer es importarlo. Pero antes de empezar el ejercicio, copia en tu carpeta de archivos de prácticas el sonido que
quieras insertar, (recuerda que el sonido debe tener un formato de tipo .wav) puedes utilizar el archivo de sonido
música_navideña que se encuentra en la carpeta de “Recursos”.
2. Es importante tener reunidos en una sola carpeta todos los archivos que se van a insertar en Flash (sonidos, imágenes,
videos) para desarrollar un proyecto. Deben de estar incluso en la misma carpeta del proyecto de Flash.
3. Abre el archivo anterior que trabajaste: texto_animado2+ las iniciales de tu nombre.
4. En el panel de capas cambia el nombre de la capa que tiene el archivo (Capa 1), dando doble clic sobre el nombre de la capa,
y asígnale el nombre de Texto.
5. Crea una nueva capa dando clic en el icono de Agregar nueva capa , ubicado en la base del panel Capas, asígnale el
nombre de Audio.
6. Teniendo seleccionada la capa vacía, Audio, podríamos importar directamente el sonido al Escenario, pero en este caso
interesa almacenarlo en la biblioteca del documento, para insertarlo posteriormente en el documento.
7. Vamos a importar el sonido, para ello da clic en el menú Archivo y selecciona la Opción Importar y luego Importar a
Biblioteca.
141
8. Se abre el cuadro de diálogo de Importar a Biblioteca, localiza el archivo de música, selecciónalo con un clic, y después da clic
en el botón Abrir para insertarlo a la Biblioteca.
9. Los archivos de sonido que se insertan quedan almacenados como elementos de la Biblioteca. Para probarlo, abre el panel de
Biblioteca dando clic en su pestaña.
142
10. El panel permite visualizar todos los elementos organizados en orden alfabético. Selecciona el elemento de sonido, da doble
clic sobre el icono a la izquierda del nombre para establecer sus propiedades.
11. El cuadro de diálogo Propiedades de sonido además de mostrar las propiedades del elemento seleccionado, permite
seleccionar el tipo de compresión del sonido. La compresión determina la calidad y el tamaño del sonido en los archivos de
Flash exportados. Puedes seleccionar las opciones de compresión para sonidos concretos o definir valores para todos los
sonidos del documento.
12. Los sonidos pueden necesitar una cantidad considerable de espacio en disco y memoria RAM. No obstante, los datos de
sonido MP3 están comprimidos y ocupan menos espacio que los datos de sonido WAV o AIFF. En este caso, tal como se
informa en la parte central del cuadro de diálogo, debajo del campo Calidad, el nuevo formato reduce el tamaño del archivo de
Audio a un porcentaje menor al original. Los cuadros desplegables, Velocidad de bits y Calidad guardan relación con la
velocidad de transmisión de datos. Si el destino final del documento de Flash es su publicación en Internet es aconsejable
ajustar al máximo la relación calidad-tamaño de los archivos de audio. A fin de que puedan ser descargados rápidamente. Da
clic en el botón de la flecha desplegable Calidad, y selecciona la opción Media.
143
13. Para aplicar los cambios de compresión da clic en el botón Actualizar del cuadro de diálogo. Esto permite utilizar ahora el
botón Probar para escuchar el sonido modificado, comprobando que se reproduce correctamente con la nueva compresión. Da
clic en el botón Aceptar para aplicar los cambios y cerrar el cuadro de diálogo.
14. Ahora vamos a agregar el sonido a la capa Audio. Selecciona en la Biblioteca el icono del sonido y arrástralo hasta el
fotograma 1 de la capa Audio.
15. Con esta acción se agrega una instancia del archivo de audio al fotograma destino, el cual presenta un dibujo de una onda, en
el mismo fotograma en la línea de tiempo.
144
16. Ahora es necesario configurar algunas propiedades del sonido para su correcta reproducción durante la película. Selecciona
el fotograma del sonido para que aparezcan sus propiedades en el panel.
17. En el cuadro Efecto vamos a seleccionar la opción Desvanecimiento, en el cuadro Sinc. Selecciona Inicio, y en el cuadro
Repetir cambia el número 1 por 0.
145
18. Prueba la película para ver si el sonido se reproduce, da clic en el Menú Control y luego da clic en la opción Probar película.
19. El sonido se reproduce durante el tiempo en que se esté reproduciendo la película.
20. Abre el archivo de mi_pelicula_con_sonido que se encuentra en la carpeta de recursos. Tu película debe quedar similar a
ésta.
21. Guarda tu archivo con el nombre mi_nombre_con_musica_+ iniciales de tu nombre.
Esta actividad tiene vigencia de entrega durante la sexta semana. Podrás enviarlo al “Buzón de tareas”.
146
Ejercicio 7. Transformación y organización de objetos a partir de capas
Para la realización de este ejercicio es importante que sigas revisando los temas: línea del tiempo, capas, tipos de fotogramas, en
la unidad 4 del curso de Flash, en aula clic, importación de sonidos, en la unidad 5.
También necesitaras los siguientes archivos de imágenes, video y sonido localizados en la carpeta de “Recursos”:
Fondo1.jpg, imag_publicidad,jpg, biothem.jpg, bonafont.jpg, notamusical.jpg, músicaPubli.png, más la imagen Viajes paraíso
que creaste en Photoshop. El video comercial sabritas, y el archivo de sonido canción navideña.
Una animación creada con Flash puede ser desde un proyecto muy sencillo hasta proyectos que integran varios elementos y varias
acciones.
En los ejercicios que faltan por realizar, se desarrollará un proyecto un poco más elaborado que integrará la combinación de varios
elementos y varias acciones.
Se Iniciara el proyecto en este ejercicio y lo iremos enriqueciendo a lo largo de los otros ejercicios.
Vamos a iniciar una animación que contenga varios elementos u objetos en forma organizada en las capas y en la línea del tiempo.
Para lo cual sigue las siguientes
Instrucciones
1. Abre Flash y crea un archivo Nuevo con la configuración que se ha estado trabajando.
2. Vamos a empezar a trabajar de manera ordenada creando cada una de las capas en las que se ubicaran los objetos. Con el
Botón crea cuatro capas más para tener en total 5, en la línea del tiempo.
3. Escribe los siguientes nombres a las capas, empezando por la de más abajo: Fondo, Botones, Contenido, Sonido, Acciones.
Recuerda que debes seleccionar el nombre de la capa con doble clic para activar la edición. Observa la siguiente imagen.
147
4. Ya que se han creado todas las capas vamos a empezar a agregar elementos en los fotogramas (recuerda que los
fotogramas son cada uno de los pequeños rectángulos distribuidos a lo largo de la línea del tiempo). Para ello es necesario
que integres en la misma carpeta donde guardaras tu proyecto, una carpeta con los elementos que se van a usar: imágenes,
videos y sonidos (localiza los archivos para este ejercicio en la carpeta de recursos).
5. Para agregar imágenes y videos a un proyecto de Flash debes acceder al Menú Inicio-Importar. Para las imágenes,
seleccionarás la opción Importar a biblioteca y para los videos Importar a escenario. Aún cuando estás importando al
escenario, el video también se integrará a la biblioteca de Flash.
6. Vamos a importar todas las imágenes de nuestro proyecto, para ello da clic en el menú Archivo y selecciona la Opción
Importar y luego Importar a biblioteca.
7. Se abre el cuadro de diálogo de Importar a biblioteca, localiza el archivo de la imagen, selecciónalo con un clic, y después da
clic en el botón Abrir para importarlo a la Biblioteca. Repite esta acción para importar todas las imágenes para el proyecto.
8. Ahora importa el archivo de sonido también a la Biblioteca, de la misma manera.
148
9. Ahora empezaremos a agregar los diferentes objetos o elementos a los fotogramas de la capas (Recuerda que es muy
importante tener un orden en las capas y en la línea del tiempo; cada elemento debe ir en una capa para que no se tengan
dificultades cuando se quiera hacer alguna transformación o animación.
10. Primero pondremos una imagen de fondo. Selecciona el fotograma 1 de la capa Fondo. Abre la biblioteca y selecciona la
imagen Fondo1. Arrástrala con el mouse y colócala en el escenario. Selecciónala con la herramienta Transformar ,
cambia el tamaño para que ocupe todo el lienzo y quede como fondo.
11. Agrega también la imagen imag_publicidad, aplica transformación para modificar su tamaño y rotarla. Colócala en la esquina
superior derecha.
12. Agrega la imagen que creaste en Photoshop para la Agencia de viajes Paraíso. Aplica trasformación para cambiar su tamaño
y colócala bajo el rótulo de Publicidad en la esquina inferior derecha.
149
13. Ahora vamos a poner información con la herramienta de Texto en los fotogramas de la capa Contenido. En el fotograma 2
agrega el texto: ¿Qué es? y colócalo en esquina inferior izquierda, agrega otro cuadro de texto con el párrafo del primer
texto del documento Texto la publicidad (localizado en la carpeta de recursos). Colócalo en la parte superior. Y otro bloque de
texto con el párrafo del segundo texto del documento, colócalo en el lado derecho. Puedes copiar del documento de Word el
texto, después seleccionar en Flash la herramienta de Texto y dar clic en el lienzo para agregar el cuadro e ingresar el texto,
después coloca el cursor dentro del cuadro y Pega la información que copiaste de Word. Selecciona el marco del cuadro de
texto para dar formato a la letra.
150
14. En el fotograma 3, agrega 4 textos: Elementos, Imágenes, Videos, Música. Distribuidos en el lienzo tal como lo muestra la
siguiente imagen.
15. En el fotograma 4 agrega la imagen biothem.jpg y la imagen bonafont.jpg. Y un texto que diga “Las imágenes son
esenciales en la publicidad, cumplen con el objetivo de convencer al comprador de que un objeto o servicio es el mejor”.
151
16. En el fotograma 4 agrega un texto que diga “Los videos son importantes porque los espectadores pueden prestar más
atención a los anuncios publicitarios que los contienen”.
17. En el fotograma 3 también Importa el archivo de video comercial sabritas al escenario. Sigue los mismos pasos, que usaste
para importar las imágenes, solamente que ahora selecciona la opción Importar a escenario.
18. Sigue los pasos del asistente y acepta las opciones que se establecen de manera automática.
19. Ya que está integrado el video de comercial sabritas en la Biblioteca selecciónalo con el mouse y arrástralo al escenario. Ya
que aparece, selecciónalo con la herramienta Trasformación y cambia su tamaño y ubícalo como se observa en la imagen.
152
20. En el fotograma 6 agrega la imagen notamusical, y la imagen imag_publicidad,jpg. Agrega también un texto que diga “La
música es fundamental para la publicidad, por ello se utilizan para los spots televisivos canciones ya famosas para aumentar la
atención del posible consumidor”.
21. En el fotograma 7 de la capa de contenidos, agrega un fotograma en blanco, para que se extienda la vista de los elementos
que están en el fotograma 6.
22. Ahora selecciona la capa de sonido, y en la línea de tiempo selecciona el fotograma 7, para agregar el archivo de sonido.
23. Arrastra de la Biblioteca el archivo de sonido de canción navideña. (Recuerda que debes dar clic sostenido con el Mouse
botón izquierdo, sobre el icono del archivo de sonido y arrastrarlo al escenario.) y colócalo en el escenario. El fotograma 7
mostrará una línea en su interior, eso indica que ya se agregó la música.
153
24. Finalmente, para terminar con los elementos del contenido. Selecciona en la capa de contenido, el fotograma 8, Agrega el
texto Créditos, y ubícalo en la esquina inferior izquierda.
25. En el centro del fotograma escribe un cuadro de texto que contenga: tu Nombre, ESCA Unidad Tepepan, IPN.
Este sería el último fotograma de la línea de tiempo en la capa de Contenidos.
154
26. Guarda tu archivo como Mi_proyecto_integral+tu nombre. Continuaremos trabajando con él, para el ejercicio que sigue.
De esta manera quedan ya organizados los objetos en las distintas capas de nuestro proyecto.
Ejercicio 8. Creación y edición de símbolos e instancias
Vamos a seguir trabajando en el proyecto anterior. Ahora vamos a crear un botón como símbolo. Para después utilizarlo varias
veces en nuestro proyecto como una instancia. Para esto sigue las siguientes
Instrucciones:
1. Dibuja un ovalo pequeño en el fotograma 1 de la capa Botones y aplica el color Azul oscuro. Elimina el contorno. Selecciona
solamente el Borde y presiona tecla Suprimir.
2. Selecciona el ovalo y conviértelo en símbolo de tipo Botón (ya en otro ejercicio habías creado símbolos de tipo gráfico) Debe
observarse el ovalo enmarcado en un contorno de cuadro color azul. Asígnale el nombre de boton1
En Flash, un botón es un elemento con animación que al hacer clic sobre él cambia su apariencia y sirve como un vínculo para ir
a otra parte de la película o a otro archivo.
3. Vamos a darle la animación. Para ello da doble clic sobre el botón y observa que se abre una línea de tiempo propia para el
botón. Esta línea de tiempo está integrada con cuatro secciones.
155
4. La primera sección dice Rep, corresponde a la apariencia que tiene el botón cuando está en reposo. Esta sección ya tiene un
fotograma. Selecciona el fotograma y escribe el texto ¿Qué es? en letra tipo Arial color blanco de 12 puntos. Colócalo en el
centro del botón.
5. La segunda sección dice Sobre, corresponde a la apariencia y acción que realiza el botón a colocar el puntero del Mouse sobre
él. No tiene fotogramas. Agrega un fotograma clave, da clic con el botón derecho sobre esta sección. Selecciona el fotograma
anterior y copia el botón y con la opción Pegar in situ agrégalo al fotograma de esta sección. Esta acción colocará el texto el
botón exactamente en la misma posición en la que estaba al ser copiado. También cambia el color de relleno del botón por un
azul más claro.
6. La tercera sección dice Presi, corresponde a la acción y a la apariencia del botón cuando se dé clic sobre él. Selecciona el
fotograma de la sección Reposo cópialo y con la opción Pegar in situ, en esta sección. Y en ese fotograma selecciona el botón
con la herramienta de Transformar y modifica ligeramente su tamaño haciéndolo un poco más grande.
7. La cuarta sección dice Zona, esta sección se quedara sin modificación.
8. Con esto terminamos de configurar la apariencia del botón. Para salir de la línea de tiempo del botón da clic en el rotulo de la
Escena1 para regresar el área de trabajo normal.
9. Ahora abre la biblioteca, selecciona el botón1 con el botón derecho del Mouse y elije la opción Duplicar, en el cuadro que
aparece solicitando nombre escribe botón2, vuelve a duplicar y escribe el nombre botón3, duplica nuevamente y ahora escribe
el nombre de botón_regresar.
10. Vamos a editar ahora los botones que generaste. Selecciona en el panel de la biblioteca cada uno de los botones (botón2,
botón3, botón_regresar) dando doble clic encima de ellos para entrar a su línea de tiempo para editarlos. Solamente vamos a
cambiar el texto. En el botón2, cambia el texto por el de Elementos, en el botón3, por el de Créditos, y el botón_regresar, por
el texto Regresar. Así, vas a modificar el texto en todas las secciones donde aparece.
11. Ahora selecciona el fotograma 1 en la capa de Contenido, y selecciona en la biblioteca cada uno de los botones (1, 2, 3) y
arrastra para colocar una instancia de ellos en el escenario, colócalos como lo muestra la imagen.
156
12. Ahora selecciona el fotograma 2, y coloca una instancia del botón_regresar. Colócalo en la esquina inferior derecha,
Selecciona el fotograma 4 y realiza la misma acción.
157
13. En el fotograma 3, vamos a colocar otro tipo de botones ya integrados en Flash y localizados en las Bibliotecas comunes. Da
clic en el menú Ventana selecciona la opción Bibliotecas comunes, y da clic en la opción Botones.
158
14. Se abre un cuadro de dialogo que muestra una extensa Galería de Botones ya prediseñados. Seleccionando uno de los
que se muestran y observa que aparece en la biblioteca una vista previa del botón.
15. Vamos a seleccionar la categoría classic butoons, y en las muestras que aparecen seleccionamos el botón arcade button red
y lo arrastramos hacia el panel de la Biblioteca y lo colocamos ahí. Después damos clic en la categoría Circle button, y
seleccionamos el icono circle button-next. Y lo arrastramos igualmente a la biblioteca.
16. De ahí los vamos a tomar para ir colocándolos en los fotogramas que se requiera.
17. Seleccionamos el fotograma 3, y en la Biblioteca localizamos el Botón arcade y lo arrastramos para colocarlo delante
del texto Imágenes. Repite la acción dos veces más para los otros textos: Videos y Música. Observa la siguiente imagen.
159
18. Ahora da clic en el fotograma 7, selecciona en la biblioteca el botón circle button-next y colócalo en la parte superior
del escenario. Repite la acción para agregar dos botones más en la parte inferior del lienzo. Ubícalos como se muestra en la
imagen.
160
19. Con esto hemos terminado de colocar los diferentes tipos de botones que necesitaremos.
20. Guarda los cambios en tu archivo. Lo utilizaremos para el siguiente ejercicio.
Ejercicio 9. Creación de vínculos a partir de botones a clips de películas y páginas Web
Para la realización de esta actividad necesitarás el proyecto de Flash que has trabajado en los ejercicios anteriores.
Una película de Flash puede tener una serie de acciones que van a direccionar hacia otro sitio de la película. Así, con Flash se
pueden añadir acciones que permitirán, entre otras cosas, pasar automáticamente de un fotograma a otro, o abrir otros archivos o
sitios Web, esto es dotar de interactividad a la película.
Flash proporciona muchas acciones predefinidas que se podrán insertar fácilmente en la película a través de un panel específico,
el panel de Acciones. Muchas se podrán ejecutar automáticamente y otras necesitarán de la actividad del usuario, para, por
ejemplo, dar clic en un botón y que suceda algo.
En este ejercicio vamos a trabajar con el panel de Acciones, el cual permite agregar control e interactividad a las películas. Para
ello vamos a trabajar con el archivo que hemos estado desarrollando a lo largo de los otros ejercicios.
Las Acciones
Son una especie de órdenes que Flash ejecutará cuando el cabezal de reproducción de la línea de tiempo llegue a ellas. Cada tipo
de acción obligará al programa a realizar algo en concreto, por ejemplo pasar de un fotograma a otro, detener la reproducción de
un clip, reproducir un video, acceder a un sitio web, detener un sonido, etc.
Todas esas acciones están escritas en un lenguaje de programación específico y aparecen automáticamente en el panel de
acciones, en forma de scripts cuando son llamados.
161
Las acciones se pueden colocar en los fotogramas clave y en los objetos, que pueden ser botones, o instancias de clips de
película.
Las acciones ubicadas en fotogramas clave se ejecutarán cuando el cabezal de la línea del tiempo pase por ellos.
Las acciones ubicadas en botones, requerirán la actividad del usuario para que se ejecuten, es decir, se deberá pasar el cursor
por encima o hacer clic en el botón para que suceda algo.
Las acciones ubicadas en clips de películas se ejecutarán cuando se cargue el clip o cuando se ejecute el fotograma.
Cuando un fotograma contenga una o más acciones definidas, mostrará una pequeña “a” en su interior. Solamente es posible
añadir acciones a los fotogramas clave. Si se intenta añadir una acción en un fotograma intermedio del tipo que sea, la acción se
ubicará automáticamente en el primer fotograma clave que haya a la izquierda.
Vamos a empezar a integrar las acciones a los objetos de la película que hemos trabajado. Para lo cual sigue las siguientes
Instrucciones:
Abre el archivo de la Película de Flash Mi_Proyecto_integral+tu nombre.
1. Se darán primero acciones a los tres botones que aparecen en el Fotograma 1 de la capa de contenido.
162
2. Selecciona el primer Botón ¿Qué es? Después da clic en la barra que aparece en la línea del tiempo, en la pestaña que
dice Acciones.
Se abrirá el panel de las acciones del botón. Integrado por dos secciones. El panel izquierdo en el que se muestran todas las
acciones ya predefinidas para seleccionar y agregar. Y un panel derecho vacio en el que se van a ir agregando el código Script
para las acciones que se vayan seleccionando.
163
3. En la barra superior del panel izquierdo vamos a asegurarnos que se muestre el código de ActionScript 1.0 & 2.0. Después
daremos clic en la categoría de Funciones globales para desplegar el menú y seleccionaremos la opción de Control de
película.
4. De las acciones que aparecen daremos doble clic en la opción On y en el panel de la derecha aparecerá automáticamente la
expresión de script correspondiente a la acción que hemos seleccionado.
5. Aparecerá a la vez un menú con varias opciones, seleccionaremos release, la cual se agregará dentro del paréntesis de la
acción anterior.
6. Ubicaremos el cursor detrás del carácter de llave “ { “ que aparece después del paréntesis y en el panel de acciones damos
clic en la opción Control de la película, para seleccionar las opción gotoAndPlay, la cual se agrega al script en el panel
derecho acompañada de un paréntesis.
7. En medio del paréntesis escribiremos el número (2), que corresponde al fotograma que deseamos que se active.
Cada acción que se agregue al script, aparecerá separada por un punto y coma.
8. Después del punto y coma, ahora agregaremos la acción gotoAndStop , colocando igualmente dentro del paréntesis el
número (2). Se termina el script con un carácter de llave “ } ” al final , el cual se agregó también automáticamente.
Con esto hemos asignado ya las acciones a nuestro primer botón.
164
9. Esta línea de script que se creó para el primer botón, la vamos a seleccionar y copiar con el botón derecho, para pegarla en
las acciones de los demás botones y solamente modificaremos el fotograma al que se debe de dirigir.
10. Ahora seleccionamos el segundo botón que dice Elementos, en la línea del tiempo damos clic nuevamente en la pestaña de
Acciones, y el panel de acciones del botón que se abre, pegamos en el lado derecho el script que copiamos del botón anterior.
Solamente modificamos el número de fotograma dentro de los dos paréntesis, lo cambiamos a (3).
165
11. Realizamos la misma acción con el botón de Créditos, ahora cambiamos el número de fotograma por el (8), en ambos
paréntesis.
Terminamos con los botones de este fotograma.
12. Ahora, seleccionamos el fotograma 2, y damos clic en botón de Regresar que colocamos .
13. En la línea del tiempo seleccionamos la pestaña de Acciones y en él área de edición pegamos nuevamente el script que
habíamos copiado. Nuevamente modificamos el número que está en el paréntesis por el número (1) para que la acción
regrese a ese fotograma. En ambas acciones.
166
14. Ahora en el fotograma 3, seleccionamos el primer botón correspondiente al texto Imágenes, abrimos el panel de
acciones y volvemos a pegar el script, en este botón vamos a direccionar la acción hacia el fotograma 4, por lo que
sustituimos el número en el paréntesis por el (4). En ambas acciones.
15. Repetimos los paso ahora para el botón correspondiente a Videos, y cambiamos el número dentro del paréntesis por el (5), en
ambas acciones.
167
16. Y lo mismo para el botón correspondiente a Música, sustituyendo ahora el número del fotograma por el (6) en los paréntesis
168
17. Vamos a dar clic otra vez en el fotograma 2, seleccionamos el botón de regresar , lo copiamos y lo pegamos
en el Fotograma 3, dando clic en lienzo con botón derecho y seleccionamos la opción Pegar in situ, esta acción pegará el
botón exactamente en el mismo lugar que ocupa en el fotograma 2. Y tendrá las mismas acciones que el botón del cual se
copio, es decir regresará al fotograma 1.
Con esto hemos terminado con los botones del fotograma 3.
18. Ahora vamos a seleccionar el fotograma 4 en la línea del tiempo. En las acciones volvemos a copiar y a pegar el primer
script que desarrollamos para el botón-regresar y sustituimos el número del fotograma del paréntesis por el número (3), Es
decir que al dar clic en este Botón se regresará al fotograma 3.
19. Después de aplicar las acciones a este botón, lo seleccionamos con el botón derecho, lo copiamos.
20. En el fotograma 5 damos clic botón derecho, seleccionamos la opción Pegar in situ, para pegar el botón_regresar . Con esto
se tendrá un botón que va a regresar la acción al fotograma 3.
169
Ahora toco el turno de aplicar las acciones a los botones del fotograma 6.
21. Selecciona el fotograma 6 y da clic en el botón que nos llevará a ver un video, abre el panel de las acciones del
botón en la línea del tiempo. Y en el panel izquierdo selecciona con doble clic la opción On, después selecciona release,
también con doble clic.
22. Sitúa el cursor entre el carácter de llaves que se muestran enseguida de la acción. Después, como este botón activará un
vínculo para ir a un sitio web, en el panel de acciones vamos a seleccionar la opción Navegador/Red y de las opciones que
se despliegan seleccionamos con doble clic getURL. Aparecerá la acción acompañada por dos paréntesis.
23. Da clic dentro de los paréntesis y copia la dirección que esta enseguida, debe de ir entre comillas, y pégala dentro de los
paréntesis.
http://profesorhidalgo.blogspot.com/2010/11/texto-inicial-texto-secundario-el.html
170
El script completo debe quedar de la siguiente manera:
On (release) {getURL("http://profesorhidalgo.blogspot.com/2010/11/texto-inicial-texto-secundario-el.html" );}
24. Ahora selecciona el primer botón localizado en la parte inferior del lienzo en el fotograma 7, el cual llevará a oir una
melodía musical.
25. Abre el panel de las acciones del botón en la línea del tiempo. Y en el panel izquierdo selecciona con doble clic la opción On,
después selecciona release, también con doble clic. Coloca el cursor después del símbolo de la llave y agrega la acción
gotoAndPlay , escribe dentro del paréntesis el número (7), después del punto y coma agrega la acción gotoAndStop escribe
dentro del paréntesis el numero (7).
171
26. Ahora selecciona el segundo botón que permitirá parar la música. Realiza el mismo procedimiento que en el anterior. Pero
agrega la acción stopAllSounds () antes del gotoAnd Play. Deja en blanco el paréntesis. Esta acción detiene los sonidos
que se estén ejecutando en la película.
172
27. Para terminar con los botones de este fotograma, copia el botón Regresar del fotograma 4, y pégalo con la
opción Pegar in situ en el fotograma 7. (Recuerda que esta opción está disponible en el menú contextual del botón derecho).
28. Selecciona el botón y abre el panel de acciones, para agregar la acción stopAllSounds (), antes de la de gotoAndPlay. Al
igual que se agregó en el botón para detener la música. Observa la siguiente imagen.
173
29. Para finalizar con los botones, selecciona el fotograma 2. De la capa de contenido y copia del botón Regresar
Ahora selecciona el fotograma 8 y pega el botón que copiaste, utiliza la opción Pegar in situ del botón derecho del Mouse.
Este botón permitirá regresar al fotograma 1.
30. Por último es importante poner una acción que detenga el avance automático, del cabezal de la línea del tiempo, de un
fotograma a otro; para que se pueda avanzar solo por medio de los botones que se crearon. Para ello selecciona el fotograma
1 de la capa de Acciones.
174
31. Después da clic en la pestaña de acciones, con lo cual se abrirá el panel de acciones del fotograma.
En el panel de acciones selecciona la opción Control de la línea del tiempo, y de las acciones que se muestran selecciona de la
stop, deja los paréntesis que se agregan en el script, en blanco.
Guarda los cambios en tu proyecto. Esta actividad tiene vigencia de entrega durante la sexta semana. Podrás enviarlo al “Buzón
de tareas”.
175
Ejercicio 10. Formato de un archivo para página web o DVD
En este ejercicio se trabajará con las opciones que tiene Flash para convertir los proyectos desarrollados, en películas
que se puedan visualizar en otros tipos de dispositivos como por ejemplo DVD o Internet.
El propósito es que aprendas a publicar una película de Flash como archivo SWF independiente, así como configurar las
opciones de publicación.
Una película creada con Flash puede ser distribuida a otras personas para que la puedan visualizar en diferentes dispositivos.
Para esto es necesario tener presente dos condiciones: que la película de Flash se convierta a un archivo SWF y que las
personas que la van a visualizar tengan instalado en su computadora el Reproductor de Flash.
Flash cuenta con varias opciones y funciones para la creación de un archivo SWF. Estas opciones se localizan en el panel de
Configuración de Publicación, al cual se puede acceder por medio del menú Archivo-Configuración de Publicación y luego dar
clic en la pestaña Flash.
Ejercicio A
Configuración del formato de una película de Flash para su colocación en un DVD
Instrucciones:
1. Abre tu proyecto el archivo Mi_proyecto_integral de Flash.

2. Abre la biblioteca del documento mediante Ventana- Biblioteca, para que en el panel se muestren todos los archivos que
integran el proyecto.
3. Da clic en el menú Archivo y selecciona la opción Configuración de publicación para abrir el cuadro de diálogo de
Configuración de Publicación.
4. Da clic en la pestaña Formatos y desactiva la casilla HTML, porque no se va a utilizar ahora la película vía web.
176
5. Da clic en la pestaña Flash.
6. En la barra deslizante Calidad JPEG ponemos el valor 50 para reducir la calidad.
7. Vamos a protegerlo para que nadie lo pueda importar. Marcamos la casilla de verificación Proteger frente a Importación e
introducimos en el campo Contraseña la palabra de paso que deseemos, en este caso escribe tu primer apellido.
8. Da clic en el botón Publicar.
177
9. Accede a la carpeta (de tus prácticas) en donde se ha exportado el archivo SWF y ejecútalo.
10. Abrimos ahora el menú Archivo→ Importar y seleccionamos el archivo que acabamos de publicar.
11. Se abre el cuadro que nos pide la clave para poder hacerlo.
Ahora tenemos una película que no se podrá importar sin la clave y cuyo espacio en memoria será menor debido al menor
tamaño de sus bitmaps.
Ejercicio B.
Configuración del formato de una película de Flash para su uso en una página Web.
Este tipo de configuración es muy importante también ya que la mayoría de películas de Flash se crean con la intención de ser
utilizadas o publicadas en páginas Web.
Para publicar una película Flash en Internet, de manera que forme parte de una página web, se debe de insertar en un archivo
típico de páginas web cuyo lenguaje de programación sea del estilo del HTML. Para ello se debe de atender a las opciones de
publicación HTML que ofrece Flash, y que ayudarán a que la película se visualice como realmente se quiere.
En este mismo ejercicio revisaras las opciones disponibles en Flash para publicar una película que pueda usarse en una página
web.
178
Instrucciones:
1. Para acceder a las opciones de este tipo de publicación vamos a dar clic en el Menú Archivo-Configuración de Publicación,
y luego seleccionamos la pestaña HTML.
2. Da clic en la ficha Formato, y activa la casilla de verificación correspondiente a HTML.
3. Aparece la pestaña HTML. Da clic en ella. Para observar los parámetros que se pueden configurar.
179
4. Observa que el cuadro de diálogo presenta las siguientes opciones para configurar:
Plantilla: Para incrustar una película Flash en un documento HTML, hay que escribir una serie de códigos de programa algo
complejos y laboriosos de hacer a mano.
Para facilitarnos esta tarea Flash hace esto automáticamente pero, puesto que cada web es distinta y nuestras necesidades van
a ser muy distintas, los códigos también serán muchos y distintos, por esto Flash incluye Plantillas, que crean este código
automáticamente según el tipo de publicación que deseemos:
En el botón Información ubicado a la derecha de la pestaña "Plantilla" se muestra información muy útil sobre cada tipo de
plantilla. A continuación se describen las plantillas más comunes:
 Sólo Flash: Es la opción predeterminada y utiliza el reproductor Flash CS4.

 Flash con FSCommand: Es la opción adecuada cuando se usen FSCommands. Permiten controlar el reproductor desde la
película.
 Mapa de Imágenes: Si se ha incluido una Image Map (imágenes completas que ejecutan distintas acciones según la
coordenada que se pulse) se debe de activar esta opción.
 QuickTime: Esta opción permite incluir una película QuickTime.
Detectar Versión de Flash: Esta opción se puede seleccionar si se quiere que la película detecte la existencia o no existencia
del plugin de Flash en la computadora del usuario, así como las páginas web donde se insertará el código encargado de
comprobarlo y las páginas web a las que se irá en caso de disponer del Plugin o no disponer de él.
Dimensiones: Especifica la unidad de medida en la que se establecerán las dimensiones del Documento:
 Anchura X Altura: Aquí introduciremos la anchura y altura, teniendo en cuenta que a veces un objeto más grande que
estas dimensiones provocará un cambio en éstas.
Reproducción: Permite realizar determinados cambios en cuanto a la reproducción de la película:
180
 Pausa al Comienzo: Permite que sea el usuario quien haga que se inicie la reproducción, que inicialmente aparecerá
detenida.
 Reproducción Indefinida: Cuando la película termine, volverá a empezar desde el principio. Esto lo hará infinitamente.
 Visualizar Menú: Permite que al hacer el usuario clic con el botón derecho del ratón sobre la película, el menú emergente
tenga todas las opciones por defecto. Si la desactivamos sólo aparecerá la opción "Acerca de Flash".
 Fuentes de Dispositivo: Sustituye las fuentes utilizadas en los textos sin animación de la película por las fuentes
predeterminadas en la computadora usada para la visualización.
Calidad: Aquí podemos modificar la calidad de visualización de la película, que depende del suavizado de la imagen y el
tiempo de reproducción. Las opciones son:
 Baja No hay suavizado. El tiempo de reproducción es el de máxima velocidad.

 Baja Automática: El reproductor detecta si la máquina soporta en cada instante un ligero suavizado, si lo soporta, lo
aplica. El tiempo sigue siendo muy rápido.
 Alta Automática: Pone al mismo nivel el tiempo y el suavizado, pero si hay alguna limitación, siempre dará preferencia a
la velocidad.
 Media: Valores intermedios de velocidad y suavizado. No suaviza los bitmaps.
 Alta: Usa siempre el suavizado, los mapas de bits se suavizan sólo si no hay animación. Da preferencia a la buena
visualización.
 Óptima: Se suaviza todo, incluidos los mapas de bits en cualquier caso. Total preferencia de la apariencia frente a la
velocidad.
Modo de Ventana: Opciones para la reproducción dentro de las ventanas de Windows:
 Ventana: Se reproduce la película en la ventana de la web en la que está insertada.

 Opaco sin Ventanas: Hace que los objetos situados en capas situadas detrás de la película no se vean (en páginas
DHTML).
 Transparente sin Ventanas: Es el opuesto al anterior. Permite que los objetos situados detrás se vean.
Alineación HTML: Corresponde a la posición relativa de la película dentro de la página web HTML. Se dispone de varias
opciones:
181
 Predeterminada: Centra la película en la página. Si no cabe se cortan los extremos.
 Izquierda: Alineación a la izquierda. También se recortan los bordes si no cabe.
 Derecha: Alineación a la derecha.
 Superior: Alineación en el borde superior de la página.
 Inferior: Alineación en el borde inferior de la página.
Escala: Si se ha especificado el tamaño en píxeles o en porcentaje, se puede indicar a Flash cómo distribuir la película en el
área que se ha decidido para que la contenga:
 Predeterminada: Se ve toda la película guardando las proporciones originales.

 Sin Borde: Recorta (en caso de que la película sea más grande que el área) todo lo que sobre con el fin de mantener las
proporciones.
 Ajuste Exacto: Distorsiona las proporciones si es necesario para conseguir que la película ocupe el área completa.
Alineación Flash: Esta opción es necesaria para alinear la película cuando ésta no tiene las mismas dimensiones que el área
definida. Las opciones son:
 Alineación Horizontal: Se puede escoger seleccionar entre tres opciones: Centro, Izquierda o Derecha.
 Alineación Vertical: Se puede seleccionar también tres opciones: Centro, Superior o Inferior.
Mostrar Mensajes de advertencia: Permite que se muestren los posibles mensajes de error de código ActionScript.
5. Una vez que hayas terminado de revisar este cuadro de Configuración, deja las opciones con los parámetros que tiene por
default. Da clic en publicar y Acepta para que se realice la publicación y cerrar el cuadro.
6. Localiza el archivo que se genero, ejecútalo dando doble clic sobre él, para visualizar la película.
7. Guarda tu proyecto final en Flash y las dos películas que se generaron a tu portafolio de evidencias.
182

Cuaderno de Trabajo

Cargado por

Copyright:

Formatos disponibles

Cuaderno de Trabajo

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Cuaderno de Trabajo

Cargado por

Copyright:

Formatos disponibles

Cuaderno de trabajo

Unidad de Aprendizaje Aplicaciones de

Unidad l. Creación y edición de imágenes usando Photoshop

Unidad lI. Creación y edición de videos usando Premiere

Realiza tu primera práctica con Photoshop revisando y configurando el área de trabajo.

1. Abre Photoshop y observa que…

De clic en este menú para observar lo que se mencionó:

Todos los paneles pueden modificar su tamaño o moverse a otro lugar.

La ventana de Photoshop debe mostrarse como la siguiente imagen:

Finalmente tu espacio de trabajo debe observase como en la siguiente imagen.

 Para esta actividad revisa el tema de Uso del panel de Herramientas

Las dimensiones de la imagen, el modo de color, la resolución, etc.

Para iniciar la creación de tu primer dibujo, realiza lo siguiente:

1. Selecciona el menú Archivo y después la opción Nuevo.

Algunas resoluciones típicas son las siguientes:

El panel alargado El botón de algunas de herramientas tiene un pequeño triángulo en la

se puede ver en derecho), se desplegará la lista de herramientas que pertenecen al grupo.

Como se puede observar dentro del grupo de herramientas de dibujo se localiza

Al seleccionar una herramienta lápiz o Pincel o alguna otra, en la barra de aplicaciones

Al concluir tu dibujo lo vas a guardar de dos formas:

Al terminar, guarda el documento:

1. Menú Archivo - Guardar como

o Menú Archivo-guardar como

o Seleccionar en la opción de formato el tipo de JPEG

Ejercicio 3. Creación de pinceles y motivos

La primera actividad a realizar es crear un pincel partir de un texto con tu nombre.

Para hacer un pincel personalizado con tu nombre, realiza lo siguiente:

4. En el menú Edición selecciona la opción Definir valor de pincel

5. En el cuadro que aparece escribe un nombre para el pincel; con tu nombre.

6. Haz clic en Aceptar.

Ejercicio 4. Aplicación de color a imágenes y Figuras

Abre el archivo Muñeca.psd que se encuentra dentro de la carpeta de “Recursos”.

En el panel de herramientas Cambia el Color de frontal (Foreground color) a café.

11. Quita cualquier selección y ahora cambia el Color de frente a amarillo.

 Pincel (Brush): 65 px.

 Brocha (Brush): 59 px. t

Pinta con la brocha sobre las rayas del pastel.

Ejercicio 5. Retoque de imágenes

4. En la paleta de la barra de Aplicación de la herramienta establece los siguientes parámetros:

 Tamaño del pincel (Brush): 12 px.

7. Guarda tu archivo de trabajo con tu nombre y guarda la imagen como calle2_tunombre_jpeg

9. Para esto seleccionas Menú Archivo - Guardar como.

13. Al terminar, guarda el documento:

14. Para esto seleccionas Menú Archivo - Guardar como

Ejercicio 6. Creación de imágenes a partir de capas

Archivos requeridos: botella.jpeg, etiqueta.jpeg que se encuentran dentro de la carpeta de “Recursos”.

Al terminar, guarda el documento:

Para esto seleccionas Menú Archivo - Guardar como

6. Usa la herramienta de zoom para acercar el área de los ojos.

7. Crea una nueva capa y ponerle el nombre de Color de ojos.

13. Da clic en el séptimo icono de la barra de herramienta y selecciona Pincel corrector.

18. Primero crea una capa nueva y asígnale el nombre de pelo

Antes. Imagen sin editar. Después. Imagen editada.

Para esto seleccionas Menú Archivo - Guardar como

Ejercicio 8. Organización de las capas y trabajo con capas

que se vea el elemento seleccionado en panel capas.

y la horizontal. . Las capas de Marco y foto quedan asá alineadas.

Para esto seleccionas Menú Archivo - Guardar como

Ejercicio 9. Creación y animación de textos