Мир Flash MX на примерах

Урок 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 (Монтажный стол) основной сцены клипа

Первая часть работы будет сходна с началом выполнения задания по созданию презентации (см. «Мир ПК», №5/05). Вспомните, как мы вставляли свой ключевой кадр для каждого слайда. На отдельном слое «фото» создайте серию ключевых кадров и поместите на каждый из них по фотографии из библиотеки. На новом слое «обложка» нарисуйте фон и сделайте стильное обрамление галереи (рис. 1). Также позаботьтесь, чтобы кадры не пролетали за долю секунды, а терпеливо ожидали дальнейших действий — слой с командой stop (); обеспечит это.

Приготовьте отдельный слой «мини», на котором будут происходить движение маленьких фотографий, их выбор и переход на большие фото (рис. 1, нижняя часть). Монтажный стол клипа представлен на рис. 1 (верхняя часть).

Прокручивающаяся фотопленка

Когда подготовительная работа завершена, пора заняться самой прокручивающейся фотопленкой для реализации указанного выше эффекта. На слое «мини» создайте символ «plenka» типа Movie (Ролик).

Весь фокус состоит в том, что нужно обеспечить постоянное движение кадров с обязательным возвращением к первому. Чтобы использовать как можно меньше слоев и символов, а также сделать все побыстрее, предлагаю следующий прием.

1. С помощью инструмента Rectangle (Прямоугольник) в муви-символе «plenka» создайте саму подложку пленки в виде полоски в нижней части сцены, растянутой на всю ее ширину.
2. Поместите на два новых слоя все фотографии из библиотеки: на первый — три, на второй — две.
3. Инструментом Free Transformation (Свободная трансформация) значительно уменьшите их. Следите за тем, чтобы высота всех изображений была одинакова — не более 70 пикселов. Это можно проконтролировать и отрегулировать, применив панель Info (Информация).
4. С помощью панели Align (Выровнять) выровняйте фото по одной линии и установите равномерные промежутки между ними.
5. Для слоев, содержащих фотографии, реализуйте анимацию 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 (Оттенок) для ключевых кадров, руководствуясь данными таблицы.

Перейдем к воплощению закатного зарева. Создайте новый муви-символ «закат» над «фото». Воспользуйтесь инструментом Rectangle (Прямоугольник) и в символе нарисуйте прямоугольник размерами с базовую картинку. Расположите его точно поверх фотографии.

Рис. 7. Панель Color Mixer (Цветовой микшер) для закатного зарева

Теперь самая творческая часть работы — задание градиентной заливки типа Linear (Линейная) для имитации заката. Выделите объект и на панели Color Mixer (Цветовой микшер) настройте градиентную заливку с использованием различных «закатных» цветов в соответствии с рис. 7. Обратите внимание на то, что когда один тюбик в заливке, центральный, имеет параметр Alpha = 100%, т.е. полностью непрозрачен, все остальные тюбики будут в разной степени прозрачны, а нижний тюбик (на рис. 7 справа) — совершенно прозрачен.

А сейчас мы должны состыковать движение заката с переменами, происходящими с Балаклавой в разное время суток. Реализуйте Motion Tween (Анимация движения), на первом и последнем ключевых кадрах, не забыв задать параметр Alpha = 0, чтобы перемены во времени суток происходили плавно.

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

«Балаклава — «Бухта Символов» может похвастать более чем 2,5-тысячелетней историей. Еще гомеровскому герою Одиссею, приписывают посещение этих мест. На горе находятся остатки Генуэзской крепости. В городе проходит масса фестивалей и конкурсов».

Рис. 8. Вот такая она, фотогалерея

Протестируйте клип (рис. 8) и наслаждайтесь закатами в любое время суток! Готовый «закатный» слой можно использовать на любой другой пейзажной фотографии.

Открою вам небольшой секрет — это еще далеко не все тайны рассветов и закатов. Вы заинтригованы? Во второй части урока узнаете, что имеется в виду.

* * *

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

Ксения Слепченко — менеджер и дизайнер Координационного центра программы ECDL на Украине (Европейский стандарт компьютерной грамотности), e-mail: ksenijas@yandex.ru.