Macromedia Flash в дії. кнопки
Macromedia Flash в дії. кнопки
Звучить неправдоподібно, але багато web-дизайнери використовують Flash виключно через його зручності та простоти при роботі з кнопками. Саме з цих причин ява-скрипти повільно, але вірно йдуть зі сторінок в небуття, поступаючись дорогу королівської ходи маленького, але гордого об'єкта нашого вивчення.
Кнопка ... просто кнопка
Ну що ж, Flash, я сподіваюся, вже завантажений. Можна приступати до створення нашої першої кнопки. Справа ця нескладна і особливих знань не вимагає. Спершу намалюйте прямокутник і зафарбуйте його будь-яким кольором.
Виділіть наш прототип і перетворіть його в символ Кнопка (виберіть в меню Insert - Convert to Symbol або натисніть F8, потім виберіть Button і натисніть Enter). Об'єкт придбає характерну для символу синю рамочку. Кликнемо двічі по новоявленої кнопці і потрапимо в її вікно редагування. Повернутися назад до основного полю малювання можна натиснувши Scene 1. Ми бачимо, що наш Timeline (лінійка часу) перетворився і став виглядати ось таким чином:
На відміну від його звичайного стану, залишилося всього чотири кадри: Up, Over, Down і Hit, на яких ми зупинимося докладніше. У кадрі Up можна вибрати, як буде виглядати кнопка в своєму звичайному стані (коли на неї не натискають і не наводять курсор миші). Тут вже вставлений ключовий кадр, де кнопка намальована такою, якою вона була створена нами спочатку. Відповідно при модифікації кольору контурів або заливки в режимі редагування кнопки (Symbol 1) всі зміни будуть відбуватися і в основному режимі (Scene 1). У кадрі Over ми малюємо стан нашої кнопки в момент, коли над нею знаходиться курсор мишки. Так би мовити, ось вона, заміна Яві і панацея для початківців дизайнерів. Кадр Down (не плутати з дауном :)) описує стан кнопки в момент натискання на неї мишки і до моменту відпускання. Детальніше слід зупинитися на кадрі Hit. Він відповідає за область спрацьовування дій для нашої кнопки. Тобто якщо ми намалюємо над нашою кнопкою інший прямокутник, вдвічі більше вихідного, то всі події відбуватимуться в зоні того, який більше, хоча на екрані при запуску кнопка залишиться без змін. Це стане в нагоді для створення тексту-кнопки. Досить створити тут ключовий кадр і намалювати над текстом будь-яку фігуру, область якої буде розглядатися як кнопка. Приклад подібного тексту буде дано нижче, а поки повернемося до наших баранів. Натисніть на кадрі Over і створіть там ключовий кадр (F6) (Не винувата я, що такі тавтології виходять :)). Потім зафарбуйте кнопку як-небудь по-іншому. Запустіть на виконання кліп (Ctrl + Enter). Якщо все було зроблено правильно, то при наведенні мишки на прямокутник він повинен змінити колір. Вставте ключовий кадр в кадрі Down і напишіть на кнопці що-небудь на зразок "натиснута". Запустіть кліп і спробуйте покликати по кнопці. Hit в даному прикладі можна не використовувати, так як область дії для кнопки вже обмежена нашим прямокутником. Цей приклад буде заготівлею для подальших пояснень, тому переконайтеся, що у вас все працює правильно.
додаємо звук
Так-так, Flash і це може. Звичайно, закачувати шосту симфонію в невелику кнопку - справа не зовсім вдячна, але ось маленьку озвучку для різноманітності зробити можна. Головне в цій справі - не перестаратися, тому що зазвичай звуки не завжди подобаються користувачеві, якщо вони абсолютно не до місця. Для тесту ми візьмемо стандартний звук з папки Windows \ Media - ding.wav. Маленький, звучний ... що ще потрібно для хорошої кнопки. Слід також згадати, що символи, звуки, імпортовані картинки та інше зберігається в бібліотеці (Library), доступ до якої можна отримати, натиснувши F11. Вона-то нам зараз і знадобиться. Завантажуємо звук (File - Import) і, якщо вікна бібліотеки немає на екрані, тиснемо описану вище кнопку. Ви побачите наступну картину:
Як бачите, в бібліотеці у нас зараз два символу: кнопка і доданий звук. Звук можна прослухати, натиснувши кнопку із зображенням трикутника, яка ще з часів великого магнітофона "Романтика" позначала "Play". При використанні цієї можливості на кнопці відображається, як вона буде виглядати в момент натискання на неї (вміст кадру Down). Якщо ви не перебуваєте в режимі редагування кнопки, увійдіть в нього, виділіть кадр Over і просто перетягніть лівою кнопкою вірного гризуна звук ding.wav з бібліотеки на зображення кнопки. У разі правильного виконання описаної операції лінійка часу зміниться на наступне зображення.
додаємо анімацію
Тут я б хотів описати реалізацію декількох простих ефектів, які зможуть залучити хоч хвилину уваги до вашої кнопці, а, можливо, навіть якесь висловлювання (ступінь його нецензурності буде прямо пропорційна куту кривизни рук виконавця :)), Давайте створимо новий проект і намалюємо три текстових написи, які будуть служити нашими кнопками:
Зараз ми зробимо для кожної з них свою власну анімацію. Для початку перетворимо першу текстову напис в символ Button, потім створимо ключові кадри на лінійці часу в кадрах Over і Hit. У Hit просто намалюйте будь-прямокутник, що закриває текст "Кнопка 1", щоб задати область спрацьовування. У кадрі Over виділіть нашу першу напис і перетворіть її в анімаційний кліп (F8 - Movie Clip). Двічі клікаємо по ньому і потрапляємо в його власну лінійку часу, де можна задавати специфічну для цього кліпу анімацію. Виділіть перший кадр на лінійці і виберіть в меню Insert - Create Motion Tween. Створіть ключові кадри на 5-му і 10-му кадрі. Якщо все було зроблено правильно, ваша лінійка часу для кліпу повинна виглядати так:
Відкрийте вікно зміни розмірів (Window - Trans-form) і в п'ятому кадрі задайте 110% по вертикалі і горизонталі. Запустіть кліп на виконання (Ctrl + Enter). Тепер при наведенні мишки на кнопку напис повинен плавно збільшуватися, а потім зменшуватися до вихідних розмірів. Трохи модифікуємо анімацію, щоб змінювався не тільки розмір, але і колір кнопки. Для цього в тому ж п'ятому кадрі виділіть напис, і в вікні властивостей (Window - Properties) в поле Color можна буде змінити яскравість (Brightness), прозорість (Alpha) або перефарбувати об'єкт (Tint). Саме остання властивість нам і потрібно.
Вибираємо, задаємо колір і запускаємо. Просто поекспериментуйте з цими параметрами, і ви самі зможете домогтися досить цікавих ефектів. Трохи потренуватися, і на подібні кнопочки у вас буде йти не більше 1-2 хвилин. Думаю, з першою кнопкою ми розібралися, пора братися за другу. Не забудьте повернутися назад в робочу область, клікнувши по Scene 1. Перетворимо напис в кнопку, вставляючи ключові кадри, як і в минулий раз, в Over і Tint. Конвертуємо напис в кліп і двічі натискаємо на нього. Перший ключовий кадр буде вже поставлено. Створюємо ще 5 один за одним, і в кожному з них перемальовували напис наступним чином:
1) Кнопка 2
2) Кнопка 2
3) Кнопка 2
4) Кнопка 2
5) Кнопка 2
6) Кнопка 2
Здогадалися, що вийде? Ось і переконайтеся в цьому, запустивши наш кліп на виконання. Для третьої кнопки у нас буде теж досить приємний ефект, хоча анімацією його назвати навіть язик не повертається ... Перетворимо напис в кнопку, вставляємо ключові кадри в Over і Tint і потім в кадрі Over виробляємо наступні дії. Копіюємо текст в буфер обміну і потім вставляємо в робочу область таку ж напис "Кнопка 3". Робимо початковий текст рівно в 2 рази світліше (цього можна добитися або перефарбою, або конвертацією в графіку і подальшою установкою прозорості в 50%) і акуратно перетягуємо обидва об'єкти так, щоб вийшло щось схоже на картинку.
Причому тінь повинна бути трохи нижче і правіше вихідного місця розташування написи, а сам напис, відповідно, повинна зміститися вище і лівіше, щоб створити ефект відділення від білого тла.
Тепер вже точно все зможуть розрізнити, коли курсор миші наведений на кнопку, а коли ні. І наостанок про те, що найбільше знадобиться нам на сторінці. Навіщо потрібні кнопки, якщо вони нічого не роблять? - запитаєте ви і будете абсолютно праві. В основній робочій області виділіть потрібну кнопку і, клікнувши по ній правою кнопкою мишки, виберіть Actions. Перед вами відкриється вікно створення Action-скриптів. Що це таке, і з чим його їдять, я розповім як-небудь пізніше, оскільки це до наших кнопок має непряме відношення, а поки просто виконайте все нижче описане. Перед вами відкриється ось таке віконце:
За замовчуванням у флеші варто нормальний режим (переключитися в експертний можна, натиснувши на синю кнопку зі стрілочкою і трьома квадратиками зліва, яка знаходиться в правій частині вікна), де можливості сильно обмежені, однак для новачка це сильно полегшує завдання, тому міняти його не варто . У розділі Browser / Network є процедура GetUrl. Двічі натискаємо на неї і в поле Url пишемо: www.nestor.minsk.by/kg. Тепер при натисканні на кнопку ми будемо потрапляти на сайт КГ. На створення інших скриптів зупинимося в наступних випусках цих невеликих рад по флеш.
З кнопками все. Цих знань вам поки вистачить для створення нескладних кнопочок, якими можна прикрасити будь-яку web-сторінку.
Пам'ятайте тільки, що кнопки повинні повністю зливатися із загальним видом сторінки, і не соромтеся експериментувати, оскільки краще "методом тику" для самонавчання поки ще не придумали. Успіхів!