Papervision3D - Создание 3D галереи в CS4
Content on this page requires a newer version of Adobe Flash Player.
Нам понадобится классы gs для создания анимации, вы их можете скачать здесь: https://blog.greensock.com/ либо взять из исходника.
Итак начнем.
Создаем документ флэш(AS3) и устанавливаем размер сцены на 650x400.
Нам понадобится 6 мувиков. У них будет следующая структура:
1) В мувике 2 слоя
2) На 1 слое находится наша картинка
3) На 2 слое находится отцентрированный мувик enlarge(у него alpha=0)
4) Все картинки находятся в своих папках
Теперь переносим все 6 картинок на сцену на сцену. Для каждой стороны пишем Instance Name: foto, foto2,...,foto6. Поставьте масштаб 25%
Ставим картинки более-менее ровно. Выделяем верхние 3 картинки и делаем следующее:
Выделяем нижние 3 картинки и делаем тоже самое:
Выделяем левые 2 картинки и делаем следующее:
Тоже самое делаем для средних двух и правых двух.
Выделяем верхние 3 картинки и делаем следующее:
Выделяем нижние 3 картинки и делаем тоже самое:
Выделяем все картинки и нажимаем F8
Выделяем полученный символ и вводим следующие параметры
Теперь нажимаем несколько раз следующие кнопки:
Теперь контейнер отцентрирован. Называем этот слой scene и блокируем его.
Добавляем новый слой и переносим его под слой scene, называем его bg
Делаем слой scene невидимым и рисуем на слое bg прямоугольник, указываем для него параметры
Делаем из него мувик(F8)
Два раза кликаем по полученному символу и открываем окно Color(Shift+F9)
Указываем следующие параметры цвета:
Теперь создаем файл ActionScript и сохраняем его в той же папке, где и fla файл
В этом файле пишем следующий код
package { //Импортруем нужные классы import flash.display.MovieClip; import flash.events.*; import flash.filters.GlowFilter; import gs.*; import gs.easing.*; //Создаем наш класс public class PhotoPanels extends MovieClip { //Создаем мувик для того, чтобы знать, какая картинка увеличина var currentImage:MovieClip=null; //В видео уроке автора не было этого фильтра, но я подумал и решил что так быдет более красиво //Создаем Glow фильтр параметры:(цвет, прозрачность, размытие по X, размытие по Y var glowFilter:GlowFilter=new GlowFilter(0xFFFFFF,1,40,40); //Функция конструктор, которая выполнится первой public function PhotoPanels() { //Регистрируем событие смены кадра, чтобы обновить положение всего блока addEventListener(Event.ENTER_FRAME, loop); //Вызываем функцию, которая считает наши картинки setupClips(); } //Функция считывания картинок private function setupClips():void { //Узнаём количество картинок в контейнере var len:int=container.numChildren; //Создаем цикл чтобы считать картинки for(var i:int=0;i<len;i++) { //Создаем переменную картинки var mc:MovieClip=MovieClip(container.getChildAt(i)); //Делаем так, чтобы она была похожа на кнопку (курсор превращается в руку) mc.buttonMode=true; //Запоминаем место, где она находится mc.pos=[mc.x,mc.y]; //Регистрируем для картинки события клика, наведения мыши и ее убирания mc.addEventListener(MouseEvent.CLICK, onclickiiiii); mc.addEventListener(MouseEvent.ROLL_OVER, over); mc.addEventListener(MouseEvent.ROLL_OUT, out); } } //Функция, которая вызывается после клика на картинке private function onclickiiiii(e:MouseEvent):void { //Узнаем, какая картинка была нажата var mc:MovieClip=MovieClip(e.currentTarget); if(currentImage==null)//Если все картинки в нормальном положении { //Увеличиваем нажатую картинку scaleUp(mc); }else if(currentImage==mc)//Если кликнули по увеличенной картинке { //Уменьшаем картинку scaleDown(mc); }else{//Если есть увеличенная картинка, но кликнули по маленькой //Уменьшаем большую картинку //Указываем параметры TweenLite //(указываем для чего создана анимация, длительность(в сек), {список параметров} TweenLite.to(currentImage, 0.5, {scaleX:1,//Уменьшаем масштаб по X scaleY:1,//Уменьшаем масштаб по Y x:currentImage.pos[0],//Перемещаем в исходные координаты по X и Y y:currentImage.pos[1], onComplete:scaleUp,//После выполнения вызываем функцию увеличения onCompleteParams:[mc]//Передаем ей массив параметров }); //Говорим, что уже нет увеличенной картинки currentImage=null; } } //Функция увеличения картики, в качестве параметра получает мувик, который надо увеличить private function scaleUp(mc:MovieClip):void { //Указываем, что на сцене есть увеличенная картинка currentImage=mc; //Заново добавляем картинку, чтобы она была поверх всех, иначе она может оказаться сзади container.addChild(mc); //Делаем анимацию увеличения TweenLite.to(mc, 0.5, {scaleX:3,//Увеличиваем масштаб по X и Y scaleY:3, x:0, y:0 }); //Делаем анимацию убирания надписи "Увеличить" TweenLite.to(mc.enlarge, 0.5, {alpha:0}); //Убираем фильтр Glow mc.filters=[]; } //Функция уменьшения картинки, в качестве параметра получает мувик, который надо уменьшить private function scaleDown(mc:MovieClip):void { //Говорим, что уже нет увеличенной картинки currentImage=null; //Создаем анимацию уменьшения TweenLite.to(mc, 0.5, {scaleX:1,//Уменьшаем масштаб по X и Y scaleY:1, x:mc.pos[0],//Перемещаем в исходные координаты по X и Y y:mc.pos[1] }); } //Функция появления надписи "Увеличить" private function over(e:MouseEvent):void { //Узнаем над какой картинкой сейчас мышка var mc:MovieClip=MovieClip(e.currentTarget); //Если это не увеличенная картинка if(currentImage!=mc){ //Создаем анимацию появления надписи "Увеличить" TweenLite.to(mc.enlarge, 0.5, {alpha:1}); //Добавляем Glow фильтр mc.filters=[glowFilter]; } } //Функция исчезания надписи "Увеличить" private function out(e:MouseEvent):void { //Узнаем с какой картинки сейчас "ушла" мышка var mc:MovieClip=MovieClip(e.currentTarget); //Создаем анимацию исчезания надписи "Увеличить" TweenLite.to(mc.enlarge, 0.5, {alpha:0}); //Убираем Glow фильтр mc.filters=[]; } //Функция обновления положения контейнера private function loop(e:Event):void { //Узнаем расстояние мышки от середины по X и Y var distX:Number=mouseX/stage.stageWidth-0.5; var distY:Number=mouseY/stage.stageHeight-0.5; //Создаем анимацию поворота контейнера TweenLite.to(container, 0.5,{rotationX:(-distY)*50,//Поворачиваем контейнер по оси X и Y rotationY:distX*50 }); } } }
Теперь нажимаем CTRL+ENTER и гордимся собой ;)
- 1348 просмотров
Комментарии
молодец!!! Так держать!!!
Кстати, а почему этого урока нет на главной?
Как нету? Есть...
1) Админ всегда прав
2) Если админ не прав, смотри пункт 1
Мы в контакте - https://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум
Отлично!
Новичков, и тех, кто не силен в математике хочу обратить внимание вот на это:
var distX:Number=mouseX/stage.stageWidth-0.5;
var distY:Number=mouseY/stage.stageHeight-0.5;
TweenLite.to(container, 0.5,{rotationX:(-distY)*50,rotationY:distX*50
})
Запишите в блокнотик. Слишком часто нужно изменять, что-то от положения мыши.
Как нету? Есть...
Нет правда. И сейчас нет. В уроках есть, а на главной нет. И страницу обновлял сто раз
Хм, в Firefox действительно есть, а в опере почему то не показывает
Здорово!!!!!!!!!!!!!!!
Keyboard not found. Press any key to continue
originalg,
Не знаю я из под оперы заходил. Было все)
Браво , так держать ,здорово!!!
У еня в опере тоже всё показывается :)))
1) Админ всегда прав
2) Если админ не прав, смотри пункт 1
Мы в контакте - https://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум
А можно больше картинок сделать?
rb,
Конечно можно:)
А как это можно сделать?
а как это относится к пейпервижну?
Raziel,
никак, ошибка в названии :-)
Простите, но урок просто ужасен! Я может и новичек, и кое-чего не понимаю, но объяснено ну просто никак! Мне так понравилась галерея, а в итоге целый час промучился, а результата ноль!
Простите, но урок просто ужасен! Я может и новичек, и кое-чего не понимаю, но объяснено ну просто никак! Мне так понравилась галерея, а в итоге целый час промучился, а результата ноль!
А в чём проблема? :)
1) Админ всегда прав
2) Если админ не прав, смотри пункт 1
Мы в контакте - https://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум
Не понятно, как делать "мувики" (те, которые содержат в себе картинки), я так понял, там надо делать папки, но папки не имеют отношения к мувиклипам, дальше, как подключить as-файл. Я смотрел исходники, но хочется-то сделать самому, а не поменять картинки и параметры из исходника.
Папки для удобства созданы. В библиотеке можно создавать папки, внизу специальная иконка есть.
as файлы подключаются с помощью этих команд:
import flash.display.MovieClip;
import flash.events.*;
import flash.filters.GlowFilter;
import gs.*;
import gs.easing.*;
1) Админ всегда прав
2) Если админ не прав, смотри пункт 1
Мы в контакте - https://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум
Посмотрите пожалуйста, я вроде все верно переделал, и все равно никакого эфекта(
https://ifolder.ru/13918800
slans,
Дело в том, что вы назвали свой файл ActionScript photogal.as, но название класса в нём осталось PhotoPanels, и из-за этого ваш класс не выполнялся, к тому же в исходнике не был указан базовый класс.
originalg,
я переименовал все файлы, но все равно никакого эфекта, попробовал клипу container присвоить базовый класс PhotoPanels - тоже ничего=(
В общем, я разобрался сам, благодаря сегодняшнему уроку. Там дело в том, что самому документу надо было присвоить класс PhotoPanels. В этом уроке об этом вообще ни слова.
to slans:
думаю, вам помогут эти видеоуроки (про классы в AS3): /flashlearn/flashvideotutorials/445-flash-zhurnal-9-klassy-v
-actionscript-30.html
подскажите можна ли в cs3 включить опцию 3d позицию, а то у меня только х у а z нету, у меня вообще все менб не такие подскажите п-ж-та
ВасЁк,
В CS3 нет встроенного 3D
Галерея супер!!!Мне очень понравилась, но вот столкнулась с проблемой...эта галерея простатривается только в 10плеере.можно ли как то сделать так чтоб просматривать такую галерею смогли и дюди у которых стоит 9 8 флешплеер?
Просто людям надо этот флеш плеер обновлять
1) Админ всегда прав
2) Если админ не прав, смотри пункт 1
Мы в контакте - https://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум
Доброго времени суток!
Хороший урок. Спасибо вам больше за него.
Не подскажете, что это за ошибка такая у меня с контейнером
Сцена 1 1046:Type was not found or was not a compile-time constant: container. Не пойму что у меня не так с компиляцией, как пишет Output...
Avesha,
Скиньте исходник.
Нихрена не понятно
Нихрена не получилось!
Есть какойнибуть видеоурок по етой штуке?
Страницы