Бесплатные видео-уроки

Adobe Edge Animate

Создание графики, анимации и интерактивного контента для веб

  • бесплатно
  • перспективно
  • быстро
  • доступно

Создание слайд-шоу в Edge Animate

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

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

Подобные слайд-шоу широко используются на веб-сайтах для представления товаров и услуг. Например, если Вы продаете автомобили, то, наверняка, захотите показать все доступные цвета модели и т.д.

На сегодняшнем уроке мы создадим такое автоматизированное слайд-шоу. Каждая картинка будет показываться в течении определенного промежутка времени, а затем исчезнет со сцены.

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

 

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

Приступим:

1 Импортируйте файлы картинок в новый проект, созданный в Adobe Edge Animate. Используйте главное меню программы File → Import.

Edge Animate автоматически помещает картинки на сцену и создает папку images, в которой будет хранить копии этих файлов. В панели Library (Библиотека) Вы должны увидеть три картинки в подразделе Assets.

Готовя материал для этого урока, я подобрал три пейзажа. Если Вы хотите их использовать в качестве учебного материала, то можете их скачать: trees.jpg, rocks.jpg и house.jpg. Как уже объяснялось ранее, импортируйте их в Edge Animate простым перетаскиванием из Windows Explorer прямо на сцену.

2 В панели Elements выделите сцену (stage), а затем установите ее размеры и цвет фона. Параметр Overflow сделайте hidden. Размеры сцены сделайте равными фотографиям (600 х 400 px). Так как Overflow у нас hidden, то картинки будут исчезать, уходя со сцены.

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

4 Нажмите клавишу Shift и выделите все картинки в панели Elements. Затем в панели Properties кликните на кнопке Add Keyframe рядом с X и Y. Для каждой картинки будут созданы ключевые кадры на шкале времени в 0:00. Это их стартовая позиция.

5 Проверьте, чтобы все картинки были выделены, а свойство Opacity (Непрозрачность) в панели Properties равнялось 100%. После этого кликните на кнопке Add Keyframe for Opacity (маленький ромбик), чтобы добавить ключевой кадр для непрозрачности. В результате у всех картинок непрозрачность будет равна 100% до того момента пока они не начнут покидать сцену.

6 Перетащите головку плейера в значение 0:02. Кликните мышью где-нибудь вне сцены, чтобы снять выделение с картинок. Теперь выделите только первую картинку и снова добавьте ключевые кадры для X,Y и Opacity. Это определит ее положение и непрозрачность для первых 2-х секунд слайд-шоу. Далее фотографии начнут двигаться и изменять свой облик. Убедитесь, что шпилька (pin) и головка плейера перемещаются в новое положение вместе. Если нужно, то нажмите клавишу P, чтобы включить шпильку.

7 Убедитесь, что Auto-Keyframe Mode (Режим автоматического создания ключевых кадров) и Auto-Transition Mode (Режим автоматического создания переходов) включены.

Если кнопка Auto-Keyframe Mode нажата, то Edge Animate будет автоматически создавать ключевые кадры для свойств X и Y когда Вы перемещаете фотографию. Если эта кнопка не нажата, то Вы можете создавать ключевые кадры вручную, кликая на кнопке Add Keyframe рядом со свойствами X и Y в панели Properties.

8 Перетащите головку плейера на 0:03, а затем переместите верхний слайд таким образом, чтобы он покинул сцену. Вы можете перемещать картинки в любом направлении. Движение картинок вправо напоминает то, как это было в старых диапроекторах. Нажатие клавиши Shift поможет Вам перемещать картинку строго по вертикалmной или горизонтальной осям.

9 После того как картинка окажется вне сцены, измените непрозрачность до 20%. Это создаст интересный эффект исчезновения для каждой картинки во время ухода их со сцены.

10 Переместите головку плейера еще на 2 секунды вправо. Именно этот промежуток времени зритель будет созерцать следующую по счету фотографию.

11 Выделите верхнюю картинку в стеке и в панели Properties кликните на кнопке Add Keyframe для X, Y и Opacity. Таким образом Вы создадите ключевые кадры для положения картинки на сцене по осям X и Y, а также непрозрачности. По аналогии с предыдущим слайдом, она будет двигаться и исчезать сразу после этой точки (0:05) на шкале времени.

12 Перетащите головку плейера еще на 1 секунду вдоль шкалы времени (0:06), а выделенную фотографию переместите вправо, чтобы она покинула сцену и установите для нее непрозрачность равной 20%. На этом работа со второй картинкой будет закончена.

13 Для каждой из оставшихся картинок Вашего слайд-шоу повторите действия предыдущих двух шагов.

14 После того как последний слайд исчезнет со сцены покажите зрителям какое-нибудь сообщение. Например, Спасибо за внимание!. Оно тоже может мягко появляться на сцене, а затем исчезать, фиксируя момент окончания слайд-шоу.

Теперь Вы можете сделать предварительный просмотр Вашего слайд-шоу непосредственно в программе Edge Animate или в Вашем рабочем браузере. К этому моменту, возможно, у Вас уже появились какие-то идеи относительно того, как Вы можете улучшить или изменить это слайд-шоу.

Например, можно увеличить время просмотра каждой фотографии и ее ухода со сцены. Если Вы хотите создать имитацию эффекта в стиле 3D, то используйте свойства Skew и Size. В последующих уроках Вы научитесь создавать управляющие кнопки, с помощью которых Ваши зрители смогут сами контролировать появление картинок в слайд-шоу.


Комментарии.
 Boris
Замечательные уроки, спасибо, Валерий! Возможно ли снабдить слайдшоу комментариями (титрами)? Можно ли их вставить в проект из xml-файла, в котором указаны время и текст каждого титра, а не грузить текст в каждый кадр вручную?
Отправлено 17.06.2013 22:01:26
Добавьте комментарий
bbcode:
[br]  [b][/b]  [i][/i]  [u][/u]
[img]link image[/img]
[color=colour][/color]
[url]link[/url]
[url=link]title[/url]
 
* Введите проверочный код
* Поля с красной звездочкой необходимо заполнить