Як зробити гумовий флеш банер, банер, що розтягується, флеш банер розтяжку

У цьому уроці ви дізнаєтеся, як зробити гумовий флеш банер / банер розтяжку під flash. Якщо ви хочете, щоб флеш банер не був статичним (завжди мав тільки задані розміри), а мав гумовий ефект (в залежності від розмірів екрану браузера користувача розтягувався на потрібну ширину), вам сюди.

Для того, щоб зробити гумовий банер, спочатку треба визначитися з його мінімальними розмірами (мінімальна видима область менше якої банер не буде звужуватися). Після того, як ми визначилися з мінімальними розмірами банера, необхідно визначити, які елементи банера повинні розтягуватися, а які переміщатися разом з роликом, в моєму випадку розтягуватися буде фон, а переміщатися по центру гумового банера буде ролик (сюжет банера розтяжки).

Для цього уроку я ісользовать програму Adobe Flash CS5 c "ActionScript 2.0".

1 Створюємо новий документ з потрібними параметрами, я використовував розміри 400х80 і якщо ви звузите або розгорнете вікно браузера, гумовий банер повинен розширюватися або звужуватися (до 400 пікселів), а анімація завжди буде розташовуватися по центру банера.

2 Створюємо 4 шари і називаємо їх: 1-Фон, 2-Текст, 3-Кнопка і 4-ActionScript.

3 Переходимо на шар (Фон), вибираємо інструмент "Прямокутник (R)", скасовуємо його обведення, встановлюємо будь-який колір заливки і малюємо їм прямокутник на сцені будь-яких розмірів, він буде нашим фоном, потім беремо інструмент "Стрілка (V)", вибираємо їм наш намальований прямокутник і виставляємо його на нульові позиції на осях "х" і "у" і встановлюємо розміри, як у нашого банера. (Бажано використовувати однорідний колір у фону або з горизонтальним градієнтом, щоб картинка використана в якості фону не спотворювалася)

Також для фону можна використовувати будь-яке зображення з неоднорідним малюнком, тоді годі й перетворювати фон в кліп, чи не присвоювати йому унікальне ім'я і виключити всі записи про тлі в ActionScript (розтягування фону), а просто правий край фону винести за межі сцени, щоб ширина фону дорівнювала максимальній ширині, на яку буде розтягуватися банер.
P. S. З цим варіантом розтягування фону може вийти косяк, якщо екран користувача буде ширше ніж максимальна ширина вашого фону, так що робіть фон ширше і виносьте його правий край подалі за межі сцени.

4 Поки наш прямокутник ще обраний, натискаємо кнопку "F8", щоб перетворити його в "Фрагмент ролика", називаємо його "Fon" і обов'язково встановлюємо точку реєстрації в верхньому лівому кутку, щоб якщо банер буде розтягуватися, він розтягувався рівно від лівого краю.

5 Поки наш ролик фону ще обраний в панелі "Властивості" присвоюємо йому унікальне ім'я (ідентифікатор) "Fon_mc".

ВАЖЛИВО! Всю анімацію слід робити всередині роликів, яким присвоєно унікальне ім'я, тільки тоді всі елементи банера будуть пропорційно розташовуватися при розтяжці, т. Е. Кінцевий вигляд головна сцена гумового банера матиме вигляд:

Ви також можете наочно це побачити в іскодніке до даного банеру

6 Переходимо на шар (Текст) і перебуваючи на цьому шарі я написав назву сайту, перетворив його в "Фрагмент ролика", назвав його "Text" з точкою реєстрації по центру. Потім також поки він обраний в панелі "Властивості" присвоюємо йому унікальне ім'я (ідентифікатор) "Text_mc", потім двічі натискаємо по новоствореному кліпу, щоб увійти в нього і перебуваючи всередині цього ролика робимо. що душі завгодно, наприклад я створив пробігає відблиск по тексту і зміну тексту.

Коли зробили всю анімацію всередині ролика "Text", повертаємося на головну сцену.

7 Переходимо на шар (Кнопка), вибираємо інструмент "Прямокутник (R)", скасовуємо його обведення, встановлюємо будь-який колір заливки і малюємо їм довільний прямокутник, потім вибираємо його, виставляємо його на нульові позиції на осях "х" і "у" і встановлюємо його розміри, як у банера 400х80.

8 Поки наш прямокутник все ще обраний, натискаємо кнопку "F8", щоб перетворити його в кнопку і називаємо її "Button", точку реєстрації ставимо в верхньому лівому куті. Потім також поки кнопка вибрана в панелі "Properties" присвоюємо їй унікальне ім'я (ідентифікатор) "Btn_mc".

9 Поки наша кнопка вибрана йдемо в панель "Кольоровий ефект" і встановлюємо там кнопці нульову прозорість "Альфа канал - Альфа".

10 Вибираємо нашу кнопку, натискаємо кнопку "F9", щоб відкрити вікно "Actions" і вводимо туди наступний код:

11 Переходимо на шар (ActionScript), натискаємо кнопку "F9", щоб відкрити вікно "Actions" і вводимо туди наступний код:

На цьому даний урок закінчений, можна протестувати, що у нас вийшло "Управління -> Тестувати ролик".

Щоб тягнеться банер залишався таким і на сторінці сайту, коли будете публікувати його на сторінці, наприклад в програмі для створення веб сторінок "Macromedia Dreamweaver". в коді флешки, в рядку "embed" треба поставити ширину в "%".