Анимация радуги на флеше

Для сайта Rainbowproduction Co. сделал заставку на главную страницу: радуга, проявляющаяся слева направо и озаряющая всё вокруг. Фоновая картинка может быть любая, а размер радуги подстраивается под экран.

Весь процесс создания данной анимации занял у меня около часа. На флеше такие вещи делались достаточно просто и быстро: создаёшь анимацию одной звёзды, затем невидимый объект, который сеет звёзды вокруг себя (и подкрашивает их), затем двигаешь его по дуге, повторяющей форму радуги. Одновременно отдельным слоем проявляется нарисованная радуга. Если это делать на чистых html, css, javascript, svg — это займёт намного больше времени. Жаль, что технология macromedia flash уходит в прошлое...

Подкладываем произвольный фон

Цветные слои радуги накладываются с интересным эффектом — комбинация Overlay и Multiply в различных соотношениях. Таким образом создаётся впечатление, что над наложением радуги поработал дизайнер:

Анимация радуги на фоне дереваАнимация радуги на фоне дерева
📅 9 июля 2010#анимация#флэш

Благодарность автору сайта

Если Вы хотите поддержать проект, воспользуйтесь платформой Яндекс.Деньги:

Смотрите также

Спонсоры поста

Комментарии

Слава
Пожалуйста, напиши, как ты делаешь такой интересный переход цветов?
Иван ©
1) Рисуем большой круг (потом его можно обрезать до нужного сектора).
2) Накладываем круговой градиент в виде радуги (на внешней кромке круга и на внутренней кромке радуги прозрачность уходит в ноль).
3) И самое интересное: делаем копию, получается два слоя.
4) Нижний слой накладываем с эффектом Overlay (Перекрытие) — тогда радуга "вживляется" в картинку, а не просто лежит поверх. Прозрачность ставим около 50%, потому что этот эффект слишком ненатуральный, и надо его смягчить.
5) Верхний слой — подстраховочный. При наложении в режиме Overlay радуга в некоторых местах может стать невидимой. Для этих мест и нужен верхний слой. Ставим ему прозрачность 30-50%.

Дальнейшие комментарии временно закрыты. По всем вопросам обращайтесь ко мне по почте, через Вотсап или Вконтакте, см. раздел Контакты

Следующая заметка

© 2010