FLASH - Disseny i animació.

Fons marí

2010-04-20T08:11:00.003+02:00

Exercici per al Crèdit Variable de 2n

2010-03-21T23:03:00.002+01:00

INDICACIONS:
El cotxe una vegada dibuixat en una capa a part,
l'heu de convertir a símbol (F8)
___________________
Després ja només faltar anar-lo movent per l'aparcament (fotogrames clau)
i crear una interpolació de moviment

Es corregirà el proper dia de classe.

Exercici per a CV-TIC de 3r

2010-03-21T22:39:00.002+01:00

Es corregirà el proper dia de classe.

Exercicis d'examen BAT2C

2009-04-29T07:54:00.006+02:00

MÀSCARA

MAR

Creació de màscares amb flash

2009-03-19T12:51:00.001+01:00

Màscara estàtica, no té animació.

Màscara animada, es mou per damunt del dibuix de fons.

Exemples d'alguns tipus de màscares.

Animació seguint Capa Guia.

2009-02-19T13:30:00.006+01:00

Procediment per crear Capa Guia

Video extret del curs d'AulaClic

També podrem fer que el símbol es mogui orientant-se a partir del recorregut.

Abella amb ales animades que segueix una guia

Símbols dins de símbol.

2009-02-18T20:06:00.004+01:00

Podem crear una imatge que tingui moviment propi i que a més dins d'ella existeixi una part que es mou també.

El procediment és el següent:

Creem el dibuix principal, per exemple un cotxe sense rodes, en el cas que vulguem fer girar les rodes.
Mitjançant INSERTAR -> CREAR SÍMBOLO (F8)

dibuixarem la part que volem animar independentment del símbol principal, en l'exemple una roda de cotxe.
Aquesta roda l'animarem, fent-la rotar, mitjançant una interpolació de moviment.
Tot aquest procés el fem dins el símbol en qüestió, no dins l'Escena.

Tornem al dibuix principal (ESCENA), i al cotxe que em creat sense rodes li afegim, primer una roda i després l'altra de la Biblioteca.
Si premem F11, observarem que tenim el símbol de la roda emmagatzemat a la Biblioteca. Cliquem i arrosseguem damunt del cotxe (l'escenari), les adaptem al tamany que ens interessa.
Quan veiem que tot està proporcionat ens tocarà convertir tot el dibuix principal, cotxe, més ambdues rodes, a símbol (F8).
Podem comprovar-ne el resultat prement Ctrl + Enter

Moviment de les RODES del COTXE

Moviments de COTXE i LLIMPIAPARABRISES

Exercicis d'examen. BAT2C.

2009-02-12T07:45:00.005+01:00

GOTA

COTXE

Exercicis d'examen. BAT2A.

2009-02-10T20:27:00.010+01:00

LÍNIA

OVNI

Flash olímpic

2009-02-10T18:37:00.003+01:00

Interpolació de FORMA II.

2009-01-27T19:33:00.005+01:00

Observeu aquestes tres animacions fetes a partir de la interpolació de forma.
Fixeu-vos en l'organització dels diferents objectes que hi apareixen.

Cal que en reproduïu alguna d'elles, de més fàcils a més difícils.

Interpolació de FORMA.

2009-01-20T20:54:00.005+01:00

Flash ens permet fer que un dibuix inicial es transformi en un altre en acabar.
Cal tenir en compte que només actua sobre dibuixos amb traç i/o farciment, no sobre símbols.

Observeu la línia de temps dels exemples que practicarem.

Interpolació de moviment II. Animació de fotografies.

2009-01-13T18:44:00.009+01:00

Seguirem creant animacions, però en aquest cas emprarem dues imatges que importarem a l'escriptori juntament amb altres dibuixos creats per nosaltres mateixos.

Es tracta d'un guant de boxa, i d'un punching-ball, que un cop descarregats i importats a la biblioteca i/o escenari utilitzarem com a part de l'animació.

Procediment:

Descarregar i importar el guant a l'escenari
Convertir aquest guant en símbol (F8). Recordem que és l'única forma d'aplicar-hi posteriorment una interpolació de moviment.
En una nova capa importarem un estri d'entrenament de boxa anomenat punching-ball.
També el convertirem en símbol (F8).
En capes successives podem millorar l'entorn d'entrenament per fer més amena l'animació. Dibuixem lliurement altres objectes o bé un fons.
Arriba el moment de donar vida als elements que tenim a l'escenari. És a dir, crear interpolacions de moviment a les capes on volem que els objectes es moguin.

El guant inicia el moviment de forma ràpida fins a impactar amb l'objectiu, acte seguit la seva velocitat disminueix i poc a poc es retira fins al lloc de sortida.

El moviment del punching-ball, parteix d'aturat. Per tant tindrà un seguit de fotogrames que no es mourà fins que impacte amb ell el guant, és llavors quan inicia el balanceig. Aquesta distorsió de l'objecte l'aconseguim desplaçant el centre del símbol a la base del mateix.

Per finalitzar observem el resultat final.

Animació: Interpolació de moviment

2008-12-15T21:28:00.008+01:00

Procediment a seguir:

- En una primera capa creem el fons del billar.
- Acte seguit en una nova capa dibuixem la bola de billar amb el seu corresponent degradat i número.
- Quan donem la bola per acabada, la convertim en un símbol (F8), per a poder-la animar.
- Arriba el moment de crear tants fotogrames clau (F6), com punts de moviment volem que tingui.
- Finalment seleccionem tota la capa de la bola i li apliquem una interpolació de moviment.
El tac de billar estaria en una altra capa, el convertirem a símbol, (F8) i li farem una interpolació de moviment també.

El resultat hauria de ser similar a aquest. Afegireu com a feina extra una segona bola, fent que també rodoli i que es desacceleri a mida que s'atansa el final de l'animació.

Animació dels fotogrames

2008-12-07T09:53:00.004+01:00

Arriba el moment d'aplicar moviment als objectes que tenim als fotogrames.
Ho podrem fer a partir de dos procediments:

Inserir fotogrames clau i modificar la posició i escalat de l'objecte en cadascun dels fotogrames.
Convertir l'objecte en símbol (F8) i aplicar-hi una interpolació de moviment.

Mostra d'ambdues animacions:

Dibuixant núvols i un llop.

2008-11-12T08:05:00.003+01:00

enllaç al document en format word

Dibuix_nuvols_llop

Get your own at Scribd or explore others: flash tutorial draw

Dibuixem calcant una imatge.

2008-10-25T20:17:00.007+02:00

Optarem ara per a una nova forma de dibuixar, menys creativa, però que en ocasions ens pot donar un bon resultat, ràpid i efectiu.

Procediment:

Una vegada triada la imatge la importem a la biblioteca de Flash.
Seguidament arrosseguem la imatge cap a l'escriptori o zona de treball i un cop allí la convertirem en símbol, en concret en un Clip de pel·lícula. Com?
Amb el dibuix seleccionat: Modificar -> Convertir en símbolo -> Clip de pel·lícula (També ho podem fer des del teclat prement F8)
Podreu observar com a les propietats del clip de pel·lícula que hem creat apareix l'opció color, dins la qual escollirem alpha, deixant el percentatge als vols del 40%, per així poder seguir les línies a calcar sense dificultat.
Ara ens tocarà protegir la capa on tenim el dibuix a calcar. Ho farem prement sobre el candau que tenim a la capa a la línia de temps.
Crearem una nova capa, que serà on dibuixarem, millor dit, on calcarem la imatge que acabem de carregar. Aprofitarem per a canviar els noms de les capes per a evitar confusions. Ho farem fent doble clic damunt del nom de la capa.
Arriba l'hora de començar a dibuixar, ens situarem a la capa que hem anomenat calc, triarem l'eina llapis, en color negre i amb un gruix de 1,75 ó 2 que modificarem al panell de propietats iniciarem els nostres traços seguint la línia del dibuix original.
Important tenir activada l'opció del llapis -> suavitzar, per a poder aconseguir un traç de línies arrodonides.
Recordeu que un cop acabada cada línia podrem ajustar-les a l'original amb l'eina de selecció.
També podem farcir de colors tots els traços que hem dibuixat per a poder fer el nostre dibuix el més semblant a l'original. Potser haurem d'aplicar en ocasions l'opció cerrar huecos grandes del pot de pintura.

Si quan acabem volem fer una pel·lícula de com hem fet el dibuix, ho podrem aconseguir de forma ben senzilla.

Sempre seguint a la capa calc, ens situem al fotograma dos i Inserim un fotograma clau, premem damunt del fotograma 2 el botó dret del ratolí i escollim: Inserir fotograma clau (F6)
Podrem eliminar ja la capa del dibuix original, o bé fer-la invisible clicant damunt de l'ull que hi ha al costat del nom de capa.
En aquest punt podrem començar a desfer part del dibuix, poquet a poquet, per exemple eliminem part del color de farciment.
Repetim l'acció d'afegir fotograma clau amb el cursor al 3r fotograma. Ara esborrem un troç de línia.
Al 4t fotograma eliminem un altre tram de línia i així progressivament fins a eliminar totalment tota la nostra obra. Potser necessitarem 40-50 fotogrames, no importa, com més n'afegim millor serà la sensació de dibuix automàtic que volem aconseguir.
En acabar ens tocarà invertir tots els fotogrames per a que simuli que el dibuix es crea sol. Ho aconseguim clicant damunt de la capa calc al lateral, compte, no damunt de cap fotograma, veurem que es seleccionen tots els fotogrames de la línia de temps. Ara al menú contextual premem damunt Invertir fotogramas.
Podrem aconseguir alentir la pel·lícula si fem doble clic al panell de línia de temps de damunt de l'indicador fps i li baixem la velocitat, deixant-ho a 5 ó 6 per exemple, segons el vostre interès.
Si premem Control + Enter veurem l'animació resultant.

Seguim dibuixant. Ara un ninotet.

2008-10-08T21:12:00.005+02:00

Dibuixem a partir de rectangles i óvals

2008-09-27T20:36:00.013+02:00

- Dibuixa el cargol que apareix a la imatge (el teniu al grup de Intranet)
- Cal que utilitzeu rectangles i óvals per a aconseguir el resultat final.
- I una retoc amb el llapis, per acabar la closca del cargol.

Dibuixem i farcim amb FLASH MX

2008-09-27T15:28:00.007+02:00

Cal que reproduïu un arbre el més semblant al del vídeo.
Utilitzarem les eines següents:

- Llapis (opció "suavitzar")
- Pot de pintura
- Fletxa de selecció

Per a veure el resultat final haureu de prémer la tecla F12

Contes i històries d'animació

2006-09-20T12:35:00.000+02:00

Creació de contes i històries d'animació.

visualitza 1
visualitza 2
visualitza 3
visualitza 4 (sèrie)

Portades i introduccions

2006-09-20T12:18:00.001+02:00

Portades i introduccions a les planes web.
visualitza 1
visualitza 2

Webs corporatives i d'empreses

2006-09-20T10:47:00.003+02:00

Webs corporatives.
Visualitza 1
Visualitza 2
Visualitza 3
Visualitza 4 --> a la part dreta , premeu sobre un idioma selection language

2006-09-20T10:47:00.002+02:00

Mapes de situació. visualitza

Eina informativa

2006-09-20T10:47:00.001+02:00

Informació atractiva.
visualitza

jocs i entreteniment

2006-09-20T10:28:00.000+02:00

Una altra utilitat, jocs i entreteniment.
visualitza 1
visualitza 2

Exposar fotografies

2006-09-18T20:15:00.000+02:00

Plana sobre art.
visualitza

Dissenyadors web

2006-09-18T20:01:00.000+02:00

Webs de disseny.

visualitzar1
visualitzar 2
visualitzar 3

Promocions i publicitat

2006-09-18T18:52:00.001+02:00

Promoció i màrketing :

visualitzar 1
visualitzar 2
visualitzar 3 --> prémer sobre entrar al site
visualitzar 4