Flash-листівка своїми руками, КомпьютерПресс

Мал. 1. На сайті www.cards.mail.ru пропонуються десятки електронних листівок

І ось напередодні свята більшість користувачів виявляють в своїх електронних поштових скриньках безліч стандартних електронних листівок, але далеко не всі знаходять час, щоб прочитати таке привітання. Втім, подібний формалізм - це біда, яка навряд чи безпосередньо пов'язана з розширенням можливостей електронної комунікації. А адже в електронному листі можна послати і власноруч створену листівку, в якій можуть бути ваші фото, графіка, анімація і навіть голосове послання - все це можна об'єднати під Flash-листівці.

Новорічна листівка

сновним можливість Flash - це створення анімації. Однак у вас навряд чи знайдеться стільки часу, щоб намалювати анімованих героїв. А ось зобразити снігопад не так вже й складно, зате він відразу додасть листівці динамічність.

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

Мал. 2. Фонове зображення «Нічний пейзаж»

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

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

Мал. 3. Полотно зі сніжинками, переміщаючись зверху вниз, буде створювати ілюзію руху сніжинок

Мал. 4. Положення прямокутника зі сніжинками в останньому кадрі

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

Як же домогтися безперервності руху сніжинок?

Припустимо, переміщення фону зі сніжинками буде відбуватися за сто кадрів. Щоб не було видно склейки, розташуємо сніжинки в прямокутнику особливим чином. Розділимо прямокутник на три частини (рис. 5) і доб'ємося того, щоб візерунок у верхній частині полотна, що дорівнює за розміром сцені (400Ѕ500 пікселів), в точності збігався з візерунком в його нижній частині такого ж розміру. Тоді в першому і сотому кадрах зображення буде повністю збігатися. Якщо запустити такий ролик, то в момент переходу від останнього кадру до першого все сніжинки замруть на час, що дорівнює тривалості одного кадру, а потім знову полетять вниз. Щоб прибрати цей недолік, достатньо видалити сотий кадр, після чого рух сніжинок буде зациклено бесшовно.

Мал. 5. Сніжинки розташовані не випадковим чином

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

Мал. 6. Ефект снігопаду створюється за рахунок руху з різною швидкістю двох полотен зі сніжинками

Тепер додаємо напис «З Новим роком!», І візуальна частина листівки готова (рис. 7). (Якщо вам щось не зрозуміло, зверніться до уроку по Flash № 7 на нашому компакт-диску.)

Мал. 7. Колір для напису виберемо такий же, як і у сніжинок

Тепер, щоб надати листівці індивідуальність, додамо голосове привітання. Спочатку потрібно записати звуковий файл. Для цього знадобляться мікрофон і програма для запису звуку. Найпростіше звернутися до програми Sound Recorder, що входить в поставку Windows XP (рис. 8). Зробити це можна за командою Accessories => Entertainment => Sound Recorder.

Мал. 8. Панель Sound Recorder

Засобами Flash можна відредагувати звуковий файл (рис. 9), після чого листівка буде готова.

Мал. 9. Flash надає кошти для редагування звукового файлу

З ефектом снігопаду можна створити безліч цікавих листівок. Навіть найпростіші графічні елементи після додавання снігопаду виглядають ефектно (рис. 10).

Мал. 10. Замість фотографії можна використовувати власні малюнки

Цікавий ефект можна отримати, використовуючи шар маски - тоді падаючі сніжинки будуть видні тільки на тлі напису і деякого контурного зображення (рис. 11). (Більш докладний опис створення такої листівки, її исходник (Flash-файл), а також swf-ролик можна знайти на нашому CD-ROM в уроці № 7.)

Мал. 11. Використання статичного шару маски з рухомим маскируемое шаром

Різдвяна листівка

різдвяній листівці ми пропонуємо реалізувати ідею анімації полум'я свічки. В якості основи можна взяти будь-яку фотографію зі свічкою, а далі анімувати полум'я свічки, ореол навколо свічки і відповідно до зміни розміру полум'я змінювати освітленість прилеглих предметів (рис. 12). Завдяки цьому можна отримати правдоподібний ефект горіння свічки.

Мал. 12. Анимированная свічка дозволить пожвавити різдвяну листівку

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

Мал. 13. Векторний малюнок «Полум'я свічки»

Мал. 14. Режим контурної кальки показує деформацію полум'я

Відповідно до зміни розмірів і форми полум'я повинен змінюватися ореол, що світиться навколо полум'я. Для створення анімованого ореолу зробимо відповідний шар і намалюємо еліпс навколо полум'я (рис. 15). В панелі Color Mixer виберемо радіальну заливку для еліпса оранжевого кольору з градієнтом кольору (від оранжевого до білого) і градієнтом прозорості (прозорість нульова в центрі і максимальна на периферії) (рис. 16).

Мал. 15. Процес створення ореолу

Мал. 16. Панель Color Mixer

Далі додамо анімацію стосовно ореолу, який повинен збільшуватися в момент посилення полум'я, а головне - зі збільшенням розміру полум'я повинна зростати яскравість його світіння, а також освітленість прилеглих предметів.

Зазначеного ефекту можна домогтися, використовуючи анімацію Motion Tween зі зміною яскравості.

Мал. 17. Ореол з градієнтної заливкою

Таким чином, для імітації горіння свічки використовуються три анімованих шару - flame, oreol і hands (рис. 18).

Мал. 18. Для імітації горіння використовуються три анімованих шару

Створити анімовану свічку нескладно, і вона зробить листівку динамічною і цікавою. Вражаючою буде листівка, якщо ви використовуєте свою фотографію і зробите добру анімацію - таке послання напевно порадує ваших родичів і друзів. (Більш докладний опис створення ефекту палаючої свічки, а також swf-ролик можна знайти на CD-ROM в уроці № 6.)

Мал. 19. Використання в анімованої листівці фотографії дозволяє зробити привітання особистим

Зовсім недавно компанія Cougar представила нову серію блоків живлення для традиційних ПК - VTX, орієнтовану на користувачів з обмеженим бюджетом. У цьому огляді буде розглянута модель Cougar VTX600, яка завдяки своїм характеристикам буде однією з найбільш затребуваних в цій лінійці блоків живлення

На щорічному заході Capsaicin SIGGRAPH в Лос-Анджелесі компанія AMD зміцнила свої позиції на ринку ПК класу high-end з новими процесорами Ryzen Threadripper і GPU «Vega»

Для простого і зручного побудови мереж рядовими користувачами компанія ZyXEL випустила чергову версію свого Інтернет-центру для підключення до мереж 3G / 4G через USB-модем з точкою доступу Wi-Fi - ZyXEL Keenetic 4G III, який ми і розглянемо в цьому огляді

До своєї і так великій родині роутерів і маршрутизаторів фірма ASUS недавно додала дві вельми цікаві моделі: флагманську 4G-AC55U і більш просту 4G-N12. У даній статті буде розглянута флагманська модель ASUS 4G-AC55U

Молода, але амбіційна компанія KREZ на початку цього року випустила нову, оригінальну модель ноутбука KREZ Ninja (модель TM1102B32) під керуванням Windows 10. Оскільки цей комп'ютер має поворотний екран, він може служити універсальним рішенням - його можна з успіхом використовувати і для роботи, і для навчання, і для ігор

Якщо ви часто друкуєте фотографії та вже втомилися міняти картриджі в своєму принтері, зверніть увагу на МФУ Epson L850. Великий ресурс витратних матеріалів, чудова якість відбитків, найширший набір функціональних можливостей - ось лише деякі з переваг даної моделі