This will destroy you... Quiet
Этот урок показывает простой способ создания реалистичной поверхности воды без использования ActionScript
читать дальшеВ предыдущем сообщении есть хороший урок по созданию водной поверхности с использованием Action sсript и DisplacementMapFilter, но для людей, далёких от ActionScript, интересно будет взглянуть на альтернативный способ без использования скриптов.
Итак, приступим
1) Создаём документ во флеш
2) Подготавливаем картинку с водой, делая её на 2-5 пикселей шире и выше размера документа
3) Импортируем картинку в библиотеку. Вставляем на первый слой в координаты (0,0)
4) Копируем картинку с первого слоя (ctrl+C), создаём второй слой выше первого, и вставляем туда в те же координаты нашу картинку (ctrl+shift+V). Щёлкаем по картинке на втором слое, чтобы выделить её, и с помощью стрелочек на клавиатуре двигаем на 1 пиксель вниз (либо на панели свойств меняем значение координаты Y на "1"
5) Затем создаём новый мувиклип (ctrl+F8, либо в верхнем меню Insert -> New Symbol). Символ назовём "движение волн".
Здесь мы будем делать волнистую маску. Для этого нам потребуется волнистая текстура. Наша цель в том, чтобы получить что-то, что выглядит так:
Её можно сделать 2-мя способами.
1:
Делаем волнистую текстуру в фотошопе и заливаем этой текстурой документ. Документ можете сделать такого же размера, как и ваша исходная картинка с водой. Сохраните файл фотошопа например в png. Затем импотртируйте во флеш и вставьте в наш новый символ ("движение волн"
"> и воспользуйтесь трейсом (Modyfy --> Bitmap --> Trace Bitmap). Щёлкая на области между полосками - выделяйте их по очереди и удаляйте. Полученную текстуру конвертируйте в символ (выделите всю (ctrl+A) и щедкнув по ней правой кнопкой мыши в выпадающем меню выберите convert to symbol. Символ назовите "текстура волн".
2 способ:
Нарисуйте такую текстуру прямо во флеш, например пером. Вначале нарисуйте одну волну
вверх, а потом вниз. чтобы начало и конец совпали - я рисую вспомогательную линию другим цветом - зелёным, щёлкнув по неё дважды мышкой можно выделить её целиком, и подвинуть туда, где середина по вертикали. Затем выберите Selection Tool (чёрную стрелочку на панели инструментов), и убедитесь, что включён режим привязки к объектам (магнитик как на скриншоте). теперь, подводя мышку к краю чёрной линии (нашей волны) мы видим, что под курсором появляется уголок. Мы можем ухватиться за край чёрной линии и подтащить её к зелёной, она как бы примагнитится.
Так пристыковав оба края чёрной линии к зелёной линии мы получим стыкующуюся часть волны. Дважды кликнув по зелёной линии - выделяем её всю и удаляем (delete). Дважды щёлкнув по чёрной - задаём ей например ширину = 35 и высоту = 10 на панели свойств. Конвертируем её в символ, называем "текстура волн".
Заходим внутрь этого символа (двойным щелчком по волне). Выделяем волну (двойным щелчком по ней). Нажимаем сtrl+C (копируем), затем ctrl+Shift+V. Далее делаем опять клик по волне (один) и на панели свойств выставляем координату X в 35 (=ширине волны, если она у вас другая). У вас должно получиться уже 2 волны.
Теперь осознаём что мы только что сделали, понимаем принцип, и долго сидим и повторяем то же самое, высчитываем и двигаем, пока не заполним нужную область волнами (по ширине равную ширине документа, и по высоте - примерно так же. если больше - ничего). Копировать каждый раз можно всё больший участок волн - на втором разе уже 2 волны, и двигаем их на 70 пикселей, дальше уже будет 4 и т.д. Потом целый ряд, потом 2 ряда, и т.д.
Итак, вы каким-то образом сделали текстуру, и у вас есть символ "текстура волн". Он должен находиться внутри символа "движение волн", если он не там - откройте символ "движение волн" из библиотеки, и перетащите в него символ "текстура волн". он должен находиться в координатах (0,0).
Теперь вернёмся на главную временную шкалу. Там создаём третий слой, и на нём размещаем символ "движение волн" так, чтобы координата X у него была равна "0", а по Y он был где-то там, где у нас вода, только несколько выше.
Затем двойным щелчком по волнам зайдём опять в символ "движение волн". Создадим зацикленое движение. На временной шкале на 30-м кадре жмём F6. Выделаем область временной шкалы от начала до конца, правой кнопкой мыши выбираем из выпадающего списка create motion tween.
Теперь мы хотим знать, как подвинуть волны так, чтобы анимация их движения была зацикленной.
Идём на 1 кард и создаём новый слой. На первом кадре копируем (ctrl+C) символ с волнами и втавляем ctrl+shift+V на второй слой. Теперь на втором слое у нас копия начального положения волн. Идём на последний кадр первого слоя. Второй слой закроем, чтобы он нам зря не попадался
(щёлкаем на точку под замком около нашего слоя, надеюсь из скриншота понятно)
На первом влое, на последнем кадре, щелчком выбираем символ с текстурой, и стрелкой "вниз" на клавиатуре двигаем её на пару линий из волн вниз, так, чтобы в итоге совпали волны на этом кадре, и на слое выше. Когда совпадёт - можно удалить второй слой (щёлкните по нему, потом по иконке ведра под списком слоёв). Зацикленная анимация почти готова.
Вернёмся на главную временную шкалу. Третий слой у нас теперь содержит символ с анимацией волн. Делаем его маской (правой кнопкой щёлкнув по названию слоя и выбрав в выпавшем меню "Mask". Когда вы делаете маску - слой-маска и тот, к кторому она применяется закрываются. Можете теперь нажать ctrl+enter и протестировать вашу флешку. Определитесь, устраивает ли вас скорость, размер волн и всё остальное. Я рекомендую также ставить для флешек количество fps равным где-то 20 - 30 (frane rate на панели свойств, когда у вас не выбран ни символ ни объект).
Если вас что-то не устраивает - подправьте. Скорость движения волны меняем внутри символа "движение волн" (заходим в него двойным щелчком из главной временной шкалы, предварительно отомкнув слой-маску). Увеличиваем/уменьшаем количество кадров в моушен-твине, пока не получим желаемую скорость движения воды.
Когда добились нужной скорости - сделаем ещё один штрих. Анимация движения у нас зациклена, но есть небольшой глюк - на первом и последнем кадре у нас одинаковое положение волн, это создаёт некоторую едва заметную зарердку. Чтобы её убрать, выберем на временной шкале моушен твина предпоследний кадр, и там нажмём F6. Последний же кадр удалим (щёлкнув по нему правой кнопкой мыши и выбрав "Remove Frames".
Вот и всё, анимация готова.
Вы можете задать прозрачность для картинки на втором слое для большей реалистичности.
Реалистичность эффекта зависит от того, какую картинку воды вы используете. Также для разных картинок воды нужно подбирать свой размер волн, свою скорость и может быть сдвигать картинку на втором слое больше.
Не бойтесь экспериментировать!
Вы можете применить этот урок к анимации логотипа – сделать его покачивающимся на воде.
исходник по уроку
Присоединённые файлы
water_my.zip ( 161.04к )
читать дальшеВ предыдущем сообщении есть хороший урок по созданию водной поверхности с использованием Action sсript и DisplacementMapFilter, но для людей, далёких от ActionScript, интересно будет взглянуть на альтернативный способ без использования скриптов.
Итак, приступим
1) Создаём документ во флеш
2) Подготавливаем картинку с водой, делая её на 2-5 пикселей шире и выше размера документа
3) Импортируем картинку в библиотеку. Вставляем на первый слой в координаты (0,0)
4) Копируем картинку с первого слоя (ctrl+C), создаём второй слой выше первого, и вставляем туда в те же координаты нашу картинку (ctrl+shift+V). Щёлкаем по картинке на втором слое, чтобы выделить её, и с помощью стрелочек на клавиатуре двигаем на 1 пиксель вниз (либо на панели свойств меняем значение координаты Y на "1"
5) Затем создаём новый мувиклип (ctrl+F8, либо в верхнем меню Insert -> New Symbol). Символ назовём "движение волн".
Здесь мы будем делать волнистую маску. Для этого нам потребуется волнистая текстура. Наша цель в том, чтобы получить что-то, что выглядит так:
Её можно сделать 2-мя способами.
1:
Делаем волнистую текстуру в фотошопе и заливаем этой текстурой документ. Документ можете сделать такого же размера, как и ваша исходная картинка с водой. Сохраните файл фотошопа например в png. Затем импотртируйте во флеш и вставьте в наш новый символ ("движение волн"
"> и воспользуйтесь трейсом (Modyfy --> Bitmap --> Trace Bitmap). Щёлкая на области между полосками - выделяйте их по очереди и удаляйте. Полученную текстуру конвертируйте в символ (выделите всю (ctrl+A) и щедкнув по ней правой кнопкой мыши в выпадающем меню выберите convert to symbol. Символ назовите "текстура волн".2 способ:
Нарисуйте такую текстуру прямо во флеш, например пером. Вначале нарисуйте одну волну
вверх, а потом вниз. чтобы начало и конец совпали - я рисую вспомогательную линию другим цветом - зелёным, щёлкнув по неё дважды мышкой можно выделить её целиком, и подвинуть туда, где середина по вертикали. Затем выберите Selection Tool (чёрную стрелочку на панели инструментов), и убедитесь, что включён режим привязки к объектам (магнитик как на скриншоте). теперь, подводя мышку к краю чёрной линии (нашей волны) мы видим, что под курсором появляется уголок. Мы можем ухватиться за край чёрной линии и подтащить её к зелёной, она как бы примагнитится.
Так пристыковав оба края чёрной линии к зелёной линии мы получим стыкующуюся часть волны. Дважды кликнув по зелёной линии - выделяем её всю и удаляем (delete). Дважды щёлкнув по чёрной - задаём ей например ширину = 35 и высоту = 10 на панели свойств. Конвертируем её в символ, называем "текстура волн".
Заходим внутрь этого символа (двойным щелчком по волне). Выделяем волну (двойным щелчком по ней). Нажимаем сtrl+C (копируем), затем ctrl+Shift+V. Далее делаем опять клик по волне (один) и на панели свойств выставляем координату X в 35 (=ширине волны, если она у вас другая). У вас должно получиться уже 2 волны.
Теперь осознаём что мы только что сделали, понимаем принцип, и долго сидим и повторяем то же самое, высчитываем и двигаем, пока не заполним нужную область волнами (по ширине равную ширине документа, и по высоте - примерно так же. если больше - ничего). Копировать каждый раз можно всё больший участок волн - на втором разе уже 2 волны, и двигаем их на 70 пикселей, дальше уже будет 4 и т.д. Потом целый ряд, потом 2 ряда, и т.д.
Итак, вы каким-то образом сделали текстуру, и у вас есть символ "текстура волн". Он должен находиться внутри символа "движение волн", если он не там - откройте символ "движение волн" из библиотеки, и перетащите в него символ "текстура волн". он должен находиться в координатах (0,0).
Теперь вернёмся на главную временную шкалу. Там создаём третий слой, и на нём размещаем символ "движение волн" так, чтобы координата X у него была равна "0", а по Y он был где-то там, где у нас вода, только несколько выше.
Затем двойным щелчком по волнам зайдём опять в символ "движение волн". Создадим зацикленое движение. На временной шкале на 30-м кадре жмём F6. Выделаем область временной шкалы от начала до конца, правой кнопкой мыши выбираем из выпадающего списка create motion tween.
Теперь мы хотим знать, как подвинуть волны так, чтобы анимация их движения была зацикленной.
Идём на 1 кард и создаём новый слой. На первом кадре копируем (ctrl+C) символ с волнами и втавляем ctrl+shift+V на второй слой. Теперь на втором слое у нас копия начального положения волн. Идём на последний кадр первого слоя. Второй слой закроем, чтобы он нам зря не попадался
(щёлкаем на точку под замком около нашего слоя, надеюсь из скриншота понятно)
На первом влое, на последнем кадре, щелчком выбираем символ с текстурой, и стрелкой "вниз" на клавиатуре двигаем её на пару линий из волн вниз, так, чтобы в итоге совпали волны на этом кадре, и на слое выше. Когда совпадёт - можно удалить второй слой (щёлкните по нему, потом по иконке ведра под списком слоёв). Зацикленная анимация почти готова.
Вернёмся на главную временную шкалу. Третий слой у нас теперь содержит символ с анимацией волн. Делаем его маской (правой кнопкой щёлкнув по названию слоя и выбрав в выпавшем меню "Mask". Когда вы делаете маску - слой-маска и тот, к кторому она применяется закрываются. Можете теперь нажать ctrl+enter и протестировать вашу флешку. Определитесь, устраивает ли вас скорость, размер волн и всё остальное. Я рекомендую также ставить для флешек количество fps равным где-то 20 - 30 (frane rate на панели свойств, когда у вас не выбран ни символ ни объект).
Если вас что-то не устраивает - подправьте. Скорость движения волны меняем внутри символа "движение волн" (заходим в него двойным щелчком из главной временной шкалы, предварительно отомкнув слой-маску). Увеличиваем/уменьшаем количество кадров в моушен-твине, пока не получим желаемую скорость движения воды.
Когда добились нужной скорости - сделаем ещё один штрих. Анимация движения у нас зациклена, но есть небольшой глюк - на первом и последнем кадре у нас одинаковое положение волн, это создаёт некоторую едва заметную зарердку. Чтобы её убрать, выберем на временной шкале моушен твина предпоследний кадр, и там нажмём F6. Последний же кадр удалим (щёлкнув по нему правой кнопкой мыши и выбрав "Remove Frames".
Вот и всё, анимация готова.
Вы можете задать прозрачность для картинки на втором слое для большей реалистичности.
Реалистичность эффекта зависит от того, какую картинку воды вы используете. Также для разных картинок воды нужно подбирать свой размер волн, свою скорость и может быть сдвигать картинку на втором слое больше.
Не бойтесь экспериментировать!
Вы можете применить этот урок к анимации логотипа – сделать его покачивающимся на воде.
исходник по уроку
Присоединённые файлы
water_my.zip ( 161.04к )