• Авторизация


Перелистывание страниц (Листалка), Adobe Flash, AS3. Урок первый. 11-07-2015 14:15 к комментариям - к полной версии - понравилось!

Это цитата сообщения Jorjorych Оригинальное сообщение

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

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

Вертикальная, постраничная


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


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


Пусть Ваша фантазия напридумает форму и сюжет, а Вы, с помощью АФ, воплотите в флеш-открытку!

Расскажу как делать подобные (и бесподобные) работы с помощью библиотеки 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" (для изменения размеров - конфигурации флешки) продолжим в следующем уроке (или уроках).

Творческого Вам вдохновения! До встречи!

Продолжение: Второй урок.

                                                      Третий урок. 

                                                       Четвёртый урок                                                           

Серия сообщений "МОИ УРОКИ. ":
Часть 1 - Создание флеш-альбома "Листалка" в программе FLIP Flash Album Deluxe 2
Часть 2 - Наложение футажей в фотошопе на временной шкале.2-й урок
...
Часть 30 - C Днём рождения , Саша!
Часть 31 - Ссылки на музыку для флеш работ: откуда и как получить?
Часть 32 - Перелистывание страниц (Листалка), Adobe Flash, AS3. Урок первый.
Часть 33 - Перелистывание страниц (Листалка), Adobe Flash, AS3. Урок второй.
Часть 34 - Перелистывание страниц (Листалка), Adobe Flash, AS3. Урок третий.
Часть 35 - Перелистывание страниц (Листалка), Adobe Flash, AS3. Урок четвёртый.
Часть 36 - Урок создания телика "Cruto_TV". АФ, AS2.
Часть 37 - Урок: Делаем регулятор громкости во флеш, AS3.
вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Перелистывание страниц (Листалка), Adobe Flash, AS3. Урок первый. | Vairais - откройся миру- и мир откроется перед тобой !!! | Лента друзей Vairais / Полная версия Добавить в друзья Страницы: раньше»