Создание Flash-презентации товара для Интернет-магазина из 3D-модели

В уроке пользователь Nikoly покажет, каким образом можно создать Flash-презентацию товара для интернет-магазинов, которую можно просматривать, вращая рендер 3D-модели по двум осям — горизонтально и вертикально. Для выполнения этого урока вам нужно скачать файл с набором визуализированных изображений модели Lenovo_images.rar [1,22 Mb] (cкачиваний: 20). Либо можно выполнить урок Создание модели Apple iPad в 3ds Max с текстурированием, по окончанию которого вам нужно будет отрендерить 32 кадра анимации по горизонтальной оси, и потом по вертикальной оси также 32 кадра (кадры #0 являются первыми). Кадры #32 не нужны, ведь они же являются и первыми в рендерах по обеим осям вращения, поэтому рендерить их не нужно. Думаю, с самой визуализацией вы разберетесь самостоятельно, если нет, то пишите в коментах и я с удовольствием объясню.

 
В итоге мы должны получить вот такую вещь (попробуйте понажимать кнопки, посмотрите, как всё работает):

 

Скачанный файл разархивируйте. В нём имеется две папки с отрендеренными изображениями вращения модели по горизонтали вертикали, а также папка с цветными и черно-белыми изображениями кнопок для смены осей вращения и для самого вращения.

Для создания данной презентации использовалась программа Macromedia Flash MX без русификатора, и для начала я покажу интерфейс программы и элементы, которые в нем будут использоваться (см. скриншот ниже).

  1. Окно слоев.
  2. Кнопка для создания слоев.
  3. Окно кадров.
  4. Сцена (Графическая часть презентаций).
  5. Окно Action script (здесь будут писаться скрипты).
  6. Параметры сцены (здесь задаются размеры страницы), размеры можно задать сразу 800х600, ведь разрешение визуализированных изображений именно такое.
  7. Меню File — многие действия будут выполняться через него.
  8. Import… служит для импортирования изображений.
  9. Экспорт видео.

Создание Flash-презентации товара для Интернет-магазина из 3D-модели 

Прежде чем начать, изменим размер документа с 550х400 на 800х600, нажав указанную на скриншоте кнопку. 

Создание Flash-презентации товара для Интернет-магазина из 3D-модели

Итак, начнем. Для начала переименуем слой Layer 1 в Кнопки. Это можно сделать, дважды кликнув по названию слоя (см. скриншот ниже).   

 

Следующим создайте новый слой, нажав на кнопку Insert Layer, и переименуйте, назвав в Горизонталь. После этого первый кадр слоя перетащите на третий. Сейчас он светится белым, и это означает, что он пуст. Не снимая выделения с кадра, зайдите в File и нажмите Import,  перейдите в папку с рендерами планшета по горизонтальной оси и выберите первое изображение. Нажмите кнопку Открыть. Появится окошко с вопросом, хотите ли вы загрузить все изображения, на который нужно ответить утвердительно. Что должно получится, см. ниже. 

Создание Flash-презентации товара для Интернет-магазина из 3D-модели 

После создайте новый слой и переименуйте его с Layer 3 в Вертикаль. 34-й кадр перетащите на 50-й, можно и поближе, но для написания скриптов мне так было удобнее. После щёлкните по 50-у кадру и аналогичным образом, что и ранее, зайдите в File и нажмите Import. Укажите папку Рендер вертикаль из скачанного архива и выберите первое изображение. Нажмите Открыть после появится сообщение, в котором вас спросят, хотите ли вы загрузить все изображения. Нажимайте Да. Что должно получиться, показано на скриншоте ниже. 

Создание Flash-презентации товара для Интернет-магазина из 3D-модели 

Ну, здесь при написании урока  меня случилась неприятность: когда  все изображения добавились, они почему то легли криво (в смысле, координаты сцены не совпали с координатами изображения). Исправляется это легко, но нудновато))) Пример см. на скрин ниже. Нажимаем на кадр, затем на само изображение (а не на сцену), и внизу появятся координаты по X и Y. Измените их на 0. Такие же действия повторите со всеми кадрами, которые криво загрузились. 

Создание Flash-презентации товара для Интернет-магазина из 3D-модели 

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


Приступим к добавлению непосредственно самих кнопок. Щёлкните по первому кадру и импортируйте изображения кнопок, которые находятся в папке Кнопки способом, как мы это уже делали ранее. Кнопок достаточно каждой по одной штуке: их лучше просто скопировать и развернуть, где требуется. Операция копирования производится при помощи Ctrl+C, вставка — Ctrl+V, а чтобы развернуть кнопку, щёлкните правой кнопкой мыши и выберите из списка Rotate and Skew

После того, как все картинки для кнопок вы разместили (пример см. скрин ниже), необходимо их сделать активными, то есть преобразовать собственно в сами кнопки. Сделать это достаточно просто: щёлкните по изображению кнопки левой кнопкой мыши и нажмите на клавиатуре F8, послего чего из появившегося списка выберите Button. 

Создание Flash-презентации товара для Интернет-магазина из 3D-модели 

В первом кадре из шести изображений кнопками вы должны сделать только три; первая — черно-белая кнопка для изменения осей вращения, и две для самого вращения модели. См. ниже. 

 

В данный момент нужно сделать так, чтобы черно-белая кнопка, обозначающая ось Вертикаль, при наведении на неё курсора становилась цветной. Сделать это несложно. После того, как изображение кнопки Вертикаль стало преобразовано в тип Button, кликните по нему два раза левой кнопкой мыши, после чего всплывёт окно настроек кнопки и вместо большого количества кадров станет четыре. Первый кадр занят,  три нет. Нужен второй кадр, нажмите на него и создайте ключ клавишей F6. После импортируйте цветную кнопку (изображение) на тоже самое место, где находится черно-белое изображение кнопки. Затем щёлкните два раза по пустому месту, чтобы выйти из настроек кнопки. 

Создание Flash-презентации товара для Интернет-магазина из 3D-модели 

В слое Кнопки в кадре 35 нажмите F6 и две синие кнопки удалите. Вместо них по тем же координатам добавьте такие же две синих кнопки (см. скрин ниже). Затем в слое Кнопки перейдите в кадр #48 нажмите клавишу F6. В нём удалите все имеющиеся изображения кнопок, но перед тем, как это сделать, запишите где-нибудь координаты кнопок (это можно сделать следующим образом: нажимаете на изображение любой кнопки и смотрите  в левый нижний угол программы, где написано Properties, и ещё немножко ниже показываются их координаты по X и Y — запомните координаты всех кнопок, а лучше запишите, так будет проще). 

 

После удаления всех кнопок добавьте все необходимые изображения так же, как это делали в первом кадре, только наоборот: вместо синих кнопок добавьте серые, а вместо серых — синие, и не забудьте серую кнопку самого изменения вращения оси сделать тоже кнопкой, зайдя в её настройки и добавив во второй её кадр цветной вариант. Что должно получиться, см. ниже. Важно также не забыть преобразовать два изображения синих кнопок в фактические кнопки. 

Создание Flash-презентации товара для Интернет-магазина из 3D-модели 

После того как вы все сделали, в слое Кнопки перейдите на 81-й кадр и создайте ключ (F6). В этом же кадре удалите две синие кнопки и на те же координаты импортируйте два изображения синих кнопок. См скрин ниже.   

 

На данном этапе графическая часть составления Flash-презентации завершена и можно приступить к написанию команд.

 

Первым делом создайте новый слой и подпишите его как СКРИПТ1. И чуть не забыл: основная работа теперь будет производиться в окне Actionsframe. Также в нём не забудьте исправить Normal Mode на Expert Mode, иначе скрипты прописываться не будут. Слой СКРИПТ1 перетащите так, чтобы он находился над слоем Горизонталь. После выделите первый кадр слоя СКРИПТ1 и в окне Actionsframe пропишите: 

gotoAndPlay(3);
 

Эта команда означает, что при воспроизведении готовой презентации произойдёт переход с первого кадра на третий.


Создание Flash-презентации товара для Интернет-магазина из 3D-модели 

Создайте ключ (F6) в кадре #3 слоя СКРИПТ1 и пропишите в третьем же кадре в окне Actionsframe команду: 

stop ()
 

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

В кадре #35 слоя СКРИПТ1 создайте ключ (F6) и пропишите команду: 

gotoAndPlay(3);
 

Сделано это с той целью, чтобы после проигрывания последнего кадра первого вращения Горизонталь воспроизведение её пошло по второму кругу (а недостающий 34-й кадр у нас является первым).

Создайте ключ (F6) в кадре #48 слоя СКРИПТ1, и там же в окне Actionsframe введите команду: 

gotoAndPlay(50);
 

Создайте ключ (F6) в кадре #50 слоя СКРИПТ1, в окне Actionsframe напишите:

stop ()
 

Создайте ключ (F6) в кадре #81 слоя СКРИПТ1 и добавьте в окне Actionsframe команду: 

gotoAndPlay(50);
 

См. скриншот: 

Создание Flash-презентации товара для Интернет-магазина из 3D-модели 

Создайте слой СКРИПТ2 и перетащите его поверх слоя СКРИПТ1. Во втором кадре этого слоя создайте ключ (F6) и в этом же кадре в окне Actionsframe пропишите команду: 

gotoAndPlay(34);
 

Создание Flash-презентации товара для Интернет-магазина из 3D-модели 

После создайте ключ (F6) в кадре #34 и введите следующую команду: 

stop ()
 

Также создайте ключ (F6) в кадре #49 и пропишите туже самую команду: 

stop: ()

Теперь выберите кадр первого слоя Кнопки, выделите синюю (активную) кнопку, с помощью которой можно будет листать презентацию Вперёд, и пропишите в ней команду: 

on (press) {
	_root.gotoAndStop(_root._currentframe+1);
	;
	 }
 

Создание Flash-презентации товара для Интернет-магазина из 3D-модели 

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

on (press) {
	_root.gotoAndStop(_root._currentframe-1);
	;
	 }
 

В этом же слое Кнопки выделите кнопку для изменения оси оборота и впишите в неё команду: 

on (press) {
	gotoAndPlay(48);
	;
	 }
 

Расшифрую, что означает эта команда: при проигрывании готовой презентации в случае нажатия на кнопку изменения оси вращения мы попадаем на 48-ой кадр, где уже будем управлять вращением по вертикальной оси, а не по горизонтальной.   

Создание Flash-презентации товара для Интернет-магазина из 3D-модели 

После выделите кадр #48 слоя Кнопки и в двух активных кнопках пропишите следующее. Для пролистывания назад, то есть в верхней: 

on (press) {
	_root.gotoAndStop(_root._currentframe-1);
	;
	 }
 

Для листания вперёд, то есть в нижнюю: 

on (press) {
	_root.gotoAndStop(_root._currentframe+1);
	;
	 }
 

А для кнопки изменения оси вращения (серой в верхней) напишите команду: 

on (press) {gotoAndPlay(3);
;
}
   

Всё это показано на скриншоте ниже: 

Создание Flash-презентации товара для Интернет-магазина из 3D-модели

Создайте новый слой, перетащите его выше над слоем СКРИПТ2. Назовите его СКРИПТ3. В третьем кадре создайте ключ (F6) и в  окне Actionsframe напишите: 

_root.onEnterFrame=function()
{
if (Key.isDown(Key.RIGHT))
_root.gotoAndStop(_root._currentframe+1);
if (Key.isDown(Key.LEFT))
_root.gotoAndStop(_root._currentframe-1);
}
 

Суть команды в следующем: при проигрывании готовой презентации мы сможем управлять вращением рендера планшета не только кликая мышью, но и стрелками на клавиатуре. 

Создание Flash-презентации товара для Интернет-магазина из 3D-модели

В кадре #35  слоя СКРИПТ3 создайте ключ (F6), впишите в него команду:

gotoAndPlay(80);

Также в слое СКРИПТ3 в кадре #49 создайте ключ (F6) и впишите:

gotoAndPlay(80);

В этом же слое создайте ключ (F6) в кадре #50, добавив:

_root.onEnterFrame=function()
	{
	if (Key.isDown(Key.DOWN))
	_root.gotoAndStop(_root._currentframe+1);
	if (Key.isDown(Key.UP))
	_root.gotoAndStop(_root._currentframe-1);
	 }
 

Вот так это выглядит: 

Создание Flash-презентации товара для Интернет-магазина из 3D-модели 

Презентацию нужно сохранить в формате SWF. См. скрин ниже. 

Создание Flash-презентации товара для Интернет-магазина из 3D-модели 

После откройте сохраненную презентацию (файл в формате .Swf) с помощью браузеров Opera, Google Chrome, Mozilla firefox. В Internet Explorer не открылась)))) Ну это вроде и ожидаемо blush У кого-то может и откроется и с помощью него))) То, что должно получиться, можно скачать тут:Lenovo.swf [1,2 Mb] (cкачиваний: 48). Вот ещё и сама МАКСОВСКАЯ модель с настроенной визуализацией: Lenovo_Mat.rar [395,83 Kb] (cкачиваний: 13)

Если вас что-либо не получилось можете посмотреть мой исходный файл для Macromedia Lenovo.rar [1,19 Mb] (cкачиваний: 17), и по нему либо сделать заново, либо спросить у меня в комментариях, либо поискать ошибку самостоятельно) 

Всем удачи))) благодарю за внимание. И спасибо тем, кто дошел до конца урока) Молодцы, у кого все вышло. Ну и молодцы, кто попытался. Надеюсь, вам урок понравился и я его написал доступным языком, это первый урок который я пишу, поэтому у меня еще мало опыта в подобных делах)


Другие материалы:

Здесь с 2.11.2012
8 комментариев
Откуда: Москва
Репутация: 0

  

#1 добавил Verycoolbotan

14 июня 2013 16:55 | Комментариев: 8
Очень интересно. Попробуем на досуге.

--------------------

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.