FLSAH

TEXTO ROTATIVO 

Siguiendo con flash el siguiente ejercicio se basa en hacer que alguna forma vectorial gire en este caso lo haremos con textos 

1. Creamos un nuevo escenario donde escribiremos en diferentes capas los disnstintos textos que tenemos en su respectivo sitio 

2. Daremos interpolacion de forma en la linea del tiempo al primer texto y le daremos mas tiempo que a los demás para que así sea el ultimo en desaparecer 

3. A los demás textos le cambiaremos el color la ubicación y ademas le añadiremos una rotación como en la pelota que rueda dándole en la parte derecha superior a rotación dirección derecha y ajustandolos en la linea del tiempo le damos una interpolacion de movimiento y asi obetenr el resultado final 

ADOBE FLASH

1. ITERPOLACIÓN DE MOVIMIENTO

La interpolacion de movimiento es una animación que se crea especificando distintos valores  para una propiedad de objeto en distintos fotogramas

*. Para crear una interpolacion de movimiento primero crearemos una forma vectorial

* Una vez lo tenemos le daremos clic derecho y la opción de interpolación de movimiento aparecerá un punto interceptado en el medio el cual arrastraremos ese punto al sitio donde queremos que dirija la forma y le daremos play en la linea del tiempo .

2. STICKMAN EN MOVIMIENTO CON STOP 

* Crearemos sobre el escenario un stickman al cual le daremos un movimiento siguiendo los pasos anteriores  añadiéndole ahora la opción de detención 

* Para ello arrastraremos el punto del muñeco para indicar la dirección que va a seguir luego nos situaremos sobre la carpeta de opción de linea del tiempo que esta en fragmentos de código  y elegiremos la opción de detener en este fotograma 

* Una vez seleccionado en la linea del tiempo aparecerá otra linea que nos indica donde se detendrá el stickman 

3.ANIMACIÓN PELOTA RODANDO 

*Ahora realizaremos el efecto de una pelota rodando Para ello crearemos una circunferencia y le daremos un degradado para que al mover la se cree el efecto de rodar

* Arrastramos el punto de un extremo al otro y añadiremos la interpolacion de movimiento 

* Por ultimo añadiremos en la ventanas superior de la derecha en propiedades configuraremos al rotación que queremos darle ya sea  a la derecha o izquierda 

4. ANIMACIÓN PELOTA  BOTANDO 

*En este caso crearemos el efecto de la pelota de botando e cogido la misma pelota del ejercicio anterior ahora arrastraremos el punto hacia la parte superior 

*Cuando ya la tengamos le daremos a crear " interpolacion clasica" y a continuación en la linea del tiempo añadimos un fotograma clave 

* Y por ultimo llevamos la pelota otra vez hacia la parte inferior para añadirle otro fotograma clave y así obtener el resultado 

5. TEXTO EN MOVIMIENTO CON STOP EN EL CENTRO 

* Así mismo usando fotogramas claves y la iterpolación de movimiento realizaremos una animación que se detendrá en el  centro para luego continuar 

ADOBE FLASH

1. INTERPOLACIÓN  DE FORMA

Una interpolación de forma consiste en hacer que un objeto en el escenario de flash cambie su forma física . Por ejemplo podemos hacer que un circulo se transforme en un rectángulo

*. Para realizar una interpolación  de formas tenemos que hacer uso de "Fotogramas claves vacíos " ya que este nos permite crear un vacío en la linea del tiempo el cual nos permitirá crear otras formas un objetos.

*. Primero dibujamos una forma con la herramienta de formas en nuestro primer fotograma y le damos a insertar forograma clave

*. hacemos otra forma sobre el escenario  , en la linea del tiempo selecciono uno de los fotogramas c entre los dos fotogramas clave en la capa que contiene las dos formas .

* y elijemos insertar interpolacion de forma para ver como se interpolan las formas en todos los fotogramas entre los dos fotogramas clave

2. INTERPOLACIÓN DE FORMA DE LETRA A FORMA VECTORIAL 

Ahora transformaremos un carácter a una forma vectorial ya puede ser triangulo cuadrado o estrellas

* Para ello seguiremos los pasos anteriores creando primero una letra a la cual le daremos la opción de Modificar +  Separar para que así el carácter se convierta en vector

* A continuación nos ubicamos en el fotograma que querramos  y le daremos a F7 para luego crear la forma que hemos elegido

* Por ultimo nos pondremos en un fotograma de la mitad de entre las dos formas y le daremos a botón derecho y crear interpolacion de forma y asi tendremos nuestra transformación hecha

3. ANIMACIÓN EFECTO DE LUZ 

Esta vez haremos a una forma el efecto de movimiento giratorio para esto utilizaremos un degradado

* Creamos una circunferencia a la cual elegiremos el color y tamaño luego añadimos la herramienta degradado escogiendo la opción de degradado lineal y modificaremos el color y la dirección de donde queremos que se haga el degradado

* Por ultimo movemos el degradado hacia un extremo del circulo para luego darle  movimiento y se haga el efecto de girar para ello le ponderemos en la linea del tiempo insertar interpolacion de movimiento para luego añadirle un fotograma clave y así lo tendríamos .

ADOBE FLASH

PRACTICAS CON FOTOGRAMAS EN FLASH

1. BOTÓN PULSE 

*. Siguiendo con flash y sus fotogramas  ahora hemos creado una animación a base de letras y formas

*. Para crear esta animación en un documento nuevo añadiremos formas de estrellas y a continuación añadiremos letras pero una en cada capa creando una capa nueva para cada letra y también añadiendo un fotograma para cada una de ellas

A cada letra le cambiaremos el color

Y para finalizar lo exportaremos como giff animado y veremos el resultado 

2. HERRAMIENTA DECO

* La herramienta DECO nos permite utilizar nuestros símbolos para crear patrones y rellenos llegando a conseguir efectos vistosos pero muy sencillos de aplicar. 

* A continuación mostraremos una animación realizada con la herramienta deco donde hemos utilizado varios efectos de dibujo como construcción efecto flores o árbol en los cuales le hemos yendo añadiendo diferentes capas a cada efecto de dibujo para que luego al guardarlo pueda reproducirse todo a la vez 

El resultado final usando las diferentes efectos de etsa herramienta nos quedaría así

ADOBE FLASH

ADOBE FLASH 

Adobe flash es una aplicación que sirve para la creación  y manipulación de gráficos vectoriales con las pasibilidades de manejo de código , mediante un lenguaje de scripting  llamado  ActionScript.

Por lo tanto Flash es un programa que trabaja con fotogramas y esta destinado a la producción y entrega de contenido interactivo para diferentes audiencias en todo el mundo sin importar la plataforma 

A continiación empezaremos a utilizar flash aprendiendo a usar sus herramientas en este caso las de dibujo :

1. DIBUJO PANDA :

*  Para este dibujo hemos utilizado herramientas sencillas como herramienta de forma circulo, ovalo ,elipse o rectángulo y utilizando  diferentes capas  para insertar en cada una de ellas las diferentes partes del dibujo como el panda, los pájaros ,o el sol  crearemos el dibujo 

2. HERRAMIENTA TEXTO Y FILTROS

*A continuación utilizando la herramienta texto crearemos los siguientes ejemplos usando capas para cada uno de los textos usaremos en la capa de delfín una mascara de recorte con un fondo 

* De igual forma para la palabra queso creando otra capa aparte realizaremos el efecto de un queso haciendo círculos y pintándolos para así aplicar otra mascara de recorte 

3. FOTOGRAMAS CON FLASH

Ahora veremos como crear fotogramas usando la linea del tiempo de flash 

*. Los fotogramas se colocan en la linea del tiempo en el orden en el que se desea que aparezcan los objetos de los fotogramas en el contenido final 

* Para crear un fotograma realizaremos sobre un documento algun texto o dibujo para darle movimiento o que pase uno a uno 

* Utilizando la linea del tiempo la colocaremos en el tiempo que queramos y a continuación le daremos a la opción de INSERTAR FOTOGRAMA " el cual creara un fotograma en la linea del tiempo y haremos el mismo paso para crear mas fotogramas en este caso un texto que queremos que pase de uno a otro 

* Por ultimo lo guardaremos exportan dolo como película en ARCHIVO + Exportar como película al cual lo guardaremos como giff animado para que se nos reproduzca al abrirlo después

4. CIRCUNFERENCIA CON FOTOGRAMAS 

* Ahora crearemos una circunferencia creándola por partes  hasta completarla y  insertandole un FOTOGRAMA  CLAVE a cada parte dándole clic derecho ,  para que al reproducirlo se haga el efecto de un circulo cerrándose.

PROTOTIPADO DE UNA PAGINA WEB

EL PROTOTIPADO O ESTRUCTURA DE UNA PAGINA WEB

 El prototipado de un sitio web (wireframing) consiste en hacer un bosquejo de cómo será su aspecto  (interfaz o interface). Para ello, podemos utilizar un simple lápiz y papel, o una pizarra blanca, o un software de prototipado
 La idea es centrarnos en cómo se organizará la información (arquitectura de la información) y tener un punto de partida sobre el que hacer un diseño más avanzado o definitiv


 
 La ventaja del prototipado es que es muy rápido de crear, modificar y es económico. Puesto que diseñar directamente el sitio web tal y como será y realizar modificaciones sobre él implica un coste más elevado, el prototipado nos ayuda a definir desde el principio cómo se organizarán los elementos y a reducir modificaciones innecesarias en el diseño real, reduciendo costes.

A continuacion crearemos  el prototipado deuna pagina web usanso la aplicación Ningamock

NINJAMOCK es  una herramienta de nivel intermedio para la creación de wiframes para móviles como iOS, Android y Windows Phone así como wireframes para diseño web la cual podemos ocupar cuando necesitemos un diseño rápido,

1.Para ello nos crearemos una cuenta y asi podremos realizar nuestro prototipado

2 . Se nos abrira una ventada donde tendremos diferentes herramientas para reliazar el diseño

BANNER CON HTML5 MARKER

HTML5 

Es un Lengauje Markup de hecho sus siglas significan (Hyper Text Markup Language) y es usado para estructurar y presentar el contenido para la web 

A continuación relazaremos un banner sobre nuestro Blog usando la aplicación HTML5 MARKER

1. Primero nos crearemos una cuenta en la aplicación para una vez así realizar el banner 

2. Una vez creda la cuenta se nos abrirá una ventana como esta donde empezaremos a crear el diseño de  nuestro banner 

3. Y en la barra de la derecha es la que utilizaremos para crear editar y diseñar muestro banner 

escogiendo el tamaño , el color las dimensiones y muchas cosas mas al cual tanbien podremos añadirle imágenes  y textos  y añadirle un link que nos lleve directo a una pagina web deseada

4.. Y una vez finalizado veremos como a quedado 

FINAL

CREAR BOTONES CON FIREWORKS

A continuación veremos como se crea y funciona un botón en Fireworks

       Los botones son un tipo especial de símbolos se utilizan como elementos de navegación para una pagina web mediante el inspector de propiedades de fireworks resulta muy fácil editar los botones
ya que es posible arrastrar instancias de un botón desde la biblioteca de símbolos al documento, se puede cambiar el aspecto gráfico de un único botón y actualizar automáticamente el aspecto de todas las instancias de botón de una barra de navegación.    

1. Para crear un botón primero sobre un documento haremos la forma de un vector el que queramos
en este caso la de un polígono

2. Ahora convertiremos el polígono en un símbolo para ello iremos al menú modificar + convertir en símbolo y elegiremos la opción de convertir en botón y le pondremos un nombre

3.Una  vez convertido a botón nos quedara con este aspecto al cual le daremos doble click sobre el botón donde nos aparecerán  los distintos estados  del que se componen los botones que son arriba , sobre ,abajo y sobre y abajo










4. Luego lo que haremos es copiar el botón y pegarlo en los diferentes estados que tiene y al botón  le iremos cambiando el color para que cuando le ratón se posicione sobre el botón cambie de color y cuando le demos click también

                         


5. Para finalizar le daremos una vista previa para ver como a quedado yéndonos a la previsualización de nuestro navegador de Internet.

BANNER CROSSMEDIA ANIMADO

A continuación desde el banner realizado anteriormente crearemos una animación ya que Fireworks tambien nos permite crear diferentes animaciones

1. Para ello llevaremos el banner a FIREWORKS donde mediante estados iremos creando la animación
creando un estado nuevo este estarán  en blanco en el que introduciremos cada parte del banner que queramos animar

2. Una vez creado todos los estados le daremos la duración que sea necesaria para que así la animación sea mas rápida o por el contrario mas ralentizada

3. En el cuando de propiedades  buscaremos la opción de Animado websnap 128 y así obtendremos el resultado

4. Para terminar lo exportaremos a formato HTML para poder utilizarlo en otras paginas para eso iremos a Archivo + exportar HTML y lo guardaremos como html y imágenes y así lo tendriamos 

FINAL