Як створити простий анімований банер в Flash CS3

Якщо ви хочете створити анімований банер з допомогою застарілих технологій, це керівництво покаже вам, як використовувати Adobe Flash і ActionScript 2.0. Зауважимо, що це можна виконати набагато простіше за допомогою HTML і javascript.

Кроки

  1. Як створити простий анімований банер в Flash CS3

    1

    [b]Відкрийте Adobe Flash і створіть новий документ. Змініть документ, натиснувши Ctrl + J для Mac, Ctrl + J для ПК. В опціях задайте розмір для банера: 468 х 60 (ширина х висота. Це стандартний розмір банера в Інтернеті). Потім задайте будь-який колір для фону, який ви хочете, і натисніть кнопку ОК. Для цього уроку - це буде чорний колір.

  2. Як створити простий анімований банер в Flash CS3

    2

    `Перейдіть до своїх верствам і назвіть перший так, якою ви хочете, щоб була перша анімація. У цьому уроці це буде коло, так що сам шар буде називатися `circle` (коло). Наведіть курсор на інструмент Rectangular (Прямокутник), натисніть його і потім утримуйте його, щоб викликати меню. Далі виберіть інструмент Oval (Овал), потім відпустіть кнопку миші. Перейдіть до банера і створіть коло будь-якого розміру. У цьому уроці розмір досить великий, так що тільки невелика частина кола буде видно всередині банера, і розміри такі: 175.5 x 175.5.

  3. Як створити простий анімований банер в Flash CS3

    3

    [b]Тепер, коли у вас є створений коло, натисніть F8 (Mac і PC) для того, щоб вивести вікно конвертації (перетворення) в символ. Натисніть зображення, далі назвіть символ "circle" і натисніть OK. Ви зараз створили символ, який можна "оживити". Перейдіть до своєї області шарів і перемістить курсор до 5-го кадру і натисніть F6 (Mac і PC). Це створить ключовий кадр, який має коло в тому ж місці. Натисніть тому в першу кадрі, потім перейдіть до свого колу і натисніть його. Тепер ми зробимо його зникаючим в плані анімації.

  4. Як створити простий анімований банер в Flash CS3

    4

    [b]Спустіться до панелі властивостей внизу і перейдіть до палітри кольорів. Натисніть на неї і перемістить повзунок в позицію "Alpha", а потім встановіть значення відсотка в "0". Це змусить ваш коло зникати. Але не хвилюйтеся, тому що він все ще там, просто в даний час він прихований.




  5. [b]Як створити простий анімований банер в Flash CS3

    5

    [b]Поверніться до вашої області Layers, клацніть правою кнопкою миші на ключовому кадрі, який знаходиться між 1-м і останнім ключовим кадром, і натисніть на кнопку "Create Motion Tween". Якщо все зроблено правильно, то значить ви успішно створили першу частину анімації. Далі ми додамо текст.

  6. Як створити простий анімований банер в Flash CS3

    6

    [b]Створіть новий шар, назвіть його "text" (Текст), так як це те, що буде там поміщатися. Перейдіть до 6-го кадру в шарі "text", правою кнопкою миші, потім виберіть "Insert New Keyframe" (Вставити новий ключовий кадр) - це дасть вам порожній ключовий кадр, щоб працювати. Перейдіть до палітри інструментів, натисніть на "T", щоб вибрати інструмент text tool (Текст). Переміститеся на свій банер, а потім введіть слова, які ви хочете. Для цього уроку це буде слово "banner". І з ще обраним текстом натисніть клавішу F8, щоб зробити його зображенням (Graphic). Введіть "text" для імені, потім натисніть кнопку ОК. Тепер ваш текст може бути анімований також.

  7. Як створити простий анімований банер в Flash CS3

    7

    [b]Тепер перейдіть до шару "circle", натисніть на шостий кадр, потім натисніть і утримуйте кадр і переміщайте його до 16-го ключового кадру. Це зробить коло видним через всю анімацію. Перенесіть текст в область, яка в колі, але переконайтеся, що знаходиться не на біт лівіше за коло. Перейдіть до своїх верствам, утримуйте шар "text" і перемістіть його вниз, щоб бути нижче шару "circle". Це змусить частину тексту зникнути для перегляду-тобто те, що нам потрібно в даний момент.

  8. Як створити простий анімований банер в Flash CS3

    8

    Зафіксуйте шар кола і сховайте його ` також. Щоб ми могли переконатися, що нічого не буде "зіпсовано" і щоб ми могли бачити, що ми робимо, натисніть на 15-й кадр на шарі з текстом, і створіть ключовий кадр, натиснувши клавішу F6. Натисніть на текст в 16-му кадрі і перемістіть його в то місце розташування, де ви хочете, щоб текст перебував на банері. Але переконайтеся, що остання буква знаходиться лівіше за сам коло. Ви можете натиснути, щоб зробити коло видимим, якщо ви не впевнені, де є коло.



  9. Як створити простий анімований банер в Flash CS3

    9

    [b]Якщо у вас він позиціонується саме там, де ви хочете, переходите до шару "text". Потім між двома ключовими кадрами створіть анімацію його руху, клацнувши правою кнопкою, потім вибравши "Create Motion Tween". Як тільки це закінчиться, створіть третій шар і назвіть його ActionScript. Перейдіть до останнього кадру (16-кадр) і створіть новий ключовий кадр, натиснувши клавішу F6. Перейдіть в Window -> Actions і введіть stop () - потім закрийте вікно.

  10. Як створити простий анімований банер в Flash CS3

    10

    [b]Перейдіть туди, де ви хочете зберегти анімацію, і назвіть анімацію "banner". Перейдіть вниз до Export As: (Експортувати як): і натисніть на частину ".swf", відкриваючи меню для всіх варіантів. Перейдіть до пункту "animated gif (.GIF)" і клацніть по ньому, так що анімація стає малюнком (.gif image), потім натисніть кнопку ОК.

  11. Як створити простий анімований банер в Flash CS3

    11

    [b]Вітаємо! Ви успішно створили спрощену версію банера, щоб трохи «повипендріваться»!

Поради

    1. Розгляньте можливість використання сучасного стандарту, наприклад HTML5.

Попередження

    1. Цей метод не буде сумісний з iOS або іншими мобільними операційними системами.