MAESTRÍA EN MEDIOS INTERACTIVOS
           Tercer Semestre
INTRODUCCIÓN A FLASH CATALYST




            01
CONTENIDO
• Temario    General

• 1. 1Acerca   de Flash Catalyst

• 1.2   ¿Para quién es Flash Catalyst?

• 1.3   Principales Características

• 1.4   Conceptos clave

• 1.5   ¿Cuándo usar Flash Catalyst?

• 1.6   Flujo de trabajo en Flash Catalyst
TEMARIO
1.Introducción a Flash Catalyst
  • Acerca de Flash Catalyst
  • ¿Para quién es Flash Catalyst?
  • Principales Características
  • Conceptos Clave
  • ¿Cuándo usar Flash Catalyst?
  • Flujo de trabajo en Flash Catalyst
2.Proyecto en Flash Catalyst. Conceptos básicos
  • Creación de un nuevo proyecto
  • Definiendo componentes
  • Agregando páginas
  • Agregando interacción
  • Agregando transiciones
  • Opciones de publicación
3.Creación de proyectos
  • Planeación de un proyecto
  • Iniciando un proyecto desde Illustrator, Photoshop y Fireworks
  • Iniciando un proyecto desde Flash Catalyst
TEMARIO
4.Componentes básicos                            • Trabajando con texto
  • Qué es un componente                         • Optimización del trabajo de arte
  • Tipos de componentes:
    • Button
    • Checkbox
    • Radio Button
    • Toogle Button
    • Text Input
    • Slider
    • Scrollbar
5.Creación y edición de trabajo de arte
  • Herramientas básicas de dibujo
  • Configuración de propiedades de los objetos
  • Importación de trabajo de arte
  • Edición desde Illustrator
  • Edición desde Photoshop
TEMARIO
6.Organización y layout                            • Rotación 3D
  • Páginas y capas                                • Ajustes básicos de timing
  • Edición de páginas y estados.                  • Animación de una secuencia
  • Guías, retículas y reglas
  • Alineación y distribución de objetos
  • Traslado de objetos entre páginas y estados
  • Uso del panel Librería
7.Creación de interacción y transiciones básicas
  • Los diferentes tipos de interacción
  • Condicionales de interacción
  • Línea del tiempo. Conceptos básicos
  • Tipos de transiciones
    • Suavizadas
    • Movimiento
    • Escala
    • Rotación
TEMARIO
8.Integración de elementos Rich Media
  • Creación de archivos de video Flash
  • Agregando video a un proyecto
  • Control del reproductor de video
  • Agregando efectos de sonido
  • Integración de contenido Flash
9.Trabajando con Design-Time Data
  • Uso de una lista de datos para definir
      elementos repetitivos
  • Creación de una lista básica de datos:
      componentes y datos
  • Creación de una lista compleja de datos:
      componentes y datos
10.Publicación de proyectos
  • Salida SWF
  • Salida Adobe AIR
ACERCA DE FLASH CATALYST

Adobe Flash Catalyst CS5 es una
herramienta de diseño interactivo
accesible. Permite transformar las
imágenes de Adobe Photoshop,
Illustrator y Fireworks en proyectos
interactivos* sin que sea necesario
escribir código  **.


* En forma básica.
** Visible para el usuario.
ACERCA DE FLASH CATALYST
Flash Catalyst está integrado a la
Plataforma Adobe Flash,
una colección de tecnologías
integradas de Adobe para el
diseño, creación, desarrollo y
visualización de Aplicaciones de
Internet Enriquecidas (RIA´s).



                                     http://www.adobe.com/flashplatform/index.html
ACERCA DE FLASH CATALYST




                                   Actividad 01
 Visitar el sitio de Adobe, consultar información sobre la Plataforma Adobe Flash
ACERCA DE FLASH CATALYST
Responder las siguientes preguntas:

1. ¿Qué es una Aplicación de Internet Enriquecida (RIA)?

2. ¿Qué tecnologías integran la Plataforma Adobe Flash?

3. ¿En qué consiste el framework Adobe Flex?
¿PARA QUIÉN ES FLASH CATALYST?

Está orientado a diseñadores que desarrollen contenido interactivo:

                                                    • Diseñadores Web
                                                    • Diseñadores de interacción
                                                    • Arquitectos de información
                                                    • Diseñadores gráficos
                                                    • Directores creativos
                                                    • Desarrolladores RIA
                       Cualquier diseñador que
             requiera transformar rápidamente
                contenido estático y describir la
                         Experiencia de Usuario
PRINCIPALES CARACTERÍSTICAS

• Integración

• Librería

• Componentes      interactivos
• Eventos    de interacción       Permite a diseñadores:


• Transiciones                    •Mostrar Interfaz funcional y no sólo
                                  contenido estático en menor tiempo
                                  •Facilita la interpretación de la UX
• Páginas    y estados            •Mejora la colaboración con desarrolladores

• Publicación
CONCEPTOS CLAVE
• Diseño  de Interacción (IxD)   • Diseño  sin código
• Experiencia de Usuario (UX)     • Framework de código abierto Flex
• Construcción de bloques         • Integración con la fase de
  • Componentes                     desarrollo
  • Páginas y estados             • Formatos de salida

  • Transiciones                     • SWF
                                     • AIR
CUÁNDO USAR FLASH CATALYST



    InDesign                   Flash                       Flash Catalyst      Flash Builder
    Diseñar                    Crear                       Transformar         Desarrollar
•   Contenido “estático”   •   Aplicaciones de         •   GUI               • Aplicaciones de
•   Documentos                 Internet o escritorio   •   Aplicaciones de     Internet complejas
•   Presentaciones         •   Video interactivo           Internet
•   Portfolios             •   Publicidad Web          •   Micrositios
•   Cross-media            •   Juegos                  •   Widgets
FLUJO DE TRABAJO

Existen dos tipos principales de aplicaciones Flash Catalyst:

• Micrositios
FLUJO DE TRABAJO

Existen dos tipos principales de aplicaciones Flash Catalyst:

• Aplicaciones   centradas en datos (Data-Centric Aplications)
FLUJO DE TRABAJO
• El   flujo de trabajo es similar para ambas aplicaciones. Incluye:
                                                       1.   Planeación (lápiz y papel)
                                                       2.   Crear Artwork
                                                       3.   Agregar recursos a Flash Catalyst
                                                       4.   Crear y modificar páginas
                                                       5.   Crear componentes interactivos
                                                       6.   Definir estados de los componentes
                                                       7.   Definir interacciones y transiciones
                                                       8.   Testear y publicar


               Seguir un flujo de trabajo consistente
                   permite llevar de mejor forma la
                       administración de proyectos.
SIGUIENTE SESIÓN:
02 Proyectos en Flash Catalyst. Conceptos básicos

01 Introducción a Flash Catalyst

  • 1.
    MAESTRÍA EN MEDIOSINTERACTIVOS Tercer Semestre
  • 2.
  • 3.
    CONTENIDO • Temario General • 1. 1Acerca de Flash Catalyst • 1.2 ¿Para quién es Flash Catalyst? • 1.3 Principales Características • 1.4 Conceptos clave • 1.5 ¿Cuándo usar Flash Catalyst? • 1.6 Flujo de trabajo en Flash Catalyst
  • 4.
    TEMARIO 1.Introducción a FlashCatalyst • Acerca de Flash Catalyst • ¿Para quién es Flash Catalyst? • Principales Características • Conceptos Clave • ¿Cuándo usar Flash Catalyst? • Flujo de trabajo en Flash Catalyst 2.Proyecto en Flash Catalyst. Conceptos básicos • Creación de un nuevo proyecto • Definiendo componentes • Agregando páginas • Agregando interacción • Agregando transiciones • Opciones de publicación 3.Creación de proyectos • Planeación de un proyecto • Iniciando un proyecto desde Illustrator, Photoshop y Fireworks • Iniciando un proyecto desde Flash Catalyst
  • 5.
    TEMARIO 4.Componentes básicos • Trabajando con texto • Qué es un componente • Optimización del trabajo de arte • Tipos de componentes: • Button • Checkbox • Radio Button • Toogle Button • Text Input • Slider • Scrollbar 5.Creación y edición de trabajo de arte • Herramientas básicas de dibujo • Configuración de propiedades de los objetos • Importación de trabajo de arte • Edición desde Illustrator • Edición desde Photoshop
  • 6.
    TEMARIO 6.Organización y layout • Rotación 3D • Páginas y capas • Ajustes básicos de timing • Edición de páginas y estados. • Animación de una secuencia • Guías, retículas y reglas • Alineación y distribución de objetos • Traslado de objetos entre páginas y estados • Uso del panel Librería 7.Creación de interacción y transiciones básicas • Los diferentes tipos de interacción • Condicionales de interacción • Línea del tiempo. Conceptos básicos • Tipos de transiciones • Suavizadas • Movimiento • Escala • Rotación
  • 7.
    TEMARIO 8.Integración de elementosRich Media • Creación de archivos de video Flash • Agregando video a un proyecto • Control del reproductor de video • Agregando efectos de sonido • Integración de contenido Flash 9.Trabajando con Design-Time Data • Uso de una lista de datos para definir elementos repetitivos • Creación de una lista básica de datos: componentes y datos • Creación de una lista compleja de datos: componentes y datos 10.Publicación de proyectos • Salida SWF • Salida Adobe AIR
  • 8.
    ACERCA DE FLASHCATALYST Adobe Flash Catalyst CS5 es una herramienta de diseño interactivo accesible. Permite transformar las imágenes de Adobe Photoshop, Illustrator y Fireworks en proyectos interactivos* sin que sea necesario escribir código **. * En forma básica. ** Visible para el usuario.
  • 9.
    ACERCA DE FLASHCATALYST Flash Catalyst está integrado a la Plataforma Adobe Flash, una colección de tecnologías integradas de Adobe para el diseño, creación, desarrollo y visualización de Aplicaciones de Internet Enriquecidas (RIA´s). http://www.adobe.com/flashplatform/index.html
  • 10.
    ACERCA DE FLASHCATALYST Actividad 01 Visitar el sitio de Adobe, consultar información sobre la Plataforma Adobe Flash
  • 11.
    ACERCA DE FLASHCATALYST Responder las siguientes preguntas: 1. ¿Qué es una Aplicación de Internet Enriquecida (RIA)? 2. ¿Qué tecnologías integran la Plataforma Adobe Flash? 3. ¿En qué consiste el framework Adobe Flex?
  • 12.
    ¿PARA QUIÉN ESFLASH CATALYST? Está orientado a diseñadores que desarrollen contenido interactivo: • Diseñadores Web • Diseñadores de interacción • Arquitectos de información • Diseñadores gráficos • Directores creativos • Desarrolladores RIA Cualquier diseñador que requiera transformar rápidamente contenido estático y describir la Experiencia de Usuario
  • 13.
    PRINCIPALES CARACTERÍSTICAS • Integración •Librería • Componentes interactivos • Eventos de interacción Permite a diseñadores: • Transiciones •Mostrar Interfaz funcional y no sólo contenido estático en menor tiempo •Facilita la interpretación de la UX • Páginas y estados •Mejora la colaboración con desarrolladores • Publicación
  • 14.
    CONCEPTOS CLAVE • Diseño de Interacción (IxD) • Diseño sin código • Experiencia de Usuario (UX) • Framework de código abierto Flex • Construcción de bloques • Integración con la fase de • Componentes desarrollo • Páginas y estados • Formatos de salida • Transiciones • SWF • AIR
  • 15.
    CUÁNDO USAR FLASHCATALYST InDesign Flash Flash Catalyst Flash Builder Diseñar Crear Transformar Desarrollar • Contenido “estático” • Aplicaciones de • GUI • Aplicaciones de • Documentos Internet o escritorio • Aplicaciones de Internet complejas • Presentaciones • Video interactivo Internet • Portfolios • Publicidad Web • Micrositios • Cross-media • Juegos • Widgets
  • 16.
    FLUJO DE TRABAJO Existendos tipos principales de aplicaciones Flash Catalyst: • Micrositios
  • 17.
    FLUJO DE TRABAJO Existendos tipos principales de aplicaciones Flash Catalyst: • Aplicaciones centradas en datos (Data-Centric Aplications)
  • 18.
    FLUJO DE TRABAJO •El flujo de trabajo es similar para ambas aplicaciones. Incluye: 1. Planeación (lápiz y papel) 2. Crear Artwork 3. Agregar recursos a Flash Catalyst 4. Crear y modificar páginas 5. Crear componentes interactivos 6. Definir estados de los componentes 7. Definir interacciones y transiciones 8. Testear y publicar Seguir un flujo de trabajo consistente permite llevar de mejor forma la administración de proyectos.
  • 19.
    SIGUIENTE SESIÓN: 02 Proyectosen Flash Catalyst. Conceptos básicos