|
|
| ХАТА МОЯ | ПОРТФОЛІО | ХРИСТИЯНИНУ | ПОЧИТАТИ | МОЄ ЖИТТЯ | ФОТОАЛЬБОМ | ЗВ'ЯЗОК | |
 Один на один с FreeBSD |
|
|
HTML Digest 09
Macromedia Flash в якості піддослідного кроліка.Почнемо з того, що заново проробимо Motion та Shape Tween.... Стоп-стоп-стоп!...Куди понеслися?... Тпру!... (А то як ті коні - мишкою, як копитами: клац-клац-клац...) Спочатку відкриємо віконце Window --> Library (шорткатом Ctrl-L) і будемо спостерігати, що ж там відбувається цікавого... А відбуватися мало б наступне (якщо нічого у вас ніде не відбувається, то треба б перечитати вам попередню статтю): при реалізації Motion Tween (трансформація об'єкта - блідо-фіолєтова стрілочка в Timeline) в цьому віконечку з'являється ЩОСЬ із назвою Tween1. Ну, а при такій симпатичній процедурі, як Shape Tween (трансформація форми - зелененька стрілочка в Timeline) воно чомусь лишається порожнім. Вияснимо це питання - бо це вияснення приведе нас до такого глибинно-базисного поняття у Флеші, як "символ". Оце ЩОСЬ, що виникло у віконечку - це і є воно, "символ", якому, як порядному "символу" годиться зберігатися в бібліотеці. Кожен створюваний флеш-ролик (будемо вже солідно, по-дорослому, називати його "проектом") має свою бібліотечку. Вважається красивим спочатку настворювати символи для ролика, а вже потім робити їх Motion Tween. Правильно так: Insert --> New Symbol... (Ctrl+F8). Тоді нам відкриється широке-прешироке поле для створення і редагування нового символу. Щоб його закрити - клікнути на закладці Scene1 зверху-зліва Timeline. Найшвидше можна потрапити в режим редагування символу так: правий клік по об'єкту --> Edit... Хоча, як ми помітили з самого початку, символ може бути створений програмою автоматично. Так само він може бути перенесений з робочого (не редакторського) поля шляхом Insert --> Convert to Symbol... (F8). Десь вже чую незадоволені голоси: "Не виходить щось в мене - пункт меню чомусь неактивний...!" Перед конвертуванням мальованого образу не забувайте його виділити інструментом Arrow (стрілочка). У віконечку програма вас допитає про назву нового символу (Name) - навчіться одразу називати символи по-людськи, себто відповідно до смислу символа, та його тип (Behavior, дослівно - поведінку): Graphic (це практично будь-які малюнки або статична імпортована графіка), Button (це, як правило, звикла ролловерна кнопка, що полюбляє реагувати на мишку) та Movie Clip (а це, по суті, самостійні анімовані фільмушки). Наразі вибираємо Graphic. Щоб помістити готовий символ на робоче поле (знову ж введемо "доросле" поняття - на сцену проекту), просто мишею тегнемо-потягнемо його з віконечка бібліотеки на цю саму сцену. Таким чином ми можемо створити нескінченну кількість екземплярів (Instances) кожного конкретного символу на сцені. О!... А ви казали, не дуже інтуїтивний інтерфейс!... Окрім усього вищенабалаканного, програма має велику бібліотеку власних символів: цілісіньке меню Libraries. Передивляння цього багатства може зайняти не один день - хоча в результаті воно нічого вам не дасть: який сенс використовувати в свому проекті те, що до вас вже переглядалось протягом не одного дня іншими?... Правильно, ніякого. Тому вчимося далі. Далі повинно було б виникнути закономірне питання: чому ж при Shape Tween жоден символ ніде не утворюється? Не утворюється, бо не треба, і не тільки не треба - суворо заборонено анімувати форму символів. Коли анімується форма об'єкту в цілому - то, ясна річ, його правильно і доцільно конвертувати в символ (по-іншому й не вийде). Коли анімуються криві, відрізки, загогулинки (себто частини об'єкту) - то символ не потрібний. Ви навіть не зможете зробити Shape Tween із символом - його треба буде попередньо "розбити": Modify --> Break Apart (Ctrl+B). Так само для анімації Shape Tween треба поступати з імпортованими бітмаповими зображеннями (які ми вставляємо на сцену шляхом File --> Import...). Такі зображення, звичайно, можна не тільки Break Apart, а й Trace Bitmap... Проробіть, наприклад, такий експеримент: імпортуйте растрове зображенння для того, щоб, скажімо, графічний рисунок згортався в малесеньку кульку. Тільки один раз "розбийте" малюнок за допомогою Break Apart, а другий - через Trace Bitmap... Відчуйте різницю і поділіться нею з ближнім (можна зі мною, але я не наполягаю на цьому варіанті). Отож, трохи прояснилася нам ситуація з двома основними видами анімації, які можна творити в програмі Флеш. Очевидно, якщо Motion Tween створюється за допомогою вставки ключових кадрів (Keyframes), то Shape Tween оперує радше порожніми ключовими кадрами (Blank Keyframes). Ключовий кадр (його вирізняє на Timeline вписаний у нього кружечок) відрізняється від простого кадру тим, що в ньому вміст кадру може змінюватися. Окрім того, в майбутньому ви зможете йому присвоїти дію або мітку (ого! ... яка заманлива перспектива!...). Коли ми вставляємо на Timeline новий ключовий кадр, то всі об'єкти з попереднього ключового кадру в нього потрапляють автоматично. Якщо вставляємо порожній ключовий кадр, то це призведе до знищення усіх об'єктів в усіх кадрах після оцього порожнього та ключового. Тепер, для перебивки сухої теорії навчимося робити ще декілька цікавих речей. Таких, як, наприклад, зникнення об'єкта. Створюємо новий символ і ставимо його в 1-й кадр. Кадр десь так 10-й-20-й знову робимо ключовим. Для кадру №1 ставимо режим анімації Motion (нагадаю: 2 рази лівий клік або правий клік по кадру --> Properties --> Tweening --> з випадаючого списку виберемо Motion). Бачимо стрілочку на блідо-фіолєтовому фоні в Timeline? - Значить, все йде за планом. Йдемо в останній кадр нашої анімації - 2 рази ліво клікаємо НА ОБ'ЄКТІ --> велике діалогове вікно Instance Properties (властивості екземпляра) --> Color Effect (регулювання прозорістю, кольором та яскравістю екземпляра) --> Alpha (рівень прозорості) --> сунемо повзунок сильно вліво, а якщо хочемо, то й до самого нулика. Тестуємо кіно: Enter або навіть Ctrl+Enter. Так ідеально створювати їжачків, що зникають в тумані... Ніби й знаємо ми вже немало, але є ще одне глибинно-базисне поняття (надзвичайно потрібне для створення досить складних сцен), яке ми повинні розглянути. Так, деякий момент примусу в ознайомленні з шарами (це і є те важливе поняття) у тих, хто до того не працював із серйозними графічними програмами, є. Принаймні, я це відчувала, і скільки мені в хелпах не писалося: "Уявіть собі багато листочків прозорої плівки, на кожному з яких щось намальовано..." - до мене не доходило. Досить довго не доходило. А потім звичка формувати зображення так, щоб певні групи об'єктів були рознесені по різних шарах і не заважали роботі одного з одним, стала однією з причин того, що я вже можу з гордістю назвати себе графічним дизайнером...:-))). Отож, шари йдуть зверху вниз - у вас наразі є єдиний, з назвою Layer1. Клікніть ліво по полосці шару 2 рази і перейменуйте його. Надалі кожен анімований об'єкт намагайтесь розміщувати на окремому шарі з відповідною, легко впізнаваною назвою. Це не тільки полегшить роботу з об'єктом, а й зменшить навантаження на процесор при роботі вже готового ролика. Додати новий шар можна так: Insert --> Layer або клікнути по малесенькій білій іконочці з плюсиком у вікні, де відображаються назви шарів. Друга іконка поруч створює не простий шар, а направляючий (про це трошечки пізніше). Шари можна переміщувати один відносно одного - просто перетягуємо їх мишкою на Timeline. Якщо ми виділяємо на робочій області якийсь об'єкт, то автоматично активізується відповідний цьому об'єкту шар. Відерко для сміття - це для знищення шару. У верхній смужці є ще декілька іконок - око, замочок та порожній прямокутничок. Якщо вміст шару трошки заважає в роботі, то клік по крапочці під оком зробить його невидимим, а замочок просто його заблокує від редагування. Клік під іконкою прямокутничка змінює режим зображення об'єктів - залишаються самі контури (це деколи зручно при роботі з складними, важко прораховуваними процесором сценами - і це, звісно, для прискорення). Як відомо, все у Флеші має свої Properties. Шари - не виключення: правий клік по полосці з назвою шару --> Properties... ( або ж Modify --> Layer). Значення пунктів: Name - назва шару, Show - видимий шар, Lock - заблокований шар. Тип шару: Normal - звичайний, Guide - направляючий, Guided - той, який направляють: він пов'язаний з Guide Layer, Mask - задає режим маскування об'єктів, які розміщені на підлеглих йому шарах, Masked - замаскований шар. Підлеглі шари повинні знаходитися безпосередньо під управляючими шарами. Ще один параметр - Outline Color - це колір обводки контура об'єктів (щоб легше вирізняти об'єкти на різних шарах), а Layer Height - це висота шара (100%, 200%, 300%). Ну, тут багато неясного... Щоб туман трошечки прояснився, зробимо ще один приклад: рух об'єкта по траєкторії (направляючій або Guide). По-перше, цей об'єкт вже повинен бути символом. Вибираємо шар, на якому він знаходиться: Insert --> Motion Guide. В шарі Guide, який у нас вже з'явився, також з'являється ключовий кадр. Беремо олівчик (Pencil) і малюємо в ньому шлях, по якому мусить рухатися об'єкт. Бажано, щоб він був гладеньким (модифікатор Smooth). Йдемо на шар об'єкта, вибираємо об'єкт за допомогою стрілочки (модифікатор Snap - магніт повинен бути натиснутий) - і рухаємо його до початку траєкторії, аж поки в центрі об'єкта не з'явиться блакитний кружечок. В цьому ж кадрі: Insert --> Create Motion Tween - навколо об'єкта вималювалася рамочка (себто він автоматично був перетворений у символ, якщо не був символом до того). Вибираємо останній кадр руху - робимо його ключовим в обох шарах і рухаємо об'єкт на інший кінець траєкторії (знову мусить виднітися кружечок в центрі об'єкта). Тепер клікаємо по першому кадру 2 рази: Frame Properties --> ставимо галочку біля Orient to Path Direction в Tweening (щоб об'єкт повертався у відповідності із вигинами траєкторії) --> OK. Тестуємо кіно. Якщо все нормально, то останній штрих - це зробити шар Guide: Layer1 невидимим. Бачите? Без шарів - ніяк. І як тільки ми ніби розібралися з ними, то треба ввести ще одне поняття, але вже не таке наочне, як на мене. Вся справа в тому, що якщо ми маємо навіть один-однісінький шар, то в ньому все одно буде декілька рівнів. Мабуть, ви вже помітили це - як по-різному поводять себе щойно намальована в робочій області картинка і символ, перетягнутий з бібліотеки. Тепер маю вам заявити цілком офіційно, що дійсно в кожному шарі у нас утворюється 2 рівні: перший - це робочий рівень (stage-level), і до нього відноситься усе, що ми щойно створили в процесі роботи за допомогою різноманітних інструментів малювання, і воно взаємодіє між собою за трохи дивними законами Флешу. Другий рівень (або рівень перекриття: overlay-level) - це рівень, до якого належать готові символи бібліотек (кнопки, анімовані кліпи), імпортована графіка, "нерозбитий" текст (і про це, мабуть, потім) та перетворені у групи об'єкти робочого рівня. Будь-який об'єкт цього рівня знаходиться над об'єктами робочого рівня, але відносно об'єктів свого рівня може займати різне місце. Щоб підняти або опустити такий об'єкт, треба його виділити і, тримаючи натиснутою клавішу <CTRL>, тиснути стрілочки вверх або вниз (на клавіатурі стрілочок). З об'єктом робочого рівня такий фокус не пройде. Як перетворити об'єкти одного рівня в об'єкти іншого? Щоб перетворити елементи робочого рівня в об'єкт рівня перекриття: виділити їх інструментом Arrow --> Modify --> Group (Ctrl+G). Групу можна легко розгрупувати: Modify --> Ungroup (Ctrl+Shift+G). Тепер об'єкти знову можна легко редагувати. Наступного разу детальніше розглянемо роботу з текстом та навчимося створювати кнопки (так-так, ті самі - реагуючі). Наостанок декілька цікавинок по роботі з Флешем. Перша - це заливка не кольором або градієнтом, а практично будь-яким рисунком або фотографією. Спочатку імпортуємо зображення у Флеш: File --> Import (Ctrl+R) та розбиваємо його: Modify --> Break Apart (Ctrl+B). Копіюємо забраження за допомогою пипетки (Dropper) і воно одразу стає поточною заливкою, якою ми можемо замалювати необхідну нам форму. Поточним інструментом автоматично стане відерце для заливки (Paint Bucket). Цікаво, що така заливка матиме усі властивості градієнта (тобто ми можемо змінити нахил, розмір та центр заливки - а це, як і майже в усіх програмах робиться шляхом малювання лінії всередині замальовуваного контура). Крім того, є ще кнопка Transform Fill - квадратики дозволяють змінювати розміри, а кружечки - повороти або діагональну трансформацію. Друга цікавинка (і на сьогодні - остання) - це можливість зробити розмитість краю фігури (так званий anti-aliasing). Форми, що звичайно малюються у графічному векторному редакторі Флеш, як правило, мають чіткі контури. Але деколи (а як свідчить практика, то заледве не завжди) хочеться мати щось таке гладенько-фотошопівське, а не флешівсько-гумове. Зробити це дуже просто: малюємо об'єкт, виділяємо його, Modify --> Curves --> Soften Edges... Вказуємо необхідні параметри розмитості: Distance - віддаль розмитості від границі фігури, Steps - кількість кроків для плавності розмивки (бажано, не більше 10-ти), Direction - напрямок розмивки: Expand (назовні) або Inset (всередину). Все! ... При цьому, звичайно, пам'ятаємо, що для Флешу малюнок - це не набір точок, а набір математичних формулок, і розмиття цей набір дуже ускладнює, тому анімація фігури з розмивкою буде на деяких комп'ютерах гальмувати (а на моєму, певно, й зовсім не запрацює)... І для тих, хто ще не знає, як йому отримати готовий ролик для розміщення в Інтернет в жаданому .swf-форматі: File --> Export Movie... Ну, про це я вже могла й не говорити - просто так, про всяк випадок, а може, хтось ще не здогадався. І взагалі, якщо хтось про щось ніяк не може здогадатися, а воно йому дуже треба - то пишіть...
|
|
|||||||||||||
| |||||||||||||||
|
Ідея проекту, програмування, HTML, CSS, дизайн,
редагування та переклад текстів - Дідок Олександр. | |||||||||||||||
МАЛЮНОК: Троянда в лініях