Flash переключиться у режим редагування символу, надавши кадри Up, Over, Down й Hit. Перший кадр Up стає порожнім ключовим кадром. Нарисуємо в цьому кадрі ненатиснутий вид кнопки (див. рис. 6.1).
Рисунок 6.1 – UP-кадр кнопки
Виділимо другий кадр, позначений як Over і відповідний стану, коли курсор занесений над кнопкою. Вставимо в цьому кадрі ключовий фрейм (за командою Insert => Keyframe), у результаті чого з'явиться ключовий кадр, що повністю повторює зміст Up-кадру. Змінимо кольори кнопки.
Аналогічно додається наступний кадр (Down-кадр) де буде нарисований натиснутий стан кнопки.
Перейдемо до основної сцени, викличемо бібліотеку за командою Window => Library і створимо екземпляр символу кнопки шляхом перетаскування його на сцену. У результаті одержимо наступний фільм. Натискання кнопки відбувається не тільки тоді, коли ми натискаємо мишкою на центральну (робочу) зону кнопки, але й при натисканні на рамку навколо її. Пов'язано це з тим, що якщо Hit-кадр не нарисований, то робоча область кнопки відповідатиме Up-кадру.
Для того щоб натискання кнопки відбувалося тільки в робочій зоні, необхідно у Hit-кадрі визначити цю зону, тобто нарисувати кнопку без рамки.
Після того як ми додамо необхідний Hit-кадр, одержимо наступний фiльм, у якому при натисканні на рамку продавлення кнопки не відбувається.
Щоб зробити кнопку інтерактивною, необхідно зв'язати факт натискання кнопки з виконанням певних команд, тобто описати певний сценарій. Для задання сценаріїв у Flash існує спеціальна мова Action Script.
Поняття про Action Script. Action Script являє собою мову написання сценарію – набору інструкцій, які управляють елементами Flash-фільму. Сценарії Action Script можуть бути вбудовані у фільм або зберігатися в зовнішньому текстовому файлі з розширенням *.AS. При вбудовуванні сценарію у фільм його можна впроваджувати в різні частини фільму. Точніше, сценарії Action Script можуть містити ключові кадри, екземпляри кнопок та екземпляри мувiклiпiв. Відповідно сценарії називаються сценаріями кадру (Frame Action), сценарієм кнопки (Button Action) і сценарієм кліпу (MovieClip Action). Сценарії Action Script виконуються з настанням певних подій, ініційованих користувачем або системою. Механізм, що вказує програмі Flash, який оператор слід виконати при настанні тієї або іншої події, називається оброблювачем подій. Action Script має власний синтаксис, багато в чому схожий із синтаксисом JavaScript. Flash MX 2004 підтримує Action Script усіх попередніх версій Flash. Одним з основних понять Action Script є Actions - команди, які видають інструкції під час виконання SWF-файла. Наприклад, gotoAndStop() відсилає відтворюючу голівку (Рlayhead) на певний кадр або позначку. Від слова Actions і відбувається назва мови – Action Script (дослівно – сценарій дій).
Продемонструємо використання кнопок для керування Інтерактивним фотоальбомом – створимо набір фотографій і додамо дві кнопки, які перегортатимуть фото вперед і назад.
Помістимо на основній монтажній лінійці перше фото і додамо кнопку зі стандартного набору. Для доступу до потрібної папки слід виконати команду Windows => Сontrol Panels Common Libraries => Buttons.
У результаті виконання даної команди з'явиться панель, яка містить великий набір заздалегідь нарисованих кнопок різних типів. Виберемо, наприклад, Key Buttons (кнопки, схожі на клавіатурні клавіші), відкриємо відповідну папку, виберемо кнопку key-left (див. рис. 6.2) і створимо екземпляр даної кнопки (шляхом перетаскування її на сцену).
Рисунок 6.2 – Елементи папки Key Buttons
Зверніть увагу, що коли ви встановлюєте другу кнопку (key-right) на сцені та переміщаєте її, щоб установити на одному рівні з першою кнопкою, програма дає підказку (пунктирну лінію), яка дозволяє точно позиціювати кнопку.
Для того щоб додати сценарій, необхідно викликати редактор Action Script за командою Window =>Development Panels => Actions або натиснувши клавішу F9. Якщо ви збираєтеся часто писати скрипти, то цю клавіатурну команду слід запам'ятати. У результаті з'явиться редактор Action Script.
Редактор Action Script підказує, на який елемент можна «вішати» код. Якщо виділити на сцені кадр, то у верхньому лівому куті панелі редактора з'являється напис Actions–Frame, якщо клацнути по кнопці, то з'явиться напис Actions–Button, тобто програма підказує, що вводить код, який ставитиметься до сценарію кнопки. А якщо виділити фотографію, то в полі, призначеному для уведення скрипта, з'явиться повідомлення: „Current selection cannot have actions applied to it” („До даного виділеного об'єкта не можна застосовувати сценарій”).
Привласнимо сценарій кнопці. В останніх версіях Action Script є можливість писати централізований код, тобто код, розміщений в одному місці, і така можливість дозволяє краще розбиратися в більших програмах. Однак у простих прикладах присвоювання сценарію кнопці цілком припустиме. Отже, для кнопки зі стрілкою вліво потрібно формалізувати такий сценарій: «Якщо кнопка відпускається на деякому кадрі, то з цього кадру необхідно перейти на попередній кадр». Відповідно до синтаксису мови Action Script це матиме такий вигляд:
on (release)
{
prevFrame();
}
У першому рядку записаний оброблювач подій кнопки on( ), що має формат:
on (event)
{
текст сценарiю
}
Тут event – це назва події у розглянутому випадку release (відпускання кнопки); може також відслідковуватися така подія, як press (натискання кнопки), й інші події, які ми розглянемо пізніше.
Функція prevFrame – це функція безумовного переходу, що переміщає відтворюючу голівку в попередній кадр. Вона перебуває усередині оброблювача подій, тобто може виконуватися тільки у випадку настання описаної події.
Аналогічно на другу кнопку повісимо код, що забезпечує перехід до наступного кадру:
on (release)
{ nextFrame();
}
Тепер додамо кілька ключових кадрів так, щоб у них скопіювалися створені в першому кадрі кнопки, і помістимо у знов створені кадри потрібні фотографії. Якщо запустити на виконання створений фільм, то кадри безупинно програватимуться один за одним, а отже, насамперед нам потрібно дати команду «Стоп» на першому кадрі. Для цього першому кадру додамо відповідну команду.
Зверніть увагу: команда привласнюється вже не кнопці, а кадру. Той факт, що кадру привласнений сценарій, відзначається на основній монтажній лінійці – у позначенні кадру над жирною крапкою з'являється мала літера «a».
У результаті ми одержали наступний фільм.
Якщо у фотоальбомі всього кілька кадрів, то двох кнопок – «Вперед» і «Назад» – цілком достатньо, але якщо набір фотографій великий, то бажано мати ще й кнопки, які відсилають у початок і кінець фільму. У наступному прикладі ми додамо відповідні кнопки: «У перший кадр» та «В останній кадр». Вибрати кнопки підходящої мнемоніки можна зі стандартної бібліотеки кнопок з папки Сircle Вuttons.
На пропонованому прикладі ми ознайомимося із ще однією командою gotoAndStop ( ), яка дозволяє перейти до потрібного кадру з наступною зупинкою.
На кнопку переходу до першого кадру повісимо код. У випадку з фотоальбомом з п'яти кадрів в останню кнопку додамо сценарій переходу «В останній кадр»:
on (release)
{
gotoAndStop(5);
}
У результаті одержимо фільм. (Якщо вам необхідний вихідний FLA-файл, його можна завантажити тут).
Автоматизоване написання скрипта. Панелі редактора ActionScript надають цілий ряд сервисів для автоматизованого написання скрипта. Розглянемо ці можливості. Панель редактора Action Script дозволяє вибирати, перетаскувати, перерозподіляти і вилучати команди. Покажемо, як можна написати той самий скрипт для кнопки «Уперед» в автоматизованому режимі. Вибравши папку Movie Clip Control, можна одержати доступ до оброблювача подій on, а далі потрібно або двічі клацнути по відповідному пункті, або перетягнути вираз на поле написання скрипта в режимі Drag and Drop.
У результаті на робочому полі з'явиться необхідний вираз й підказка виду: ви вибираєте з меню потрібну команду, і вираз завершується автоматично. Як видно з меню, можна вибрати не тільки умову, пов'язану з екранними кнопками, — можна також вибрати з меню пункт keyPress “<Left>”, або keyPress “<Right>”, що відповідає натисканню клавіатурних клавіш (стрілка вліво, стрілка вправо), тобто існує можливість створити фотоальбом, що «перегортатиметься» за допомогою клавіш клавіатури.
Задіємо команду keyPress “<Right>”, потім перейдемо в папку Timeline Control, виберемо команду nextFrame і перетягнемо її на робоче поле.
Для кнопки, що переводить фільм у початок фотоальбому, як подію можна вибрати з меню натискання клавіші Home, а далі перетягнути на поле команду gotoAndStop, у результаті чого з'явиться ще одна підказка з можливого синтаксису даної команди.
Стрілки в підказці дозволяють переглянути різні варіанти синтаксису. Програма пропонує задати сцену й кадр або тільки кадр. У нашому випадку досить вказати тільки кадр (Frame). Якщо назва сцени опущена, то за замовчуванням здійснюється перехід до кадру поточної сцени.
Після того як ми призначимо всім кнопкам відповідні кнопки клавіатури, одержимо наступний фільм, де перегортання фотографій відбуватиметься з клавіатури, а натискання мишкою на екранні кнопки не викликатиме ніяких наслідків.
Чи можна забезпечити сценарій, при якому різні події можуть призвести до одних і тих самих дій? Виявляється, можна – для цього в оброблювачі подій on необхідно перелічити список найменувань подій. Якщо ви поставите кому в списку подій після першої події, то програма сама запропонує вам меню.
Додамо до першої події (натискання клавіатурної кнопки) другу подію (відпускання екранної кнопки):
on (keyPress "<Left>", release)
{
prevFrame();
}
Повторимо процедуру для інших кнопок і в результаті одержимо фотоальбом, у якому перегортання фотографій відбуватиметься як за допомогою мишки, так і за допомогою клавіатури.
У розглянутому прикладі ми використали перехід за номером кадру, але цей спосіб не завжди зручний: якщо в процесі редагування фільму нумерація кадрів зміниться, то логіка може порушитися. Більш зручно використати перехід за позначкою кадру. Розглянемо приклад, у якому буде потрібно не тільки перегортання альбому, але й перехід до різних розділів, тобто більш складна навігація.
Нехай альбом складатиметься з рисунків, комп'ютерної графіки та фотографій.
Першому кадру розділу «Рисунки» дамо позначку Pictures, аналогічно першим кадрам інших розділів привласнимо позначки graphics й photo.
Створимо шар для розміщення позначок і назвемо його Lables. Для того щоб поставити позначку кадру, у панелі Properties необхідно вибрати тип позначки Name і записати її ім'я. У нашому випадку Pictures. Аналогічно розмістимо позначки в кадрах 5 й 10.
Тепер додамо новий шар і назвемо його Actions. У першому ключовому кадрі шару Actions викличемо панель Actions Frame (шляхом натискання кнопки F9) і наберемо команду stop ( ).
Додамо ще один шар під ім'ям Subjects (тематика), у якому дамо заголовка відповідним кадрам: «Рисунки» (див. рис. 6.3), «Графіка» і «Фото».
Рисунок 6.3 – Заголовок для кадрів розділа «Рисунки»
Тепер додамо збоку кнопки меню з аналогічними іменами, які розташуємо на новому шарі за назвою Мenu.
Надрукуємо з лівого краю перший пункт меню «Рисунки» і переведемо його у кнопковий символ. За допомогою інструмента Arrow виділимо текстовий блок «Рисунки» і виконаємо команду Modify=> Convert to Symbol (цю команду можна виконати й за допомогою клавіші F8), у панелі Convert to Symbol задамо тип символу Button і визначимо його ім'я як pictureButton. Створимо чотири кадри для кнопки «Рисунки»: перший являтиме просто вихідний текст, другий – той самий текст тільки синіх кольорів, третій кадр ми пропустимо (у цьому випадку Down-кадр буде такий самий, як й Over-кадр), а в Hit-кадрі нарисуємо прямокутну область, що визначить область натискання кнопки.
Тепер нам потрібно повісити сценарій на знов створену кнопку. Для цього виділимо кнопку в сцені Scene 1 і, натиснувши F9, викличемо панель Actions, а потім внесемо код, показаний на рис. 6.4.
Рисунок 6.4 – Сценарій переходу на кадр із позначкою
