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 и гордимся собой ;)

Исходник: 

Похожие записи

Комментарии

Аватар пользователя Aloran

молодец!!! Так держать!!!

Аватар пользователя originalg

Кстати, а почему этого урока нет на главной?

Аватар пользователя Fly

Как нету? Есть...

1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте - https://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум

Аватар пользователя vitkuz

Отлично!

good

Новичков, и тех, кто не силен в математике хочу обратить внимание вот на это:

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
})

Запишите в блокнотик. Слишком часто нужно изменять, что-то от положения мыши.

Аватар пользователя originalg

Цитата: Fly

Как нету? Есть...

Нет правда. И сейчас нет. В уроках есть, а на главной нет. И страницу обновлял сто раз

Хм, в Firefox действительно есть, а в опере почему то не показывает

Аватар пользователя TeT

Здорово!!!!!!!!!!!!!!!

Keyboard not found. Press any key to continue

Аватар пользователя Aloran

originalg,
Не знаю я из под оперы заходил. Было все)

Аватар пользователя rb

Браво , так держать ,здорово!!!

Аватар пользователя Fly

У еня в опере тоже всё показывается :)))

1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте - https://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум

Аватар пользователя rb

А можно больше картинок сделать?

Аватар пользователя originalg

rb,
Конечно можно:)

Аватар пользователя rb

А как это можно сделать?

Аватар пользователя Raziel

а как это относится к пейпервижну?

Аватар пользователя vitkuz

Raziel,
никак, ошибка в названии :-)

Аватар пользователя slans

Простите, но урок просто ужасен! Я может и новичек, и кое-чего не понимаю, но объяснено ну просто никак! Мне так понравилась галерея, а в итоге целый час промучился, а результата ноль!

Аватар пользователя Fly
Цитата: slans

Простите, но урок просто ужасен! Я может и новичек, и кое-чего не понимаю, но объяснено ну просто никак! Мне так понравилась галерея, а в итоге целый час промучился, а результата ноль!

А в чём проблема? :)

1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте - https://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум

Аватар пользователя slans

Не понятно, как делать "мувики" (те, которые содержат в себе картинки), я так понял, там надо делать папки, но папки не имеют отношения к мувиклипам, дальше, как подключить as-файл. Я смотрел исходники, но хочется-то сделать самому, а не поменять картинки и параметры из исходника.

Аватар пользователя Fly

Папки для удобства созданы. В библиотеке можно создавать папки, внизу специальная иконка есть.
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, у нас для этого есть форум

Аватар пользователя slans

Посмотрите пожалуйста, я вроде все верно переделал, и все равно никакого эфекта(

https://ifolder.ru/13918800

Аватар пользователя originalg

slans,
Дело в том, что вы назвали свой файл ActionScript photogal.as, но название класса в нём осталось PhotoPanels, и из-за этого ваш класс не выполнялся, к тому же в исходнике не был указан базовый класс.

Аватар пользователя slans

originalg, 

я переименовал все файлы, но все равно никакого эфекта, попробовал клипу container присвоить базовый класс PhotoPanels - тоже ничего=(

Аватар пользователя slans

В общем, я разобрался сам, благодаря сегодняшнему уроку. Там дело в том, что самому документу надо было присвоить класс PhotoPanels. В этом уроке об этом вообще ни слова.

Аватар пользователя OlaN

to slans:
думаю, вам помогут эти видеоуроки (про классы в AS3): /flashlearn/flashvideotutorials/445-flash-zhurnal-9-klassy-v
-actionscript-30.html

Аватар пользователя ВасЁк

подскажите можна ли в cs3 включить опцию 3d позицию, а то у меня только х у а z нету, у меня вообще все менб не такие подскажите п-ж-та 

Аватар пользователя originalg

ВасЁк,
В CS3 нет встроенного 3D

Аватар пользователя Aelita_2006

Галерея супер!!!Мне очень понравилась, но вот столкнулась с проблемой...эта галерея простатривается только в 10плеере.можно ли как то сделать так чтоб просматривать такую галерею смогли и дюди у которых стоит 9 8 флешплеер?

Аватар пользователя Fly

Просто людям надо этот флеш плеер обновлять

1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте - https://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум

Аватар пользователя Avesha

Доброго времени суток!

Хороший урок. Спасибо вам больше за него.

Не подскажете, что это за ошибка такая у меня с контейнером

Сцена 1   1046:Type was not found or was not a compile-time constant: container. Не пойму что у меня не так с компиляцией, как пишет Output...

Аватар пользователя originalg

Avesha,
Скиньте исходник.

Аватар пользователя SOTO

Нихрена не понятно

smiles

Нихрена не получилось!
Есть какойнибуть видеоурок по етой штуке?

Страницы