|
|
| ХАТА МОЯ | ПОРТФОЛІО | ХРИСТИЯНИНУ | ПОЧИТАТИ | МОЄ ЖИТТЯ | ФОТОАЛЬБОМ | ЗВ'ЯЗОК | |
 Один на один с FreeBSD |
|
|
HTML Digest 10
Останній спалахЮвілейний випуск дайджесту присвячується ще деяким базовим поняттям в роботі з програмою FLASH, без яких початківцю буде непросто освоювати її далі. На початок ще один невеличкий trick, який нам надалі стане в пригоді. Як ви вже, мабуть, помітили, у Флеші не можна використати градієнт для ліній та границь. Це, як правило, легко обходиться шляхом перетворення ліній в поля для заливки. А саме: виділяємо лінію (або її шматочок - кому як треба), а тоді Modify —> Curves —> Lines to Fills і використовуємо градієнтну заливку. Отож, тепер про текст та його модифікаційну панельку. Там все виглядає ніби дуже традиційним і знайомим: встановлення розміру шрифта (Font List Size), його кольору (Font Color), типу шрифта: Bold (грубші літери) або Italic (курсив), вирівнювання (Alignment), властивостей абзацу (Paragraph) з такими можливими режимами, як поля (Margins), відступ (Indentation), інтервал (Line Space). Неважко помітити, що сам шрифт в полі Font List вибирається із списку тих шрифтів, які встановлено на комп’ютері. Тому якщо ви не впевнені, що на іншому комп’ютері є такий самий шрифт, то треба той шрифт захопити з собою. Це стосовно проекту у форматі .fla, якщо ж він вже зкомпільований в .swf, то проблеми із шрифтами не виникає. Крім того, маємо ще кнопочку, яка дозволяє створити редаговане поле (Editable Text Field), вміст якого можна змінювати в процесі прокрутки ролика - так робляться у флеші чати і різні форми з полями. Є ще пару речей у відношенні до тексту, які мають свою специфіку у Флеші. Текст можна вводити по-різному: за допомогою текстової мітки або текстового поля. В першому випадку досить клікнути мишиним хрестиком будь-де на робочому полі і почати вводити текст. Стрічка буде рости й рости. Щоб перейти на нову стрічку, треба тиснути <ENTER>. В другому випадку спочатку відмірюється поле для вводу тексту, а потім воно вже заповнюється. Перенос буде відбуватися автоматично за заданою шириною поля. Якщо ми редагуємо вже введений текст, то одразу побачимо, який блок редагуватимемо: дивимось на верхній правий кут поля. Кружечок - це текстова мітка (або блок змінної ширини), якщо прямокутничок, то маємо текстове поле фіксованої ширини. Введемо текст, а потім виділимо його стрілочкою - бачите, його можна і трансформувати, і повертати, як будь-який графічний об’єкт. Згладжений текст отримається за допомогою: View —> Antialias Text. Крім усього цього, можна по об’єкту право клікнути і в меню Font задати значення додаткових параметрів для тексту, наприклад, таких, як кернінг (встановлення міжсимвольної віддалі між літерами) або надстрічкове чи підстрічкове їх розміщення. Кернінг також встановлюється шляхом Modify —> Kerning —> Narrower або Wider. Найзручнішим тут, звичайно, буде шорткат CTRL+ALT+стрілочки вліво або вправо. Щоб крок зміни був 2 піксели, а не один, ще треба тримати SHIFT. Флеш досить звично, як і всі векторні редактори, що зустрічалися мені, трактує текст: тобто текст може бути власне текстом, який можна редагувати та дописувати, а може бути картинкою, яку вже звичним чином не відредагуєш, зате вона пречудово надається до тортурування іншими інструментами малювання та заливання. Щоб отримати з тексту картинку, його треба розбити, попередньо виділивши стрілочкою: Modify —> Break Apart. Назад можна тільки через UNDO (а якщо його рівнів вам не вистачає, то зайдіть в File/Preferences і робіть там усе, що схочете... ну, майже все). Закономірне питання: нащо текст “розбивати”? Ну, наприклад, щоб отримати написи з обводкою. Напишемо якийсь текст здоровезним кеглем (десь так 36-40), гарно, грубезно, темним кольором. Далі: Modify —> Break Apart (CTRL+B), вибираємо пляшечку з чорнилом (Ink Bottle або CTRL+I), встановлюємо якийсь веселенький колір та товщину ліній 2, текст виділяємо та застосовуємо до нього цю чорнильницю. Ось і маємо окантовку. Серединку літер можна видалити, і тоді отримаємо самі контури. Можна позну-щатися над літерами далі - розбити контури і застосувати до них чорнильницю з іншим кольором, і навіть з градієнтом (накінець знадобився нам прийомчик, змальо-ваний на початку статті). А ще можна зробити ось так: розбиваємо текст, беремо олівчик такого ж кольору, перекреслюємо текст хвилястою лінією. Виділяємо верхню частинку тексту і робимо їй градієнтну заливку, з нижньою частинкою також щось робимо. Стрілочкою і подвійним кліком виділяємо хвилясту лінію і видаляємо її. На даному етапі це, мабуть, усе, що треба знати про роботу з текстом. Те, як створювати поля для різних усяких інтерактивних форм, доцільно вивчати паралельно з глибоким-преглибоким зануренням в мистецтво писання скриптів - Action Script. Ну, а ми глибоко занурюватися не будемо - навчимося робити ролловерну менюшку, яку зручно запхати в вертикальний або горизонтальний фрейм і більше ніколи її там не рухати, аж поки не постане нагальна проблема зміни структури сайту - тоді доведеться багато чого переробляти заново, в тому числі перекомпільовувати менюшку. Нагадаю, що кнопка повинна не просто статично і замріяно висіти десь на сторінці - вона повинна швидко-хутко реагувати на дії користувача з мишкою, який то соває її, то тисне без усякого жалю. Наразі про сумне не будемо, а просто приступимо до роботи. Для початку створимо символ, який буде символізувати нашу кнопочку в меню. Таких кнопочок буде, приміром, три штуки. Написи на них ми потім допишемо в окремому шарі, а поки що вималюємо тільки базу. Отже, Insert —> New Symbol (або CTRL+F8). В діалоговому вікні називаємо новий символ menu_item і виставляємо крапочку біля Button. OK. Маємо безмежне поле в клітинку (ви виставили Show grid в Midify —> Movie...?) з блідим хрестиком посередині. Вікно бібліотечки у нас відкрите, і ми вже бачимо назву нашого символу кнопочки, який будемо творити. Вже. На полі малюємо сірий прямокутничок із заокругленням кутів 10 пікселів і рамочкою в 4 піксели - бачите, як допомагає нам фонова сіточка?... Намалювали і побачили: символ вже в бібліотечці. Тепер дивимося на Timeline... Oops!... What is that?... (Себто: що це?...) А це така особлива для кнопки Timeline, яка містить усього 4 кадри: - Up - початковий безмишковий стан кнопки (мишка поза межами кнопочки) В принципі в будь-яку з цих клітинок (окрім Hit) можна вставити ключовий кадр, в якому можуть бути досить складні анімовані символи. А переходом між кадрами керує всудисуща мишка. І щоб їй керувалося, йдемо в 2-й кадр - F6 - змінюємо картинку (я, наприклад, поміняла відтінок заливки), а потім в 3-й та 4-й. Тепер повернемося до нашого меню - клікаємо зверху-зліва по закладці Scene 1. Перейменуємо якось більш зручно Layer 1 і почнемо перетягувати сомвол кнопки в робоче поле для створення його трьох екземплярів. В цьому нам допоможе натиснутий магніт та фонова сітка, до якої притягує об’єкти цей магніт. Окрім цього, є ще й інший метод вирівнювання об’єктів на робочій сцені: виділяємо їх та Modify —> Align (CTRL+K) або спеціальною кнопочкою на панелі. Діалогове меню там трошки дивне, але поекспериментуйте з ним, і все у вас вийде. Далі додамо новий шар, на якому розмістимо написи для кнопочок. Протестуємо кіно, бо вже не терпиться подивитися на результат: Control —> Test Movie. Oops!... Клікаємо на кнопочку закриття вікна і тішимося протягом деякого часу. Але яка нам користь від меню, якщо за допомогою нього ми нікуди не потрапимо. Клікання по кнопці повинно переносити нас в іншу точку гіперпростору - і це основний інстинкт Інтернету! Отож, керуючись інстинктами, нам треба кожній кнопочці присвоїти лінк. Це зробити не просто просто, а дуже просто: виділяємо потрібну нам кнопочку, право клікаємо, відкриваємо пункт Properties... і що ж ми бачимо? .... Бачимо насамперед наші перспективи у вивченні Флешу - а саме на закладочці Actions. Вибирати на що тиснути тут просто напросто немає - тому тиснемо на плюсик і дивимося на довжелезне меню. Без паніки! Шукаємо в меню Get URL і тиснемо по ньому. Бачимо якийсь текст - це і є скрипт: On (Release) Виділяємо стрічку номер 2 і заповнюємо поля справа. ПОВНІСТЮ пишемо URL (з усіма http), назву фрейму, в якому відкриється цей URL (можна вказати як назву вікна, що ви задали у фреймовій структурі, так і стандартні варіанти _self, _blank, _parent, _top). Решту підпунктів лишаємо “на потім” - вони наразі тут не потрібні. В результаті в віконечку отримається такий скрипт: On (Release) Так само робимо і з іншими кнопками, присвоюючи їм інші лінки. Тут по ходу діла може виникнути ще одне цікаве питання: чому On (Release) а не On (Press), тобто на лінк ми йдемо не по натисканню кнопки мишки, а по її відпусканню. В принципі, особливої різниці нема, і робіть так, як вам подобається, просто хочеться таки поспостерігати ефект натиснутої кнопочки, а не одразу летіти десь світ за очі. Тепер експортуємо наш проект в .swf і тестуємо прямо вже на веб-сторінці. Такий файл, як правило, вставляється за допомогою пари тегів <object> та <embed> і виглядає десь таким чином: <object id=”first_flash” classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" В будь-якому разі FrontPage або Dreamweaver подбають про усе самі, а якщо у вас нема цих програм, то вам досить лише швидкими пальчиками поміняти назву файлу та його візуальні розміри в вищенаведеній конструкції. Наше тимчасове прощання з Флешем відзначимо веселою подією в стилі чорного гумору - відвідаємо флеш-сайт http://www.joecartoon.com/. Пам’ятаєте страшні віршики про хлопчиків, що невтомно грали в гестапо та контейнерами виносили з лісу зброю часів 2-ї Світової війни?... Це мене надихнуло на: Хлопчик маленький
зайшов в Інтернет, Сайт дуже жваво і цікаво протягне вас по світу чорного гумору - по замордованих та розмазаних на стінах цуценятах та навіть людях... Якщо ви любите той скандальний мультик South Park - то ця розвага - саме для вас. Хоча, можливо, саме такі онлайнові ігри є клапанами, куди виходить накопичена в свіжому адреналіні підліткова енергія... Хто зна.
|
|
|||||||||||||
| |||||||||||||||
|
Ідея проекту, програмування, HTML, CSS, дизайн,
редагування та переклад текстів - Дідок Олександр. | |||||||||||||||
"Не думаючи жити/філософія сучасного життя"