Flash-открытка своими руками

Александр Прохоров

Новогодняя открытка

Рождественская открытка

 

После распространения Интернета поздравления с праздниками свелись к пустой формальности. Действительно, когда-то мы обменивались открытками, которые долго доставлялись по назначению и не менее долго хранились получателями. Потом в продаже появились глянцевые поздравительные открытки с дежурными фразами, в которых автору послания оставалось лишь поставить свою подпись и дату. Сегодня же в Интернете можно найти заготовки электронных поздравлений на все случаи жизни, и в них уже не осталось места даже для собственноручной подписи.

Труд поздравляющего свелся к простой формальности: по сути дела отправителю нужно просто поставить галочки напротив праздников, с которыми он хочет поздравить адресата. Такие услуги предлагают службы поздравительных открыток. Загляните на сайт http://www.cards.mail.ru/ (рис. 1) или по адресу http://www.cards.yandex.ru/, где вам будут предложены десятки готовых электронных открыток — изображений, а чаще просто ссылок на изображения, размещенные на специализированном сервере.

 

Рис. 1. На сайте www.cards.mail.ru предлагаются десятки электронных открыток

Рис. 1. На сайте www.cards.mail.ru предлагаются десятки электронных открыток

И вот накануне праздника большинство пользователей обнаруживают в своих электронных почтовых ящиках множество стандартных электронных открыток, но далеко не все находят время, чтобы прочитать такое поздравление. Впрочем, подобный формализм — это беда, которая вряд ли напрямую связана с расширением возможностей электронной коммуникации. А ведь в электронном письме можно послать и собственноручно созданную открытку, в которой могут быть ваши фото, графика, анимация и даже голосовое послание — все это можно объединить во Flash-открытке.

Конечно, вряд ли стоит изучать программу Flash только для того, чтобы создавать с ее помощью открытки к праздникам. Однако те, кто хоть немного уже знаком с данной программой, смогут почерпнуть из этой статьи целый ряд идей, как создать оригинальное поздравление. (Кстати, всем желающим изучить программу Macromedia Flash рекомендуем обратиться к урокам по Flash, регулярно публикуемым на нашем CD-ROM-приложении.) В качестве темы для открыток мы выбрали любимые всеми праздники — Новый год и Рождество.

Новогодняя открытка

Основная возможность Flash — это создание анимации. Однако у вас вряд ли найдется столько времени, чтобы нарисовать анимированных героев. А вот изобразить снегопад не так уж сложно, зато он сразу придаст открытке динамичность.

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

 

Рис. 2. Фоновое изображение «Ночной пейзаж»

Рис. 2. Фоновое изображение «Ночной пейзаж»

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

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

 

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

Рис. 4. Положение прямоугольника со снежинками в последнем кадре

Рис. 4. Положение прямоугольника со снежинками в последнем кадре

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

Как же добиться непрерывности движения снежинок?

Допустим, перемещение фона со снежинками будет происходить за сто кадров. Чтобы не было видно склейки, расположим снежинки в прямоугольнике особым образом. Разделим прямоугольник на три части (рис. 5) и добьемся того, чтобы узор в верхней части полотна, равной по размеру сцене (400Ѕ500 пикселов), в точности совпадал с узором в его нижней части такого же размера. Тогда в первом и сотом кадрах изображение будет полностью совпадать. Если запустить такой ролик, то в момент перехода от последнего кадра к первому все снежинки замрут на время, равное длительности одного кадра, а потом опять полетят вниз. Чтобы убрать этот недостаток, достаточно удалить сотый кадр, после чего движение снежинок будет зациклено бесшовно.

 

Рис. 5. Снежинки расположены не случайным образом

Рис. 5. Снежинки расположены не случайным образом

Итак, с одним слоем мы разобрались. Далее создадим еще один слой и нарисуем в нем полотно со снежинками, которое будет не только больше по высоте, чем сцена, но и шире ее, чтобы имитировать движение снежинок на заднем плане сверху вниз и слева направо. Снежинки на заднем плане сделаем мельче, а само полотно — меньше по высоте, чтобы скорость падения снежинок на заднем плане была меньше (рис. 6).

 

Рис. 6. Эффект снегопада создается за счет движения с разной скоростью двух полотен со снежинками

Рис. 6. Эффект снегопада создается за счет движения с разной скоростью двух полотен со снежинками

Теперь добавляем надпись «С Новым годом!», и визуальная часть открытки готова (рис. 7). (Если вам что-то не понятно, обратитесь к уроку по Flash № 7 на нашем компакт-диске.)

 

Рис. 7. Цвет для надписи выберем такой же,

Рис. 7. Цвет для надписи выберем такой же, как и у снежинок

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

 

Рис. 8. Панель Sound Recorder

Рис. 8. Панель Sound Recorder

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

 

Рис. 9. Flash предоставляет средства для редактирования звукового файла

Рис. 9. Flash предоставляет средства для редактирования звукового файла

С эффектом снегопада можно создать множество интересных открыток. Даже самые простые графические элементы после добавления снегопада смотрятся эффектно (рис. 10).

 

Рис. 10. Вместо фотографии можно использовать собственные рисунки

Рис. 10. Вместо фотографии можно использовать собственные рисунки

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

 

Рис. 11. Использование статичного слоя маски с подвижным маскируемым слоем

Рис. 11. Использование статичного слоя маски с подвижным маскируемым слоем

В начало В начало

Рождественская открытка

В рождественской открытке мы предлагаем реализовать идею анимации пламени свечи. В качестве основы можно взять любую фотографию со свечой, а далее анимировать пламя свечи, ореол вокруг свечи и в соответствии с изменением размера пламени изменять освещенность близлежащих предметов (рис. 12). Благодаря этому можно получить правдоподобный эффект горения свечи.

 

Рис. 12. Анимированная свеча позволит оживить рождественскую открытку

Рис. 12. Анимированная свеча позволит оживить рождественскую открытку

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

 

Рис. 13. Векторный рисунок «Пламя свечки»

Рис. 13. Векторный рисунок «Пламя свечки»

Рис. 14.  Режим контурной кальки показывает деформацию пламени

Рис. 14. Режим контурной кальки показывает деформацию пламени

В соответствии с изменением размеров и формы пламени должен меняться светящийся ореол вокруг пламени. Для создания анимированного ореола сделаем соответствующий слой и нарисуем эллипс вокруг пламени (рис. 15). В панели Color Mixer выберем радиальную заливку для эллипса оранжевого цвета с градиентом цвета (от оранжевого к белому) и градиентом прозрачности (прозрачность нулевая в центре и максимальная на периферии) (рис. 16).

 

Рис. 15. Процесс создания ореола

Рис. 15. Процесс создания ореола

 

Рис. 16. Панель Color Mixer

Рис. 16. Панель Color Mixer

Далее добавим анимацию применительно к ореолу, который должен увеличиваться в момент усиления пламени, а главное — с увеличением размера пламени должна возрастать яркость его свечения, а также освещенность близлежащих предметов.

Указанного эффекта можно добиться, используя анимацию Motion Tween с изменением яркости.

 

Рис. 17. Ореол с градиентной заливкой

Рис. 17. Ореол с градиентной заливкой

 

Таким образом, для имитации горения свечи используются три анимированных слоя — flame, oreol и hands (рис. 18).

 

Рис. 18. Для имитации горения используются три анимированных слоя

Рис. 18. Для имитации горения используются три анимированных слоя

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

 

Рис. 19. Использование в анимированной открытке фотографии позволяет сделать поздравление личным

Рис. 19. Использование в анимированной открытке фотографии позволяет сделать поздравление личным

КомпьютерПресс 6'2004

1999 1 2 3 4 5 6 7 8 9 10 11 12
2000 1 2 3 4 5 6 7 8 9 10 11 12
2001 1 2 3 4 5 6 7 8 9 10 11 12
2002 1 2 3 4 5 6 7 8 9 10 11 12
2003 1 2 3 4 5 6 7 8 9 10 11 12
2004 1 2 3 4 5 6 7 8 9 10 11 12
2005 1 2 3 4 5 6 7 8 9 10 11 12
2006 1 2 3 4 5 6 7 8 9 10 11 12
2007 1 2 3 4 5 6 7 8 9 10 11 12
2008 1 2 3 4 5 6 7 8 9 10 11 12
2009 1 2 3 4 5 6 7 8 9 10 11 12
2010 1 2 3 4 5 6 7 8 9 10 11 12
2011 1 2 3 4 5 6 7 8 9 10 11 12
2012 1 2 3 4 5 6 7 8 9 10 11 12
2013 1 2 3 4 5 6 7 8 9 10 11 12
Популярные статьи
КомпьютерПресс использует