создание анимационный клип

OSP.RU:Издательство "Открытые системы"::Информационные технологии::Мир ПК::Компьютер дома::Мир Flash MX на примерах. Первые шагиМир Flash MX на примерах Ксения Слепченко04.10.2004Мир ПК Урок 7. Создание Flash-фотогалереи. Часть первая... я в море бросаю монету И слежу, как она уходит из глаз... Словно древние греки, я верю в простую примету, В то, что мне возвращаться сюда доведется не раз. Всеволод Рождественский о КрымеРазгар лета — сезон отпусков. Разве это время для Flash-упражнений? Дети разбежались на каникулы, взрослые сладостно предвкушают долгожданный отдых. В головах только лето создание анимационный клип море. Какие там уроки! Хочется на природу — в горы, на море, одним словом, в Крым! Я не стану отвлекать вас от приятных мыслей создание анимационный клип сделаю темой фотогалереи свои крымские летние приключения.Но не будем забывать, даже пребывая в столь далеком от работы настроении, о программе Macromedia Flash. Ведь если вы привезете с отдыха такие вещественные доказательства, как фотографии, то их неплохо было бы еще создание анимационный клип эффектно подать, например в виде интерактивной фотогалереи. А поскольку цифровой фотоаппарат, как, впрочем, создание анимационный клип сканер, давно перестали считаться предметами роскоши, то почему бы не сделать совместно с Flash уникальную фотогалерею, подобную той, что представлена в файле foto-gallery.swf, который находится на прилагаемом к журналу диске.На этом уроке мы не только приятно проведем время, разглядывая крымские фотографии, но создание анимационный клип расширим свое знание языка Action Script, создание анимационный клип также узнаем, какие эффекты применяются к растровым рисункам.Главные принципы создания фотогалереи во FlashНиже приведено то основное, на что я хотела бы обратить ваше внимание, прежде чем мы начнем непосредственно рассматривать процесс создания фотогалереи.Тщательный отбор. Ответственно отнеситесь к подбору фотографий — они должны быть яркие, хорошего качества. Проработка. Так как мы не ограничились простым просмотром фотографий в программе типа MS Office Picture Manager, создание анимационный клип пошли неординарным путем создание анимационный клип создаем фотогалерею с помощью Flash, то надо использовать всю возможную функциональность программы. Это позволит получить интерактивные картинки с анимационными эффектами, поясняющими надписями, музыкальным сопровождением и проч. Оптимизация. Фотографии следует оптимизировать, чтобы «весили» они как можно меньше при допустимом уровне качества. Для этого идеально подходит программа Adobe Photoshop, в меню которой есть очень удобная опция — Save for Web (Сохранить для веб). Число фотографий. Снимков не должно быть больше 10—15. Лучше сделать ряд фотогалерей различной тематики. Гораздо удобнее иметь несколько хорошо оформленных тематических альбомов, чем один со сборной солянкой. Размеры галереи. Качество создание анимационный клип количество подаваемого фотоматериала зависят от цели создания галереи. Если вы хотите отправлять ее по e-mail своим друзьям или демонстрировать дома, то вам не нужно в такой степени ограничивать размеры галереи, как пришлось бы, если бы вы намеревались выставить ее на своем сайте, поскольку в этом случае налагаются дополнительные требования максимальной компактности.Техническое задание, или Что нужно делать?Остановимся на структуре создание анимационный клип концепции галереи. В отличие от презентации, где каждый из слайдов должен стоять на своем месте и располагаться в определенном порядке, в фотогалерее последовательность картинок не имеет первостепенного значения. Следовательно, здесь мы должны позаботиться о том, чтобы можно было переходить на любую из них.Поскольку собрано приличное количество снимков, то неразумно заслонять ими всю рабочую поверхность. Однако мы работаем с великолепным средством создания анимации — Macromedia Flash и потому обеспечим мгновенный просмотр всех фотографий в виде прокручивающейся пленки. Также предусмотрим возможности остановки пленки создание анимационный клип выбора определенной фотографии для увеличения.Сами «большие» фотографии галереи также не будут простаивать без дела, мы создание анимационный клип для них придумаем интересные эффекты, способные обогатить любую коллекцию. Но пора приступать к делу.Готовим фотографииСоздадим документ «foto-gallery.fla». Для начала импортируем фото-материалы, находящиеся на диске журнала. Выберем для импорта с каталога урока все файлы с расширением .jpeg. Чтобы понять основные принципы, вполне достаточно пяти фотографий.Рис. 1. Панель Timeline (Монтажный стол) основной сцены клипа Первая часть работы будет сходна с началом выполнения задания по созданию презентации. Вспомните, как мы вставляли свой ключевой кадр для каждого слайда. На отдельном слое «фото» создайте серию ключевых кадров создание анимационный клип поместите на каждый из них по фотографии из библиотеки. На новом слое «обложка» нарисуйте фон создание анимационный клип сделайте стильное обрамление галереи (рис. 1). Также позаботьтесь, чтобы кадры не пролетали за долю секунды, создание анимационный клип терпеливо ожидали дальнейших действий — слой с командой stop (); обеспечит это.Приготовьте отдельный слой «мини», на котором будут происходить движение маленьких фотографий, их выбор создание анимационный клип переход на большие фото (рис. 1, нижняя часть). Монтажный стол клипа представлен на рис. 1 (верхняя часть).Прокручивающаяся фотопленкаКогда подготовительная работа завершена, пора заняться самой прокручивающейся фотопленкой для реализации указанного выше эффекта. На слое «мини» создайте символ «plenka» типа Movie (Ролик).Весь фокус состоит в том, что нужно обеспечить постоянное движение кадров с обязательным возвращением к первому. Чтобы использовать как можно меньше слоев создание анимационный клип символов, создание анимационный клип также сделать все побыстрее, предлагаю следующий прием.С помощью инструмента Rectangle (Прямоугольник) в муви-символе «plenka» создайте саму подложку пленки в виде полоски в нижней части сцены, растянутой на всю ее ширину. Поместите на два новых слоя все фотографии из библиотеки: на первый — три, на второй — две. Инструментом Free Transformation (Свободная трансформация) значительно уменьшите их. Следите за тем, чтобы высота всех изображений была одинакова — не более 70 пикселов. Это можно проконтролировать создание анимационный клип отрегулировать, применив панель Info (Информация). С помощью панели Align (Выровнять) выровняйте фото по одной линии создание анимационный клип установите равномерные промежутки между ними. Для слоев, содержащих фотографии, реализуйте анимацию Motion Tween в соответствии с рис. 2 (слои «2 фото» создание анимационный клип «3 фото»). Внимательно проследите за движением, которое будет происходить справа налево.Рис. 2. Панель Timeline (Монтажный стол) символа «plenka» Итак, слой «3 фото». На первом кадре три фотографии размещаются на подложке пленки по центру сцены. Ко второму ключевому кадру они должны полностью сместиться со сцены влево. На следующем кадре нажмите создание анимационный клип перенесите фотографии за правую часть сцены. А на последнем установите фото на те же позиции, на которых они находились на первом фрейме.Для второго слоя «2 фото» ситуация будет следующей. Первый ключевой кадр начинается немного позже — с седьмого фрейма, и фотографии располагаются справа от сцены, проходя по пленке. К своему последнему кадру снимки должны оказаться слева за сценой.Внимание! Все время следите за тем, чтобы кадры находились на одном создание анимационный клип том же уровне. Иными словами, значение Y на панели Info (Информация) должно быть постоянным.С движением фотографий мы разобрались. Теперь надо сделать так, чтобы объект действительно походил на фотопленку, создание анимационный клип добавить характерные для нее перфорированные края.Рис. 3. Фрагмент фотопленки Лучше всего это получится в отдельном символе. Создайте муви-символ «edges», создание анимационный клип в нем выполните фигуру наподобие изображенной на рис. 3.Чтобы достичь эффекта пленки, необходимо вспомнить о способности Flash-объектов, находящихся на одном слое, «откусывать» части нижних фигур того же слоя. Значит, вы рисуете полоску, создание анимационный клип потом с помощью слегка закругленных прямоугольников «вырезаете» в ней дырки. Для ускорения «технологического процесса» сделайте на основе небольшого дырчатого кусочка полоску, которая будет по длине значительно больше, чем ширина сцены. Затем скопируйте ее создание анимационный клип вставьте под пленку.Создайте анимацию движения Motion Tween для двух полосок. На первом кадре выровняйте полоски по левому краю сцены, создание анимационный клип на втором — по правому, создание анимационный клип тогда края пленки будут двигаться вместе с кадрами.Кнопки управления пленкойРис. 4. Кнопки Stop создание анимационный клип Play для управления пленкой А сейчас позаботимся о контроле над движением фотопленки. В том же символе «plenka» создайте пару кнопок: одну — чтобы останавливать пробег мини-фото, вторую — для запуска их с того места, где они остановились. Хорошо было бы, если бы они выглядели, как стилизованные кнопки, стандартно используемые в плеерах (рис. 4).Как делаются кнопки, вы уже прекрасно знаете, поэтому рассмотрим скрипты, необходимые для наполнения их функциональностью:on (release) { stop(); } — для остановки клипа; on (release) {play(); } — для дальнейшего его проигрывания.Примечание. Так как в данный момент мы находимся в символе «plenka», то скрипты станут действовать лишь в рамках этого конкретного символа. И даже когда его поместят на сцену, команды stop() создание анимационный клип play() будут касаться только происходящего на фотопленке, не затрагивая анимацию главной сцены.Фотографию не заказывали?Теперь нам нужно не забыть о том, чтобы сделать ссылку с каждой маленькой фотографии на фрейм, где содержится ее большой оригинал. Как вы понимаете, все мини-фото также придется преобразовывать в символы типа Button (Кнопка). Сейчас мы рассмотрим всю процедуру для одной кнопки, создание анимационный клип с остальными вы быстро разберетесь сами.Итак, выделите маленькое фото Балаклавы (см. рис. 3) создание анимационный клип нажмите , чтобы преобразовать изображение в муви-клип «b_bala». Войдите в кнопку создание анимационный клип сразу же конвертируйте растровый рисунок в символ «g_bala» типа Graphic (Графика), чтобы сделать доступными для изображения опции эффекта Color (Цвет). Настройте вид рисунка для различных состояний мыши следующим образом:Up (Вверх) — если мышь находится вне кнопки, то фото мы сделаем немного затененным, установив параметр Brightness (Яркость) равным 45% в меню Color (Цвет), располагающемся на панели Properties (Свойства). Over (Над) — когда курсор мыши наведен на кнопку, то рисунок принимает свой обычный вид создание анимационный клип эффекты не используются, но рядом с фото появляется краткая поясняющая подпись — «Балаклава». Down (Вниз) — щелчком левой кнопки мыши осветлим кнопку с помощью эффекта Brightness (Яркость) меню Color (Цвет), установив яркость равной 50%.С внешним видом кнопки мы разобрались, осталось определиться с ее работоспособностью. Перейдем на заданный фрейм главного клипа. Вся трудность состоит в том, что сейчас мы далеко от основной сцены. В нашей символьной «матрешке» содержится муви-символ «plenka», создание анимационный клип в нем муви-символ «gra1», включающий группу из трех кнопок-изображений. Как же не запутать ни себя, ни программу и определить действие для основной сцены клипа? Сделать это поможет следующий скрипт, который пропишите для кнопки «b_bala»:on (release) {_root.gotoAndStop(1);}Немного поясню данную команду. В скобках указан номер кадра на основной сцене клипа, где размещается большое изображение выбранной картинки — фото Балаклавы. Обратите, пожалуйста, особое внимание на фрагмент скрипта _root, который означает, что вы применяете так называемую абсолютную адресацию создание анимационный клип ссылаетесь на корневой клип сцены. Если бы такого фрагмента не было, то Flash, используя по умолчанию относительную адресацию, поcчитал бы, что это действие касается текущего символа, создание анимационный клип перешел бы на первый кадр символа «plenka».Протестируйте клип создание анимационный клип проверьте работоспособность созданных кнопок.Рассветы-закаты в древней БалаклавеКогда пленка готова, можно подумать о наполнении анимацией самих слайдов. На этом уроке мы рассмотрим всего один прием для растровой графики на примере фотографии Балаклавы, создание анимационный клип продолжим изучение растровых эффектов в следующей статье.Вернитесь на основную сцену клипа создание анимационный клип создайте на базе фото Балаклавы муви-символ «m_bala».Первый прием, который мы рассмотрим, позволяет, используя всего одну пейзажную фотографию, создать законченный клип со сменой времени суток. Закаты создание анимационный клип рассветы... Кажется, нет ничего более прекрасного, на что с такой готовностью мы смотрели бы, за исключением воды, огня создание анимационный клип работы другого человека . Создадим же такой закат, который можно будет видеть в любое время суток.В новом символе слой с растровым рисунком назовите «фото». Кое-какие эффекты мы можем реализовать непосредственно для растровой картинки, но этого недостаточно. Поэтому потом воспользуемся дополнительными слоями, на которых расцветим рассветы с закатами.Прежде чем анимировать растровый рисунок, необходимо убедиться в том, что мы имеем дело с символом типа Graphic (Графика), помогающим при разработке движения.Примечание. В принципе анимация может производиться и с непреобразованным рисунком, но тогда вы столкнетесь с неожиданными «глюками». Поэтому мой вам совет: если вы работаете с растровой картинкой, т.е. если она не просто находится на сцене, создание анимационный клип вы с нею что-то совершаете, то не поленитесь создать для растрового изображения отдельный символ Graphic (Графика). Тогда корректность работы вам обеспечена.Чтобы не плодить лишние символы, перетяните из библиотеки на сцену готовый «g_bala» создание анимационный клип растяните его. Вот теперь с символом можете делать все, что вам заблагорассудится, благо Flash сумеет отсечь неблагоразумные действия . Наша работа с рисунком будет довольно скромной — Motion Tween (Анимация движения) в соответствии с рис. 5 (слой «фото»).Рис. 5. Панель Timeline (Монтажный стол) символа «m_bala» Дайте вставить слово, или Работа с комментариямиСамое главное — правильно организовать процесс, чтобы не запутаться в сменах времени суток. Поэтому я советую пользоваться комментариями.Рис. 6. Установка Label (Метка) на панели Properties (Свойства) Вы не заметили ничего необычного на Timeline (Монтажный стол) клипа, представленного на рис. 5? Там присутствуют новые элементы — пиктограммы решеток на ключевых кадрах создание анимационный клип поясняющий текст, расположенный прямо на фреймах. Появление пиктограммы создание анимационный клип текста на Timeline (Монтажный стол) связано с присвоением поясняющего имени Label (Метка) в поле Frame (Кадр) на панели Properties (Свойства), представленной на рис. 6.Метки могут быть разных типов в зависимости от выбранного пункта в раскрывающемся списке Label (Метка). Я использовала пункт Comment (Комментарий) как своего рода пометки, способные облегчить понимание того, что происходит на том или ином ключевом кадре.Примечание. Тип метки Comment (Комментарий) не экспортируется в формат swf и, следовательно, не сказывается на размере исполняемого файла. Это развязывает руки любителям эпистолярного жанра создание анимационный клип тем, кто привык завязывать узелки на память. Вы можете исписать рабочими пометками хоть каждый ключевой кадр клипа.Установите комментарии так, как показано на рис. 5 (слой «фото»), и приготовьтесь по полной программе использовать параметр Tint (Оттенок), который поможет расцветить фотографию. Установите значения Tint (Оттенок) для ключевых кадров, руководствуясь данными таблицы.Работа над сменой времени сутокНомер ключевого кадраНомер фреймаВремя сутокОттенок, цвета%11День—— 220Начало заката—— 335ЗакатКрасный30452СумеркиОхра30567НочьЧерный60684НочьЧерный757100РассветЧерный608115РассветКрасный329125УтроОранжевый3210135День— — Перейдем к воплощению закатного зарева. Создайте новый муви-символ «закат» над «фото». Воспользуйтесь инструментом Rectangle (Прямоугольник) и в символе нарисуйте прямоугольник размерами с базовую картинку. Расположите его точно поверх фотографии.Рис. 7. Панель Color Mixer (Цветовой микшер) для закатного зарева Теперь самая творческая часть работы — задание градиентной заливки типа Linear (Линейная) для имитации заката. Выделите объект создание анимационный клип на панели Color Mixer (Цветовой микшер) настройте градиентную заливку с использованием различных «закатных» цветов в соответствии с рис. 7. Обратите внимание на то, что когда один тюбик в заливке, центральный, имеет параметр Alpha = 100%, т.е. полностью непрозрачен, все остальные тюбики будут в разной степени прозрачны, создание анимационный клип нижний тюбик (на рис. 7 справа) — совершенно прозрачен.А сейчас мы должны состыковать движение заката с переменами, происходящими с Балаклавой в разное время суток. Реализуйте Motion Tween (Анимация движения), на первом создание анимационный клип последнем ключевых кадрах, не забыв задать параметр Alpha = 0, чтобы перемены во времени суток происходили плавно.Зачастую, показывая свои фотографии разным людям, приходится повторять одно создание анимационный клип то же, чтобы прокомментировать изображение. Так давайте же добавим поясняющую надпись к балаклавской фотографии. Для этого вставьте в правую часть галереи следующий текст.«Балаклава — «Бухта Символов» может похвастать более чем 2,5-тысячелетней историей. Еще гомеровскому герою Одиссею, приписывают посещение этих мест. На горе находятся остатки Генуэзской крепости. В городе проходит масса фестивалей создание анимационный клип конкурсов».Рис. 8. Вот такая она, фотогалерея Протестируйте клип (рис. 8) создание анимационный клип наслаждайтесь закатами в любое время суток! Готовый «закатный» слой можно использовать на любой другой пейзажной фотографии.Открою вам небольшой секрет — это еще далеко не все тайны рассветов и закатов. Вы заинтригованы? Во второй части урока узнаете, что имеется в виду.* * *Итак, в первой части урока мы с вами создали самое важное — каркас для фотогалереи, создание анимационный клип также познакомились с возможностями управления клипом с помощью Action Script. С растровыми фотографиями, несмотря на всю их на первый взгляд чужеродность для программы векторной анимации, можно сделать массу интересных эффектов. Им-то создание анимационный клип будет посвящена вторая часть урока. А тем, кто едет отдыхать, желаю приятно провести время, вернуться с массой впечатлений и фотодоказательств, создание анимационный клип потом оформить их в оригинальную Flash-галерею. Урок 7. Создание Flash-фотогалереи. Часть втораяМоре всегда совершенно. И небо всегда совершенно и тоже всегда меняется. Постоянно меняющееся совершенство. Р. БахЛето в разгаре. Одни уже вернулись с отдыха, создание анимационный клип другие еще только собираются в путь. Ну создание анимационный клип мы, как всегда, в заботах: этот урок завершает наше почти годовое путешествие по программе Macromedia Flash. Напоминаю, что в прошлый раз мы начали создавать фотогалерею на крымские мотивы. Давайте продолжим наше славное начинание и рассмотрим новые приемы создания эффектов для растровых фотографий, а также научимся правильно импортировать текст создание анимационный клип разрабатывать клип-предзагрузчик. Откройте проработанный на предыдущем уроке файл foto-gallery. fla или же воспользуйтесь файлом foto-gallery_old. fla с диска журнала.Мыс Фиолент — несколько замечаний об импорте текстаКак вы помните, мы остановились на том, что сделали каркас для галереи создание анимационный клип разобрались с первым из фото-слайдов — Балаклавой. Теперь дело за оставшимися. На слое «фото» главной сцены клипа находится набор ключевых фреймов с изображениями галереи, которые мы будем последовательно преобразовывать в муви-символы создание анимационный клип наполнять анимацией.На очереди фрейм, содержащий фотографию мыса Фиолент (рис. 1, а). Преобразуйте ее в муви-символ «m_fiolent» создание анимационный клип вставьте следующее пояснение:Рис. 1. Работа над сменой времени суток. Настройка параметров Advanced Effect (Дополнительный эффект) Мыс Фиолент, что под Севастополем, — исключительно красивое место, богатое волнующими легендами. Согласно одной из них, здесь находился храм богини Артемиды, где жрицей была Ифигения, дочь легендарного покорителя Трои, царя Агамемнона. Случались кровавые жертвы — местное население, дикие тавры, славились своей свирепостью.Приведу некоторые рекомендации, помогающие эффективно работать с импортированным текстом. Чтобы оградить себя от лишних забот, связанных с форматированием текстовых блоков, помните о следующем порядке действий.Скопируйте в буфер обмена необходимый текст. Перейдите во Flash, выберите инструмент Text (Текст). Нарисуйте на сцене рамку той ширины, какой бы вы хотели видеть текстовый блок. Обратитесь к панели Properties (Свойства) создание анимационный клип настройте параметры текста (цвет, размер, начертание, выравнивание создание анимационный клип т.д.). Щелкните мышью в рамке создание анимационный клип нажмите комбинацию клавиш +V, что позволит вам вставить текст из буфера обмена. Перенесенный текст будет обладать всеми указанными ранее параметрами.В программах векторной графики принято называть такой текст параграфным (Paragraph text), создание анимационный клип предназначенный для создания небольших надписей создание анимационный клип заголовков — заглавным (Artistic text).Примечание. О том, что вы работаете с параграфным текстом, свидетельствует квадратик в верхней левой части рамки, создание анимационный клип в случае заглавного там будет кружок.С импортируемым текстом все понятно. Рассмотренным приемом вы будете пользоваться создание анимационный клип при создании всех остальных поясняющих надписей. Переходим непосредственно к изучению растровых эффектов.Дополнительно Advanced Effect. Flash вместо Photoshop?Да, на первый взгляд Flash предоставляет довольно скудные возможности для работы с растровой графикой. Если бы не одно «но», создание анимационный клип именно применение параметров Advanced Effect (Дополнительный эффект) эффекта Color (Цвет).Как известно, наши компьютеры работают с цветовой схемой RGB (Red, Green, Blue), содержащей в своей основе красный, зеленый и синий цветовые каналы. Вот их-то значениями создание анимационный клип нужно варьировать при создании эффектов. Но чтобы ситуация окончательно прояснилась, рассмотрим пример.Сейчас мы работаем с символом типа Graphic (Графика) фиолентовской фотографии. Выделите его, обратитесь к панели Properties (Свойства), откройте ниспадающий список эффекта Color (Цвет) создание анимационный клип выберите пункт Advanced Effect (Дополнительный эффект). Рядом с нажатым пунктом появится кнопка Settings (Настройки). Воспользуйтесь ею, чтобы попасть в диалоговое окно настройки эффекта (рис. 1).Теперь наступает самый важный момент редактирования. Для тех, кто никогда не работал в программах растровой графики типа Adobe Photoshop, будет не очень просто понять ход дальнейших действий. Так что будьте особенно внимательны. По умолчанию диалоговое окно Settings (Настройки) содержит параметры, приведенные в таблице. Значит, каждый цветовой канал представлен в одинаковой степени, т.е. каналы красного (Red), зеленого (Green) создание анимационный клип синего (Blue) цветов равны 100%. Кроме того, рядом со столбиком RGB находится столбик так называемых дополнительных или добавочных значений, изначально равных нулю.Диалоговое окно Settings • Advanced Effect (Настройки • Дополнительный эффект)Channel (Канал)ЗначениеДобавочное значениеRed (Красный)100%0Green (Зеленый)100%0Blue (Синий)100%0Alpha (Прозрачность)100%0Давайте теперь поэкспериментируем с изменением каналов создание анимационный клип разберемся с логикой их работы. Допустим, мы хотим избавиться от синего канала. Для этого вводим значение 0 для канала Blue. А чтобы уменьшить вдвое интенсивность красного канала, назначаем 50% в поле Red. В итоге диалоговое окно Advanced Effect (Дополнительный эффект) создание анимационный клип рисунок примут вид, представленный на рис. 1, b.Получилось? Тогда продолжим. Поупражняйтесь с различными настройками диалогового окна Advanced Effect (Дополнительный эффект), чтобы сменить на пейзажной фотографии время суток. Вас ждут удивительные открытия! Вот некоторые параметры (рис. 1, c, d).Теперь не надо импортировать во Flash несколько отредактированных в Photoshop растровых файлов, тем самым значительно увеличивая объем клипов. Ну не замечательно ли? А сколько разнообразных комбинаций, дающих интересные эффекты, еще можно перепробовать... Причем на основе всего одной растровой фотографии!Если звезды зажигают, значит, это кому-нибудь нужноТеперь давайте устроим на мысе Фиолент звездную ночь. Создадим муви-символ «star», в котором проработаем свечение одной звезды. Сначала нарисуем звезду. Воспользуйтесь инструментом Rectangle (Прямоугольник) создание анимационный клип создайте сильно вытянутый прямоугольник. Удалите его контуры создание анимационный клип настройте заливку типа Linear (Линейная). Заливка состоит из трех плашек белого цвета, но по краям они полностью прозрачны. Выделите луч создание анимационный клип нажмите +G , чтобы сгруппировать фигуру.Рис. 2. Звезда в небе На основе луча создадим звезду путем копирования в буфер обмена и последующей вставки на сцену трех копий фигуры. Пользуясь инструментом Free Transform (Свободная трансформация) создание анимационный клип Selection (Выделение), переверните создание анимационный клип состыкуйте лучи между собой, чтобы получить звезду так, как показано на рис. 2.Сгруппируйте всю полученную фигуру создание анимационный клип реализуйте анимацию движения Motion Tween в соответствии со слоем «звезда» на рис. 2. На первом ключевом кадре задайте на панели Properties (Свойства) параметр Rotate (Поворот) CW равным 2 times (разы). К третьему ключевому кадру значительно уменьшите изображение звезды.Теперь подготовим верхний слой «сияние», ответственный за свечение вокруг звезды. Воспользуйтесь инструментом Oval (Овал), нарисуйте окружность создание анимационный клип залейте ее градиентной заливкой так, чтобы края у фигуры были прозрачными.Создайте анимацию движения Motion Tween в соответствии со слоем «свечение» на рис. 2. На первом ключевом кадре окружность сильно уменьшена, на втором ее размеры соизмеримы со звездой, создание анимационный клип на третьем она становится полностью прозрачной (Alpha = 0). Эффект свечения также представлен на рис. 2.Звезда готова, но если вам нужно звездное небо, то возвращайтесь в символ «m_fiolent» создание анимационный клип перетаскивайте из библиотеки столько звезд, сколько можно увидеть в безлунную ясную ночь.Колонны Херсонеса в грозу. Световые эффектыПерейдем к следующей фотографии с изображением колонн Херсонеса. Выполним ту же процедуру, что проделали с прошлой фотографией, т.е. преобразуем в муви-символ «m_kolony» создание анимационный клип скопируем следующий текст:А это руины античного города Херсонес Таврический. Греки, римляне, византийцы, славяне — кого только тут не было. До недавнего времени изображение остатков христианской базилики красовалось на национальной валюте Украины. Сии места притягивают в любую погоду.Рис. 3. Настройка параметров Advanced Effect (Дополнительный эффект) для негатива фотографии Для хмурого неба Херсонеса в качестве анимационного эффекта у нас припасен дождь с грозой создание анимационный клип молниями. Давайте рассмотрим следующий прием с растровой фотографией, который состоит в создании негатива — засвеченной фотографии, как бывает во время грозы. Достигнем этого с помощью полной инверсии цветов. Настройте диалоговое окно Advanced Effect (Дополнительный эффект) в соответствии с рис. 3.Вы полностью убираете каналы, установив значения, близкие –100, и придаете им добавочные значения, близкие +255.Рис. 4. Дождь создание анимационный клип молния Создайте анимацию движения Motion Tween, обеспечивающую переход от негатива фотографии к обычной цветовой схеме создание анимационный клип снова к инверсии. Чтобы вернуться к начальному изображению, на втором ключевом кадре панели Properties (Свойства) в значении Color (Цвет) выберите пункт None (Нет). При этом на промежуточном этапе анимации на какой-то миг изображение полностью окрасится в однородный серый цвет (рис. 4).Дождь создание анимационный клип молнии. Добавляем ливеньПоработаем над ливнем. Создайте новый муви-символ «rain». С помощью инструмента Line (Линия) нарисуйте под углом несколько параллельных линий, имитирующих струи дождя.Теперь реализуйте анимацию Motion Tween (Анимация движения). На первом ключевом кадре переместите заготовку дождя в верхний правый угол сцены создание анимационный клип сделайте параметр Alpha равным 80%. На втором ключевом кадре передвиньте дождевые струи в нижнюю часть сцены и расположите примерно по центру. Используя инструмент Free Transform (Свободная трансформация), немного растяните их.Вернитесь к символу «m_kolony» создание анимационный клип перетяните несколько экземпляров «rain» из библиотеки на сцену. Размещайте их в различных координатах на разных слоях так, чтобы дождь шел по возможности сплошной стеной.На новом слое создайте несколько отдельных ключевых кадров, в которых прорисуйте молнии (рис. 4, слой «молния»). Постарайтесь, чтобы молнии появлялись в те моменты, когда фотография засвечивается.Колокол. Изменение резкостиРис. 5. Сигнальный колокол Херсонеса Займемся следующим экземпляром фотоколлекции. Перейдите на фрейм с фотографией колокола (рис. 5) создание анимационный клип преобразуйте ее в муви-символ «m_bala». Зайдите в него создание анимационный клип впишите в правой части следующий поясняющий текст:Этому сигнальному колоколу, что находится среди руин Херсонесского заповедника, пришлось много путешествовать. Он был отлит из трофейных пушек в Таганроге, висел на колокольне Владимирского собора Херсонеса, в Крымскую войну был захвачен создание анимационный клип увезен во Францию, отметился на Нотр-Дам де Пари, создание анимационный клип затем как подарок был возвращен к юбилею дома Романовых.Часто мы видим в фильмах расплывчатый контур какого-либо предмета, из которого постепенно возникает «нечто». Как плавно понизить или повысить резкость растрового рисунка во Flash? Здесь одними средствами Macromedia Flash не обойтись, придется привлечь редактор растровой графики. Применим программу Adobe Photoshop, самую удачную для работы с растровыми картинками.Рис. 6. Диалоговое окно Gaussian Blur (Размытие по Гауссу) Выполните следующую вспомогательную работу в Adobe Photoshop. Откройте этой программой файл kolokol.jpeg. Воспользуйтесь меню Filter (Фильтр), выберите один из подпунктов эффекта Blur (Размытие) — Gaussian Blur (Размытие по Гауссу), который поможет значительно снизить резкость фотографии. В появившемся диалоговом окне Gaussian Blur (Размытие по Гауссу) укажите радиус размытия равным 25 пикселам. Нажмите кнопку ОК (рис. 6).Сохраните «отфильтрованный» файл с теми же размерами, но под новым именем kolokol_blur.jpeg (такая фотография имеется на диске в каталоге урока). Теперь есть все необходимые материалы для работы в Macromedia Flash по плавному изменению резкости фотографии. Импортируйте в библиотеку Flash-клипа новый файл. Постепенное изменение резкости достигается следующим образом.Создайте два слоя. На верхний поместите «отфильтрованное» изображение, создание анимационный клип на нижний — исходное. Размеры обоих рисунков и их расположение должны быть идентичны. Верхнее фото преобразуйте в символ типа Graphic (Графика) и реализуйте для него движение типа Motion Tween (Анимация движения) с тремя ключевыми кадрами. На втором ключевом кадре параметр прозрачности Alpha должен быть равен нулю, т.е. верхняя размытая картинка должна стать полностью невидимой создание анимационный клип открыть расположенное под ней изображение с хорошей резкостью. На первом создание анимационный клип последнем ключевых кадрах параметр Alpha соответствует 100%, тем самым полностью закрывая размещенный на нижнем слое рисунок.Вот такой незамысловатый фокус, но он дает очень хорошие результаты. Единственное, на что следует обращать внимание, так это на размер импортируемых файлов. Оптимизировать размер изображения опять же поможет программа Adobe Photoshop.Массандровский дворец. Маска на растреПереходим к следующему объекту фотогалереи — Массандровскому дворцу. Преобразуйте рисунок в муви-клип «m_mas» создание анимационный клип поместите этот поясняющий текст справа от фотографии.Рис. 7. Готовим контуры дворца Массандровский Дворец в Большой Ялте был скорее охотничьим домиком, чем резиденцией императора Александра III. В советские времена здесь не прочь был отдохнуть другой «император» Всея Руси, Иосиф Сталин, отчего в народе так создание анимационный клип осталось второе название дворца — «Сталинская дача».Рассмотрим еще один интересный прием, способный оживить любую фотографию, подгружаемую во Flash. Эффект предполагает наличие на сцене изображения, по которому пробегает блестящий луч, прорисовывая его отдельные элементы, что достигается путем использования незаменимых масок.Сделайте фотографию самым нижним слоем, создание анимационный клип над ней создайте пару слоев типа Mask (Маска) создание анимационный клип Masked (Маскировано) по аналогии с рис. 7. Самый верхний слой Mask (Маска) назовите kontur создание анимационный клип с помощью инструмента Brush (Кисть) в вольной манере обведите элементы дворца: окна, крышу, башни, углы стен. Неважно, какой цвет вы выберете, все равно мы применим этот рисунок как маску. Также не нужно обводить каждую деталь, достаточно подготовить контур только отдельных элементов (рис. 7). На слое типа Masked (Маскировано) инструментом Rectangle (Прямоугольник) нарисуйте фигуру шириной не меньше, чем фотография, и высотой около 85 пикселов. Воспользуйтесь панелью Color Mixer (Цветовой микшер) создание анимационный клип определите пеструю заливку типа Linear (Радиальная). Расположите ее под углом с помощью инструмента Fill Transform (Трансформация заливки), представленного на нижней части рис. 7. Реализуйте анимацию движения для прямоугольника следующим образом: на первом ключевом кадре прямоугольник находится под рисунком, создание анимационный клип ко второму устанавливается над ним создание анимационный клип сжимается. Проиграйте клип, нажав +, создание анимационный клип протестируйте эффект тени, пробегающей по контурам фотографии.Разработка клипа-предзагрузчика preloaderВсе хорошо, вот только объем клипа вышел великоват — 135 Кбайт. Конечно, ничего страшного здесь нет, если вы собираетесь показывать его не в сетевом режиме, но что получится, если вы захотите представить свое творение в Интернете? Сами можете подсчитать, сколько времени он будет загружаться при средней скорости 56 кбит/c. И что же в это время прикажете делать посетителю сайта — набраться терпения? Нет, зрителя надо любить создание анимационный клип развлекать каждую секунду, чтобы он не заскучал создание анимационный клип не отправился на сайт конкурентов. В таком случае не обойтись без предзагрузчика, короткого создание анимационный клип легкого клипа, который появляется перед глазами зрителей с сообщением о том, что идет загрузка, создание анимационный клип остается до тех пор, пока основной клип не закончит загружаться из Сети.Итак, на первый кадр клипа мы поместим муви-символ с предзагрузчиком, а действие основного клипа будет начинаться со второго кадра. И не забудьте поменять ссылки с фотопленки на фреймы с фотографиями.Рис. 8. Настройка параметров динамического текста на панели Properties (Свойства) Создайте новый муви-символ «intro». Анимационную часть я оставляю на ваше усмотрение, создание анимационный клип мы займемся разработкой динамического отображения процента загруженного клипа с помощью динамического текста (dynamic text). Воспользуйтесь инструментом Text (Текст) создание анимационный клип создайте небольшую рамку, в которой потом автоматически будет отображаться процент загрузки клипа. Писать там текст вам не следует. Обратитесь к панели Properties (Свойства) создание анимационный клип выберите из раскрывающегося списка Text Type (Тип текста) пункт Dynamic Text (Динамический текст) вместо стоящего по умолчанию пункта Static Text (Статический текст), как показано на рис. 8. Примечание. Маркер на текстовом блоке при этом действии переместился из правого верхнего угла в правый нижний, сигнализируя тем самым, что вы имеете дело с текстом типа dynamic text. С помощью той же панели Properties (Свойства) вы можете настроить внешний вид (цвет, гарнитуру, начертание, размер) будущего текста. Определим имя переменной Variable в поле Var. Впишите в данное поле слово text для обозначения переменной (рис. 8). Теперь все готово для упражнений с командами ActionScript. Откройте панель Actions (Действия) создание анимационный клип приготовьтесь вникать в скриптовую последовательность.Итак, приступим к кодированию. Выйдите из символа «preloader» на основную сцену клипа, выделите указанный выше муви-символ, находящийся на первом ключевом кадре, создание анимационный клип напишите следующий скрипт на панели Actions (Действия).onClipEvent (load) // Проводим инициализацию команд в момент появления муви-клипа на Timeline (Монтажный стол).{all = _root.getBytesTotal();} // Присваиваем переменной all значение всех байтов клипа.onClipEvent (enterFrame) // Производим инициализацию команд в каждом воспроизводимом кадре клипа. Теперь команды, связанные с событием OnEnterFrame, будут обрабатываться после любых команд, написанных в кадрах.{preloaded = _root.getBytesLoaded(); // Присваиваем переменной preloaded значение загруженных байтов клипа.percent = preloaded/all*100; // Просчитываем процент загрузки клипа.text = Math.floor(percent); // Присваиваем объявленной нами переменной динамического текста text значение процента загрузки. Метод Math.floor возвращает наибольшее целое число, которое меньше или равно числу или выражению, заданному аргументом percent.text = text+“%“ // Просим добавить к текущему только что просчитанному значению знак процента для более наглядного отображения.if(preload >= all){_root.gotoAndStop(2)} // Когда все будет загружено, действие перейдет ко второму кадру клипа и продолжится.}Нажмите + создание анимационный клип перейдите в режим тестирования клипа. Чтобы имитировать условия загрузки в Интернете, воспользуйтесь пунктом меню View (Вид) | Simulate Download (Моделировать загрузку) или же еще раз нажмите комбинацию клавиш +.* * *Вот создание анимационный клип все. На этом мы заканчиваем не только создание фотогалереи, но создание анимационный клип Flash-уроки. Думаю, в дальнейшем вы не оставите свои анимационные упражнения, ведь это так увлекательно, не правда ли? Желаю вам успехов! Приезжайте отдыхать в Крым.Засим остаюсь искренне ваша,Ксения Слепченко.Ксения Слепченко — менеджер создание анимационный клип дизайнер Координационного центра программы ECDL на Украине (Европейский стандарт компьютерной грамотности), e-mail: ksenijas@yandex.ru.Copyright © 1992-2005 Издательство "Открытые системы" разделы холодильник уценка дефектоскопия сварной швов man гильза программа шифрование измеритель сопротивление флагшток внутренний использование дмитрий шумок лакокраска маршрутизатор карл гиря нужный билет o2 optix прайс сушильный машина помыть потолок isdn видеоконференция knauf гипсокартон белый кофе измеритель сопротивление оформление свадеб облицовка панель кс-4361а кофе дорога лечение щитовидный железа mobil gargoyle сглаз проект электропроводка роль ставень asus p505 cad купить карбид кальций легранд купить нипель вагонка половой доска напыление ппу нестандартный коробка интеллектуальный электросчетчик пластиковый пакет электрокардиограф квн сенсорный экран устройство наркомания поглощение радиоволна купить ножовка концентрирование кислорода велюкс бахила полиэтиленовый изделие слойка московский флаг электротельфер tognana фарфор профессиональный фарфор подгонный компенсатор danfoss одевание бахила растворитель 646 помыть потолок трехфазный электросчетчик карл гиря рак щитовидный железа штангенциркуль dunlup 205 55 r16 ваза 21102 бегущий строка купить ломтерезку измеритель сопротивление время кострома авиатакси красный площадь мавзолей длинный нард этикетировочные машина хоссе карерас билет мусорный пакет thuraya задний зеркало сканер штрихкодов 5004.10 (крышка) облицовка bella italia искать фотограф кулер газонокосилка elmos подбор эмаль ubiquam создание анимационный клип