- Робота з кнопками. Кадри кнопки.
- Анімована кнопка.
- «Співоча» кнопка.
- Використання сцен.
- Оптимізація і тестування роликів.
Робота з кнопками. кадри кнопки
Опис виду і властивостей кнопки здійснюється з використанням тимчасової шкали, яка при роботі з кнопкою набуває специфічний вид.
Початковий етап створення кнопки такий же, як при створенні будь-якого іншого символу. Використовуйте команду Insert> New Symbol. У діалоговому вікні Symbol Properties задайте ім'я створюваного символу і встановіть для нього тип Button (кнопка). Зверніть увагу на те, що вид тимчасової шкали змінився. Вона містить чотири кадри, які не нумеровані, а мають специфічні імена і специфічне призначення.
- Перший кадр, Up (вільна), являє собою зображення кнопки в вільному стані, коли курсор не наведений на неї.
- Другий кадр, Over (зверху), відповідає положенню покажчика миші поверх кнопки. При цьому передбачається, що кнопка миші не було натиснуто. Зміна стану кнопки в цьому випадку може використовуватися для того, щоб показати користувачеві, що це дійсно кнопка, а не статичний елемент оформлення.
- Третій кадр, Down (натиснута), відповідає ситуації, коли курсор миші наведений на кнопку і натиснута кнопка миші (зауважимо, що це не обов'язково означає спробу натиснути на кнопці, - як правило, екранні елементи керування спрацьовують не по натискання, а по відпускання кнопки миші).
- Нарешті, четвертий кадр Hit (область наведення), показує область, яка розглядається роликом як область кнопки. Цей кадр сам по собі ніколи не відображається, але саме він визначає, який з перших трьох кадрів повинен відображатися в кожен з моментів. Зокрема, необхідно відзначити, що область зображення кнопки в різних кадрах не обов'язково однакова.
Для того щоб вам легше було розібратися зі «будовою» кнопки, можна скористатися бібліотекою Flash - Window> Common Libraries> Buttons. На малюнку представлені: палітра Timeline нового символу типу Button на етапі його створення, а також палітра Timeline кнопки з бібліотеки Flash - Oval buttons green. Зверніть увагу, що при створенні цієї кнопки було використано кілька шарів. В ході роботи над кнопкою ви можете використовувати всі без винятку інструменти палітри Tools, крім цього в кадр кнопки можна помістити:
- графічний символ,
- анімований символ типу Movie Clip, який може «оживити» кнопку - змусити її реагувати на наведення миші,
- короткий музичний або мовний фрагмент, який може дозволити створити «говорить» або «співочу» копку.
анімована кнопка
Перед вами анімована кнопка - «фотографія під вуаллю». Для того щоб помилуватися репродукцією, необхідно навести на неї курсор миші.
Імпортуємо в ролик заздалегідь підготовлену в Adobe Photoshop ілюстрацію - в цьому ролику репродукція картини Огюста Ренуара. Розміри сцени вашого ролика повинні відповідати розміру ілюстрації. Вирівняйте ілюстрацію по центру сцени, використовуючи палітру Align. Конвертуйте її в символ типу Graphic, використовуючи команду меню Insert> Convert to Symbol. Створіть новий символ типу Movie Clip в якому ви будете імітувати ефект вуалі, а також зникнення вуалі у вигляді прямокутника відривається назовні.
Зверніть увагу на палітру Timeline цього символу.
Шар renuar. Hа нього помістіть екземпляр символу типу Graphic c репродукцією картини. Розтягніть шар до 40 кадру, використовуючи команду Insert Frame.
Шар mask. У першому кадрі цього шару за допомогою інструменту Rectangle намалюйте квадрат зі стороною в 1 піксель, центрир квадрат щодо сцени. 40 кадр шару зробіть ключовим, розмір квадрата в цьому кадрі необхідно збільшити до розмірів сцени (іншими словами до розмірів ілюстрації). Поверніться до першого кадру і встановіть в палітрі Properties тип анімації Shape. Перетворіть цей шар в маску.
Шар image. На цей шар помістіть екземпляр символу типу Graphic. І в палітрі Properties встановіть для нього Alpha 12%. Розтягніть шар до 40 кадру.
Поверніться на сцену і зверніться до бібліотеки вашого ролика. Створіть дублікат для символу типу Movie Clip. Використовуючи команду Edit для дубліката, потрапляємо всередину символу. Утримуючи клавішу Shift, виділяємо всі кадри на всіх шарах і звертаємося до команди Reverse Frames.
І ще одна маленька хитрість, ніяк не можу втриматися від програмування. Зверніть увагу на 40 кадр шару mask, на ньому ви бачите букву a. яка говорить про те, що цього кадру прописана акція. Встаньте на цей кадр і зверніться до палітри Actions (дії). Пропишіть цього кадру акцію:
В даному випадку ми зупиняємо анімацію на останньому кадрі.
Тугіше операцію слід виконати і в першому символі типу Movie Clip.
Тепер, коли всі елементи необхідні для створення кнопки готові, звернемося до команди Insert> New Symbol і створимо новий символ типу Button.
У перший кадр кнопки Up помістіть, використовуючи бібліотеку ролика екземпляр символу Movie Clip №1. У другій кадр Over кнопки помістіть екземпляр символу Movie Clip №2. У третій кадр Down помістіть екземпляр графічного символу з ілюстрацією. У кадрі Hit помістіть прямокутник, розмір якого відповідає розміру сцени.
Після того як робота над створенням кожного кадру кнопки буде завершена, поверніться на сцену. Кнопка, як і будь-який інший символ, поміщається в бібліотеку, звідки в будь-який момент можна додати в ролик її примірник (або кілька примірників). Зверніть увагу на бібліотеку ролика. У ній 5 символів. Винесіть з бібліотеки на сцену кнопку, вирівняйте її щодо сцени, звернувшись до палітри Align.
Перевірити роботу кнопок, перебуваючи в програмі Macromedia Flash не дуже просто. Анімація кнопок в ході редагування не працює. За замовчуванням, клацання на кнопці вибирає її так само, як і будь-який інший об'єкт. Однак у нас є можливість швидкої перевірки того, як працюють кнопки. Для цього треба включити їх за допомогою команди Control> Enable Buttons (управління> включити кнопки). Якщо кнопки включені, то дана команда позначена в меню галочкою. Правда, при виборі цього режиму кілька важко звичайні операції з кнопками, так що нормальне їх стан при редагуванні ролика - відключений.
Протестуйте ваш ролик, якщо це необхідно зробіть його корекцію.
«Співоча» кнопка
Фотографія павича в цьому ролику є «співочу» кнопку. Якщо ви натиснете по ній мишкою, то зможете прослухати короткий звуковий фрагмент - шлюбну пісню павича.
Зверніть увагу на палітри Timeline сцени і кнопки. На сцені всього один кадр і два шари.
Шар bird. Тут розташований текстової блок і «співаюча» кнопка з фотографією павича.
Шар ramka. На ньому розташована рамка, що обрамляє віконце ролика.
Якщо заглянути всередину кнопки, то ми також побачимо два шари.
Шар photo. У перший кадр кнопки цього шару була поміщена фотографія павича - імпортована растрова графіка (jpg-файл), яку я заздалегідь підготувала для Flash-ролика в Adobe Photoshop (змінила розмір фотографії і оптимізувала графіком). Потім, використовуючи клавішу F6, інші кадри кнопки зробила ключовими.
Шар sound. Кадр Down був зроблений ключовим і в нього поміщений звуковий фрагмент - імпортований звук (mp3-файл), який також як і імпортована графіка попередньо пройшов кілька етапів підготовки: запис (wav-формат), обробка в програмі Steinberg Wave Lab, конвертація в цій же програмі з формату wav в формат mp3.
Проаналізуємо результати корекційної роботи:
Використання сцен
Для того щоб організувати нелінійну навігацію по сценам необхідно звернутися до програмування.
Використовуючи палітру Scene, ви можете додати в свій ролик одну або кілька сцен, видалити ту чи іншу сцену, дублювати сцену, змінювати простим перетягуванням порядок програвання сцен, перейменовувати сцени на свій розсуд.
Оптимізація і тестування роликів
Для того щоб гарантувати, що читачі web-сторінки дочекаються закінчення завантаження ролика, слід вжити всіх заходів щодо зменшення розміру ролика і перевірці його роботи в «реальних» умовах.
Частина роботи по оптимізації автоматично виконується програмою Macromedia Flash в процесі генерації ролика. Проводиться пошук дублікатів, які в підсумку включаються в підсумковий файл в одному екземплярі. Крім того, вкладені групи об'єктів конвертуються в групи одного рівня (тільки в готовому екземплярі ролика). Інші дії, пов'язані зі зменшенням розміру ролика, необхідно виконувати самостійно. Можливі такі заходи оптимізації.
Подання кожного елемента, який використовується неодноразово, у вигляді символу. Для елементів, що відрізняються тільки кольором, застосовуйте один і той же символ, змінюючи його властивості.
Активне використання угруповання елементів зображення.
У всіх можливих випадках використання проміжної анімації замість покадровой. Розмір області, в якій зображення змінюється при переході від одного кадру до наступного, необхідно зводити до мінімуму.
Мінімальне використання спеціальних типів ліній, наприклад пунктиру. Застосування інструменту Brush, тільки якщо обійтися олівцем абсолютно неможливо.
Оптимізація окремих контурів (подання їх у вигляді мінімального числа ліній або як стандартних фігур). Для цієї мети слід застосовувати команду Modify> Curves> Optimize (модифікувати> криві> оптимізувати).
Розміщення динамічних і статичних елементів ролика на різних шарах. Активне використання механізму шарів рекомендувалося вже неодноразово, і його важливість важко переоцінити.
Відмова, якщо це можливо, від анімації точкових зображень. Їх рекомендується використовувати тільки в якості фону і статичних елементів.
Відмова від застосування без особливої необхідності градієнтних заливок. Економне використання шрифтів і варіантів їх оформлення. Не слід зловживати включенням шрифтів в ролик. У властивостях статичних текстових полів треба вказати на необхідність включення в ролик накреслень тільки для використовуваних символів.
Максимальне використання при роботі зі звуком формату mp3, забезпечує найвищу ступінь стиснення.
Після того як була дана команда Control> Test Scene або Control> Test Movie і виконано переключення у вікно перевірки ролика, зверніться до меню Debug (налагодження). У його нижній частині ви побачите список можливих значень продуктивності модему. Зверніть увагу, що для кожного типу модему вказується не максимальна, а середня продуктивність підключення до Internet. Так, для модему зі швидкістю 28,8 Кбіт / с теоретично можливо читання до 3,5 Кбайт за секунду, проте програма Macromedia Flash пропонує більш розумну і реальну оцінку в 2,3 Кбайт в секунду.
Для введення персональних налаштувань, виберіть Customize. Щоб побачити обсяг даних, що завантажується при відтворенні кожного кадру, і оцінити небезпеку виникнення затримок, зверніться до меню команду View> Bandwidth Profiler (вид> режим проштовхування). У верхній частині вікна в цьому випадку з'явиться графічне представлення процесу завантаження. Окремі кадри ролика представляються чергуються світлими і темними смугами. Розмір смуги відповідає обсягу даних, необхідного для відтворення даного кадру. Червона поперечна лінія вказує обсяг даних, який в середньому завантажується за час демонстрації окремого кадру. Якщо смуга виходить за межі лінії, це означає, що відвідувачеві, можливо, доведеться чекати, поки завантажиться відповідний кадр.
Щоб отримати більш точні відомості про конкретний кадрі, призупините відтворення ролика командою Control> Stop (управління> стоп) і клацніть на смузі, що відповідає певному кадру. При цьому інформація про зазначений кадрі з'явиться на панелі зліва від графіка.
Крім того, у вас є такі можливості управління зовнішнім виглядом графіка.
Якщо встановлений прапорець меню Control> Show Streaming (управління> стан потоку), то в ході відтворення ролика в верхньому рядку, де вказується номер кадру, відображається заповнюється індикатор завантаження. Це дозволяє більш чітко відслідковувати виникнення затримок при відтворенні.
У меню View (вид) є два пункти, що працюють як перемикачі. У разі вибору опції Streaming Graph (потокове уявлення), то графік описує хід завантаження ролика паралельно з його відтворенням. В цьому випадку ви побачите, які саме кадри викличуть затримки. У разі вибору опції Frame by Frame (Кадр за подання), то на графіку просто вказується розмір кожного кадру.
Домашнє завдання: Основи створення анімації в Macromedia Flash MX
Звернемося до матеріалу домашньої роботи 1 модуля II курсу. Ваше завдання перетворити покадровую анімацію з кошеням в «живу» кнопку, муркоче при натисканні миші. Не можу втриматися від лірики і хочу нагадати чудові рядки з вірша Сергія Олександровича Єсеніна:
Ах, як багато на світі кішок,
Нам з тобою їх не злічити ніколи.
Серцю сниться запашний горошок,
І дзвенить блакитна зірка.
Наяву, в бреду иль спросоння,
Тільки пам'ятаю з далекого дня -
На лежанці муркотів кошеня,
Байдуже дивлячись на мене.
Я ще тоді була дитина,
Але під бабину пісню вскач
Він кидався, як юний тигр,
На загублений нею клубок ...
Виконане завдання подайте у вигляді файлу в форматі fla (якщо розмір файлу перевищує 150 Кб, будь ласка, упакуйте його в архів) і вишліть вчителю.
Тест: Основи створення анімації в Macromedia Flash MX
В матеріали тесту входять питання, які дозволять вам перевірити міцність знань отриманих в ході роботи над другим-п'ятим модулем курсу.
Тест створено в Macromedia Flash MX і являє собою інтерактивний flash-ролик: Завантажити тест в новому вікні
Курсовий проект: Основи створення анімації в Macromedia Flash MX
Знання, отримані в рамках вивчення I і II курсу електронної школи, повинні бути покладені в основу створення короткометражного мультфільму. У цій роботі ви повинні виступити в ролі сценариста і режисера, художника-мультиплікатора і звукооператора. Тривалість мультфільму не повинна бути більше 1 хвилини. Тематика мультфільму не визначена жодними рамками, крім морально-етичних.
Курсовий проект має бути поданий у вигляді файлу в форматі fla. Упакуйте, будь ласка, файл в архів і вишліть вчителю.
Бажаю Вам успіхів у самостійному вивченні Macromedia Flash MX!
До нових зустрічей на третьому курсі!