1

Ficha de Trabalho 4
--Animao 2D--

Professora: Sandra Silva

2010/2011

Objectivo:Animaes.
Exerccio1Animaoframeaframe
AanimaoframeaframefuncionademaneirasemelhanteaumdesenhoAnimado.
1.CrieumdocumentoFlasheguardeocomonomeFlash4_1.fla
2.Activeasrguas(Rulers)easgrelhas(Grid).
3.Desenheumcrculo(116.5x116.5)decontornopretoepreenchimentoverde.
Observequenoprimeiroquadro,aodesenharoobjectoapareceumabolinhapreta,que
representaaexistnciadealgonessaframe.

4.Seleccioneocrculoe,noColorMixer,useacor#00FF33(verde)eotipolinearparaproceder
aopreenchimentodaformaindicadonafigura.

5.UtilizandoaGradientTransformToolajusteaposiodogradiente.
6.Natimeline,cliquecomobotodireitonaframeinicialeseleccioneaopoInsertKeyframe.
Umakeyframeumainstnciadoobjectonoquadroseguinte.
7.Repitaaoperaoatframe15.
8.Posicioneseemcadaumdasframesevmovendoocrculoumpoucoparaadireita.
Nota:PressioneateclaShiftparaconseguirummovimentoemlinharecta.

9.PressioneCTRL+ENTERparatestaraanimao.
10.Guardeodocumento.

Quandosecriaumaanimaotemosanecessidadedenavegarentreasframesparavermoscomoesta
ficaraanimao,oquecausaalgumaperdadetempo.
AsferramentasOnionskinservemparaquesepossavisualizarmaisdoqueumacenadaanimaoem
simultneo.

Onionskin

Mostratodasascenasdaanimaoqueestejamdentrodascenasunidas.

Noexemploseguintesoapresentadasascenasentreacena1cena10.

Onionskinoutlines
Seromostradososcontornosdosobjectos.

Ediodemltiplosframes

Permiteaediodaframeseleccionada,masmostratodasasframesdaanimao.

Exerccio2Animaoframeaframe(rpida)

1.AbraodocumentoFlash4_1.fla.
Avelocidadedaanimaomedidaemframesporsegundo,sendoassimquandoconfiguramos
aanimaopara12fps,significaqueveremos12framesemcadasegundo.Seaumentarmos
essevalor,aumentaremosavelocidadedaanimao.
2.Altereaframerate(nmerodeframesporsegundo)para30fps.
3.Testeaanimao.(Shitf+EnterouCtrl+Enter)
4.GuardeodocumentocomonomeFlash4_2.fla

Exerccio3Animaoframeaframe

1.CrieumdocumentoFlasheguardeocomonomeFlash4_3.fla
2.SeleccioneaferramentaTexto;DigitenoladoesquerdodopalcoaletraM;
3.Altereotamanhodafontepara46epintecomacordesejada;

4.Seleccioneoquadro2nalinhadotempoeseleccioneInserir>Quadrochave;
5.ComaferramentaTextoactivada,dumcliquenoladodireitodaletraMparaactivaro
cursordecaracteres;
6.DigitealetraA;
7.Seleccioneoquadro3einsiraumnovoquadrochave.ComaferramentaTextoactivadaclique
noladodireitodaletraA.DigitealetraC;
8.RepitatodosestespassoscorrectamenteatcompletarapalavraMACROMEDIA;
9.Quandoterminar,testeasuaanimao.(Shitf+EnterouCtrl+Enter)

Exerccio4Animaointerpolada(MotionTween)
Aanimaoframeaframepermitequetenhaumcontrolototalsobreaanimao,maspodeser
demorada,pois,porvezesaanimaotemdesercompostapormuitasframes.Umaformade
automatizaresteprocessoatravsdaanimaocomInterpolao,ouseja,nestetipode
animaoapenasdefinidoaposioinicialeaposiofinaldoobjecto.
1.CrieumnovodocumentoFlasheguardeocomonomeFlash4_4.fla.
2.Desenheumaestrelade20pontoscompreenchimentoradial(amareloelaranja)e
contornoamarelo,comasseguintesdimenseseposio:

3.Seleccioneaestrelaeconvertaoobjectonumsmboloparaqueestesejaadicionadoao
flashesejapossvelasuareutilizao.(MenuModifyConverttosymbol(oubotodireito
dorato>ConverttosymbolouteclaF8).
Apliqueasseguintesopes:

4.Cliquenaframe30einsiraumaKeyframe.
CliquecomobotodireitodoratonaKeyframeondefoidesenhadaaestrela(1frame)e
seleccioneaopoCreateMotionTween.

Verifiquequefoicriadaumasetaentreaframeinicialeaframefinal.
5.ActiveaopoOnionSkin(daframe1atframe30).
6.Arrasteaestrelaparaaposiofinaldaanimao.

7.Testeaanimao.
8.Guardeodocumento.

Exerccio5AlteraroobjectonumMotionTween

1.AbraodocumentoFlash4_4.flaeguardeocomonomeFlash4_5.fla
2.Posicionesenaframe30ealtereaposiodoobjectoparaoladoopostoaodaposio
inicial(frame1),namesmadireco.

3.InsiraumaKeyframenaframe14earrasteoobjectoparaaposioseguinte:

4.Testeaanimao.

5.Paraalmdoposicionamento,altereoaspectodaimagemnaframe14,atravsdabarrade
propriedades:
a.Tamanho:204.0x182.1
b.Corefeito:Tint
c.Cor:#FF9900
d.Suavizao:50%

6.Paraalmdoposicionamento,altereoaspectodaimagemnaframe30,atravsdabarrade
propriedades:
a.Corefeito:Tint
b.Cor:#FFFFFF
c.Suavizao:100%

7.Testeaanimao.
8.Guardeodocumento.

Exerccio6AnimaointerpoladaMotionShape

Ainterpolaodeformaumatcnicausadaparaefeitosdemorfismo.Porexemplo,para
efectuarmosumaanimaoondequeremosqueumquadradosetransformenumcrculo.
Nestetipodeinterpolaopodemserusadastransformaesdeinstncias(alteraoda
formadoobjecto),rotao,redimensionamentooudistoro.
1.CrieumnovodocumentoFlasheguardeocomonomeFlash4_6.fla
2.Desenheumcrculo(100x100)compreenchimentoazulescuroecontornoamareloescuro
deespessura8.

3.Cliquenaframe20einsiraumakeyframe.
4.Naframeinicial,seleccionenaopoTween,dabarradepropriedades,ovalorShape.
Verifiquequefoicriadaumasetaentreaframeinicialeaframefinalcomacordefundoverde.
5.ActiveaopoOnionSkindaframe1atframe20.
6.Posicionesenaframe20eapagueocrculo.
7.Desenheumquadradocomascoresalteradasenaposioopostadocrculo.
8.Testeaanimao.
9.Guardeodocumento.

Exerccio7GuiasdeMovimento(MotionGuides)

NaanimaocomInterpolaopossvelcriarcaminhosparaaanimaodoobjecto,este
processochamadoGuiasdeMovimento.
Paraespecificarestecaminhoexistemdoiscuidadosimportantes:
Posicionarosinaldemais+daimagemcomalinhaguia.
Criaralinhadeguianacamadadalinhaguiaparanoocorrerdefeitosnaanimao.

1.CrieumnovodocumentoFlasheguardeocomonomeFlash4_7.fla
2.AltereonomedaLayerparaAtletaeadicioneaimagematleta.png.
3.CrieumaMotionTweenatframe60.
4.SeleccioneaopoAddMotionGuideparaadicionaraguiademovimento
(Insert>Timeline>MotionGuide).
5.ComaferramentaPencil,desenheoseguintecaminho:

6.Cliquenaframe1coloqueoatletanopontoinicialdalinha(noseesqueaquetemde
posicionarosinal+nalinha).
7.Cliquenaltimaframeecoloqueoatletanofinaldalinha.
8.Testeaanimao(oatletadeveseguirocaminhodesenhado).
9.Guardeodocumento.

Exerccio8GuiasdeMovimento2(MotionGuides)

1.CrieumnovodocumentoFlasheguardeocomonomeFlash4_7.fla
2.ImporteparaabibliotecadoFlashoficheirocarro.png.
3.Desenheumaestradairregular.
4.Aplicandoosconhecimentosadquiridossobrecriaodeanimaes,coloqueocarroa
circularnaestrada.
5.Testeaanimao.
6.Guardeodocumento.

Bomtrabalho!