Animació PR

Neus Barbanoj Fernández

Estudiant de Multimedia

Animació: Pràctica
Crear una història animada

https://youtu.be/FxK8NASmpMg
 Animació PR
Neus Barbanoj Fernández
Estudiant de Multimedia

ÍNDEX

Presentació 2

Enunciat 3

Tasques a realitzar 4
Setmana 1 4
Setmana 2 4
Setmana 3 a 8: 5

Storyboard / guió técnic 7

Memòria 11
PRINCIPIS D’ANIMACIÓ 11
Estirar i encongir: 11
Exageració: 12
Personalitat 13
Entrades i sortides lentes 14
Accions secundaries 15
Procès de treball After Effects 16
WEBGRAFIA 17
Dates de les entregues parcials 18

1
 Animació PR
Neus Barbanoj Fernández
Estudiant de Multimedia

1a entrega parcial : Diumenge, 28 d’octubre de 2018 via fòrum

2a entrega parcial: Diumenge, 4 de novembre de 2018 via RAC
Data de l'entrega definitiva: ​Diumenge, 16 de desembre de 2018 18

2
 Animació PR
Neus Barbanoj Fernández
Estudiant de Multimedia

Presentació
La pràctica final es presenta com un encàrrec professional d'un projecte d'animació on haureu d’aplicar tot allò après durant el curs i també
competències adquirides en altres assignatures. Haureu d’explicar una història, estructurar-la per plans, definir els protagonistes i animar-los.
El resultat final ha de ser com el d'un projecte professional per difondre per les xarxes socials. Haurà d'incloure imatges de qualitat, efectes sonors i
música.
Aquesta pràctica la farem en tres fases, amb dos lliuraments parcials i un lliurament final.
Competències
● Ús i aplicació de les TIC a l'àmbit professional i acadèmic.
● Capacitat d'adaptar-se a les tecnologies i als futurs entorns actualitzant les competències
professionals.
● Capacitat per analitzar un problema al nivell d'abstracció adequat a cada situació i aplicar les
habilitats i coneixements adquirits per abordar-lo i resoldre'l.
● Capacitat d'anàlisi i observació del moviment.
● Capacitat per a planificar i gestionar projectes en l'entorn de les TIC.
● Capacitat per a crear i dissenyar els elements gràfics i visuals d'un producte o aplicació
multimèdia fent servir procediments creatius, fonaments bàsics del disseny i un llenguatge
formal.
● Capacitat per a animar i objectes realitzats mitjançant programaris de dibuix vectorial o
bitmap.
Objectius
● Iniciar a l'estudiant en els diferents mètodes i tècniques de la imatge en moviment.
● Conèixer el llenguatge del moviment i les lleis bàsiques de l'animació.
● Utilitzar creativament les diferents tècniques d'animació.
● Fer un ús adequat del llenguatge del moviment, en animacions realitzades mitjançant
programes d’animació treballats durant el curs.
● Planificar de forma global les estratègies de la producció de l'animació.

3
 Animació PR
Neus Barbanoj Fernández
Estudiant de Multimedia

Enunciat
En aquesta pràctica us demanem que desenvolupeu un projecte en base als vostres interessos propis però tractant-lo com si es tractés d’un
encàrrec real. Per tal de facilitar-vos la feina, us proposem un llistat de possibles temes o punts de partida:

1. Caràtula o cortineta per a programa de TV, festival de cine o teatre, festa major, event municipal...
2. Vídeo educatiu o científic
3. Gag d’animació
4. Currículum o presentació personalojk
5. Tema lliure

Tot i així, aquell de vosaltres que ho vulgui pot escollir un tema lliure o que no estigui en aquesta llista. No us volem limitar, al contrari, podeu
demostrar tot el vostre potencial creatiu.
Per desenvolupar aquesta pràctica disposareu de 8 setmanes. Les dues primeres seràn sobretot per planificar la feina, mentre que les 6 darreres les
podreu destinar íntegrament a la producció del clip final. Remarcar també, que per realitzar la pràctica podeu fer vosaltres mateixos la vostra pròpia
il·lustració, cercar-les en pàgines de recursos gratuïts o demanar-les a algun amic o col·laborador il·lustrador, sempre nombrant la font original del
material.

4
 Animació PR
Neus Barbanoj Fernández
Estudiant de Multimedia

Tasques a realitzar

Setmana 1

● Proposta del projecte*

○ Al fòrum de l’aula hi trobareu la carpeta “Pràctica” i a dins les subcarpetes amb les temàtiques que apareixen a l’enunciat més una que es dirà
“ Tema lliure”. Dins la carpeta que creieu adient, haureu d’escriure un missatge de poques línies explicant la idea que teniu pensat fer. Cal penjar el
missatge com a ​molt tard el dia 28 d’octubre.

Setmana 2

● Definició i concreció del projecte*

○ En aquesta fase, cal que definiu bé el projecte, donant-ne més detalls, estil que utilitzareu, públic al que va dirigit, duració estimada... tot junt en
un document que no superi el tamany d’un A4. Aquesta ​entrega la realitzareu via RAC com a molt tard el dia 4 de novembre

5
 Animació PR
Neus Barbanoj Fernández
Estudiant de Multimedia

Setmana 3 a 8:

● Pre-producció
Us recomanem l’elaboració d’un petit guió tècnic o storyboard abans de començar a treballar. Com ja hem dit vàries vegades, és important no
començar a treballar “a cegues” o “a veure què em surt”. La planificació us estalviarà molt de temps, sobretot us estalviarà haver de canviar
aspectes que no es van preveure durant la fase inicial en estadis avançats del projecte.

● Producció del clip final

Heu de treballar en After Effects a HDV 720 (1280 x 720**) i 25 fps. Us recomanem una durada mínima de 10 o 15 segons. Remarquem en aquest
punt que és millor fer una animació curta, ben treballada i que transmeti alguna idea, sentiment o història que no pas una animació llarga amb
moviments poc treballats o sense sentit. No és permesa la utilització de plugins externs a After Effects
Lectures i recursos
● Lectures de les Unitats de l’assignatura i tutorials d’After Effects
● Exemples proposats pel professor/a col·laborador/a al tauler (Usos professionals de
l’animació).
Criteris d'avaluació
● Correcta aplicació dels principis d'animació i tractament de la teoria del moviment. 4 punts
● Grau d'elaboració de les animacions. 2 punts
● Bona capacitat narrativa, creativa i d’una correcta estructuració del llenguatge audiovisual. 1
punt
● Aplicació d’efectes sonors i música. 1 punt
● Adequar-se als paràmetres i condicions de lliurament (format, mesures en píxels, velocitat
de fotogrames, etc). ​1 punt
● Correcció en la presentació del document informe explicatiu de la pràctica . 1 punt
Condicions de lliurament
Per poder valorar correctament la vostra pràctica haureu d'entregar a la secció de l’aula Lliurament i registre d'AC (RAC), que es troba en l’apartat
Avaluació , la següent documentació encapsulada dins d'un únic arxiu ZIP o RAR , anomenat els arxius de la següent manera
● PRA_Cognom1_Cognom2_Nom i l’extensió d’arxiu que es tracti
6
 Animació PR
Neus Barbanoj Fernández
Estudiant de Multimedia
● Memòria explicativa del procés de treball
● Enllaç del clip final a penjat a Youtube o Vimeo. Aquest enllaç ha d’estar inclòs dins la

*Aquestes entregues parcials no són obligatòries, però si molt recomanables. Recordeu que estem simulant un projecte real. Feu-vos la següent
pregunta: en un projecte real, us arriscaríeu a fer una sola entrega al vostre client?
**Us demanem aquesta resolució per què hi pot haver gent amb limitacions de maquinari, però qui ho vulgui pot treballar amb l’estàndard HDTV
1920 x 1080 25f 20182 ​

memòria explicativa i a més l’haureu de compartir en el fòrum de l’aula a la carpeta Pràctica

/ Enllaços
● Tots aquells arxius de treball (textos, imatges, gràfics, etc) que heu generat durant tot el procés de creació de l'animació. És important que lliureu
des del primer esbós fins el clip amb el resultat final
● Tots els arxius d’AfterEffects, Illustrator, Photoshop... que hagueu obtingut com a resultat de la vostra pràctica.

7
 Animació PR
Neus Barbanoj Fernández
Estudiant de Multimedia

Storyboard / guió técnic

1. Saber que volem posar, o que volem resaltar en la nostra animació, per això
cal revisar el curriculum que ja tenim fet per les empreses, i saber quines
parts són les més importants per fer l’animació.

Dades personals / Formació - Habilitats

8
 Animació PR
Neus Barbanoj Fernández
Estudiant de Multimedia
2. Un cop hem analitzat que volem posar en l’animació, ha de
​ orrador.
ser simplificada i directa: ​storyboard / b

3. Hem sel·leccionat diferentes escenes diferenciades, a on

descriurem gràficament, les dades personals, les habilitats,
els idiomes, i finalment altres coneixements o dominis de
programes.

9
 Animació PR
Neus Barbanoj Fernández
Estudiant de Multimedia

4. A partir d’aquí podrem, buscar imatges al ​freepik i c​ rear el document ​Ilustrator. Pantalles principals: ​(alguns elements els reutilitzarem per
crear les subpantalles). Només creem una pantalla per esquema, per tenir els elements necessaris.

10
 Animació PR
Neus Barbanoj Fernández
Estudiant de Multimedia

11
 Animació PR
Neus Barbanoj Fernández
Estudiant de Multimedia

Memòria

PRINCIPIS D’ANIMACIÓ

Estirar i encongir:

En aquest principi exageren les deformacions dels cossos per dotar els elements d’elasticitat.
Quan apliquem una estirada i un encongiment adequats als elements, guanya interés i
credibilitat en el públic.

En l’element del “món” hem treballat varies vegades ​estirar i encongir​​ per donar dinamisme a
l’acció, i donar​ elasticitat​​ a l’element, és la manera de mantenir al espectador interessat en
saber que passarà després. És un moviment, que va lligat a l’​exageració​​.

12
 Animació PR
Neus Barbanoj Fernández
Estudiant de Multimedia

Exageració:
L'exageració ajuda a reflectir l'essència de l'acció. Una gran
part d'aquesta exageració pot ser obtinguda durant els
fotogrames que duri l'encongiment, l'estirada i l'anticipació
d'un objecte.

En l’element de ​“play”​ del video, hem donat exageració amb

l’escala, per tal de quan cliquem, fer-lo de més gran a més petit
i tornar a l’estat original, aquest moviment, dona dinamisme, i
ens fa entendre, que la mà a clicat el botò. És una manera de
fer que duri la ​anticipació​​ de l’acció.

13
 Animació PR
Neus Barbanoj Fernández
Estudiant de Multimedia

Personalitat
Facilita la connexió emocional entre el personatge i el públic. Hem de
desenvolupar els nostres personatges fins a donar-los un aspecte concorde
amb el que representaran dins de l'animació. El "bo" ha de tenir aspecte de
molt bo i el "dolent", l'ha de tenir de molt dolent.

En aquesta animació, la personalitat la posa l’ordinador que és l’element

que a través d’ell van suggereix coses. En l’​animació contemporània​​, els
elements no se'ls hi posa cara molts cops, però utilitzem l’element que surt
en tot el clip, ja que és l’element que connecta amb l’espectador, ja que
estem a l’espera de veure que li suggereix contínuament.

14
 Animació PR
Neus Barbanoj Fernández
Estudiant de Multimedia

Entrades i sortides lentes

S'aconsegueix donar importància a l'acció pel fet d'accelerar-ne la
part central, mentre que es fan més lents el principi i el final, de
manera que es fa, per tant, una lectura més retòrica d'aquests
temps.

En els canvis d’escena, ​les entrades i sortides​​ del nom de l’escena,

són els que ens fan entrades i sortides lentes, en totes s’ha creat una
acció, per fer el canvi d’escena, i aquesta acció dura un determinat
temps, però, mentre entre la següent escena, li donem més
velocitat, però, en el canvi d’escena, exagerem els moviments, i
també anticipem, per crear ​sortides i entrades lentes​​ de les
escenes.

15
 Animació PR
Neus Barbanoj Fernández
Estudiant de Multimedia

Accions secundaries
Les accions secundàries són els petits moviments que complementen l'acció
principal. Generalment les accions secundàries duren uns quants
fotogrames més que el que dura l'acció principal. Una acció secundària
podria ser, per exemple, la faldilla d'una dona. Mentre camina tot el cos se
li mou i la faldilla es desplaça alhora, però quan es deté el cos es deixa de
moure. La faldilla, tanmateix, romandrà uns quants fotogrames en
moviment per a simular l'energia cinètica que ha agafat pel fet de moure's
amb la noia.

Les​ accions secundaries​​ en aquesta animació, són els moviments que li

donem als elements secundaris de l’acció, en aquest cas, l’element
principal és l’ordinador, com hem dit anteriorment, és l’element que té
personalitat en el clip. I els moviments que tenen els altres elements són
accions secundaries​​. Mentre van passant coses dins l’ordinador, els
elements externs també ens donen més informació en aquesta escena per
exemple: van apareixent la ​“idea”​, els “​ajustos / edició del vídeo”​ i donem
“play”​ a l’acció, aquests elements es van movent per recordar que el que
fem és, tenir una idea, editar o crear el vídeo o animació, i després
reproduir-lo.

16
 Animació PR
Neus Barbanoj Fernández
Estudiant de Multimedia

Procès de treball After Effects

● Primer de tot, el que s’ha fet ha sigut, descarregar imatges del ​freepik​​, per tal de crear les escenes en ​illustrator​​, abans de passar-ho al
After effects​​.
● Un cop hem escollit les imatges vectorials en freepik, hem anat creant les escenes una a una, per tenir
separats els elements, els elements que es repetia, només l’hem creat en una escena, i a l’animació els
hem anat treballant.Primer de tot en illustrator treballarem les capes, per separar cada element, i poder
treballar-lo per separat a l’edició de l’animació, si no el que passa és que ens surt com una composició
única. Per tant, a illustrator crearem les capes per separades de cada element que surt a l’animació i
volem tractar per separat, podem guardar l’arxiu com illustrator, que l’after effects ens accepta
treballar-lo, i ens interpreta les capes, tot i que les hem de tornar a recol·locar al importar-ho.
● Quan tenim les escenes plantejades en illustrator, per passar-ho a ​after effects​​, hem revisat que tinguem
tot en capes separades i anomenades, per tal de saber quin és cada element, ja que a ​after effects​​,
aquests noms ens són importants per crear l’animació.
● Hem exportat a ​after effects​​, les escenes des de ​illustrator​​ una a una, com a composicions diferents, per
tal d’organitzar una mica aquests elements.
● Un cop exportat tot a after effects, hem anat creant l’animació escena a escena, i relacionant les escenes,
amb elements de l'escenari, o bé creant accions entre elements, per tal de tenir un seguiment de escena
a escena.

Composició en after effects

17
 Animació PR
Neus Barbanoj Fernández
Estudiant de Multimedia
Escenari de treball, after effects

18
 Animació PR
Neus Barbanoj Fernández
Estudiant de Multimedia

WEBGRAFIA
● https://freesound.org/people/pcruzn/sounds/335860/​ //
○ 37154__volivieri__soccer-ball-hit-ground-01.wav
○ 178186__snapper4298__camera-click-nikon.wav
○ 378484__malucien__golpe.wav
○ 430516__cheira__04-gotas-glued.wav
● https://screencast-o-matic.com/screen-recorder-upgrade?type=ytupload
● https://www.freepik.es/search?query=dise%C3%B1o+grafico&sort=popular&format=search&page=3
● https://vimeo.com/49799013​ / idees de la pàgina de l’assignatura per la PR.
● https://vimeo.com/139507944​ / idees de la pàgina de l’assignatura per la PR.
● https://vimeo.com/118788220​ / idees de la pàgina de l’assignatura per la PR.
● https://youtu.be/fJRUouNhbRU
● https://youtu.be/XPWt_41U-R4
● https://youtu.be/6e4efVVPrWY
● https://youtu.be/YJvpi9Elskk
● https://youtu.be/ev-ut9Iea5E

19
 Animació PR
Neus Barbanoj Fernández
Estudiant de Multimedia

Dates de les entregues parcials

1a entrega parcial : Diumenge, 28 d’octubre de 2018 via fòrum

2a entrega parcial: Diumenge, 4 de novembre de 2018 via RAC
Data de l'entrega definitiva: ​Diumenge, ​16 de desembre ​de 2018

[ AVÍS : Els darrers 3 dies anteriors a l’entrega, el professor/a col·laborador/a no assegura una òptima orientació de l’exercici. Es recomana
realitzar els plantejaments i consultes amb prou temps, no deixant-ho pels últims dies, si es vol assegurar un òptim resultat de l’exercici].

20
 Animació PR
Neus Barbanoj Fernández
Estudiant de Multimedia

Nota: Propietat intel·lectual

Sovint és inevitable, en produir una obra multimèdia, fer ús de recursos creats per terceres persones. És per tant comprensible fer-ho en el marc d'una pràctica dels estudis del Grau
Multimèdia, sempre i això es documenti clarament i no suposi plagi en la pràctica. Per tant, en presentar una pràctica que faci ús de recursos aliens, s'ha de presentar juntament
amb ella un document en què es detallin tots ells, especificant el nom de cada recurs, el seu autor, el lloc on es va obtenir i el seu estatus legal: si l'obra està protegida pel copyright
o s'acull a alguna altra llicència d'ús (CreativeCommons, llicència GNU, GPL ...). L'estudiant haurà d'assegurar-se que la llicència que sigui no impedeix específicament seu ús en el
marc de la pràctica. En cas de no trobar la informació corresponent haurà d'assumir que l'obra està protegida pel copyright.
Hauran, a més, adjuntar els fitxers originals quan les obres utilitzades siguin digitals, i el seu codi font si correspon. Un altre punt a considerar és que qualsevol pràctica que faci ús de
recursos protegits pel copyright no podrà en cap cas publicar-se en Mosaic, la revista del Graduat en Multimèdia a la UOC, a no ser que els propietaris dels drets intel·lectuals donin
la seva autorització explícita.

21