|
|
| ХАТА МОЯ | ПОРТФОЛІО | ХРИСТИЯНИНУ | ПОЧИТАТИ | МОЄ ЖИТТЯ | ФОТОАЛЬБОМ | ЗВ'ЯЗОК | |
 Один на один с FreeBSD |
|
|
HTML Digest 08
Flash x.x (себто самі визначайте)Oops!... (прим. ред.: звучить, як “Упс!...” - найчастіше вигукувані слова при роботі з програмою Flash 4, хоча дехто більше любить вигук “О-о...”, що походить з озвученої поляками версії культового комп’ютерно-анімаційного мультика “Reboot”...) На початок - трохи загальних відомостей про можливості програми “Флеш номер 4”: вона чудово робить Інтернет-презентації, сплеші для сайтів, здоровезні графічні зображення, а також живий і рухливий інтерфейс, який легко масштабується у відповідності до розмірів екрану. Крім цього, можна активно використовувати звуковий супровід ролика, відносно легко створювати навігаційну панель сайту, а можливості програми у створенні чатів, ігор та Інтернет-магазинів - просто дивовижні. Якщо раніше вам треба було для перегляду Flash-файлів обов’язково качати програвач (десь в 400Кб - неприємна, але одноразова процедура), то тепер він входить в стандартну установку Internet Explorer 5.0. А користувачі інших браузерів можуть вільно отримати програвач у Інтернеті за адресою: www.macromedia.com/shockwave/download/. Вочевидь, залишилося зовсім мало таких, хто цією можливістю не скористувався, оскільки, за даними інтернет-статистиків, змогу переглядати на свому комп’ютері флеш-ролики мають майже 90 відсотків користувачів Інтернет (і ось вам перший неприємний момент: 90 - це не 100, тому завжди треба робити класичну HTML-версію сайту, - і не тільки для тих, хто не входить в 90, а й для тих, в кого вже встигла виробитися стійка алергія на прелодери... А хто любить подвійну роботу?...). Гадаю, минулого разу мені вдалося належним чином підігріти публіку, і вам вже хочеться творити щось не менш несподіване і геніальне. А сьогодні я трохи вас охолоджу, бо ж потрібно на все подивитися тверезо і неупереджено. Поділюся з вами випадком, що трошки мене розчарував по відношенні до Флешу. Один з мультіків, що ото ми оглядали минулого разу, настільки вчарував мене, що я захотіла його вислати одному свому знайомому (знаєте, як це буває - зустрічається в інтернеті щось цікаве, і ви зберігаєте це на диску і тут же форвардуєте імейлом найкращому віртуальному другу). Звичайно, правим кліком SWF-ки не зберігаються, але завжди лишається надія, що воно десь там у кеші впало. Прочесала я кеші, ще пару разів завантажила ролик - нема в тих кешах нічого (знаєте, як просто в МЕТА-тезі виставити параметр NOCACHE...)! Прийшлося людині просто вислати лінк, а це, як розумієте, не зовсім гречно. Як же ж тоді бути із свободою обміну і використання інформації в Інтернет?... Технологія Флеш - дуже закрита (а пошукові машини, що не працюють з МЕТА-тегами, її не бачать взагалі...), а ця закритість в деякій мірі рушить ті устої вільного і необмеженого доступу до будь-якого ресурсу в мережі Інтернет. В певному сенсі напрошується думка, що Флеш придумали жадні люди (слава богу, ми всі знаємо, як з цією жадністю боротися, і робимо це кожен день, запускаючи на виконання ту чи іншу програму...) Ще одна беззаперечна трудність: сайти, зроблені на Флеші “від і до”, важко поновлювати (а в мене закралась навіть така крамольна думка, що й неможливо) і редизайнити частинами (для того, щоб переприсвоїти картинці лінк, треба ту картинку заново відредагувати і зкомпілювати в SWF - в випадку ж звичайного GIF-банера або кнопки досить лише відкрити Блокнот)... “Закритість” Флешу - це не єдина серйозна вада цієї технології. Тепер межа між професійними і любительськими сайтами проляже ще ширше, ще різкіше, - і це знов суперечить вільному духу Інтернету, де всі, без залежності від віку, статі, матеріального становища, мають можливість спілкуватися на рівних, маючи в руках приблизно однакові засоби HTML для самовираження. Існує навіть думка, що рано чи пізно Флеш спіткає доля інших багатообіцяючих та розрекламованих технологій, які, тим не менш, не прижилися: наприклад, компоненти Active-X та JAVA-апплети (чого гріха таїти, я навіть сама якось один написала)... Крім того, щоб навчитися повністю зреалізовувати інтерактивність у Флеші, треба бути трохи програмістом (для мене, яка принаймні на протязі 7-8 років писала на фортрані, паскалі, бейсіку - це не проблема, а для вмілого дизайнера, що спеціалізується на комп’ютерній графіці, вивчення флеш-скриптування може виявитися непосильною справою). Тим не менш - сьогодні я, як чайник з чайником, спробую пройти з вами перші кроки роботи з популярною багатоцільовою програмою Flash 4 (сподіваюсь, вже потрохи забувається, як страшний сон, неоковирна і непривітна Powerpoint). Хоча я б не сказала, що флешівський інтерфейс надто інтуїтивний - і така річ, яка називається “прийомами роботи у Флеш” ще довго буде для вас дещо незвичною. Хоча це й векторний редактор - але не зовсім він простий і очевидний при використанні здавалось би таких елементарних і знайомих інструментів малювання, заливки, тексту, виділення... Зазначу, що програма дозволяє творити мультики не тільки із створених в ній графічних об’єктів, а й з імпортованих зображень в таких форматах, як gif, jpeg, png, bmp та інші. Додам, що музика та аудіо-спецефекти можна імпортувати з wav і MP3, а також підтримується імпорт відео формату QuickTime Movie (розширення mov), - якщо вас вже мордують питання цього самого останнього, то можете статтю далі не читати, а сісти за написання своєї власної. Отож, будемо вважати, що принаймні у Ворді ви вже щось малювали - тому знаєте, що векторний редактор відрізняється від растрового тим, що кожний мальований об’єкт у ньому є не сукупністю точок, що носять інформацію про колір, а сукупністю формул, які описують криві, за допомогою яких виведено цей об’єкт. Запустимо програму. Бачимо звичні речі - це робоча область для малювання та кнопочки інструментів малювання зліва. Наразі на дивному довгому елементі інтерфейсу, що займає верхню частину робочого вікна, увагу концентрувати не будемо. Нехай матимемо певну інтригу, щоправда тільки на декілька абзаців. Ну як, малюватимемо щось?... Звісно, так! Хапаємо перше, що потрапляє нам під руку. Мені потрапив олівчик (Pencil). А вам знайти його допоможуть вспливаючі підказки. Вибір певного інструменту ініціює панельку модифікації цього інструменту під кнопками вибору інструменту. В даному випадку панелька модифікації олівця має такі опції: режим згладжування - це straighter (випрямлення), smooth (гладкість) та ink (чорнило), а також вибір кольору лінії, її товщини та стилю. Спробуйте помалювати у всіх режимах. Десь дещо виходить кривувато... Поправити б якось. Беремо тоді інструмент Arrow (стрілочка) та поводимо мишкою над малюнком. Зверніть увагу на курсор: якщо біля нього висить пунктирний прямокутничок, то можемо виділяти шматочок малюнку, а якщо шматочок дуги - то міняти кривизну ліній, з яких цей малюнок складається. Щоб виділити складову частинку малюнку, ліво клікнемо по ньому.... Маєте ваше перше Oops!... У програми, вочевидь, досить оригінальна думка, що і як виділяти (а саме: відрізок кривої до найближчої її нерівності). Але з часом це виявиться дуже зручним, повірте мені. Принаймні, завжди можна ліво клікнути 2 рази - і тоді, гадаю, виділиться те, що треба. Виділяти декілька частин докупи допоможе клавіша shift, а якщо ви виділите весь рисунок (всі його частинки стануть заштрихованими), то, клікнувши право, можна змінити його розміри (пункт контекстного меню Scale) та повернути у будь-якому напрямку (пункт контекстного меню Rotate). На цьому етапі знайомства з програмою важливо знати, де знаходиться UNDO - звичайно ж, в меню Edit (або користайте класичний “шорткат” CTRL-Z). Трошки відомостей про елементи панельок модифікаторів інших інструментів та про власне інструменти: Line (лінія) - встановлюється колір лінії (а також її прозорість - значення Alpha), її товщина та стиль. Oval (коло) - окрім модифікаторів, що є в Line, встановлюється колір заливки (її може й не бути, якщо ви в палітрі кольорів виберете поодинокий квадратик, що знаходиться в її верхньому лівому куті). Rectangle (прямокутник) - крім попередніх модифікаторів, є можливість заукруглення кутів (Round rectangle) - задаємо в пунктах радіус заукруглення. Важливо те, що квадрат, як і правильне коло, легко малюється, притримуючи клавішу SHIFT. Arrow (виділення) - має модифікатор “магніт”, для того, щоб відбувалось притягування об’єкту при малюванні до кроку сітки. Сітка встановлюється так: Modify —> Movie —> встановити галочку в Show Grid в крок в Grid Spacing. В цьому вікні також встановите розмір робочого фону, його колір, кількість кадрів на секунду для ролика (Frame Rate) та одиниці, в яких вимірюються лінійки робочого поля (щоб їх було видно - View —> Rulers). Виділений стрілочкою шматочок можна згладити, випрямити, повернути та змінити у розмірі - ось що означають ці чотири кнопочки. Lasso (виділення) - для виділення об’єктів довільної форми. Модифікатори: Magic Wand - чарівна паличка, що дозволяє зробити виділення за кольором, - вона має свої настройки, а також Polygon (многокутник) - це виділення за допомогою прямих ліній. Brush (пензлик) - братик олівчика, але більше використовується для замальовки контурів всередині вручну. Модифікаційна панелька містить: режими пензлика - це normal (замальовує все підряд), fills (не рухає лінії та контури при замальовці), behind (замальовка за об’єктом - для малювання тіні), selection (для замальовки віділеної області), inside (замальовка всередині об’єкту) - пробуйте все самі, словами це важко описати. Як звичайно, можна задати колір, розмір і форму пензлика, а також за допомогою кнопки із замочком заблокувати градієнтну замальовку - якщо кнопку не натиснуто, то кожен штрих пензликом створюватиме окремий градієнт. Ink Bottle (чорнильниця) - для зміни ліній, модифікатори вже знайомі. Paint Bucket (заливка) - окрім вже знайомих модифікаторів, має Gap Size - встановлення допустимого проміжку в контурі при заливці не повністю замкнутих кривих, а також Transform Fill - для зміни напрямків градієнтів, їх розміру та кута нахилу. Dropper (піпетка) - для копіювання кольору. Вказуємо нею на потрібний колір в робочій області, а потім можемо зробити заливку ним іншого об’єкту. При тиканні на градієнт, буде копійований він весь, а не окремий його колір. Eraser (гумка) - має подібні до пензлика режими, а також один специфічний - це Faucet (видалення цілої лінії або заливки). Hand (рука) - для переміщення робочої області. Magnifier (лупа) - для зміни масштабу зображення. Можна провести по елементу зображення по діагоналі, і він відразу ж збільшиться. Text (ввід тексту) - має характерні для тексту модифікатори, а також дає можливість створювати поле, яке можна редагувати прямо в ролику - це Editable Text Field. Про текст у Флеші варто поговорити окремо і більш детально, але наразі нам цього досить. Намалювалися?... Тепер, мабуть, треба змусити все це рухатися. Тому, накінець, звертаємо свою увагу на оту верхню половину робочого вікна. Це Timeline - пряма, по якій зліва направо шикуватимуться кадри нашого ролика. Зверху вниз підуть шари (про це в наступний раз). Поки що створимо найпростішу анімацію. Намалюємо ЩОСЬ (не маю права обмежувати вашу творчу, натхненну фантазію). Ви помітили, що цяточка в першому кадрі замалювалась?... Це означає, що кадр став ключовим. Чим відрізняється ключовий кадр від звичайного?... Щоб це зрозуміти, треба спершу вникнути, яким чином Флеш анімує об’єкти. Програма дає можливість створити 2 вида анімації - це: - tween або просто морфінг - ви задаєте 2 ключові кадри, а програма
сама створює проміжні кадри для створення ілюзії неперервної трансформації
об’єктів. Перший тип анімації дає можливість трансформувати рух (motion tweening) або форму (shape tweening). Ключовий кадр відрізняється від звичайного тим, що об’єкти в ньому можна змінювати (крім того, при написанні скрипту йому можна присвоїти мітку або дію). Якщо ми вставляємо на Timeline новий ключовий кадр, то в нього автоматично переноситься вміст попереднього ключового кадру. Як все це виглядає на пратиці?... Отож, маємо на робочому полі намальоване ЩОСЬ, і воно, природньо, знаходиться у першому кадрі Timeline. Тепер: тикаємо мишкою в цей кадр, правий клік —> Create Motion Tween. Йдемо на кадр десь так 10-й (а тим часом помічаємо, що квадратик першого кадру став блідо-фіолєтового кольору), тикаємо F6 (що рівноцінно Insert —> Keyframe)... Oops!... На Timeline з’явилась довга стрічечка на тому ж блідо-фіолєтовому фоні, а об’єкт в робочій області отримав полосату рамочку. Правий клік по об’єкту, в контекстному меню вибираємо Scale і/або Rotate і знущаємося над об’єктом (посовати його також можна, не встидайтеся). Тепер тестуємо кіно: Control —> Test Movie (або просто Enter). Надивившись, це вікно закриємо простим тисненням на віндовзівську кнопочку закриття вікна. Можна ролик переглянути прямо в робочій області. Панельку прокрутки ролика викличемо на світ божий таким ось чином: Window —> Controller. І наостанок приклад на SHAPE TWEENING (чарівне перетворення однієї фігури в іншу). Використаємо інструмент Line. В першому кадрі малюємо прямокутничок без заливки, йдемо в 10-й кадр: F7 (що рівноцінно Insert —> Blank Keyframe), малюємо такий самий трикутничок, йдемо в 20-й кадр: знову F7. Тепер 2 рази лівий клік на 1-му кадрі, відкриється вікно Frame Properties. Йдемо на закладку Tweening, з випадаючого списочку вибираємо Shape, в Blend Type вибираємо Distributive (щоб перетворення відбувалося за допомогою більш плавних ліній), тиснемо ОК. Помітили довгу стрілочку на зелененькому фоні, який несподівано проявився на Timeline?... Далі те саме робимо в ключовому кадрі за номером 20. Тестуємо... Oops!... На цій оптимістичній ноті наразі закінчимо. Хоча ми й дечого навчилися, але, на жаль, основні принципи роботи з об’єктами у Флеші лишилися за кадром. Тому далі буде.
|
|
|||||||||||||
| |||||||||||||||
|
Ідея проекту, програмування, HTML, CSS, дизайн,
редагування та переклад текстів - Дідок Олександр. | |||||||||||||||
Любові тепло