GUA DIDCTICA PARA DISEAR PORTAFOLIOS

DIGITALES

PRESENTADA POR:

ISABEL ALEJANDRA FLORES SNCHEZ

JORGE ALBERTO MERINO MURCIA
ANNA WALTER PORRAS

Gua realizada en el marco de Proceso de Graduacin de los autores,

Escuela de Artes, Universidad de El Salvador

DE EL
AD
SID

SA
LVAD
UNIVER

OR
CE

TR
IC

O AMER
N
GUA PARA LA CREACIN DE PORTAFOLIOS DIGITALES
 INDICE
GUA PARA LA CREACIN DE PORTAFOLIOS DIGITALES

Crditos 6
Introduccin i

BRIEFING Y
ORGANIGRAMA

Briefing 10
Organigrama 11
Sugerencias 11

FUNDAMENTOS
DEL DISEO:
CONCEPTUALIZACIN
Concepto creativo 13
Muestra de proyectos 13
Cuestiones tcnicas 14
Presentacin 15

Abrir software [Swish Max 2008] 17

DESARROLLO DEL Configuracin de la mesa de trabajo 17
PORTAFOLIO DIGITAL Velocidad de fotogramas 18
Activar propiedad detener 18
Fondo de la pelcula 18
Panel guas 18
Preparacin de contenidos 21
Tareas 23
Crear textos 24
Interaccin entre escenas 27
Otro tipo de interactividad 31
Animacin de objetos 32
Galera de imgenes 35
Construccin de la galera de imgenes 38
El pre cargador de contenido 47
Glosario 52
Tabla resumen de software adicional 56
CRDITOS
GUA PARA LA CREACIN DE PORTAFOLIOS DIGITALES

Realizada en el marco de proceso de grado:

Gua para la elaboracin de portafolios digitales.

Escuela de Artes
Facultad de Ciencias y Humanidades
Universidad de El Salvador

Elaborado por :

Alejandra Flores
Anna Walter
Jorge Merino

Bajo la asesora de:

Lic. Xenia Prez

Febrero, 2010
 GUA PARA LA CREACIN DE PORTAFOLIOS DIGITALES

INTRODUCCIN.

El diseo grfico es una profesin construida al principio de los tiempos

modernos. Por ende su reciente surgimiento desemboca en un acelerado
progreso. Por otro lado, la tecnologa dictamina el quehacer del diseador
grfico, ya que por ello se desarrollan nuevos campos y medios de comu-
nicacin (como sucedi con el nacimiento de la televisin, la computa-
cin y el Internet), crendose nuevos fundamentos y software especficos.
Uno de los medios ms novedosos son los medios digitales, que surgen
como una manera de entretenimiento y abarcan diferentes canales de co-
municacin.

Tambin la tecnologa ha incidido en el aumento del mercado del diseo

grfico y la expansin de las agencias publicitarias a nivel mundial, refle-
jndose en un mundo de exigencias y competencia. Para poder empe-
zar a brindar sus servicios, el diseador grfico debe presentarse de una
manera interesante, como un distintivo claro de lo que puede percibirse
dentro del mercado profesional. La herramienta estndar, efectiva y prc-
tica de iniciarse y crecer como profesional de diseo y otros mbitos, es el
portafolio. Por su medio se proyectan el nivel y la calidad de trabajo.

Este proyecto se realiz en el marco del proceso de grado: Gua didctica

para la elaboracin de portafolios digitales. El objetivo de esta gua es que
funja como recurso didctico para que los estudiantes, previo al egreso de
la carrera, tengan el conocimiento ideal para realizar un portafolio efectivo
y funcional de acuerdo a los parmetros de los mercados pertinentes.

i
 GUA PARA LA CREACIN DE PORTAFOLIOS DIGITALES
CONCEPTO DEL PORTAFOLIO
DIGITAL.
El portafolio es una herramienta de
recopilacin de trabajos/proyectos
que facilita informacin de desarro-
llo, aportaciones y logros alcanza-
dos a lo largo de una carrera aca-
dmica o profesional, definiendo el
rea o las reas en las que se es-
pecializa. A la vez, muestra las ca-
pacidades, conocimientos, lnea de
trabajo, enfoque, estilo, entre otros,
de la persona.
CARACTERSTICAS DEL
PORTAFOLIO DIGITAL
Presenta informacin real
de un estudiante o profesional y
cubre diferentes campos laborales:
arquitectura; fotografa; diseo gr-
fico, multimedia, ambiental, in-
dustrial y artesanal; artes plsticas,
como: pintura, escultura, dibujo y
cermica.
La utilidad del portafolio se
refleja en su fcil y gil accesibili-
dad.
Ya que cada portafolio re-
quiere de un diferenciador concep-
tual y visual, su diseo debe ser
nico, creativo e innovador para
9
distinguirse de otros en el campo
competitivo.
Puede ser presentado en
diferentes formatos , tanto tradi-
cionales (carpetas), que se refiere
a los impresos; y digitales o elec-
trnicos: archivo PDF, presentacin
de CD, demo reel en DVD, y sitios
web.
FUNCIN DEL PORTAFOLIO
DIGITAL
El portafolio se utiliza como
una va de comunicacin y exposi-
cin prctica, efectiva y porttil en-
tre su autor y los receptores intere-
sados.
Presenta una variada mues-
tra acadmica y/o laboral, con una
secuencia organizada y breve des-
cripcin, como un paquete grfico
unificado, sin dejar de mantener
un enfoque unitario en la presenta-
cin.
Proporcion la informacin
necesaria para los diferentes entes
segn su propsito: docentes, po-
tenciales empleadores, institucio-
nes educativas, asesores, profesio-
nales, galeras, entre otros.
BRIEFING - ORGANIGRAMA

Es una herramienta eficaz efectiva. Por ende, el briefing sir-

para presentar junto con la solicitud ve tanto para definir y establecer,
de admisin a un curso de postgra- como para delimitar.
do, una beca, un concurso, una en-
trevista de trabajo o un cliente po-
tencial.

Con el resultado se puede

evaluar o autoevaluar de manera
objetiva los puntos fuertes y logros
alcanzados.

1. BRIEFING ORGANIGRAMA.
[Primera etapa]

BRIEFING

El briefing tambin es denominado

programa de diseo. Es un docu-
mento escrito que recoge toda la
informacin necesaria para que se
pueda desarrollar correctamente
un proyecto de diseo. Proporciona
informacin sustancial de una em-
presa o marca sobre las que los del
departamento de publicidad deben
elaborar una campaa concreta.

Todo el tiempo que se dedique a

redactar el contenido del briefing,
de la forma ms detallada posible,
debe considerarse de gran utilidad, 1.1 Esquema realizado por el
puesto que ahorrar tiempo en el grupo de investigacin
desarrollo del proyecto y fomenta-
r una creatividad bien orientada y

10

ORGANIGRAMA
Un organigrama es la representa-
cin grfica de una estructura en
donde se pone de manifiesto la re-
lacin formal existente entre las di-
versas unidades que lo integran. En
este punto no se debe tratar de ha-
cer guiones, animaciones, videos ni
nada por el estilo.
Esta tarea comprende simplemen-
te organizar el sistema de vnculos
que tendr el portafolio multimedia
final. Por lo tanto se debe estable-
cer qu elementos contendr cada
una de las pantallas del mismo para
luego decidir cmo se tendr acce-
so a los mismos.
11
BRIEFING - ORGANIGRAMA
Es una herramienta eficaz para
presentar junto con la solicitud de
admisin a un curso de postgrado,
una beca, un concurso, una entre-
vista de trabajo o un cliente poten-
cial.
SUGERENCIAS
Las casillas por lo general
se construyen con forma rectan-
gular, para conservar el orden y la
distribucin de los elementos no d
lugar a confusiones posteriores.
Las lneas o conectores de-
ben ser claras y no mezclarse entre
si.
BRIEFING - ORGANIGRAMA

Cuando una pantalla

contiene vnculos, en el organigrama,
la primera debe resaltarse, de
manera que se entienda que es la
principal.

Si se construye un organi-
grama con demasiada informacin
o con abreviaturas, es importante
indicar al pie del organigrama el
significado de cada uno de los ele-
mentos.

Se debe tener en cuenta que

ningn organigrama tiene carcter
definitivo, ya que estos sirven para
analizar la estructura del portafolio,
corregir errores y poder actualizarlo
peridicamente.

12
 FUNDAMENTOS DEL DISEO - CONCEPTUALIZACIN
2. FUNDAMENTOS DEL DISEO
CONCEPTUALIZACIN.
[Basado en taller + ejemplos]
A continuacin se exponen varios
puntos de cuatro temas importan-
tes: concepto creativo, muestra,
cuestiones tcnicas y presenta-
cin.
Es necesario aclarar que lo expues-
to a continuacin no son reglas,
ms bien principios que se deben
tomar en cuenta dependiendo de la
intencin y concepto del diseo del
portafolio.
CONCEPTO CREATIVO
Es necesario que la calidad del con-
cepto y de la imagen del portafo-
lio sean congruentes con la de la
muestra acadmica y/o laboral. El
diseo del portafolio debe visuali-
zarse como parte de la carpeta de
trabajos. De esta manera una no
debe superar a la otra.
Los grficos del portafolio no de-
ben ser decorativos, sino que de-
ben respaldar el concepto medular
del portafolio. El tema debe aterri-
zar en algo concreto. Generalmen-
te las formas orgnicas resultan ser
grficos sin ningn fundamento
conceptual.
13
Con esta perspectiva se puede po-
ner en evidencia la diferencia entre
un diseador ornamental y un co-
municador.
Es conveniente que el concepto re-
salte sobre la tendencia global tan-
to de los portafolios como del flujo
grfico que se manifiesta en la pu-
blicidad.
El diseador puede optar entre un
concepto sobre su persona o sobre
su profesin. Generalmente en el
rubro publicitario los componentes
personales no interesan. Pero en
el mbito cultural y artstico estos
componentes obtienen protagonis-
mo.
MUESTRA DE PROYECTOS
La recopilacin de proyectos de-
pende del rea de trabajo al que
el diseador est aplicando. Por
ejemplo, para aplicar a una agencia
es pertinente incluir diseos publi-
citarios, diseo editorial, fotografa
y trabajo en el que se denote di-
reccin de arte. Debe ser diferente
al aplicar a una empresa editorial,
en ese caso sera necesario mos-
trar diseos editoriales, fotografa
e ilustraciones. Incluso, cuando el
autor del portafolio tiene un estilo
 DESARROLLO DEL PORTAFOLIO DIGITAL
determinado, puede insistir en ste
a lo largo del portafolio. Siempre y
cuando haya un mercado necesita-
do del rubro y del estilo mostrado
en los trabajos del portafolio, con
una buena distribucin de ste, el
diseador o artista cuenta con una
forma efectiva de posicionarse en-
tre la competencia.
Se puede montar un portafolio ver-
stil, pero ms importante es mos-
trar trabajos singulares.
La muestra debe denotar la capa-
cidad de sntesis que tiene el di-
seador. De la misma manera, no
debe ser muy largo, ni repetitivo.
No existe un parmetro para defi-
nir un orden estratgico de muestra
de trabajos. Es factible ubicar los
mejores trabajos al principio o se
pueden intercalar los excepciona-
les con los regulares. Esta decisin
debe depender del tiempo que tie-
ne el receptor del portafolio.
Es importante reflejar uniformidad
en la calidad de los trabajos de la
galera. No es necesario que refle-
je un alto nivel de creatividad, sino
que sea agradable, que demuestre
una buena direccin de fotografa
y arte, buen manejo tipogrfico, de
forma y color, y una buena selec-
cin de materiales.
14
En cada uno de los proyectos es
importante especificar qu cargo se
tuvo. En el caso de tener clientes,
resultara convenientes enlistarlos
o incluirlos en las fichas de los pro-
yectos.
Todo el trabajo que se incluya debe
ser propio, en ningn caso se debe
recurrir al plagio.
Es vlido, y a veces de mucha ven-
taja, poner trabajo experimental
o personal, a parte del acadmi-
co y/o profesional. El proceso se
puede mostrar a manera de ideas
puramente lingstica, esquema o
bocetos.
CUESTIONES TCNICAS
El portafolio debe estar apto para
verse en Windows, Linux y Mac, de
la misma manera, la tipografa no
se debe deformar al no tenerla
instalada en la computadora.
La galera debe ser de fcil navega-
bilidad. Otras especificaciones im-
portantes son que incluyan el botn
de cerrar ventana y la opcin de si-
lenciar la msica, en el caso de que
se presente el portafolio con audio.
 DESARROLLO DEL PORTAFOLIO DIGITAL

Si se utiliza imagen grfica, las ani-

maciones deben ser cortas y no
muy exageradas. De lo contrario,
es conveniente darle la opcin al
usuario de saltarse directamente al
men principal, a travs de un bo-
tn de skip intro.

PRESENTACIN

El disco compacto debe ir bien presen-

tado en un empaque funcional.

El currculum no debe ir dentro de la

presentacin del portafolio. Puede ir im-
preso y anexado al disco compacto de
la presentacin del portafolio o puede
estar como archivo digital al lado del ar-
chivo de la presentacin del portafolio.
De haber una entrevista, se debe
mostrar una actitud autntica, y se
debe tener en mente, que lo que
buscan para los puestos laborales,
a parte de habilidad y creatividad,
es capacidad para trabajar en equi-
po. Esto se denota a travs del len-
guaje corporal.

15
 DESARROLLO DEL PORTAFOLIO DIGITAL
3. DESARROLLO DEL
PORTAFOLIO DIGITAL.
[Swish Max 2008]
A continuacin encontrars paso a
paso cmo realizar tu portafolio di-
gital a travs del programa operati-
vo Swish Max.
Dicho programa tiene como funcio-
nes especiales la creacin de am-
bientes interactivos a travs de ani-
maciones y vinculacin de objetos.
16
Posee la facilidad de utilizar cdigo
- panel GUIN - valindose de
Java Script y Script de Swish, que
es muy similar en sintaxis al Action
Script de Flash. Adems permite el
dibujo vectorial con algunas limi-
tantes, por lo que es recomendable
utilizar otros programas para crear
elementos grficos y luego impor-
tarlos a Swish Max.
Las operaciones que veremos son
bsicas, por lo que se sugiere ex-
tender la investigacin y practicar en
 DESARROLLO DEL PORTAFOLIO DIGITAL

el entorno del software para tareas CONFIGURACIN DE LA MESA

ms complicadas. Hay diferentes
accesos para tareas similares den-
tro de Swish Max. Las operaciones
pueden ser realizadas desde donde
se sientan ms cmodos, tenien-
do como resultado exactamente lo
mismo.
ABRIR SOFTWARE
[Swish Max 2008]
El software genera un documento
estndar al abrirlo. Las propieda-
des deben ser configuradas por el
usuario, adaptando as las caracte-
rsticas del portafolio digital hacia lo
que se pretende lograr al finalizar.
Se debe tener en cuenta el tipo de
reproduccin que se har, el equipo
que se usar y si habr una tecno-
loga auxiliar al realizar esta tarea.
DE TRABAJO
EN PANEL PELCULA
Tamao de mesa de trabajo.
[900x800px] Generalmente el ta-
mao de la mesa de trabajo est
sujeta a las caractersticas del equi-
po o medio en el que se reproducir
el portafolio digital. As, puede pen-
sarse en una presentacin a panta-
lla completa o en un encaje en pan-
talla contemplando los mens de
navegacin de un explorador Web.
Lo mejor para cualquiera de los ca-
sos es realizar pruebas previas so-
bre diversos tamaos de mesa de
trabajo reproducidos en diferentes
medios finales.

Los colores aparecen nom-

brados en sistema RGB [Ejemplos,
Negro: 0,0,0 Blanco: 255, 255, 255]
De ser necesaria su traduccin a
otros sistemas, se recomienda el uso
de softwares especializados como
Color Shemer [Leer ms en anexos
de la gua en Otras herramientas ti-
les para el desarrollo de portafolios
digitales] Swish Max trabaja colores
en sistema RGB y hexadecimales.

17
 DESARROLLO DEL PORTAFOLIO DIGITAL

VELOCIDAD DE FOTOGRAMAS EN EL PANEL GUAS

12 fotogramas / seg. La velocidad Activar propiedad: [mostrar reglas]

de fotogramas por segundo varia-
r segn la calidad de animacin
que queramos lograr. El valor por
defecto del Swish Max 2008 es
12 fotogramas / seg. Aunque este
valor podr ser modificado segn
nuestras necesidades. Para un por-
tafolio digital presentado en un CD,
se puede utilizar en 24 o 30 fotogra-
mas / Seg.
Por otro lado, si su finalidad es la
Web, ser suficiente animar con el
valor por defecto.
Color de Guas: [Azul / bloqueadas]
Ubicacin de las guas con relacin
a la mesa de trabajo. [Horizontal /
centro, vertical / centro, derecha 25
px., izquierda 25 px., arriba 25 px.,
abajo 25 px.]
Pueden utilizarse imgenes de fon-
do en Swish Max 2008, en nuestro
caso utilizamos un archivo .jpg
que fue trabajado en Photoshop
Cs3 Extended de la siguiente ma-
nera:

ACTIVAR PROPIEDAD
DETENER

Detener reproduccin al final. En

algn momento suceder que que-
ramos ver cmo se comporta la in-
terfaz de nuestro Portafolio Digital.
Es aqu donde muchos cometen
el error de reproducir la animacin
sin colocar detener en la lnea de
tiempo. Por ello que se recomienda
activar esta propiedad que aparece
visible en el men PELCULA.
FONDO DE LA PELCULA

0, 0, 0 Negro. Puede variarse a

conveniencia seleccionando colores
del sistema en el panel COLOR.

18
 DESARROLLO DEL PORTAFOLIO DIGITAL

Es importante crear lneas

guas para definir el rea destinada
al men de navegacin, a los conte-
nidos, logotipo y crditos. Adems
si hemos decidido colocar otra in-
formacin, no est de ms contem-
plarlo desde el principios.

La imagen original es una textura

de parquet de 900x800 px. Pue-
de optarse por utilizar imgenes
que nosotros mismos hayamos to-
mado o descargarlas de bancos de
imgenes en lnea gratuitos.

Se crea otra capa nueva, aplicando

un degradado radial blanco con
opacidad 30%.

Existen otras posibilidades

para crear luces en Photoshop.

Capa de ajuste correccin selecti-

va. La opcin aparece en la ventana
CAPAS de Photoshop, y permite
hacer correcciones de color enfo-
cndonos en el canal necesario.

19
 DESARROLLO DEL PORTAFOLIO DIGITAL

En una nueva capa se aplica un de-

gradado lineal de la parte superior
e inferior, ambas hacia el centro, de
negro a transparente. Esta herra-
mienta se encuentra disponible en

La imagen deber ser guardada

como .jpg, es conveniente adems,
guardar el archivo editable en .psd
por cualquier modificacin futura.

el rea de las herramientas.

Capa de ajuste brillo y contraste.

Esta opcin permite acentuar la di-
ferencia entre las luces y el resto de
la imagen.

Finalmente aplicamos una capa de

ajuste para convertir la imagen a
blanco y negro. Se puede variar los
valores hasta llegar a una escala de
grises deseada, partiendo de la inter-
pretacin de los colores originales en
grises realizada por Photoshop.

20
 DESARROLLO DEL PORTAFOLIO DIGITAL
La imagen en .jpg resultante del
proceso en Photoshop es importa-
da a la mesa de trabajo de Swish
Max 2008. Para ello se accede al
men
ARCHIVO>IMPORTAR [Visible en
la parte superior del software]
Utilizando el panel ALINEAR, ha-
cemos que la imagen quede cen-
trada con relacin a la mesa de
trabajo, tanto vertical como hori-
zontalmente.
21
Preparacin de contenidos
Existe una amplia gama de
formas para realizar tareas en torno
al material para un Portafolio Digi-
tal. A continuacin se explica de
manera bsica los pasos a seguir
para desarrollar un logotipo en Illus-
trator Cs3 y que despus pueda ser
importado en Swish Max 2008, ob-
teniendo las caractersticas de edi-
cin completas. Este trabajo podra
ser realizado en Swish Max 2008
directamente, pero al no ser la na-
turaleza de este software la de un
programa de ilustracin, se ve limi-
tado en comparacin de Illustrator
Cs3.
El proceso de creacin del logotipo
a utilizar en este portafolio digital se
basa en la herramienta pluma de
Illustrator Cs3, que est disponible
en el rea de herramientas de dibu-
jo.
 DESARROLLO DEL PORTAFOLIO DIGITAL

Para cada uno de los elementos del

logotipo se crea una capa diferen-
te [visibles en la imagen]. Tambin
podemos valernos de otras herra-
mientas: Texto, rectngulo, lnea o
circulo. Seleccionando los colores
indicados en la ventana MUES-
TRAS o en la ventana COLOR.

Al finalizar, el archivo es guardado

como .pdf o .ai [ambos editables
para futuras intervenciones]. Ade-
ms, es exportado como .wmf,
para posteriormente ser importado
en Swish como formas editables.
[Swish reconoce capas, colores
planos y lneas importadas desde
Illustrator, por lo que es importante
estructurar los elementos debida-
mente en capas]

22
 DESARROLLO DEL PORTAFOLIO DIGITAL
Objetos en swish max 2008
TAREAS EN SWISH MAX 2008
Crear rectngulo utilizando la he-
rramienta rectngulo en el panel
de herramientas. Al seleccionarlo
se activar el panel forma en el rea
de mens, con ello se podrn ajus-
tar propiedades como tipo de color,
nombre o estilo. Duplicar rectngu-
los para determinar la ubicacin de
todas las reas del portafolio digi-
tal.
1. rea de men.
2. rea de informacin de contacto.
3. rea de contenido.
Se debe tomar en cuenta un
espacio para la cabecera del porta-
folio dentro del rea de contenido.
[Espacio en el cual puede ubicarse
el nombre, logo y slogan del crea-
dor]
Ser de utilidad que en el pa-
nel esquema se identifique cada
uno de los elementos que vamos
creando con un nombre especfico:
fondo, slogan, cabecera, etc.
CREAR TEXTOS
Ttulo de cada seccin. En este caso
se nombrar encabezado1 [En el
panel ESQUEMA puedes nom-
brar los objetos como quieras]
Formato para encabezado1:
[Arial 18 pts. Color 221, 221, 221.
Alineacin: izquierda].
Contenido de la seccin. En este
caso se nombrar: content_1
Formato para content_1:
[Helvtica Neue Extended 12 pts.
Color 221, 221, 221. Alineacin: iz-
quierda].
Es importante generar los
objetos de texto con los atributos
de tamao, color y alineacin fina-
les, para que el espacio se encuen-
tre distribuido correctamente desde
los primeros pasos en la creacin
de las pantallas.
Agrupar los objetos de texto. Para
realizar esta tarea se deben selec-
cionar los objetos de texto mante-
niendo la tecla shift presionada,
luego ir a ESQUEMA, hacer clic
derecho sobre los objetos e ir a:
23
 DESARROLLO DEL PORTAFOLIO DIGITAL
Agrupar>Agrupar como Sprite
En este proceso ser de utilidad
tener los elementos debidamente
identificados y clasificados, por ello,
adems de nombrar los objetos de
textos se recomienda nombrar el
Sprite como TEXTOS.
Un Sprite es un objeto cuyo
contenido tiene una lnea de tiempo
independiente al de la escena en la
que se est trabajando, permitien-
do as crear animaciones o mani-
pular los objetos sin afectar nada
que est afuera del sprite. Adems
permiten activar animaciones sobre
objetos que de no estar contenidos
en un sprite no podran animar-
se usando la galera completa de
efectos de Swish Max. Pueden co-
locarse controles de reproduccin
que tambin sern independientes
a la escena principal. Dicho de otro
24
modo: Un stop dentro de un sprite,
no significa un stop en la reproduc-
cin de la escena, ni la aparicin de
un efecto dentro de un sprite que se
afecte a ningn objeto externo. Un
sprite en Swish Max es similar a la
creacin de un objeto en biblioteca
de Flash.
Para crear ms escenas [teniendo
como punto de partida que la ma-
yora poseen los mismos elemen-
tos, ubicados en el mismo lugar] se
har clic derecho sobre la escena
que tenemos creada y luego:
copiar escena>clic derecho sobre
el esquema>pegar escena
Esta tarea ser realizada el nme-
ro de veces que sea necesario, con
ello se crearn escenas idnticas,
con cada uno de los elementos b-
sicos del portafolio. Nos beneficiar
en tema de tiempo empleado en la
creacin del portafolio digital, ya que
de ac en adelante solo se debern
agregar elementos extra o elimi-
nar los que estn de sobra.
En nuestro caso las escenas dis-
ponibles son: PRELOADER,
preloader_off,INICIO, A_CER-
CA_DE_MI, BRANDING_ILUSTRA-
CION, SERVICIOS, BRANDING_
GAL E ILUSTRACION_GAL
 DESARROLLO DEL PORTAFOLIO DIGITAL
Edicin de escenas duplicadas.
Estas escenas contienen a totali-
dad el portafolio digital. INICIO es
la escena que sirve como pantalla
de bienvenida. Desde esa pantalla
se puede acceder a las diferentes
opciones de contenido dentro del
portafolio digital: A_CERCA_DE_
MI, BRANDING_ILUSTRACION,
SERVICIOS. BRANDING_ILUS-
TRACION se diferencia de las
otras dos escenas al ser sta un
men para acceder a las galeras
BRANDING_GAL e ILUSTRA-
CION_GAL [El proceso de creacin
de una galera de imgenes se ex-
plicar ms adelante]
25
Como vemos, las escenas que
creamos a partir de la [escena por
defecto] identificada como INI-
CIO, tienen exactamente los mis-
mos elementos: el men, fondos de
reas, textos, etc. Para editar estos
elementos bastar con hacer uso de
las herramientas que proporciona
Swish Max, paneles de esquema,
transformacin, color y forma.
En la imagen se muestra el conteni-
do desplegado de las escenas A_
CERCA_DE_MI y SERVICIOS,
ambas escenas fueron realizadas a
partir de la escena por defecto que
se configur inicialmente.
No hay que olvidar que la
edicin de escenas depender de
lo que hemos planteado en nues-
tro organigrama de portafolio y en
el briefing. Estas dos herramientas
siempre deben tenerse a la mano.
De lo contrario suele suceder que
se terminan portafolios que no
cumplen con las expectativas plan-
teadas inicialmente y esto se refleja
en la percepcin y lectura del usua-
rio.
 DESARROLLO DEL PORTAFOLIO DIGITAL
INTERACCIN ENTRE ESCENAS.
Partiremos comprendiendo que la
interactividad [portafolio digital-
usuario] puede ser lograda de di-
versas formas, entre ellas: va me-
ns, animaciones, presentacin de
informacin por medio de bases de
datos, grficos, etc. 1
1. GALINDO SORIA, LEOPOLDO. DESARROLLO DE SISTEMAS INTERACTIVOS
MULTIMEDIA. Instituto politcnico Nacional, Zacatenco Mxico.
26
Comenzaremos por estudiar el
men que creamos dentro de IN-
DEX [primera escena que trabaja-
mos o escena por defecto en Swish
Max despus de configurada la pe-
lcula]
clic derecho sobre el grupo>
convertir>convertir en botn.
En esta imagen observamos
los elementos de nuestro men de
navegacin en la escena INDEX.
El men est compuesto por los
botones: CERRAR ACERCA_
DE_, BRANDING, SERVICIOS
Y CONTACTO. stos fueron di-
seados como formas vectoriales
en Illustrator Cs3 e importados en
Swish Max. Se agruparon como
sprites y luego se convirtieron en
botones, en el panel ESQUEMA:
clic derecho sobre el grupo>
Convertir>Convertir en Botn.
En el panel BOTN se pueden ac-
tivar los estados que se usarn. Los
botones de Swish Max disponen de
los estados: sobre, abajo y Pul-
sado [o rea activa].
 DESARROLLO DEL PORTAFOLIO DIGITAL
Cuando activamos cualquiera de
estas opciones, automticamen-
te aparecer el estado en el panel
ESQUEMA. Esto puede verse a
continuacin.
Si hemos partido de una imagen,
un sprite u otro elemento, este
aparecer automticamente en el
estado activado para que sea edita-
do posteriormente.
27
Los botones que hemos
creado tienen la misma estructura
que el desplegado en esta imagen.
El botn desplegado es ACERCA
_DE_ y posee estado arriba, so-
bre, abajo y pulsar [o zona ac-
tiva].
Los estados arriba y abajo con-
tienen un sprite con formas vecto-
riales, que son las que constituyen
la apariencia del botn. En el estado
sobre, el sprite est contenido en
otro sprite identificado como FX,
esto con el objetivo de poder incluir
un efecto de animacin [proceso
que veremos ms adelante]
Se puede agregar cualquier
tipo de elemento dentro de los bo-
tones, es importante tener en cuen-
ta que si se piensa animar, deben
contenerse los objetos en sprites
[esto genera una lnea de tiempo
independiente y pone a disposicin
todos los efectos por defecto de
Swish Max, de los cuales a su vez
se puede mencionar que son total-
mente configurables]
Para vincular botones con escenas se
debe hacer lo siguiente desde el panel
ESQUEMA:
 DESARROLLO DEL PORTAFOLIO DIGITAL
clic derecho sobre el
botn>guin>control de pelcula>irRep
roducir>irReproducir (FOTOGRAMA).
Al seleccionar estas opciones, auto-
mticamente la operacin aparece
en el panel GUIN. Tambin puede
realizarse desde ah siguiendo los mis-
mos pasos. Lo que se ver en el panel
guin es lo siguiente:
28
on (release) {
GotoSceneAndPlay(INICIO,1);
}
El guin descrito antes se traduce
as: Al hacer clic sobre el botn, se
ir al X fotograma de la escena
X que especifiquemos en el pa-
nel guin. Para ello se hace lo si-
guiente:
Vemos que en el panel guin apa-
rece agregado el cdigo [por defec-
to se configura como guiado.
Es recomendable mantenerlo as,
si son nuestras primeras experien-
cias dentro de un software para
animacin. De lo contrario, bastar
con cambiar la opcin a experto
y escribir las lneas de cdigo nece-
sarias].
En la opcin destino se define el
lugar dentro del portafolio donde se
quiere ir con el botn seleccionado.
En este caso el botn ACERCA_
DE_ nos lleva al primer fotograma
de la escena INICIO [aqu INDEX]
y al llegar ah se reproduce la cabeza
lectora automticamente, teniendo
stop en el fotograma 5.
 DESARROLLO DEL PORTAFOLIO DIGITAL

El mismo proceso se realizar para Los mens pueden ser editados de

todos los botones ubicados en el
sprite MEN de la escena INI-
CIO.
Al finalizar esta tarea bastar con
copiar el sprite MEN, ir a las
otras escenas, eliminar el sprite
MEN y pegar en Lugar [shit +
control + V]. Con lo que tendremos
un men funcionando al 100%.
la manera que se crea convenien-
te. Adems pueden agregrseles
efectos [aparecen en la galera de
efectos y son totalmente editables]
guiones de cdigo en Java Script
y/o algunas funciones de Action
Script.

29
 DESARROLLO DEL PORTAFOLIO DIGITAL
OTRO TIPO DE INTERACTIVIDAD.
Es importante que el portafolio se
muestre Full Screen y adems
tenga un botn para ser cerrado
Quit por el usuario. A continua-
cin una forma sencilla de crear
ambos botones partiendo del uso
del panel GUIN.
30
Botn para salir Quit. Con un bo-
tn diseado previamente en Illus-
trator Cs3, importado como forma,
agrupado como sprite, convertido
en botn, nos dirigimos al panel
GUIN y se selecciona:
aadir guin>navegador /
red>comandoFS ().
 DESARROLLO DEL PORTAFOLIO DIGITAL

Luego en la opcin comando se comandoFS () para crear un full

elige Quit y en Argumento se
escribe true. Se ver como en la
imagen anterior.
Este botn har que el usuario pue-
da salir del portafolio al hacer clic
sobre l en cualquier momento.
Botn para ver el portafolio digital a
pantalla completa automticamen-
te al iniciar Full Screen.
Tambin podemos usar la funcin
Screen que se active desde el pri-
mer fotograma de la primera esce-
na del portafolio, logrando as que
en todo momento el contenido sea
visto a pantalla completa al mo-
mento de su reproduccin.
Este proceso se hace de la misma
manera que el botn para cerrar
Quit.

31
 DESARROLLO DEL PORTAFOLIO DIGITAL

a colocar el texto que ser anima-

do adentro del sprite TEXT, este
posee un texto o descripcin del
botn, un fondo y un efecto de luz
logrado con un relleno radial que va
de 0, 176, 216 a transparente. To-
dos estos objetos estn contenidos
a su vez en el sprite FX.

La diferencia est en que se aplica-

r sobre el primer fotograma de la
primera escena, en este caso PRE-
LOADER Es ah donde se carga
comandoFS (...): comando Fu-
llScreen, argumento true. El pa-
nel guin debera verse como se
muestra en la imagen anterior.

ANIMACIN DE OBJETOS.
Lo que se quiere es que cuando el
Para desarrollar este punto se to-
cursor del ratn pase sobre el bo-
mar como ejemplo la animacin
tn ACERCA_DE, la descripcin
realizada en el estado sobre del
con el nombre haga un efecto de
botn ACERCA_DE, es de recor-
aparecer con una duracin de 2
dar que ya se mencion que para
fotogramas. Para lograrlo basta-
tener acceso a toda la lista de efec-
ra con hacer lo siguiente sobre el
to de Swish Max se debe colocar el
texto que ya tenemos en el sprite
/ los objetos a animar adentro de
FX>TEXT:
un sprite.
Efecto>Aparecer>Aparecer.
En este caso, para una mejor organi-
zacin de los elementos se recurri

32
 DESARROLLO DEL PORTAFOLIO DIGITAL
Este proceso es mostrado grfica-
mente en la imagen de abajo.
Para aplicar cualquier
otro efecto se realizar
el mismo proceso, ya
sea accediendo a los
efectos a travs de un
clic derecho en el pa-
nel ESQUEMA o en
la lnea de tiempo del
objeto que se desea
animar.
33
Hay que tomar en cuenta que des-
pus de seleccionar un efecto, ste
puede ser configurado a convenien-
cia haciendo doble clic sobre el efecto
en la lnea de tiempo.
En la imagen de abajo se ve que hay
un efecto aplicado sobre la descrip-
cin del botn ACERCA_DE [apare-
cer, duracin: 2 fotogramas, de 3 a 4]
Ventana de configuracin de efecto.
sta presenta una gran variedad de
opciones y la mejor forma de tener
control sobre muchas de ellas ser
implementndolas en diferentes pro-
yectos.
Una buena opcin es utilizar la carac-
terstica de guardado de efectos edi-
tados por el usuario, lo que permite
tener ordenados los efectos que han
sido generados por nosotros, tenin-
dolos a disposicin para futuros pro-
yectos.
 DESARROLLO DEL PORTAFOLIO DIGITAL
En la siguiente imagen se observa
que en la ventana configuracin
Aparecer, el efecto justamente tie-
ne una duracin de 2 fotogramas,
con una direccin entrar.
Existe la posibilidad de reproducir
una vista previa del efecto sin sa-
lir de la ventana de configuracin.
Tambin puede cambiarse el efecto
a reproducir desde el panel de con-
figuracin.
Todos los efectos poseen opciones
adicionales como configuracin
34
de la animacin, configuracin
del color, configuracin de la ace-
leracin, entre otras opciones.
Para finalizar con este tema, recor-
dar que al contener objetos adentro
de un sprite se est obteniendo una
lnea de tiempo independiente a la
de la escena, por lo que no est de
ms colocar un stop despus de
terminada la aplicacin de los efec-
tos.
Cuando se busca que el efecto se
reproduzca indefinidamente, bas-
tar con no colocar el stop y la ca-
beza lectora de la lnea de tiempo
del sprite seguir reproduciendo el
efecto una y otra vez (en loop).
Habrn personas que que-
rrn hacer efectos de animacin sin
utilizar la galera de efectos de Swish
Max. Para esta tarea ser muy til la
comprensin de las caractersticas:
colocar y quitar dentro del men
de efectos y utilizar las herramientas
que ofrece este software para animar
fotograma por fotograma o utilizar el
panel GUIN para animar median-
te Script. Tambin puede recurrirse a
ilustraciones o imgenes externas.
Al final depender de los objetivos y
preferencias de cada quien.
 DESARROLLO DEL PORTAFOLIO DIGITAL
GALERA DE IMGENES.
Para agregar la galera de imge-
nes se deber hacer una seleccin
de contenido antes de comenzar a
desarrollar el portafolio digital.
Tambin es bueno crear un organi-
grama del contenido a mostrar.
Veamos a continuacin el proceso
para la creacin de una galera de
imgenes interna utilizando como
recursos, los elementos que se ha
estudiado hasta el momento: Im-
genes, textos, botones, efectos de
galera, vinculacin e interactividad
usando el panel GUIN.
Seleccin de imgenes. Dentro de
todas las posibilidades que tene-
mos sobre material a presentar en
el portafolio digital, debemos recu-
rrir a mostrar los trabajos que ms
se ajusten a nuestros objetivos y
los del usuario potencial.
De ser posible, no est de ms ha-
cer un estudio previo para conocer
las preferencias de la o las perso-
nas a las que le vamos a entregar el
portafolio posteriormente [ver mo-
delo de briefing anexo en el trabajo
escrito].
35
Es recomendable organizar el con-
tenido en carpetas dentro de nues-
tro equipo. En este caso se ha hecho
en dos: images y thumbs. La
carpeta images contiene las im-
genes que sern mostradas a ma-
yor tamao y la carpeta thumbs
contiene las imgenes que servirn
como vistas previas.
En ambas carpetas debemos orde-
nar el contenido segn la lgica en
la que se mostrarn, identificndo-
las por trabajo y / o cliente o gene-
rando alguna forma de clasificacin
personal. Adems siempre es bue-
no numerarlas segn el orden en el
que se colocarn [esto nos evita-
r posibles confusiones a futuro].
Nuestras carpetas se ven como en
la imagen 2.29.
Las medidas a las que se guarda-
r cada imagen vista completa
y vista previa depender de las
reas destinadas por nosotros. Es
conveniente preparar las imgenes
en un software especializado, en
este caso se usado Photoshop Cs3.
Las vistas completas se guardaron
con una medida de 608 pxeles por
323 pxeles a 300 de resolucin y
las vistas previas con una medida
de 32 pxeles por 37 pxeles a 300
de resolucin.
 DESARROLLO DEL PORTAFOLIO DIGITAL
Puede parecer exagerado usar una
resolucin de 300 para las imgenes,
pero es recomendable hacerlo, tenien-
do la seguridad que al exportar el por-
tafolio digital final Swish Max har la
compresin debida de estos archivos.
Hasta este momento nos hemos ocu-
pado debidamente de preparar las
imgenes a utilizar. Si hay contenidos
extra a agregar, conviene prepararlos
antes de pasar a construir el portafolio,
por ejemplo: logotipos, botones, fondo,
reas especiales, etc.
En este caso, el portafolio cuenta con:
imgenes [vista completa y vista previa
que es usada como botn], logotipo,
36
texto y fondos [que han sido copiados
y pegados en lugar desde otras esce-
nas del portafolio]
Para importar los contenidos haremos
lo siguiente:
Archivo>importar>abrir.
El contenido importado se agregar
automticamente en el panel ES-
QUEMA, posteriormente se debe or-
ganizar a conveniencia, identificando o
agrupando los elementos.
El men importar se ve como en la
siguiente imagen..
 DESARROLLO DEL PORTAFOLIO DIGITAL
Manteniendo la tecla shift
presionada se pueden importar varios
elementos al mismo tiempo.
37
CONSTRUCCIN DE LA GALERA
DE IMGENES
El primer paso para la construccin
de esta galera de imgenes fue
editar la plantilla que se realiz ex-
ternamente, utilizando los elemen-
tos que ya estaban presentes en
 DESARROLLO DEL PORTAFOLIO DIGITAL
otras escenas del portafolio digital,
por ejemplo: El botn para cerrar
Quit, los formatos de texto y el
fondo. Luego se ordenaron los ele-
mentos en el panel ESQUEMA.
Se importaron las imgenes previa-
mente preparadas en Photoshop
CS3 [Vistas completas y vistas pre-
vias] y se organizaron una a una y
se identificaron [en este caso como
image para las vistas completas y
Thumb para las vistas previas].
El siguiente paso es decidir: Qu
posibilidades se desean dentro del
portafolio digital mientras el usua-
rio lo visita? Para ello veamos el si-
guiente ejemplo:
Las galeras funcionarn de igual
manera independientemente del
contenido que se vea, se deben
construir dos escenas idnticas,
identificadas como BRANDING_
GAL e ILUSTRACION_GAL.
Los nombres mencionados
entre comillas en el formato NOM-
BRE, corresponden a los que se ha
decidido usar por nuestra parte, de-
pender de cada quin el nombre a
utilizar, ya que esto no afectar en
ningn momento el funcionamien-
to del portafolio digital.
38
Operaciones que puede realizar el
usuario. Cuando el usuario ingrese
a una de las galeras por primera vez
desde el men de galeras BRAN-
DING_ILUSTRACION, podr selec-
cionar una de las vistas previas para
que se muestre la imagen completa
en el rea destinada para dicha ta-
rea.
Tambin podr elegir ir a otra galera
desde un men ubicado en el rea
descripcin de la galera.
Tendr la opcin de cerrar Quit todo
el portafolio digital, ir al inicio del mis-
mo presionando el logotipo del por-
tafolio, o ver un nmero correlativo y
descripcin de la imagen mostrada
en el rea de vista completa colocn-
dose sobre la imagen.
Desarrollo de las tareas para lograr
todas las operaciones menciona-
das en el prrafo anterior. El Men
de galeras para acceder por pri-
mera vez ha sido construido con el
mismo formato generado en la es-
cena de inicio o escena por defec-
to. Posee el men de navegacin
general del portafolio digital al lado
izquierdo, un rea para mostrar la
informacin de contacto, una cabe-
cera que incluye el logotipo del por-
 DESARROLLO DEL PORTAFOLIO DIGITAL

tafolio y un rea de texto en donde

En la imagen anterior se observa
se ha colocado dos imgenes que
una plantilla de galera trabajada
sirven como botones para acceder
en Illustrator Cs3, exportada como
a las galeras: BRANDING_GAL o
.wmf, importada como formas
ILUSTRACION_GAL, como en to-
editables en Swish Max. Y en la si-
das las escenas, tambin est dis-
guiente pgina se observan todos
ponible un botn para cerrar Quit
los elementos de los que dispondr
el portafolio digital.
el portafolio creado en esta Gua.

39
 DESARROLLO DEL PORTAFOLIO DIGITAL

El botn para cerrar Quit ha sido La posibilidad de ir al inicio del por-

copiado desde otra escena. Puede tafolio digital desde la galera de
consultarse otro tipo de interac- imgenes se ha logrado haciendo
cin en INTERACCIN ENTRE del logotipo del portafolio un bo-
ESCENAS. tn:

40
 DESARROLLO DEL PORTAFOLIO DIGITAL
clic derecho sobre el
logo>Convertir>Convertir en bo-
tn.
Activando en el panel BOTN el
estado sobre y aplicando un cam-
bio de color en l, esto con la finali-
dad de que cuando el usuario pase
el cursor del ratn sobre el logo,
pueda diferenciar que se trata de
un botn y no de un simple logo de
portafolio. Esta posibilidad es muy
acostumbrada actualmente en la
Web, en blogs, pginas personales
y redes sociales, por lo que se con-
sidera que est de ms colocar una
descripcin al botn. Si esto se qui-
siera hacer, bastar con colocar el
texto en el estado sobre y ubicarlo
en el rea que se considere conve-
niente.
La opcin men a galeras [al estar
adentro de una de ellas] se ha logra-
do escribiendo en la barra de des-
41
cripcin de la galera los nombres
de los botones necesarios BRAN-
DING E ILUSTRACIN. Estos
textos fueron convertidos a botn
y posteriormente utilizando el panel
GUIN se les coloc como desti-
no BRANDING_GAL e ILUSTRA-
CION_GAL respectivamente.
Navegacin de imgenes [vista
completa y vista previa]. Para am-
bos casos se ha recurrido a con-
vertir en botn las imgenes que se
importaron a Swish Max: Por qu,
porque con ello se puede optar por
crear interaccin con el usuario me-
diante la utilizacin de los estados
sobre de los botones: Cmo, bas-
tar con activar el estado sobre de
los botones de las vistas previas y
realizar los cambios que se consi-
deren necesarios, en este caso se
ha hecho lo siguiente:
Clic derecho sobre la vista previa
importada>Convertir>Convertir en
Botn.
Luego, se activ el estado sobre
del botn de vista previa y sobre l
se hizo lo siguiente:
clic derecho sobre la imagen [vista
previa en estado sobre]
Convertir>Convertir en Sprite.
 DESARROLLO DEL PORTAFOLIO DIGITAL
Despus a la imagen dentro del
sprite se le aplic un efecto Salva-
je pulso [disponible en efecto de
bucle continuo] con una duracin
de diez fotogramas y los siguientes
parmetros:
Offset: 2; Scale: 50; Fade: 80; Cas-
cade order: 0; Overlap: 50. As se
tiene lo que se observa en la ima-
gen anterior imagen 2.32.
42
Descripcin y nmero sobre las vis-
tas completas. Para que las vistas
completas [imgenes importadas,
previamente preparadas en Pho-
toshop Cs3, que fueron convertidas
a botn al igual que las vistas pre-
vias] muestren la informacin sobre
la imagen y un nmero correlativo
al pasar sobre ellas, lo que se tiene
que hacer es exactamente el mismo
proceso seguido con los botones
 DESARROLLO DEL PORTAFOLIO DIGITAL
de vistas previas, con la diferencia
que en el estado sobre de los bo-
tones se colocar la descripcin y
un rectngulo con color 0, 0, 0
y alfa de 85% [debe estar abajo del
texto para que sirva de fondo y la
lectura sea ms fcil de realizar]. Se
colocar donde se desea que apa-
rezca durante la reproduccin.
El nmero se crea con un texto y se
coloca al igual que la descripcin en
el sitio donde se desea que aparez-
ca. A todos los objetos se les apli-
can un efecto aparecer con los
parmetros por defecto y una du-
racin de siete fotogramas. Cuan-
do el cursor del ratn pase sobre la
imagen la informacin se mostrar,
realizando el efecto seleccionado.
Como ya se sabe, las vistas previas
sern las encargadas de mostrar
las vistas completas dentro del rea
designada a ello. Esta tarea podra
realizarse mediante Script, pero
esta gua tiene como objetivo ser
un ejemplo bsico para la creacin
de portafolios digitales, por lo que
se usar un mtodo que no requie-
re la utilizacin de Script, sino la im-
plementacin de herramientas que
ya fueron utilizadas anteriormente
en esta gua: efectos colocar y
quitar y la propiedad detener
43
o stop disponible en la lnea de
tiempo de la escena haciendo lo si-
guiente:
Clic derecho en un
fotograma>Control de
Pelcula>Detener().
Tareas en panel LNEA DE TIEM-
PO. Dicho panel est compuesto
por la lnea de tiempo de la escena
[o general, donde se colocan los
guiones de reproduccin, navega-
cin y los script] y la lnea de tiempo
de los objetos, teniendo una para
cada objeto. A esto se le suma ade-
ms, las lneas de tiempo indepen-
dientes que son creadas para los
sprites.
Lo que se har para mostrar las
imgenes al hacer clic sobre una
vista previa ser construir un siste-
ma de paradas stop en la lnea de
tiempo, colocando una parada cada
cinco fotogramas, el nmero de ve-
ces para realizar esta tarea depen-
der del nmero de imgenes que
contiene la galera.
En este caso la galera BRAN-
DING_GAL posee once imgenes,
lo que significa once paradas en la
lnea de tiempo. Esto se ve as:
 DESARROLLO DEL PORTAFOLIO DIGITAL
Ahora, en el primer fotograma des-
pus de la parada stop, se colo-
carn efectos colocar y quitar.
Esto depender del orden en que
se mostrarn las imgenes. Por
ejemplo, la primera imagen en esta
galera es image1. Entonces, en el
fotograma 1 de la escena, sta ten-
dr en su lnea de tiempo colocar
y en el primer fotograma despus
de cada parada quitar. La segun-
da imagen es image2, para ella,
el primer fotograma de la escena
tendr quitar, el primer fotograma
despus de la primera parada co-
locar y en el primer fotograma des-
pus del resto de paradas quitar;
as sucesivamente.
44
 DESARROLLO DEL PORTAFOLIO DIGITAL

Al final se ver como en la imagen CENAS. Para vincular un botn a

2.37. pgina anterior.
Esta tarea se ha realizado solo en las
lneas de tiempo correspondientes a
las imgenes, aqu identificadas en
el formato imageX, donde X es un
nmero correlativo. Seguramente nos
preguntamos: Por qu realizar todos
estos pasos, la respuesta es simple y
est ligada al destino que se le dar a
cada botn de vista previa. En casos
anteriores colocamos como destino
de un botn una escena X dentro del
portafolio digital. En este caso, el des-
tino ser un fotograma dentro de la
misma escena y por ello es necesario
que cuando la cabeza lectora llegue al
fotograma de destino, que solamente
se muestre la imagen correspondien-
te a la vista previa.
Por eso, en ese fotograma X, la
imagen que si corresponde a la
vista previa debe tener colocar y
todas las dems quitar. As debe
funcionar en cada primer fotogra-
ma despus de cada parada para
cada imagen.
Vinculacin de botn vista previa
a fotograma X de imagen vista
completa. Esta tarea se realizar
de la misma manera que la descrita
en //5_INTERACCIN ENTRE ES-
una escena, como se dijo antes, la
variacin es que el destino ser un
fotograma dentro de la misma es-
cena. Se presentar de la siguiente
manera:
En esta imagen se ve la configu-
racin de la segunda vista previa
thumb2 de la galera BRAN-
DING_GAL. La primera parada se
encuentra en el fotograma 5 [co-
rrespondiente a la primera vista
previa], el fotograma 6 es el primero
despus de la primera parada. En
la lnea de tiempo de la imagen dos
image2 aparece colocar, que
corresponde a la vista previa en
mencin thumb2; y para el resto
de imgenes aparece quitar. Esto
quiere decir que al presionar la se-
gunda vista previa, la cabeza lecto-
ra se dirigir al fotograma seis de la

45
 DESARROLLO DEL PORTAFOLIO DIGITAL
misma escena BRANDING_GAL.
Y ah mostrar solo la imagen que
corresponde a la vista previa, ocul-
tando las otras diez imgenes has-
ta que se presione la vista previa
correspondiente a ellas.
Este proceso de vinculacin se de-
ber efectuar para cada vista pre-
via. Se recomienda usar copiar
guin y pegar guin disponible
en el panel GUIN y solo cambiar
el destino, esto con la finalidad de
maximizar el tiempo de desarrollo
de la tarea.
Si se desea que la galera
sea accesible en otro lugar, por
ejemplo el men de inicio o el men
general, bastar con colocar un
botn dentro de dicha escena que
tenga como destino la escena de la
o las galeras. Es recomendable co-
locar un botn de regreso y uno de
cierre del portafolio digital siempre.
EL PRE CARGADOR DE
CONTENIDO.
Realizar un pre cargador de con-
tenido ser til al momento de re-
producir el portafolio digital. Podra
verse como una tarea final. Pero
realmente depender de si se cree
que el portafolio amerite una ltima
revisin general y la realizacin de
cambios un nuevo botn por aqu
una transicin entre escenas por
all una actualizacin de una ima-
gen, etc.
Pre cargador de contenido pre-
loader. Porqu realizarlo... La res-
puesta es nica: porque al hacerlo,
el equipo cargar todo el contenido
del portafolio digital antes de mos-
trar al usuario algo en pantalla que
no sea el pre cargador. Esto en un
portafolio que se presenta por me-
dio de CD, DVD o USB y es igual-
mente til. Aunque la carga es mu-
cho ms rpida que si, por dar un
ejemplo, el portafolio se encuentra
en un sitio Web; no est de ms
prevenir realizando este ltimo
paso para no lamentarnos cuan-
do al reproducir el portafolio en un
equipo no adecuado a las caracte-
rsticas definidas al inicio, se vea
lento o con interrupciones en las
animaciones.
El pre cargador estar contenido
en una escena que debe ubicarse
como primera en el panel ESQUE-
MA. Ser entonces aqu donde se
agregue tambin la caracterstica
46
 DESARROLLO DEL PORTAFOLIO DIGITAL

FullScreen, justo en el primer fo- animacin contenida en un sprite

tograma de la escena que en este
caso se identificar como PRE-
LOADER. En el pre cargador del
portafolio se colocar un texto car-
gando y puede agregarse una
cuya lnea de tiempo se reproduzca
indefinidamente. Queda a opcin
personal, colocar fondo u otros
elementos que se consideren per-
tinentes.

47
 DESARROLLO DEL PORTAFOLIO DIGITAL
Despus de agregar elementos, se
acceder al panel GUIN para
realizar lo siguiente [todo el proce-
so ser realizado en modo guiado]:
Aadirguin>Eventos>Fotograma
> enFotograma(...)
Como parmetros definir en foto-
grama 1. Y colocar un FullScreen
haciendo lo siguiente:
Aadir guin>Navegador/Red>
ComandoFS(...)
Parmetros: Comando FullS-
creen, Argumento true.
Despus realizar las siguientes ta-
reas:
Aadir guin>Eventos>Fotograma
>EnFotograma(...)
Activar la opcin despus de even-
tos para objetos colocados y esta-
blecer como fotograma el nmero
1.
Luego se agregar una condicin
para que sea cargado todo el con-
tenido, haciendo lo siguiente:
Aadir guin>Condicional>Si(Foto
gramaCargado(...)){
48
Definir como destino la ltima es-
cena del portafolio digital y en fo-
tograma escribir nmero del ltimo
fotograma de dicha escena. Luego
se indicar qu se debe hacer si la
condicin se cumple, haciendo lo
siguiente:
Aadir guin>Control de Pelcula>
irReproducir>irReproducir(FOTOGR
AMA)
Se configurar lo siguiente, destino:
escena de inicio [o la que se desea
mostrar primero]. Fotograma: 1.
Luego se definir en un fotograma
posterior [en este caso se ha colo-
cado en el nmero 21] la indicacin
sobre qu hacer si la condicin no
se cumple. Para ello se agrega lo si-
guiente:
Aadir guin>Eventos>Fotograma
>EnFotograma(...)
Se debe activar la opcin Despus
de eventos para objetos colocados
y agregar lo siguiente:
Aadir guin>Control de Pelcula>
irReproducir>irReproducir(FOTOGR
AMA)
Estableciendo como destino: PRE-
LOADER y como fotograma el n-
 FUNDAMENTOS DEL DISEO - CONCEPTUALIZACIN

mero 1. En un fotograma posterior eventos para objetos colocados y

al 21 [segn este caso], por ejemplo
el 22 se dar la orden de pre carga
escribiendo esto:
Aadir guin>Eventos>Fotograma
>EnFotograma(...)
Activando la opcin Despus de
luego agregando:
Aadir guin>Fotograma>preload
Content()
Si se han realizado todas las tareas
con xito, se debera ver lo siguien-
te:

49
 FUNDAMENTOS DEL DISEO - CONCEPTUALIZACIN

Al reproducir la pelcula se
ver [segn la capacidad de nues-
tro equipo] que el tiempo de la ca-
beza lectora en el pre cargador es
casi nulo. Este lmite aumentar,
por ejemplo, si el portafolio digital
es colocado en un sitio Web, debi-
do a que la carga del contenido ser
ms lenta. As que eso no es motivo
para preocuparse, sino lo contrario
pues el equipo que se usa tiene
una gran capacidad. En base a eso
puede definirse con mejor exacti-
tud cules son los requerimientos
mnimos para la reproduccin del
portafolio digital: Memoria RAM,
procesador, espacio en disco duro,
unidad de reproduccin, etc.

50
 DESARROLLO DEL PORTAFOLIO DIGITAL
GLOSARIO
Previo a la indagacin en el tema de
la investigacin, el grupo ha consi-
derado necesario incluir un glosario
que explique conceptos de los cua-
les se han hecho referencia y se uti-
lizarn en los siguientes captulos.
ANIMACIN:
Tcnica que genera sensacin de
movimiento a travs de una se-
cuencia de imgenes o dibujos.
Para realizar animacin existen nu-
merosas tcnicas que van ms all
de los familiares dibujos animados.
Los cuadros se pueden generar di-
bujando, pintando, o fotografiando
los minsculos cambios hechos re-
petidamente a un modelo de la rea-
lidad o a un modelo bidimensional
o tridimensional virtual; tambin es
posible animar objetos de la reali-
dad y actores.
BLOG:
Conocido tambin como weblog o
bitcora de web, este es un espacio
personal de escritura en Internet en
el que el autor publica artculos o
noticias que pueden contener tex-
to, imgenes e hipervnculos. Los
nuevos contenidos se aaden va
52
web desde el propio navegador y
sin necesidad de ningn otro pro-
grama auxiliar. Estn pensados
para utilizarlos como una especie
de diario on line que una persona
usa para informar, compartir, deba-
tir peridicamente de las cosas que
le gustan e interesan.
DPI:
Trmino en ingls: Dots Per Inch,
que significa puntos por pulgada.
Unidad de medida de la resolucin
de una imagen (relacionado con la
calidad) de un escner, una impre-
sora, etc. Sirve para medir la resolu-
cin, que es la cantidad de puntos
(pixeles) que entran en una pulgada.
Se expresa as: (nmero)x(nmero)
dpi. Una resolucin de 300 dpi pro-
ducir un texto que mostrar lneas
quebradas visibles bajo una lupa.
Resoluciones an ms grandes son
necesarias para obtener reproduc-
ciones de fotografas suaves. Los
grficos profesionales usan impre-
soras con resoluciones desde 1200
a 2400 dpi.
FORMATO:
Es una forma particular de codificar
informacin para ser almacenado.
Existen diferentes tipos de forma-
 DESARROLLO DEL PORTAFOLIO DIGITAL
tos para diferentes tipos de infor-
macin. Por esto existen formatos
grficos, audio, animacin, docu-
mentos, entre otros.
Un formato es lo que permite a
una aplicacin interpretar los datos
crudos en un archivo. En otras pa-
labras, un formato es un modo de
representacin de estos datos.
Muchas veces, los formatos de ar-
chivos estn marcados en la exten-
sin del nombre del archivo: el sufijo
de tres letras con el que el nombre
del archivo termina. Por ejemplo
mypage.htm es un documento es-
crito en HTML; hay formatos espe-
cficos para imgenes (como JPEG,
PNG, GIF, TIF, BMP), texto simple
(ASCII, comnmente marcado con
la extensin .txt), para texto forma-
teado (HTML, RTF, DOC) y para do-
cumentos listos para la impresora
(PDF, PS).
INTERACTIVIDAD:
Concepto ampliamente utilizado en
las ciencias de la comunicacin, en
informtica, en diseo digital y en
diseo industrial.
La interactividad es similar al nivel
de respuesta, y se estudia como un
proceso de comunicacin en el que
53
cada mensaje se relaciona con el
previo, y con la relacin entre ste y
los precedentes.
INTERFAZ:
Modo visual que permite al usua-
rio interactuar con el hardware y el
conjunto de valores de programa-
cin de un sistema determinado.
INTERNET:
Es un conjunto descentralizado de
redes de comunicacin interconec-
tadas, que utilizan la familia de pro-
tocolos TCP/IP, garantizando que
las redes fsicas heterogneas que
la componen funcionen como una
red lgica nica, de alcance mun-
dial.
Uno de los servicios que ms xi-
to ha tenido en Internet ha sido la
World Wide Web (WWW, o la Web),
hasta tal punto que es habitual la
confusin entre ambos trminos.
La www es un conjunto de proto-
colos que permite, de forma senci-
lla, la consulta remota de archivos
de hipertexto. sta fue un desarro-
llo posterior (1990) y utiliza Internet
como medio de transmisin.
 DESARROLLO DEL PORTAFOLIO DIGITAL
Existen, por tanto, muchos otros
servicios y protocolos en Internet,
aparte de la Web: el envo de correo
electrnico (SMTP), la transmisin
de archivos (FTP y P2P), las con-
versaciones en lnea (IRC), la men-
sajera instantnea y presencia, la
transmisin de contenido y comu-
nicacin digital -telefona (VoIP), te-
levisin (IPTV)-, los boletines elec-
trnicos (NNTP), el acceso remoto a
otras mquinas (SSH) o los juegos
en lnea.
DIGITAL:
Es un trmino que se aplica a
cualquier objeto que usa simult-
neamente diferentes formas de
contenido informativo como tex-
to, sonido, imgenes, animacin y
video para informar o entretener al
usuario. Tambin se puede calificar
como digital a los medios electrni-
cos (u otros medios) que permiten
almacenar y presentar contenido
digital. Digital es similar al empleo
tradicional de medios mixtos en las
artes plsticas, pero con un alcance
ms amplio; gracias a la utilizacin
de medios electrnicos que permi-
ten mayor cantidad de receptores
simultneamente.
54
PIXEL:
Es la menor unidad posible con la
que se compone cualquier imagen
digital. Las imgenes grficas son
formadas por una matriz rectangu-
lar de pixeles. Para almacenar la
informacin de una imagen, cada
pxel se codifica mediante un con-
junto de bits de una longitud deter-
minada (llamada profundidad de
color). Los pixeles tambin se uti-
lizan como unidad para medir la re-
solucin de una pantalla, una ima-
gen y de algunos dispositivos como
por ejemplo las cmaras digitales
(que utilizan los megapxeles).
RESOLUCIN:
Trmino asociado a la calidad de
imagen en pantallas, impresoras,
escneres, cmaras, etc. Es el n-
mero de pxeles que pueden ser
vistos en una pantalla y son repre-
sentados en sentido horizontal y
vertical. Existen gran cantidad de re-
soluciones como por ejemplo: 320
x 480, 640 x 480, 800 x 600, 1280
x 800, etc. La multiplicacin de am-
bos nmeros da como resultado el
total de pxeles que se representan
en la pantalla.
 DESARROLLO DEL PORTAFOLIO DIGITAL
SOFTWARE:
Se refiere al equipamiento lgico o
soporte lgico de un computador di-
gital, comprende el conjunto de los
componentes lgicos necesarios
para hacer posible la realizacin de
una tarea especfica utilizando una
interfaz determinada, en contrapo-
sicin a los componentes fsicos
del sistema (hardware). Algunos
ejemplos bsicos de software lo
comprenden aplicaciones inform-
ticas tales como el procesador de
textos, que permite al usuario rea-
lizar todas las tareas concernientes
a edicin de textos; software de
sistema, tal como un sistema ope-
rativo, el que, bsicamente, permite
al resto de los programas funcio-
nar adecuadamente, facilitando la
interaccin con los componentes
fsicos y el resto de las aplicacio-
nes, tambin provee una v ante el
usuario.
SPRITE:
Es un objeto simple con lnea de
tiempo independiente a la de la pe-
lcula en la que se trabaja, cuyos
objetos pueden poseer animacin
o efectos. El concepto de sprite en
SwishMax equivale al de Movie-
Clip de Flash, aunque no soporta
55
todas las propiedades y mtodos
del mismo.
USUARIO:
Es un individuo que utiliza una com-
putadora, sistema operativo, servi-
cio o cualquier sistema informtico.
Por lo general es una nica persona.
Un usuario generalmente se identi-
fica frente al sistema o servicio utili-
zando un nombre de usuario (nick)
y a veces una contrasea, este tipo
es llamado usuario registrado.
VNCULO O ENLACE:
Es un enlace, normalmente entre
dos pginas web de un mismo si-
tio, pero un enlace tambin puede
apuntar a una pgina de otro sitio
web, a un fichero, a una imagen,
etc. Para navegar al destino al que
apunta el enlace, hemos de hacer
clic sobre l.
 DESARROLLO DEL PORTAFOLIO DIGITAL

TABLA RESUMEN DE SOFTWARE ADICIONAL

56