Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Построение динамической галереи со слайдером
Macromedia Flash » Уроки 24 августа 2009 NazaRПечать


Начинаем
Шаг 1

Откройте новый Flash AS3 документ и новый файл ActionScript. Мы создадим сначала главный класс; назовем его "Gallery" и сохраним его как "Gallery.as". Ниже код, чтобы настроить первый класс:

CODE 

package  
{  
  public class Gallery  
  {  
  public function Gallery() : void  
  {  
  }  
  }  
}  

Во Flash мы можем сейчас установить его как базовый класс, введя имя в поле ввода в Publish settings документа. Вы можете попробовать сделать так - trace('hello world')" в функции Gallery, чтобы протестировать, как это работает.

Построение динамической галереи со слайдером
Шаг 2

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

Создайте два новых муви клипа: слайдер и ползунок для слайдера. Слайдер не нужно экпортировать для ActionScript, поскольку мы должны только применять некоторые функции к ползунку. Установите класс для ползунка - "Handle". Мы можем теперь создать новый класс с названием "Handle" и сохранить его в той же директории, Flash будет автоматически использовать этот класс для ползунка. Дайте им инстанс имена - "slider" и "theHandle".

Построение динамической галереи со слайдером
Шаг 3

Далее следует полный код для ползунка - handle , который я объясню по шагам. Его нужно сохранить, как "Handle.as" в том же самом каталоге, где ваш .fla. Таким способом, Flash будет выполнять код для экземпляра класса "Handle", который используется.

CODE 

package  
{  
  import flash.display.MovieClip;  
  import flash.events.MouseEvent;  
  import flash.events.Event;  
   
  public class Handle extends MovieClip  
  {  
  public var goToX : Number = x;  
  private var slider : MovieClip = MovieClip(parent).slider;  
  private var mousePos : Number = 0;  
   
  public function Handle() : void  
  {  
  buttonMode = true;  
  addEventListener( MouseEvent.MOUSE_DOWN, moveHandle );  
  stage.addEventListener( MouseEvent.MOUSE_UP, stopHandle );  
  }  
   
  private function moveHandle( _e : MouseEvent ) : void  
  {  
  mousePos = mouseX;  
  stage.addEventListener( MouseEvent.MOUSE_MOVE, followHandle );  
  }  
   
  private function stopHandle( _e : MouseEvent ) : void  
  {  
  stage.removeEventListener( MouseEvent.MOUSE_MOVE, followHandle );  
  }  
 
  private function followHandle( _e : MouseEvent ) : void  
  {  
  var newPos : Number = stage.mouseX - mousePos;  
  var orgX : Number = x;  
  if ( newPos < slider.x )  
  goToX = slider.x;  
  else if ( newPos > (slider.x + slider.width) - width )  
  goToX = (slider.x + slider.width) - width;  
  else  
  goToX = newPos;  
  x = goToX;  
  if( goToX != orgX ) dispatchEvent( new Event( "sliding", true ) );  
  }  
   
  }  
   
}  

В первых нескольких строках мы создаем несколько переменных, чтобы хранить данные, которые мы будем использовать в каждой функции в этом классе. Переменная slider - это ссылка на экземпляр с именем "slider" в родителе. Нам она нужна, чтобы правильно вычислить x положение, в которое должен быть перемещен ползунок-handle . В конструкторе мы устанавливаем "buttonMode" в true, чтобы при наведении на ползунок, курсор мыши менялся на ручку. Дополнительно, мы добавляем два обработчика событий, чтобы слушать события мыши.
CODE 

public class Handle extends MovieClip  
{  
  public var goToX : Number = x;  
  private var slider : MovieClip = MovieClip(parent).slider;  
  private var mousePos : Number = 0;  
   
  public function Handle() : void  
  {  
  buttonMode = true;  
  addEventListener( MouseEvent.MOUSE_DOWN, moveHandle );  
  stage.addEventListener( MouseEvent.MOUSE_UP, stopHandle );  
  }  

Как только случается событие мыши mouse down, добавляется дополнительный слушатель. Этот слушатель остается активным, пока перетаскивание не заканчивается, и вызывает функцию "followHandle". Он удаляется, как только происходит щелчок мыши.
CODE 

private function moveHandle( _e : MouseEvent ) : void  
{  
  mousePos = mouseX;  
  stage.addEventListener( MouseEvent.MOUSE_MOVE, followHandle );  
}  
 
private function stopHandle( _e : MouseEvent ) : void  
{  
  stage.removeEventListener( MouseEvent.MOUSE_MOVE, followHandle );  
}  

Эта последняя функция фактически перемещает ползунок. Переменная "newPos" хранит новое положение, в которое должен переместиться ползунок. Если, однако, это положение будет дальше, чем крайнее левое или правое положение слайдера, его положение будет установлено в максимально возможное значение. Если ползунок перемещен, мы создадим новое событие "sliding" , которое мы сможем позже использовать, чтобы перемещать изображения.

CODE 

private function followHandle( _e : MouseEvent ) : void  
{  
  var newPos : Number = stage.mouseX - mousePos;  
  var orgX : Number = x;  
  if ( newPos < slider.x )  
  goToX = slider.x;  
  else if ( newPos > (slider.x + slider.width) - width )  
  goToX = (slider.x + slider.width) - width;  
  else  
  goToX = newPos;  
  x = goToX;  
  if( goToX != orgX ) dispatchEvent( new Event( "sliding", true ) );  
}  

Шаг 4

Если все было сделано правильно, у Вас должен быть хороший функциональный слайдер как тот, который показан ниже. Добавьте динамическое текстовое поле под ним, которое будет хранить количество изображений. Дайте ему инстанс имя "countTxt", таким образом мы можем обратиться к нему позже в ActionScript. Поскольку сейчас нет ничего, чтобы показать, я заполнил его текстом "Loading", который будет виден в то время, когда загружается первая картинка.

Шаг 5

Далее мы создадим скрипт php backend. Flash не может прочитать содержимое локальной директории, поэтому мы должны передать информацию от php во Flash. Мы будем использовать XML, так как его легко создать с помощью php и еще легче снова прочитать в AS3.

Далее - это код php backend, сохраним его как "backend.php". Код в цикле просматривает директорию "img" и записывает строку XML для каждого файла в нем. Перед тем как записать, мы должны отфильтровать "." и ".." каталоги. Поскольку директория содержит только изображения, в дальнейшей проверке нет необходимости.

CODE 

<xml>  
<?php  
$od = opendir('img');  
while ( $filename = readdir($od) )  
  if( $filename != "." && $filename != ".." ) echo "<img>" . $filename . "</img>n";  
?>  
</xml>  

Например, мы получим это:
CODE 

<xml>  
  <img>file1.jpg</img>  
  <img>file2.jpg</img>  
  <img>file3.jpg</img>  
</xml>

Мои замечания
-----------------
Я хочу извиниться перед вами. Но поскольку я плохо владею php, я просто создала вручную файл xml - Gallery.xml и работала с ним напрямую. Но вы можете пройти этот урок с php.

Шаг 6

Прежде, чем мы загрузим это во Flash, давайте создадим класс, чтобы ссылаться на наши изображения индивидуально. Тем же способом, каким мы создали класс Handle, мы можем теперь создать класс Img. Начнем с создания муви клипа с таким размером, с каким вы хотите, чтобы ваши картинки были показаны. Дайте ему отступ в несколько пикселов и оставьте некоторое свободное место снизу для текста описания. Добавьте динамическое текстовое поле для описания и дайте ему инстанс имя "descr". Убедитесь в том, что вы установили точку регистрации мувика в центре, чтобы мы могли легко масштабировать его позже. Экспортируйте его для ActionScript как класс с именем "Img". Теперь удалите экземпляр со сцены, поскольку мы будем вызывать его непосредственно из библиотеки.

Построение динамической галереи со слайдером
Шаг 7

Далее, мы будем загружать информацию, которую возвратит php-файл в наш Flash-проект, используя ActionScript (или в моем случае информацию xml). Откройте класс Gallery снова. Следующий код добавит две функциональных возможности к нашему проекту. Прежде всего, здесь создается "imagesClip", пустой муви клип, в котором мы будем хранить фактические изображения позже. Используем "addChild", чтобы добавить муви клип на сцену. Все, что будет добавлено к imagesClip позже, также появится на сцене. Чтобы фактически загрузить xml данные, мы создаем "URLLoader". Этот класс может собрать результаты и выполнит функцию, когда появятся результаты.
CODE 

package  
{  
import flash.display.MovieClip;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.text.TextField;
import flash.events.*;
   
  public class Gallery extends MovieClip  
  {  
  private var backend : String = 'http://localhost/.../backend.php';  
   
  private var xmlLoader : URLLoader = new URLLoader;  
  private var xdata : XML;  
  public var images : Array = new Array();  
   
  public var imagesClip : MovieClip = new MovieClip;  
   
  public function Gallery() : void  
  {  
  imagesClip.y = 180;  
  addChild( imagesClip );  
 
  xmlLoader.load( new URLRequest( backend + "?" + new Date().valueOf() ) );  
  xmlLoader.addEventListener( Event.COMPLETE, loadImages );  
   
  }  
   
  private function loadImages( _e : Event ) : void  
  {  
  xdata = new XML( _e.target.data );  
  var i : Number = 0;  
  for each( var img:XML in xdata.img )  
  {  
  images[i] = new Img();  
  i++;  
  imagesClip.addChild( images[i] );  
  }  
  }  
  }  
}  

Здесь мы используем функцию load класса URLLoader. Чтобы предотвратить кэширование результатов, мы можем добавить просто дату в конце url. Слушатель событий проверяет, когда URLLoader завершится, и затем выполняет функцию loadImages.

CODE 

xmlLoader.load( new URLRequest( backend + "?" + new Date().valueOf() ) );  
xmlLoader.addEventListener( Event.COMPLETE, loadImages );  

Мои замечания
-------------------------------
Здесь я взяла и просто заменила строку с php другой строкой, взяла напрямую файл xml, созданный мною ранее (смотри мои замечания выше). 
CODE 

xmlLoader.load(new URLRequest("gallery.xml")); 

В следующей функции в цикле проходятся все экземпляры <img> в xml. Для каждого из них создается новый экземпляр класса Img. Затем мы добавляем его к imagesClip (это делается только для того, чтобы тестировать позже, поскольку мы хотим, чтобы были показаны активные изображения).

CODE 

private function loadImages( _e : Event ) : void  
{  
  xdata = new XML( _e.target.data );  
  var i : Number = 0;  
  for each( var img:XML in xdata.img )  
  {  
  images[i] = new Img();  
  i++;  
  imagesClip.addChild( images[i] );  
  }  
}  

Шаг 8

Чтобы дать нашим экземплярам Img больше функциональных возможностей, создайте класс Img и сохраните его как "Img.as". Таким же способом, каким мы загружали XML, мы можем загрузить само изображение и показать его в муви клипе Img. Загрузка не должна происходить в конструкторе, поскольку тогда все изображения попытались бы загрузиться в одно и то же время; мы создадим отдельную функцию для того, чтобы сделать это.
CODE 

public class Img extends MovieClip  
{  
  public var id : Number;  
  private var src : String;  
  private var imageLoader:Loader = new Loader();  
  private var main : Gallery;  
  private var orgWidth:Number = 0;  
  private var orgHeight:Number = 0;  

В конструкторе мы установим ссылку на главный класс Gallery, таким образом мы сможем позже получить доступ к элементам на сцене или public переменным и функциям главного класса. Строка "load" будет содержать путь к изображению, который возвратил php, мы будем хранить его в переменной, таким образом мы сможем получить доступ к нему позже.
CODE 

public function Img( load : String, m : Gallery ) : void  
{  
  orgWidth = width;  
  orgHeight = height;  
  main = m;  
  src = load;  
}  

Функция "loadImage" загружает картинку и после завершения загрузки вызывает функцию "displayImage".

CODE 

public function loadImage() : void  
{  
  imageLoader.load( new URLRequest( "img/" + src ) );  
  imageLoader.contentLoaderInfo.addEventListener( Event.COMPLETE, displayImage );  
}  

Функция displayImage проверяет массив изображений, который мы создали, и загружает следующее изображение. Она устанавливает smoothing в true для Loader (по умолчанию, smoothing установлено в false для динамически загруженных картинок). Как только вы начинаете масштабировать или вращать картинку, важно установить smoothing таким образом, чтобы изображение осталось такого же качества. Так как точка регистрациии муви клипа Img находится в центре, мы должны вычислить x и y положение, чтобы разместить само изображение. В моем примере я использовал папку с картинками с одной и той же шириной и высотой. Если ширина и высота загруженного изображения являются переменными, здесь можно разместить код для того, чтобы изменять эти размеры на лету. Прежде, чем добавить его как Child, мы установим текст описания, равным "src", который содержит имя изображения.
CODE 

private function displayImage( _e : Event ) : void  
{  
  if ( main.images[id + 1] != null && !main.images[id + 1].parent ) main.images[id + 1].loadImage();  
  Bitmap( imageLoader.content ).smoothing = true;  
  imageLoader.x = main.spaceBetween/2 - ( orgWidth /2 );  
  imageLoader.y = main.spaceBetween/2 - ( orgHeight /2 );  
  descr.text = src;  
  addChild( imageLoader );  
}  

Шаг 9

После всех изменений, которые мы сделали для класса Img, мы должны изменить способ, с помощью которого мы вызываем экземпляры в функции loadImages класса Gallery. Теперь мы должны передать два аргумента при вызове new Img().

Первый - путь картинки, которая должна быть загружена, его мы получаем из xml. Второй - ссылка на главный класс Gallery; мы можем использовать "this", что указывает на класс, с которым мы в настоящее время работаем. Вместо того, чтобы добавить изображения с помощью addChild в imagesClip- контейнер, мы создадим новую функцию "goTo". Эта функция будет решать, какие картинки поместить на экране. Аргументом, который мы должны передать, является id (идентификационный номер) изображения, это число - индекс в массиве картинок. Когда изображения будут загружены впервые, мы установим фокус на первом изображении, у которого id - ноль.

CODE 

private function loadImages( _e : Event ) : void  
{  
  xdata = new XML( _e.target.data );  
  var i : Number = 0;  
  for each( var img:XML in xdata.img )  
  {  
  images[i] = new Img( img, this );  
  images[i].x = 200 * i;  
  images[i].id = i;  
  i++;  
  }  
  goTo( 0 );  
}  

Шаг 10

Чтобы использовать функцию goTo, мы должны сначала объявить переменную "imagesToShow". Она отвечает за количество изображений, которые мы хотим загрузить сразу на экране. Чтобы определить направление, в котором пользователь скроллирует, мы просто проверим, какой id имеет изображение: более высокий или более низкий id, по сравнению с последним.

CODE 

private function goTo( imgId : Number ) : void  
{  
  var direction : Number;  
  if ( orgImgId != imgId )  
  {  
  if ( imgId > orgImgId ) direction = 1;  
  else direction = -1;  

Следующий цикл проходит все картинки на экране. Например: если мы установим imagesToShow в 5, здесь будет цикл от-2 до 2. Это означает, что, если мы передадим значение i в класс Img, мы можем определить, где на экране должна быть картинка размещена (-2 - крайняя слева, 0 - центр и 2 - крайняя справа). Поэтому, мы сможем масштабировать изображения, чем ближе к центру они рамещены, тем они будут больше.

Здесь включена дополнительная проверка, чтобы мы не активировали несуществующие изображения (она стоит для первой и последней картинки). Для каждой из активных картинок мы будем выполнять функцию "makeActive", которую мы создадим позже.

CODE 

for ( var i : Number = - Math.floor(imagesToShow/2); i <= Math.floor(imagesToShow/2); i++ )  
{  
  if( imgId + i < images.length && imgId + i >= 0 ) images[imgId + i].makeActive( i, direction );  


После размещения изображений, которые нам нужны на экране, мы проверяем, какие из них не должны больше там находиться, и получить их со сцены. Так как все изображения добавлены в imagesClip-контейнер, мы можем легко организовать цикл по всем деткам этого муви клипа. Если их id вне картинок, которые должны быть активными, мы выполняем "deActive".

CODE 

for( var j : Number = 0; j < imagesClip.numChildren; j++ )  
{  
  var tile : Img = imagesClip.getChildAt(j) as Img;  
  if ( tile.id < imgId - Math.floor(imagesToShow/2) || tile.id > imgId + Math.floor(imagesToShow/2) ) tile.deActive( direction );  
}  

Следующая строка изменяет текст динамического текстового поля, которое мы создали ранее. Так как все идентификационные номера изображений начинают свой счет с 0, мы добавляем + 1 к imgId, таким образом, чтобы первая картинка имела фактически номер 1 и т.д. Мы можем получить общее количество картинок, обращаясь к длине массива изображений.

CODE 

countTxt.text = imgId + 1 + "/" + images.length;  

Наконец, мы установим "orgImgId" таким образом, чтобы в следующий раз при выполнении функции можно было определить направление скроллинга.
CODE 

orgImgId = imgId;  

Шаг 11

Нам нужны теперь функции "makeActive" и "deActive" в классе Img. Они или добавляют изображение на сцену, или снимают его. Сейчас мы только добавим их и разместим их корректно. Позже мы добавим твины корректно.

Функция makeActive сначала проверяет, добавлена ли уже картинка в imagesClip. Если нет никакого найденного родителя, она добавляет себя в imagesClip-контейнер. Родитель - это imagesClip. Затем мы устанавливаем свойство visible в true. Когда происходит деактивация, мы устанавливаем его в false, это нормально, потому что мы хотим, чтобы наше изображение показалось снова, когда оно будет активным.

CODE 

public function makeActive( position : Number, direction : Number ) : void  
{  
  if ( parent == null )  
  {  
  main.imagesClip.addChild( this );  
  }  
  visible = true;  

Есть еще случай, когда само изображение еще не загрузилось. Чтобы проверить это, я проверяю количество детей, меньше ли оно 3-х. Это число может зависеть от количества шейпов или других мувиков в вашем Img. Если вы сомневаетесь в этом методе, более безопасно объявить булево значение в начале и устанавливать его в true в функции displayImage.

CODE 

if ( numChildren < 3 ) loadImage();  

Здесь нет никакой глубины в AS3, но как только мы начинаем масштабировать и вращать наши изображения, мы должны удостовериться, что изображение в центре находится поверх других. Поскольку мы передали положение как аргумент в функцию goTo, мы можем теперь использовать его, чтобы установить индекс изображения в imagesClip. Индекс детки можно сравнить с глубиной, но не должно быть никаких проблем для его изменения, поскольку другие муви клипы изменят индекс вверх или вниз. В этом шаге нет необходимости, если Вы не планируете накладывать изображения.

CODE 

parent.setChildIndex( this, ( parent.numChildren-1 ) - Math.abs( position ) );  

Наконец, мы определим положение картинки. Переменная "extra" используется здесь для того, чтобы узнать на каком расстоянии находится текущее изображение от центра. "DefaultWidth" и "spaceBetween" - это public переменные в главном классе Gallery, таким образом мы можем получить доступ к ним отовсюду. Так как у всех картинок в моем каталоге одна и та же ширина, я установил defaultWidth в 195 и spaceBetween в 20. Чтобы переместить картинку в новое положение, мы установим свойство x в найденное новое значение x.
CODE 

var extra : Number = Math.round( position * ( main.defaultWidth + main.spaceBetween ) );  
var newX : Number = Math.round( ( main.stageWidth / 2 ) ) + extra;  
x = newX;  

Шаг 12

Функция deActive является довольно-таки простой, она изменяет видимость на false. Направление direction уже установлено как аргумент, в нем мы будем нуждаться позже, чтобы узнать в каком направлении послать картинку, снимая ее со сцены.
CODE 

public function deActive( direction : Number ) : void  
{  
  visible = false;  
}  

Шаг 13

К этому времени, несколько первых картинок должны появиться на сцене. Есть только одна функциональная возможность, которая все еще отсутствует. Слайдер еще не связан с функцией goTo. Однако, так как мы уже организовали событие перетаскивания ползунка, не составляет трудности соединить их вместе.

Добавьте следующую строку в функцию конструктора Gallery. Этот обработчик события будет выполнять функцию slide каждый раз, когда событие "sliding" вызывается ползунком.
CODE 

theHandle.addEventListener( "sliding", slide );  

Все, что нам нужно, - это функция slide, чтобы вычислить, какое изображение нужно показать в центре в зависимости от того, где находится ползунок. В функции "slider" и "theHandle" - это инстанс имена, которые мы установили ранее для муви клипов на сцене. Чтобы узнать, какое изображение подходит, мы сначала определяем процент положения ползунка по отношению к длине слайдера. Тогда, умножаем его на общее количество изображений, что дает нам правильный id изображения.

CODE 

private function slide( _e : Event ) : void  
{  
  var percent : Number = ( theHandle.goToX - slider.x ) / ( slider.width - theHandle.width );  
  var imgId : Number = Math.round( percent * ( images.length - 1 ) );  
   
  goTo( imgId );  
}  

Шаг 14

Если вы организовали все правильно и следовали этому уроку, отследили, какие классы импортировать, и какие переменные объявлять (или следили за исходными файлами), у Вас должен быть к настоящему времени рабочий пример.
Шаг 15

Чтобы закончить этот урок, мы добавим плавность к изображениям, используя TweenLite, свободный и легкий tweening-механизм. Стандартные tweening-классы, предоставленные Adobe, не достаточно хороши, когда их сразу много. Когда я пытался использовать одновременно их, я потерпел поражение, или они надолго замораживались, в то время как я не обнаружил таких проблем с TweenLite. Синтаксис TweenLite очень легок. Я продемонстрирую его, сравнивая его с обычным твином Flash; твининг объекта из его положения x к 100 и изменение альфы к 0:

CODE 

new Tween( object, 'x', Linear.easeOut, object.x, 100, 2, true );  
new Tween( object, 'alpha', Linear.easeOut, object.alpha, 0, 2, true );  

Здесь альтернативный синтаксис TweenLite:
CODE 

TweenLite.to( object, 2, { x:100, alpha:0, easing:Linear.easeOut } );  

Шаг 16

Давайте создадим новую функцию, в которой мы можем поместить все для действий tweening. Назовем ее "flyTo" и поместим ее в класс Img.
CODE 

private function flyTo( newX : Number, removeAfter : Boolean, scale : Number = 1 ) : void  
{  
  var tweeningOptions : Object = new Object;  
  tweeningOptions.x = newX;  
   
  if ( removeAfter )  
  {  
  tweeningOptions.ease = Linear.easeIn;  
  tweeningOptions.alpha = 0;  
  tweeningOptions.scaleX = tweeningOptions.scaleY = 0.3;  
  tweeningOptions.visible = false;  
  }  
  else  
  {  
  tweeningOptions.ease = Back.easeOut;  
  tweeningOptions.alpha = 1;  
  tweeningOptions.scaleX = tweeningOptions.scaleY = scale;  
  tweeningOptions.rotation = (Math.random() * 20) - 10;  
  }  
  TweenLite.to ( this, 0.4, tweeningOptions );  
}  

Есть 3 аргумента, необходимые для этой функции: значение x, которое мы вычислили ранее, оно должно быть удалено после твина и масштабирования. Параметр "removedAfter" будет использоваться в функции deActive, таким образом видимость изображения сможет быть установлена в false, как только оно достигнет конца сцены. Параметр scale используется только для картинки в центре; мы покажем ее немного большей по размеру, чем остальные.

Давайте проверим опции tweening, когда изображение удаляется со сцены. Сначала мы выбираем easing-опцию , в этом случае "Linear.easeIn", которая дает нормальное, линейное движение. Во-вторых, мы сводим альфа-значение к нолю, чтобы изображение исчезало. Затем мы масштабируем его с небольшим процентом от его ширины и высоты, таким образом оно становится меньше, как только достигает конца. Наконец, когда твин завершен, мы устанавливаем видимость в false.

CODE 

tweeningOptions.ease = Linear.easeIn;  
tweeningOptions.alpha = 0;  
tweeningOptions.scaleX = tweeningOptions.scaleY = 0.3;  
tweeningOptions.visible = false;  

Когда изображение делается активным, tweening-опции различны. Мы установим easing в "Back.easeOut", таким образом кажется, что изображения летят немного дальше и затем возвращаются обратно; это очень изящный эффект. Затем мы изменим альфу обратно на 1 и масштабируем изображение к величине масштаба, которую мы передали в функцию. Наконец, мы установим случайное вращение от -10 до 10 градусов. Если Ваш текст описания не загружается после этого действия, вы должны удостовериться, что шрифт встроен.
CODE 

tweeningOptions.ease = Back.easeOut;  
tweeningOptions.alpha = 1;  
tweeningOptions.scaleX = tweeningOptions.scaleY = scale;  
tweeningOptions.rotation = Math.round( (Math.random() * 20) - 10 ); 

Шаг 17

Теперь мы должны изменить функции makeActive и deActive, таким образом, чтобы они использовали новую функцию flyTo.

В функции makeActive мы должны добавлять значение x к изображению, чтобы оно плавно меняло свое первоначальное значение. Нужно установить в главном классе Gallery defaultWidth, оно содержит ширину сцены.
CODE 

public function makeActive( position : Number, direction : Number ) : void  
{  
  deactivating = false;  
  if ( parent == null )  
  {  
  x = ( direction == 1 ? main.stageWidth + main.defaultWidth * 2 : - main.defaultWidth * 2 );  
  alpha = 0;  
  main.imagesClip.addChild( this );  
  }  
  visible = true;  
  if ( numChildren < 3 ) loadImage();  
  parent.setChildIndex(this, ( parent.numChildren-1 ) - Math.abs( position ) );  
   
  var extra : Number = Math.round( position * ( main.defaultWidth + main.spaceBetween ) );  
  var newX : Number = ( Math.round( ( main.stageWidth / 2 ) /* - ( main.defaultWidth / 2 )*/ ) + extra );  
  flyTo( newX, false, ( position == 0 ? 1.2 : 1 ) );  
}  

В функции deActive все что нам нужно - это добавить значение moveTo, которое содержит значение по x, к которому картинка должна плавно двигаться. Если мы расположим ее вне ширины сцены, картинка должна исчезнуть со сцены.

CODE 

public function deActive( direction : Number ) : void  
{  
  if ( ! deactivating )  
  {  
  active = false;  
  var moveTo : Number = ( direction != 1 ? main.stageWidth + main.defaultWidth * 2 : parent.x - main.defaultWidth * 2 );  
  flyTo( moveTo, true );  
  deactivating = true;  
  }  
}  

Шаг 18

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

Заключение
Заключительная версия все еще имеет низкие функциональные возможности. Загруженные изображения все одного размера, и отсутствует предварительный просмотр. Вы можете добавить функцию изменения размеров и опцию для просмотра большей картинки по щелчку мыши по ней. Кроме того, можно добавить опцию для просмотра с помощью левой и правой кнопок со стрелками на клавиатуре.



Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

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