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


Флеш эффект движения картинок. Флеш галерея «Photo Stack Gallery». 23-11-2014 13:45 к комментариям - к полной версии - понравилось!


В этой Рождественской музыкальной флеш открытке использован эффект движения картинок "Photo Stack Gallery".



Ссылкой на урок поделилась Верочка BAT.

Сделать такой эффект достаточно просто.
Для этого создаём папку для нашего проекта и называем её, например "Gallery".
В эту папку поместите картинки, которые хотите разместить в галереи. Картинки должны быть приблизительно одинакового размера по ширине, высоте и расположению. Картинки также должны быть размером примерно 300 x 400 пикселей.
Картинок может быть сколько угодно.
Я взяла 4 картинки.
Теперь, внутри папки "Gallery" создайте папку непосредственно для флеш галереи. Назовите её например "gall" В эту папку мы должны поместить библиотеку greensock для AS3, которая потребуется для создания эффекта.
Если у вас этой библиотеки нет, то можете скачать её по ссылке.
greensock-as3.zip

Архив с библиотекой скачайте в папку проекта "Gallery". Распечатайте его. В распечатанной папке "greensock-as3" нас интересует папка "com". Поэтому откройте папку "greensock-as3" и скопируйте в ней папку "com". Скопированную папку "com" вставьте в папку флеш галереи "gall", которая у вас также создана в папке "Gallery".
Далее открываем программу Adobe Flash CS6 и создаём новый ActionScript 3.0 с параметрами как на картинке

[700x447]





Новый открывшейся ActionScript 3.0 сохраняем под именем gall 1 в папку с флеш галереей "gall", где теперь также находится папка "com".
Файл - Сохранить как.
Далее, не забывайте периодически сохранять изменения внесенные в ходе работы в файл gall 1.
Файл - Сохранить
После всех этих приготовлений начнём создание флеш галереи.

Загружаем в Библиотеку подготовленные ранее картинки для галереи.

Файл - Импорт - Импортировать в библиотеку

Открываем вкладку "Библиотека" и видим там загруженные картинки.

[330x466]

Переименуйте на Временной шкале "Слой 1" в "photo". Выше слоя "photo" создайте слой "script".

[673x319]

Выделите слой "photo" и из Библиотеки на Рабочий стол (Монтажный кадр 1) по очереди перетаскивайте загруженные картинки. Выделив размещенную на Рабочем поле картинку, конвертируйте каждую в фрагмент ролика с точкой регистрации в левом верхнем углу.

Модификация - Преобразовать в символ

[700x593]

[700x644]

Фрагментам роликов давайте имена Photo1, Photo2, Photo3, Photo4 и так далее...

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

Вот так теперь должен выглядеть Рабочий стол (Монтажный кадр 1) и Библиотека

[700x596]

Далее, берём инструмент "Стрелка" и обводим им из верхнего левого угла в правый нижний угол всю стопку с картинками, тем самым выделив все Фрагменты роликов.

[638x700]

Сделанное выделение конвертируйте в Фрагмент ролика с точкой регистрации в левом верхнем углу и параметрами как на скрине

[698x678]

Не снимая выделения с вновь созданного Фрагмента ролика Gallery, в панели "Свойства" даём ему имя
gallery

[700x612]

Перейдём на слой "script" и откроем вкладку "Действия". В блокнот вставляем следующий скрипт


code:


import com.greensock.*;
import com.greensock.easing.*;

var timer:Timer = new Timer(4000);
timer.addEventListener(TimerEvent.TIMER,showNext);
timer.start();

var frontPhoto:MovieClip;

function showNext(e:TimerEvent):void{
frontPhoto = MovieClip(gallery.getChildAt(gallery.numChildren-1));
TweenLite.to(frontPhoto, .8,{x:600,y:-200,rotation:25,ease:Quart.easeIn,onComplete:moveBack});
}

function moveBack():void{
gallery.setChildIndex(frontPhoto,0)
TweenLite.to(frontPhoto, 1,{x:Math.random()*80 -40 , y:Math.random()*40 -20 ,rotation:0});
}





[700x560]

Тестируем ролик
Ctrl+Enter

Если всё устраивает, то экспортируем ролик в флеш файл

Файл - Экспорт - Экспортировать ролик.








вверх^ к полной версии понравилось! в evernote
Комментарии (91): вперёд» последняя»
ВАТ 23-11-2014-13:56 удалить
Мариночка, спасибо большое! Профи и есть профи! Цитирую с благодарностью. Буду разбираться. Посмотрю почему у меня не получилось. Я очень рада! Как ты быстро урок написала! Супер!
MissKcu 23-11-2014-13:57 удалить
здорово....как найду время рискну попробовать сделать....
Мариша, опять что-то новенькое и интересное! Спасибо, дорогая! Ты так все понятно расписываешь, что остается только проглотить...))))
Franzuzhenka 23-11-2014-14:00 удалить
Мариночка, потрясающе!! С благодарностью цитирую!
ВАТ 23-11-2014-14:06 удалить
Ответ на комментарий ВАТ # Мариночка, я положила в папку с проектом отдельно com. и отдельно greensock-as3 и в эту же папку все картинки. Может быть из-за этого у меня и не пошло? Не делала папку в папку, у меня всё лежало в одной папке по отдельности..
таила 23-11-2014-14:10 удалить
Спасибо Марина! Чудесная работа! Отличного настроения!
novprospekt 23-11-2014-14:11 удалить
Ответ на комментарий ВАТ # Видишь, в скрипте четко указывается папка com
import com.greensock.*;
поэтому надо чтобы эта папка была вместе с файлом fla
novprospekt 23-11-2014-14:12 удалить
Ответ на комментарий Лариса_Гурьянова # Ларис, урок лёгкий. Так, что бери на вооружение. Эффект очень хорошо смотрится в открытках.
ВАТ 23-11-2014-14:16 удалить
Ответ на комментарий novprospekt # У меня там и файл фла был. Короче всё переделаю по уроку.
novprospekt 23-11-2014-14:20 удалить
Ответ на комментарий MissKcu # Рискни Ксюш. Урок легкий совсем.
novprospekt 23-11-2014-14:20 удалить
Ответ на комментарий Franzuzhenka # Спасибо Катюша.
novprospekt 23-11-2014-14:25 удалить
Ответ на комментарий таила # Пожалуйста. Рада, что понравилось.
Марина, спасибо за урок. Он расписан замечательно, остается только попробовать сделать. Здоровья тебе! Отличного настроения.
wellax 23-11-2014-14:32 удалить
Спасибо, Марина! Цитирую с огромным удовольствием, будет теперь чем заняться!
koreckolga 23-11-2014-14:37 удалить
Мариночка, приветик!
Ну как же интересно и красиво! Спасибо, солнышко, не могла пройти мимо, взяла себе!
Lana-Lanochka 23-11-2014-14:47 удалить
Спасибо огромное за прекрасный урок!!!
novprospekt 23-11-2014-15:24 удалить
Ответ на комментарий Татьяна_Волкова_Литвинова # Танюш, делай обязательно. Урок лёгкий.
novprospekt 23-11-2014-15:25 удалить
Ответ на комментарий wellax # Хороший эффект и делается легко. Очень для открыточек подходит.
novprospekt 23-11-2014-15:26 удалить
Ответ на комментарий koreckolga # Пожалуйста Оленька.
novprospekt 23-11-2014-15:26 удалить
Ответ на комментарий Lana-Lanochka # Пожалуйста. Эффект очень интересный и делается легко.
alina1980 23-11-2014-16:04 удалить
Здорово получается, спасибо Мариночка!!!
Сулия 23-11-2014-16:35 удалить
Здорово как, Большое спасибо!
спасибо.преогромнейшее.прекрасный урок
LiSu 23-11-2014-16:49 удалить
Мариночка! Я в восторге, буду пробовать, огромнейшее спасибо! Восхищаюсь талантом флешера!
Ответ на комментарий novprospekt # Попытаюсь. Спасибо!
Мариночка,спасибо за урок,цитирую,попробую,спасибо еще раз огромное!
Jorjorych 23-11-2014-18:10 удалить
Спасибо! Всегда в ожидании Ваших уроков, расшифровок.
Никак не осилю это: http://demiart.ru/forum/index.php?showtopic=243918


Комментарии (91): вперёд» последняя» вверх^

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

Дневник Флеш эффект движения картинок. Флеш галерея «Photo Stack Gallery». | novprospekt - Дневник novprospekt | Лента друзей novprospekt / Полная версия Добавить в друзья Страницы: раньше»