************************************************************

суббота, 29 августа 2015 г.

Перелистывание страниц (Листалка), Adobe Flash, AS3. Урок первый.Jorjorych


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

Вертикальная с полным разворотом

Горизонтальная с полным разворотом

Пусть Ваша фантазия напридумает форму и сюжет, а Вы, с помощью АФ, воплотите в флеш-открытку!
Расскажу как делать подобные (и бесподобные) работы с помощью библиотеки PageFlip.
Базовый урок тут!
1.Скачать по ссылке внизу поста "Вложение". Распаковать. Важны папка "lex" и файл  "Doc". Папку "Исходники" переместите на рабочий стол. Она Вам нужна, если будете экспериментировать с теми файлами, что использованы в уроке. Но в дальнейшем будете создавать свои картинки или копировать с интернета.  Материалы могут находиться где-либо на компе или копировать и вставлять в АФ прямо с сайтов ...
Пусть разархивированная папка (без папки "Исходники") сохранится на Вашем компе для дальнейшего использования. Или храните архив, в любое время сможете открыть и получить библиотеку классов PageFlip.
2.Создайте папку на рабочем столе (или где привыкли работать). Назовите как-нибудь, "Листалка", например.
3.Копировать из папки "Вложение" в папку "Листалка":  папку"lex" и файл "Doc". Тут пока всё.
4.Запустить программу АФ. Создать документ AS3.
5.Во вкладке "Свойства" дать название класса - =Doc
Безимени-1
6.Сохранить документ в папку "Листалка": Файл - Сохранить как... название без разницы.
Безимени-2
В папке имеем:
VFL.RU - ваш фотохостинг
Только теперь начинаем создавать листалку. Для этого:
7.Создать фрагмент ролика: Вставка - Новый символ - Фрагмент ролика. Назовите Content (не обязательно). Обязательно вставить галочки для экспорта в Action Script ,  а в графе "Идентификатор" дать название класса  ContentMc (важно)!
Безимени-3
После нажатия "ОК" попадаем в редакцию нашего ролика. 
В документе "Doc" уже заданы размеры нашей листалки. Об этом поговорим позже. Просто я Вам сообщаю, что размер закрытой листалки 200/300, соответственно в открытом виде = 400/300. Находится по центру монтажного кадра размером 550/400. Поэтому изображения, используемые нами имеют соответствующие размеры: для обложек - =200/300, для разворота - =400/300. Можно использовать картинки иных размеров, пропорциональных заданным. 
8.Импортировать в первый кадр изображение для обложки: Файл - импорт - импортировать в рабочую область. Выбрать, импортировать и при выделённой картинке, задать в "Свойства"  значения координат  X и Y = "0".
Безимени-4
9.На временной шкале вставить пустой ключевой кадр. Импортировать на нём картинку размером 400/300, выделить (кликать на ней инструментом "Стрелка"), в панели "Свойства" задать координаты Х=-200, Y=0.
Безимени-5
10.Аналогично пункту 9: добавляем пустой ключевой кадр, импортируем следующую картинку 400/300, координаты Х=-200, Y=0. (можете создавать аналогично п.п. 9/10 больше разворотов, но пока остановимся на этом, а на следующем кадре вставим вторую обложку)
11.Вставить пустой ключевой кадр (четвёртый), импортировать на нём картинку для последней обложки. А координаты для ней: X=-200, Y=0.
VFL.RU - ваш фотохостинг
Тестируем: Ctrl+Enter. Работает? Вот и замечательно! 
Давайте ещё немного поработаем над нашей флешкой: добавим один ролик (гиф цветок 3Д) и фон под листалку.
12.Создать фрагмент ролика для гифки "Цветок,3Д": Вставка - Новый символ - фрагмент ролика. Тут же импортируем гифку из папки с исходниками к уроку. Выделите и удалите последние два кадра, они бракованы!
Безимени-6
13.Заходим в библиотеку, выделяем символ видеоролика "Content", кликаем на нём дважды - открывается его редактор. выделяем четвёртый кадр и переносим на сцену созданный видеоролик "Цветок". помещаете где и как считаете, чуточку увеличим инструментом "Преобразование", удерживая Shift ... 
Безимени-7 Безимени-8
14.Добавляем общий фон флешки: переходим на монтажный кадр 1 и прямо импортируем картинку из нашей папки "Исходники" или другую, задаём размеры флешки (550/400), (фоновая картинка к уроку имеет размеры 600/316), выравниваем по центру.
VFL.RU - ваш фотохостинг
Безимени-9
Тестируйте. 

Нажмите комбинацию клавиш Ctrl+S - так сохранится в папке проекта FLA файл. Вы его сможете открыть вновь в АФ, отредактировать. А в следующем уроке продолжим с ним работать! Там же в папке создан автоматом и SWF файл - можете любоваться сотворённым!
Озвучивание, вставка ссылок , редакция документа "Doc" (для изменения размеров - конфигурации флешки) продолжим в следующем уроке (или уроках).
Творческого Вам вдохновения! До встречи!
Продолжение: Второй урок.
                                                      Третий урок. 
                                                       Четвёртый урок                                                           
 Вложение: 4156415_vlozhenie.rar
Серия сообщений "МОИ УРОКИ. ":
Часть 1 - Создание флеш-альбома "Листалка" в программе FLIP Flash Album Deluxe 2
Часть 2 - Наложение футажей в фотошопе на временной шкале.2-й урок
...
Часть 30 - C Днём рождения , Саша!
Часть 31 - Ссылки на музыку для флеш работ: откуда и как получить?
Часть 32 - Перелистывание страниц (Листалка), Adobe Flash, AS3. Урок первый.
Часть 33 - Перелистывание страниц (Листалка), Adobe Flash, AS3. Урок второй.
Часть 34 - Перелистывание страниц (Листалка), Adobe Flash, AS3. Урок третий.
...
Часть 40 - Кто в доме хозяин? (С уроком!).
Часть 41 - Вот такое слайд шоу!
Часть 42 - FLIP Flash Album Deluxe 2.2 Portable.
Рубрики: Уроки/Adobe Flash

Комментариев нет:

Отправить комментарий