Автор Тема: Динамични флорални мотиви (комбиниран урок Flash - Illustrator)  (Прочетена 7682 пъти)

mils

  • Newbie
  • *
  • Публикации: 41
  • try to FLASH me :D)
    • Профил
[size=12]   Този урок ще Ви запознае с прекрасното интегриране между Adobe Flash CS3  и Adobe Illustrator CS3. Двете програми си кореспондират най-вече на база вектори и подобрен импорт на векторните изображения. В нашия случай ще подготвим изображенията и ще ги подредим в композиция в Illustrator, а ще ги анимираме във Flash, като се възползваме максимално от импорта на ai. файловете.

Ето какво ще получим като резултат:

http://prikachi.com/flash.php?users/sugarsun/9P.swf

    Техниките, представени в този урок са универсални и базисни, може да ги ползвате в проектите си, защото не се отнасят само до анимирането на тази пролетна сцена.

  Oт урока ще научим как да:

•      превръщаме графиките в Movie Clips още докато сме в Illustrator
•      прилагаме същата композия в флаш документ
•      подготвяме множеството графики за анимиране
•      правим основни анимации, които са лесни и ефектни.

    Ако искате да следите дословно урока, може да свалите архива с работните файлове от източника в края на урока. Файловете може да ползвате само за лична употреба, тъй като са защитени с авторски права. В архива ще намерите илюстрейторския файл (ai) и флаш файла с крайния резултат (swf).

   Може и сами да си направите композиция от флорални мотиви много лесно и бързо, като се възползвате от готови безплатни векторни графики. Линкове за тях може да откриете в нашата секция за ресурси, която е само за регистрирани потребители.

Сега продължаваме с работата по урока в стъпки:

Стъпка 1: Превръщане на фона в Symbol и респективно в Movie Clip

Отворете илюстрейторския файл от архива ( или направете вашата флорална картина ). Вземете Selection Tool (V) и селектирайте леара с фона (най-долния), като цъкнете на оказаното кръгче в панела със леарите.

Заб. Когато направите селекцията ще забележите, че върху фона има флорални мотиви, които са селектирани – авторът е направил чрез тях фона. Ако някой от тях ви хареса може да го селектирате и да му промените цвета, за да го видите и ако ви хареса може да го включите с самата композиция.




След като вече сте селектирали фона, натиснете F8, за да превърнете графиката във Movie Clip, именувайте – background. Ще може да я видите в панела Symbols. Tова е начина, по който правите Movie Clips още докато ползвате Illustrator.





Стъпка 2: Превръщане на една от пеперудите в Symbol.

Отново посредством Selection Tool (V) селектирайте леара с пеперудата (виж картинката по-долу) и натиснете F8, както в предната стъпка. Единствената разлика е, че при Registration Point, използваме централната. Така ще правим за всички символи, които ще имат анимация на уголемяване и завъртане.



Стъпка 3: Превъщане на всички останали графики за анимиране във Symbols.

При клонки и орнаментите ще използваме Стъпка 1, тъй като те ще бъдат анимирани тип „израстване”, докато облите графики, като например отделни цветя и пеперуди ще изкачат изведнъж и ще се завъртат, затова е важно да изпълним стъпка 2 с Registration Point – в центъра.



Стъпка 4*: Сега е подходящото време след като сте избрали символите ,с които искате да работите, да ги подредите по начин, който ви допада. За целта може да селектирате всичко и да натиснете  Delete, така документа ще стане бял и може да започнете да нареждате графиките, като ги издърпвате от панела Symbols и ги довлачите до желаното място. В случай, че не ви хареса, не го изтривайте с Delete, тъй като така символът ще изчезне и от панела със символите. Когато сте готови запазете илюстрацията (File>Save as/Save) Ето композицията на автора, с който ще работим.



Стъпка 5: Отваряне на нов документ във Flash и основни настройки


В Началния екран на програмата изберете Flash File (action script 3.0). Aко сте изключили този екран, просто изберете File>New (Ctrl+N). Сега трябва да променим Frame Rate на 30 – от менюто Modify>Document (Ctrl+J). Ще се появи следният диалогов прозорец, където да въведете стойността:



Стъпка 6: Импортване на илюстрейторския файл


Изберете File>Import>Import to Stage и отворете файла с флоралната ни композиция. Програмата ще зареди диалогов прозорец, където ще видите всички символи, който сте използвали във илюстрацията. Нещата, на които трябва да обърнете внимание са : всички графики, които искате да анимирате да са тикнати, също така първите две отметки от долната част на прозореца – едната ще постави графиките на оригиналната им позиция (така ще запазите направената от вас композиция), а другата ще направи работното поле на документа, толкова голямо, колкото e илюстрацията.





Стъпка  7:  Веднага след като файловете се отворят ще забележите,че всеки е селектиран, но че са на един леар. За да ги анимираме индивидуално, всяка графика трябва да е на отделен леар. за целта, още докато са селектирани дайте десен клик и изберете Distribute to Layers.



Стъпка 8:
Сега трябва да зададен цялостна продължително на всички анимации общо. В случая авторът е избрал да продължи 90 фрейма (при 30 Frame Rate това е равно на 3 секунди реално време). Вие може да изберете и друга стойност, подходяща за вашия проект. Вземете Selection Tool (V) и селетирайте избрания фрейм  от таймлинията на най-горния леар с графика (не леар 1 – той е празен!) и задържайки мишката я спускайте надолу по останалите леари.



След като сте селектирали фреймовете натиснете F5 или дайде десен клик върху един от тях и избете Insert Frame.



Стъпка 9: Сега изберете една от графиките, които искате да „израстват” – със Selection Tool (v) я изберете и автоматично ще се селектира и леара на който е, след което добавете нов леар над него и го именувайте Mask.



Стъпка 10:
Сега ще са ни нужни Rulers. За да се появят изберете View>Rulers (Ctrl+Alt+Shift+R).  Издърпайте две помощни линии, които да показват големината на графиката, която желаете да анимирате.



Стъпка 11: Погледнете дали се намирате на леара, който кръстихме Mask и с Rectangle Tool и произволен цвят начератайте правоъгълник както е показано, той не трябва  да е по-малък от полето,между двете помощни линии. Внимавайте нито една част да не се допира или встъпва в графиката.



Стъпка 12: Селектирайте фрейм  15 и натиснете F6, за да създадете  Keyframe. Сега дайте десен клик върху правоъгълника и изберете Free Trasform, след което го уголемете , така че да покрие цялата графика.



Стъпка 13: Сега ще направим и самата анимация. Цъкнете някъде между фрейм 1 – 15, дайте десен клик и изберете Shape Tween. Селетирайте първия фрейм от анимацията и в Properities панела изберете Ease 100. Дайде десен клик върху леара Mask и изберете Mask.





Стъпка 14:
Сега ще направим анимация на обла графика – на единично цвете. За целта го селектирайте и цъкнете на първия фрейм от неговия леар. Отворете панела Trasform (Window>Trasform) и въведете показаните стойности.



Направете нов Keyframe (f6) на фрейм  10 и друг на 20. При селектиран фрем 20, отново отидете в панела и върнете стойностите на 100%. Цъкнете между 10-20 фрейм с десен клик и изберете Моtion Tween и задайте Ease 100 в панела Properties . Ако искате анимацията да включва и въртене от Rotate, изберете CW.





Като използвате двете техники на анимиране, направете динамични и останалите флорални мотиви. Това е идеален начин да затвърдите знанията си за анимиране с таймлайна.

За  вас направи: Mils
Автор: Lee Brimelow
Оригинал от:
http://www.layersmagazine.com/moving-illustrator-art-in-flash-cs3.html[/size]
« Последна редакция: Юли 21, 2009, 08:45:37 pm от Ledenata »
Същественото е невидимо за очите...



http://www.facebook.com/pages/Amazonkibginfo-/33067308978

pilemy

  • Newbie
  • *
  • Публикации: 131
    • Профил
За първи път отварям флаша, този урок е чудесен и с голямо приложение,но не мога да се справя нещо-нито една линия не успявам да накарам да порасне,незнам как да намаля размера на цялата работа, ако това не е зададено от самото начало има ли начин да се намали? :-[
http://prikachi.com/flash.php?flash/files/604894N.swf
« Последна редакция: Февруари 16, 2009, 01:39:58 pm от marta »

tcvetelinka

  • Newbie
  • *
  • Публикации: 450
    • Профил
pilemy  :4hu5109 :4hu5109 харесва ми  :) А за резмерите незам  :(
Ако можеш да си орел не се напъвай да си пръв сред гаргите. Питагор


mils

  • Newbie
  • *
  • Публикации: 41
  • try to FLASH me :D)
    • Профил
pilemy, относно размера : като, че ли е по-добре да се подготвя горе-долу искания размер още в Илюстратор, понеже при импорта (стъпка 6) работното поле на флаш може да се сетне колкото това на Илюстратора.

Относно проблема с размера: Със Selection Tool (V) трябва да селектираш всички графики (вече направени в movie clips при импорта), може да ползваш и комбинацията Ctrl+A
Ето така (не гледай менюто):


След това с Free Transform Tool (Q) ги правиш в желаниете размери. Сега обаче ще остане бяло празно поле от самия работен лист на Флаш, за да го махнеш отиваш на Modify >Document (Ctrl+J) Match with Contents



Понякога това е малко своенравно (има си бъгче някакво) затова ето и класическия начин : селектираш всичко (контрол+А) , отваряш инфо панела (Window>Info (ctrl+I), гледаш колко ти е размера за творбата, запомняш го ( аз го записвам естествено  ;D ;D), после отваряш Modify>Document (Ctrl+J) и въвеждаш размерите.

За растящите клонки, не знам къде точно бъркаш - в стъпките 9-13 съм обяснила възможно най-подробно, хвърли им един поглед пак и направи скрийн на Timeline-a, за да мога да помогна.

Успех!
« Последна редакция: Юли 21, 2009, 08:46:40 pm от Ledenata »
Същественото е невидимо за очите...



http://www.facebook.com/pages/Amazonkibginfo-/33067308978