Adobe Flash

14.Увод у Adobe Flash

Adobe Flash је програм који се искључиво бави прављењем анимације тј. служи за

анимирање објеката,симбола,динстанци,слика и других предмета од којих се може направити

анимација. Поред тога програм садржи сет алата и способан је за обраду слике,симбола и осталих

предмета пре анимације. Програм подржава увоз датотека из свих Аdobe Colletion програма. У

програму Adobe Flash је могуће урадити већину ствари као и у Photoshop програму ради

побољшања анимације (Слика 14).

Слика 14. Предстабљање програма

15.Покретање програма и упознавање

Наравно пре коришћења сваког програма било би пожељно да га имамо инстлираног на

свом рачунару или лаптопу,уколико то није испуњено на следећем линку који је дат у опису се

може преузети програм (http://getintopc.com/softwares/development/adobe-flash-cs6-official-setup-

free-download/).Пре почетка рада на програму овај практикум ће се заснивати на следећем

принцимпу,у току читања и истраживања програма,програм ћемо истраживати кроз анимације. Те

анимације ће бити додељене уз овај практикум да олакшају коришћење програма. Отворите

програм које се налази на екрану под именом Adobe Flash Professional,након тога изаберите File >

Open. У пољу Open изаберите датотеку 01End.swf у фасцикли Lesson01 и притисните Open да

бисте видели изглед завршног пројекта. Анимација се покреће,и слике на њој се (Слика 15).

Слика 15. Изглед завршне анимације

Затворите прозор за гледање. Изаберите File > New. У пољу New Document ,изаберите

Flash датотеку (Action Script 3.0). Action Script 3.0 је најновија верзија флешовог скрипта за

додатну интеракцију.

16.Упознавање са радном површином

Подразумевана подешавања су да Flesh показује мени,временску линију,сцену,панел са

алатима,панел Property ,и неколико других панела. Да бисте се вратили на основну радну

површину, изаберите Window > Workspace > Essentials(Слика 16).

Слика 16. Изглед радне површине

16.1 Сцена

Велики бели правоугаоник у средини вашег екрана је позорница. Она садржи текст,слике и

видео записе који се појављују на сцени.Можемо користити лењире View > Rulers да бисмо

поравнали објекте на сцени. Подразумева се да ћете видети сиву површину изван сцене где можете

поставити елементе који нису видљиви за посматраче тј. неће бити приказивани на сцени. Да

бисте одредили пропорције сцене тако да њена величина потпуно одговара величини

прозора,изаберемо View > Magnification > Fit to Window.

16.2 Мењање својства сцене

Као прво,подесите боју и димензије сцене. Ове опције се налазе у панелу Property,који је

заправо вертикални панел десно од позорнице.У дну панела Property уочићете да су димензије

тренутне сцене подешене на 550х400 пиксела. Притисните дугме Edit. Појављује се дијалог са

својствима документа(Слика 17).

Слика 17. Изглед панела за подешавања сцене

У пољима Height и Width унесите нове вредности пиксела. У поље Width унесите

вредности 400 , а у поље Height вредности 250. Притисните дугме Background color и изаберите

нову боју за сцену. Изаберите тамно-сиву боју(Слика 18).

Слика 18. Излед панела за детаљња подешавања

Притисните дугме OK. Ваша сцена је сада добила нове димензије и боју. Што се тиче

својстава сцене можете их променити у сваком тренутку.

17. Library панел

Овом панелу можете приступити са десне стране од панела Property. То је место где чувате

и организујете ваше симболе које сте креирали у Flash-у.

17.1 О панелy Library

Панел пружа могућност да организујете објекте у фасцикле,и да видите колико често ће

вам требати неки објекат ,као и да сортирате објекте по типу.

17.2 Увоз објеката у панел Library

Изаберите File > Import > Import to Library. У оквиру за дијалог Open изаберите датотеку

background.jpg у фасцикли Lesson01/Start и притисните Open. Flash увози изабрану JPEG слику и

смешта је у панел Library. Наставите са увозод осталих ЈПЕГ слика из фолдера 01Start(Слика 19).

Слика 19. Изглед складишта за слике и остали материјал

17.3 Увоз објеката из панела Library на позорницу

Једноставно превуците слику из панела Library на позорницу и она је ту. Превуците

background.jpg на позорницу(Слика 20).

Слика 20. Превлачење слике на сцену

18. Разумевање временске линије

Временска линија се налази испод сцене. У дну временске линије Flash приказује број

изабраног кадра,брзину кадра,као и време које је протекло од почетка филма.Временска линија

такође садржи слојеве које су наслагани једни на друге. Сваки слој садржи различиту

слику,анимацију,сцену или догађај,рецимо сваки слој ради засебно за себе. Кадрови су засебно

поређани за себе и у сваком слоју раде другачије.

18.1 Преименовање слојева

Предлог је да се сваки слој зове различито,ради лакшег распознавања. Изаберите постојећи

слој на временској линији. Притисните два пута на назив слоја да бисте га преименовали и

укуцајте background. Притисните показивачем миша изван поља са именом да бисте применили

ново име(Слика 21).

Слика 21. Преименовање слојева

Притисните црну тачку која се налази испод иконе са катанцем да бисте закључали слој.

Закључавање слоја вас онемогућава да случајно направите измене на том слоју (Слика 22).

Слика 22. Закључавање слојева

18.2 Додавање слоја

Документ у Flash-у садржи један слој али ви можете додати још по неки или онолико

слојева колико вам је потребно. Изаберите слој background на временској линији. Изаберите Insert

> Timeline > Layer. Такође,можете притиснути дугме Add new Layer које се налазе испод

временске линије. Нови слој се појављује изнад позадинског слоја(Слика 23).

Слика 23. Прављење новог слоја

Преименујте слој на photo1. Превуците у слој слику photo1. Kao што видите слика из слоја

photo1 преклапа слику из слоја background(Слика 24).

Слика 24. Убациваље слике у кадар

Изаберите Insert > Timeline > Layer или притисните дугме Add new Layer које се налази

испод временске линије да бисте додали трећи слој. Доделите име трећем слоју photo2 (Слика 25).

Слика 25. Убациваље додатног слоја

19.Убацивање кадрова

За сада имате две фотографије,међутим на анимацији постоји само један кадар. Да бисмо

додали више кадрова и времена слоју морамо додати још кадрова.Изаберите кадар 48 (Слика 26).

Слика 26. Убацивање новог кадра на временској линији

Изаберите Insert > Timeline > Frame или стисните F5. Тиме одређујете дужину тог кадра

значи колико ће тај слој трајати тј. кадар. Самим тим смо одредили да овај слој тј. кадар траје до

броја 48 или 4 секунде. Значи 12 кадрова је 1 секунда сто је у овом случају 4 секунде (Слика 27).

Слика 27. Одређивање дужине кадра 48

Изаберите кадар 48 на слоју photo1. Изаберите Insert > Timeline > Frame. Значи додајемо

дужину и овог слоја као претходног.Исто то ћемо урадити са трећим слојем (Слика 28).

Слика 28. Одређивање дужине свих кадрова

19.1 Креирање кључног кадра

Кључни кадар означава промену садржаја у тој секунди или у том кадру у ком желимо да

га поставимо. Кључни кадрови су постављени у облику малог црног кружића. Уколико је кружић

празан,то значи да се у том тренутку ништа не налази на том кадру и наравно у том слоју. Пун

кружић указује на то да се нешто налази у том кадру. Е сада ћемо да убацимо кључни кадар на

слоју photo2 у онај временски тренутак у ком желимо да се појави следећа слика. Изаберите кадар

18 на слоју photo2. Након што одаберете кадар,Flesh,приказује број кадра испод временске линије

(Слика 29).

Слика 29. Бирање књучног кадра

Изаберите Insert > Timeline > Keyframe. Наравно то можете урадити и пречицом на F6. На

слоју photo2 у кадру 18 ,појављује се нови кључни кадар који је приказан празним

кружићем(Слика 30).

Слика 30. Убацивање пробног фрејма

Изаберите нови кључни кадар у кадру 18 на слоју photo2. Превуците објекат photo2.jpg из

библиотеке на сцену. Приказан кружић на кадру 18 постаје пун зато сто смо нешто ставили у тај

кадар(Слика 31).

Слика 31. Убацивање кадра

19.2 Померање кључног кадра

Уколико желимо да тај кадар померимо на неку другу секунду то можемо одрадити

лаганим кликом на кадар и превлачењем испред или позади старог кадра. Изаберите кључни кадар

у кадру 18 на слоју photo2. Померајте лагано показивач миша и видећете правугаону иконицу које

се појављује поред вашег показивача,што вам говори да можете преместити кључни кадар.

Притисните и превуците кадар до кадра 12 на слоју photo2(Слика 32).

Слика 32. Померање кључног кадра

Photo2.jpg се сада појављује на позорници доста раније у анимацији. (Слика 33).

Слика 33. Приказ кључног кадра како долази раније

20.Коришћење панела Property

Панел Property вам пружа могућност додатног подешавања елемента,позорнице или кадра.

(Слика 34).

Слика 34.Property панел

21. Постављање објеката на сцену

Сада ћемо преместити,изменити слику помоћу панела Property. Изаберите Window >

Transform да бисте отворили панел Transform. У панелу Transform изаберите Rotate и укуцајте -12

,или притисните и превуците показивачем преко вредости како бисте изменили ротацију.

Прититсните Enter да бисте променили вредност(Слика 35).

Слика 35. Ротирање слике

У слоју photo2 изаберите кадар 12. Сада притисните показивачем photo2.jpg на сцену.

Користите панел Property и Transform како бисте поставили и ротирали другу слику на занимљив

начин(Слика 36).

Слика 36. Подешавања ротације

У слоју photo3 изаберите кадар 24. Сада притисните показивачем photo3,jpg на сцену.

Користите панел Property и Transform како бисте поставили и ротирали другу слику на занимљив

начин(Слика 37).

Слика 37. Задавање вредности ротацији

Сада ћемо да убацимо мало текста у сцену. Изаберите први слој у временској линији и

притисните дугме Insert Layer. Именујте нови слој као text. Закључајте остале слојеве испод њега

да не бисте случајно померили нешто у њима.У временској линији померите клизач на временској

оси до кадра 36 и изаберите кадар 36 у слоју text. Изаберите Insert > Timeline > Keyframe да бисте

убацили у слоју text нови кључни кадар у кадар 36 (Слика 38).

Слика 38. Додавање текста анимацији

Ставићете текст који ће се појавити у овом слоју у кадру 36. У панелу са десене стране

изаберите алатку која има сибол великог слова Т . У панелу Property изаберите боју и величину

текста. Проверите да ли је у слоју text изабран празан кључни кадар у кадру 24 , а затим

притисните показивачем део сцене где желите да додате текст. Укуцајте назив за опис слика које

се приказују на позорници(Слика 39).

Слика 39. Бирање кадра за текст

Изађите из алатке за текст,бирајте алатку Selection Tool,са којом ћете слободно померати

текст. Преместите и ротирајте текст као претходне слике (Слика 40).

Слика 40. Мењање ротације слике

Када ово завршите потврдите притиском на тастер Enter. И сада ваша анимација треба да

буде готова,да бисте је пробали притисните следећу комбинацију тастера CRTL+SHIFT+ENTER.

22.Зглобно анимирање

Започети ћемо ову лекцију као и остале друге готовом анимацијом да би знали шта да

истржујемо и научимо. За почетак у фасцикли Lesson05/05End,притисните два пута датотеку

05End.swf да бисте погледали анимацију. Након тога затворите ту анимацију и отворите следецу

фасциклу,изаберите фајл у фасцикли Lesson05/05Start.fla и отворите га(Слика 41).

Слика 41. Изглед финалне анимације

22.1 Дефинисање костију

Први корак у стварању зглобног кретања је дефинисање костију за објекат. Да бисте то

урадили изаберите алатку Bone Tool. Налази се на десној страни односто на панелу у облику коске.

Алатка Bone Tool даје обљашњење Flash-у на који је начин клип повезан. Повезани анимирани

клипови се називају арматура,а сваки анимирани клип има назов зглоб (Слика 42).

Слика 42. Анимација крана

У анимацији изаберите слој Crane. Превуците из библиотеке анимираног клипа Cranearm1

на сцену. Поставите инстанцу тачно изнад правоугаоне основе крана (Слика 43).

Слика 43. Позиционирање крана на сцени

Превуците из библиотеке симбол анимираног клипа Cranearm2 на сцену. Поставите га

поред врха инстанце анимираног клипа Cranearm1 (Слика 44).

Слика 44. Склапање крана

Превуците из библиотеке још једну инстанцу симбола анимираног клипа Cranearm2 на

сцену. Поставите ову инстанцу поред слободног врха прве инстанце Cranearm1 (Слика 44).

Слика 45. Склапање крана

Превуците из библиотеке симбол анимираног клипа Cranerope на позорницу . Поставите

инстанцу тако да виси са последње инстанце Cranearm2 (Слика 45).

Слика 45. Монтирање куке крана

Инстанце ваших анимираних клипова су на правом месту и спремни су за повезивање

помоћу костију. Изаберите алат Bone. Притисните подножије инстанце Cranearm1 и повлачите

алатку Bone до подножија истанце Cranearm2. Пустите тастер вашег миша (Слика 46).

Слика 46. Окошћавање крана

Ваша прва кост је дефинисана . Програм приказује кост у виду троугла са кружним

зглобом у њеноговм подножју и кружним зглобом при врху. Свака кост је дефинисана од подножја

првог зглоба до подножја следећег. Е сада одрадите исто тако са свим осталим деловима крана као

на сликама (Слика 47 и 48).

Слика 47. Окошћавање других делова крана

Слика 48. Окошћавање остатка крана

22.3 Убацивање положаја

Померите клизач на временској оси до кадра 25 (Слика 49).

Слика 49. Убацивање нових положаја

Притисните куку крана на крају истанце Cranerope1 и повлачите је надоле према води.

Нова поза је аутомацки убачена у кадар 25. Док повлачите инстанцу Cranerope , приметићете како

се цела конструкција помера заједно са њим. Кости повезују све зглобове (Слика 50).

Слика 50. Бирање кључног кадра

Померите клизач на временској оси до кадра 56 (Слика 51).

Слика 51. Бирање других кључних кадрова

Притисните куку крана на крају инстанце Cranerope и повлачите је из воде.Нова поза је

аутоматски убачена у кадар 56 (Слика 52).

Слика 52. Завршавање анимације

Погледајте вашу анимацију,тј тестирајте је путем комбинације тастера

CTRL+SHIFT+ENTER.

23. Прављење Shape Tween облика

За почетак отворите анимацију коју смо радили која дефинише кран. Зкључајте све слојеве

осим слоја Water. У слоју Water,померите клизач на временској оси до кадра 27 (Слика 53).

Слика 53. Отварање анимације

У слоју Water,притисните кадар 2 десним тастером вашег миша и изаберите опцију Insert

Keyframe. Нови кључни кадар је убачен у кадар 27. Садржај претходног кључног кадра је копиран

у други кључни кадар (Слика 54).

Слика 54. Бирање кључног кадра

.

У слоју Water, притисните кадар 56 и десним тастером вашег миша изаберите опцију Insert

Keyframe. Нови књучни кадар је убачен у кадар 56. Садржај претходног књучног кадра је копиран

у овај књучни кадар. Сада на временској линији имате три кључна кадра у слоју Water: један у

кадру1,други у кадру27, и трећи у кадру 56 (Слика 55).

Слика 55. Убацивање кључног кадра

Померите клизач на временској оси уназад до кадра 27 и сакријте горње слојеве. Следеће

што ћете урадити биће да промените облик воде у другом кључном кадру (Слика 55).

Слика 55. Сакривање слојева

Изаберите алатку Selection. Притисните и повлачите контуре облика воде тако да

испупчења постану удубљенија и обрнуто (Слика 56).

Слика 56. Редизајнирање контуре таласа

23.1 Примена Shape Tween-а

У слоју Water означите било који кадар између првог и другог кључног кадра. Користећи

десни клик изаберите опцију Create Shape Tween (Слика 57).

Слика 57. Креирање покрета

Програм употребљава Shape Tween између два кључна кадра,што је означено црном

стрелицом која је усмерена напред (Слика 58).

Слика 58. Прегледа креираног покрета

У слоју Water,означите било који кадар између другог и последњег кључног кадра.

Користећи десни клик вашег миша изаберите опцију Create Shape Tween(Слика 59).

Слика 59. Креирање трансформације облика

Програм употребљава Shape Tween између два последња кључна кадра ,што је означено

црном стрелицом која је усмерена напред.

Погледајте вашу анимацију као до сада комбинацијом CRTL+SHIFT+ENTER. (Слика 60).

Слика 60. Финална анимација

24. Коришћење звука у Flesh-у

Можете увести неколико типова звукова у програм. Програм подржава три звучна

формата: MP3,WAV,AIFF. Када увезете звучне датотеке у програм он ће их сачувати у вашој

библиотеци. Можете превуци звучне датотеке из библиотеке на сцени као и остале симболе само

сто ће се звучни ефекти показивати само у слоју а неће бити видљиви на сцени (Слика 61).

Слика 61. Коришћење звука у Flesh-у