В этом уроке мы создадим галерею, которая отображает все файлы изображений в данном каталоге. Слайдер используется для удобного просмотра изображений.
Шаг 1
Настройте новый документ Flash AS3 и пустой файл ActionScript. Сначала мы создадим основной класс; назовите его «Галерея» и сохраните как «Gallery.as». Ниже приведен код для настройки первого класса:
|
1
2
3
4
5
6
7
8
9
|
package
{
public class Gallery
{
public function Gallery() : void
{
}
}
}
|
Во Flash мы можем теперь установить его как базовый класс, введя имя в поле ввода в настройках публикации документа. Вы можете попробовать «trace (‘hello world’)» в функции Gallery, чтобы проверить, работает ли он.
Шаг 2
Прежде чем мы продолжим с основным классом, лучше начать с ползунка. Код довольно прост для понимания и может пролить свет на то, как все делается в AS3.
Создайте два новых мувиклипа: слайдер и маркер для слайдера. Слайдер или средство поиска не нужно экспортировать для ActionScript, поскольку нам нужно только применить некоторые функции к дескриптору. Установите класс для ручки как «Ручка». Теперь мы можем создать новый класс с именем «Handle», и, если он будет сохранен в том же каталоге, Flash автоматически использует этот класс для дескриптора. Дайте и имя экземпляра, такое как «слайдер» и «theHandle».
Шаг 3
Ниже приведен полный код для дескриптора, который я объясню по шагам. Он должен быть сохранен как «Handle.as» в том же каталоге, что и ваш .fla. Таким образом, Flash выполнит код, как только будет использован экземпляр с именем класса «Handle».
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
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» в родительском объекте. Нам это нужно, чтобы правильно рассчитать положение х, в которое должен быть перемещен маркер. В конструкторе мы устанавливаем «buttonMode» в значение true, чтобы при наведении курсора на курсор показывался курсор в виде руки. Кроме того, мы добавляем два обработчика событий для прослушивания событий мыши.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
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 );
}
|
Как только происходит событие мыши, добавляется дополнительный слушатель. Этот слушатель остается активным, пока движение перетаскивания не остановлено и вызывает функцию followHandle. Он удаляется снова, когда щелчок мыши закончен.
|
01
02
03
04
05
06
07
08
09
10
|
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» хранит новую позицию, в которую должен переместиться дескриптор. Однако, если эта позиция дальше, чем крайняя левая или правая часть ползунка, позиция должна быть установлена на максимально возможное значение. Если ручка перемещается, мы отправляем новое пользовательское событие, называемое «скольжение», которое мы можем позже использовать для перемещения по изображениям.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
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. Поскольку отображать пока нечего, я заполнил его текстом «Загрузка», который также будет отображаться, пока скрипт загружает первое изображение.
Шаг 5
Далее мы создадим скрипт php backend. Flash не может прочитать содержимое локального каталога, поэтому нам нужно передать информацию из php во Flash. Мы будем использовать XML, так как его легко вывести с помощью php и еще легче прочитать снова в AS3.
Ниже приведен код бэкэнда php, сохраните его как «backend.php». Код проходит по каталогу «img» и записывает строку XML для каждого файла. Перед печатью нам нужно отфильтровать «.» и «..» каталоги. Поскольку каталог содержит только изображения, дальнейшая проверка не требуется.
|
1
2
3
4
5
6
7
|
<xml>
<?php
$od = opendir(‘img’);
while ( $filename = readdir($od) )
if( $filename != «.» && $filename != «..» ) echo «<img>» .
?>
</xml>
|
Это будет выводить, например:
|
1
2
3
4
5
|
<xml>
<img>file1.jpg</img>
<img>file2.jpg</img>
<img>file3.jpg</img>
</xml>
|
Шаг 6
Прежде чем загрузить это во Flash, давайте создадим класс для хранения наших изображений по отдельности. Таким же образом мы создали класс Handle, теперь мы можем создать класс Img. Начните с создания видеоролика о размере, который вы хотите, чтобы ваши изображения отображались. Оставьте поле в несколько пикселей и оставьте немного места внизу для текста описания. Добавьте динамическое текстовое поле для описания и присвойте ему имя экземпляра «descr». Убедитесь, что точка регистрации мувиклипа установлена в центре, чтобы ее можно было легко масштабировать позже. Экспортируйте его для ActionScript под именем класса «Img». Теперь удалите экземпляр со сцены, так как мы будем вызывать его прямо из библиотеки.
Шаг 7
Далее мы загрузим информацию, которую php-файл возвращает в наш проект Flash, используя ActionScript. Откройте класс Галерея снова. Следующий код добавляет две функциональности в наш проект. Во-первых, он создает «imagesClip», пустой мувиклип, в котором мы будем хранить реальные изображения позже. Использование «addChild» здесь добавляет мувиклип на сцену. Все, что будет добавлено в imagesClip позже, также появится на сцене. Чтобы на самом деле загрузить данные XML, мы создаем «URLLoader». Этот класс может извлекать результаты и запускать функцию, когда результаты находятся в.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
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] );
}
}
}
}
|
Здесь мы используем функцию загрузки класса URLLoader. Чтобы предотвратить кеширование результатов, мы можем добавить простую дату в конец URL. Eventlistener проверяет, когда завершен URLLoader, а затем запускает функцию loadImages.
|
1
2
|
xmlLoader.load( new URLRequest( backend + «?» + new Date().valueOf() ) );
xmlLoader.addEventListener( Event.COMPLETE, loadImages );
|
Следующая функция перебирает все экземпляры <img> в xml. Для каждого из них создается новый экземпляр класса Img. Затем мы добавляем его в imagesClip (это только для тестирования, так как позже мы хотим, чтобы только активные изображения отображались).
|
01
02
03
04
05
06
07
08
09
10
11
|
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. Загрузка не должна происходить в конструкторе, иначе все изображения будут пытаться загрузить одновременно; мы создадим отдельную функцию для этого.
|
1
2
3
4
5
6
7
8
9
|
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, чтобы впоследствии мы могли получить доступ к элементам на сцене или к общедоступным переменным и функциям основного класса. Строка «load» будет содержать путь к изображению, которое вернул php, мы сохраним его в переменной, чтобы мы могли получить к нему доступ позже.
|
1
2
3
4
5
6
7
8
|
public function Img( load : String, m : Gallery ) : void
{
orgWidth = width;
orgHeight = height;
main = m;
src = load;
}
|
Функция «loadImage» загружает изображение и после завершения запускает функцию «displayImage».
|
1
2
3
4
5
6
|
public function loadImage() : void
{
imageLoader.load( new URLRequest( «img/» + src ) );
imageLoader.contentLoaderInfo.addEventListener( Event.COMPLETE, displayImage );
}
|
Функция displayImage проверяет созданный нами массив изображений и загружает следующее изображение. В Loader для сглаживания устанавливается значение true (по умолчанию для динамически загружаемых изображений установлено значение false). Как только вы начинаете масштабировать или поворачивать изображение, важно установить сглаживание, чтобы изображение оставалось качественным. Поскольку точка регистрации мувиклипа Img находится в центре, нам нужно вычислить положение x и y места для размещения самого изображения. В моем примере я использовал каталог изображений с одинаковой шириной и высотой. Если ширина и высота загружаемого изображения являются переменными, это место, чтобы изменить его размер на лету. Непосредственно перед добавлением его в качестве дочернего элемента мы устанавливаем текст описания на «src», который содержит имя изображения.
|
01
02
03
04
05
06
07
08
09
10
11
|
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. Вторая ссылка на основной класс галереи; мы можем использовать «this», которое указывает на класс, в котором мы сейчас работаем. Вместо добавления изображений с помощью addChild в контейнер imagesClip мы создадим новую функцию «goTo». Эта функция определит, какие изображения размещать на экране. Аргумент, который нам нужно передать, это номер идентификатора изображения, тот же номер, что и индексный ключ в массиве изображений. Когда изображения загружаются в первый раз, мы установим фокус на первое изображение, номер идентификатора которого равен нулю.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
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». Это позволит установить количество изображений, которые мы хотим загрузить сразу на экране. Чтобы определить направление, в котором пользователь выполняет прокрутку, мы просто проверяем, было ли у изображения, которое мы собираемся, иметь более высокий или более низкий номер идентификатора, чем последний.
|
1
2
3
4
5
6
7
|
private function goTo( imgId : Number ) : void
{
var direction : Number;
if ( orgImgId != imgId )
{
if ( imgId > orgImgId ) direction = 1;
else direction = -1;
|
Следующая «петля for» зацикливает все изображения, необходимые на экране. Например: если мы установим для imagesToShow значение 5, оно будет повторяться от -2 до 2. Это означает, что если мы передадим значение i в класс Img, мы сможем определить, где на экране оно должно быть расположено (-2 далеко слева). , 0 центр и 2 крайних справа). Следовательно, мы можем масштабировать изображения по мере их увеличения.
Включена дополнительная проверка, поэтому мы не активируем несуществующие изображения (она останавливается на первом и последнем). Для каждого из активных изображений мы запустим функцию «makeActive», которую мы создадим позже.
|
1
2
3
4
|
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, мы можем легко просмотреть все дочерние элементы этого мувиклипа. Если их идентификатор не входит в число тех, которые должны быть активными, мы запускаем «deActive».
|
1
2
3
4
5
|
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 и т. Д. Мы можем получить общее количество изображений, получая доступ к длине массива изображений.
|
1
2
|
countTxt.text = imgId + 1 + «/» + images.length;
}
|
Наконец, мы установим «orgImgId», чтобы при следующем запуске функции можно было определить направление прокрутки.
|
1
2
|
orgImgId = imgId;
}
|
Шаг 11
Теперь нам нужны функции «makeActive» и «deActive» в классе Img. Они либо добавят изображение на сцену, либо снимают его. Сейчас мы просто добавим их и разместим правильно. Позже мы также добавим их в нужное место.
Функция makeActive сначала проверяет, добавлена ли она уже к imagesClip. Если родитель не найден, он добавляется в контейнер imagesClip. Тогда родителем является imagesClip. Далее мы устанавливаем свойство visible в значение true. При деактивации мы устанавливаем значение false, поэтому нормально, чтобы наше изображение снова показывалось, когда оно стало активным.
|
1
2
3
4
5
6
7
|
public function makeActive( position : Number, direction : Number ) : void
{
if ( parent == null )
{
main.imagesClip.addChild( this );
}
visible = true;
|
Есть вероятность, что само изображение еще не загружено. Чтобы проверить это, я проверяю, меньше ли количество детей, чем 3. Это число может зависеть от количества фигур или других видеоклипов в вашем Img. Если вы не уверены в этом методе, более безопасным вариантом будет объявить логическое значение в начале и установить его значение true в функции displayImage.
|
1
2
|
if ( numChildren < 3 ) loadImage();
|
В AS3 нет глубины, но как только мы начнем масштабировать и поворачивать наши изображения, нам нужно убедиться, что изображение в центре находится поверх других. Поскольку мы передали позицию в качестве аргумента в функции goTo, теперь мы можем использовать ее для установки индекса изображения в imagesClip. Индекс дочернего элемента можно сравнить с глубиной, но при его изменении проблем не возникнет, поскольку другие фрагменты ролика будут перемещать индекс вверх или вниз. Этот шаг не нужен, если вы не планируете перекрывать изображения.
|
1
2
|
parent.setChildIndex( this, ( parent.numChildren-1 ) — Math.abs( position ) );
|
Наконец, мы определяем положение изображения. Переменная «extra» используется здесь для определения того, насколько текущее изображение находится вдали от центра. «DefaultWidth» и «spaceBetween» являются открытыми переменными, установленными в основном классе Gallery, поэтому мы можем получить к ним доступ из любого места. Поскольку все изображения в моем каталоге имеют одинаковую ширину, я установил defaultWidth на 195, а spaceBetween на 20. Чтобы фактически переместить изображение на новую позицию, мы устанавливаем для свойства x вновь найденное значение x.
|
1
2
3
4
|
var extra : Number = Math.round( position * ( main.defaultWidth + main.spaceBetween ) );
var newX : Number = Math.round( ( main.stageWidth / 2 ) ) + extra;
x = newX;
}
|
Шаг 12
Функция deActive довольно прямолинейна, она изменяет видимость на false. Направление уже задано в качестве аргумента, так как оно понадобится нам позже, чтобы узнать, в каком направлении отправлять изображение при снятии со сцены.
|
1
2
3
4
|
public function deActive( direction : Number ) : void
{
visible = false;
}
|
Шаг 13
К настоящему времени первые несколько изображений должны появиться на сцене. Там только одна функциональность все еще отсутствует. Слайдер еще не подключен к функции GoTo. Однако, поскольку мы уже отправляем пользовательское событие после перетаскивания дескриптора, соединить их не очень сложно.
Добавьте следующую строку в функцию конструктора Gallery. Этот EventListener будет запускать функцию slide каждый раз, когда дескриптор вызывает событие slide.
|
1
|
theHandle.addEventListener( «sliding», slide );
|
Все, что нам нужно, чтобы сделать функцию слайдера, — это рассчитать, какое изображение должно быть показано в центре, в зависимости от того, где находится ручка. В функциях «слайдер» и «theHandle» указаны имена экземпляров, которые мы установили ранее в мувиклипах на сцене. Чтобы выяснить, к какому изображению перейти, мы сначала определяем процент от положения ручки по длине слайдера. Затем, умножив это на общее количество изображений, мы получим правильный идентификатор изображения.
|
1
2
3
4
5
6
7
|
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 , бесплатный и легкий движок анимации. Стандартные классы анимации, предоставляемые Adobe, не очень хорошо работают, когда многое происходит. При их испытании они часто ломались или зависали, пока я еще не обнаружил таких проблем с TweenLite. Синтаксис TweenLite очень прост. Я продемонстрирую это, сравнив его с обычной анимацией Flash; анимация объекта с текущего x на 100 и изменение альфа на 0:
|
1
2
|
new Tween( object, ‘x’, Linear.easeOut, object.x, 100, 2, true );
new Tween( object, ‘alpha’, Linear.easeOut, object.alpha, 0, 2, true );
|
Теперь вот альтернативный синтаксис TweenLite:
|
1
|
TweenLite.to( object, 2, { x:100, alpha:0, easing:Linear.easeOut } );
|
Шаг 16
Давайте создадим новую функцию, в которую мы можем поместить все анимационные действия. Назовите его «flyTo» и поместите в класс Img.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
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, которое мы вычислили ранее, следует ли его удалять после анимации и шкалы. Параметр «removeAfter» будет использоваться в функции deActive, поэтому видимость изображения может быть установлена в «ложь», как только оно достигнет конца этапа. Параметр масштабирования используется только для центрального изображения; мы покажем это немного больше, чем остальные.
Давайте проверим варианты анимации, когда изображение будет удалено со сцены. Сначала мы выбираем опцию замедления, в данном случае «Linear.easeIn», которая дает нормальное линейное движение. Во-вторых, мы уменьшаем альфа-значение до нуля, поэтому изображение исчезает. Затем мы масштабируем его до небольшого процента от его ширины и высоты, чтобы он становился меньше по мере достижения конца. Наконец, когда анимация завершена, мы устанавливаем видимость в false.
|
1
2
3
4
|
tweeningOptions.ease = Linear.easeIn;
tweeningOptions.alpha = 0;
tweeningOptions.scaleX = tweeningOptions.scaleY = 0.3;
tweeningOptions.visible = false;
|
Когда изображение становится активным, параметры анимации отличаются. Мы устанавливаем замедление на «Back.easeOut», чтобы изображения, казалось, летели немного слишком далеко, а затем возвращались назад; очень тонкий эффект. Затем мы меняем альфа обратно на 1 и масштабируем изображение до значения масштаба, которое мы передали функции. Наконец, мы устанавливаем случайное вращение от -10 до 10 градусов. Если ваш текст описания не загружается после этого действия, вам необходимо убедиться, что шрифт встроен.
|
1
2
3
4
|
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 к изображению, чтобы его можно было изменить из этого исходного значения. Значение defaultWidth должно быть установлено в основном классе Gallery и содержит ширину сцены.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
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, к которому должно анимироваться изображение. Если мы обнаружим это за пределами ширины сцены, изображение исчезнет за пределами сцены.
|
01
02
03
04
05
06
07
08
09
10
|
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
После обновления всего у нас теперь есть функциональная галерея. Чтобы увидеть исчезновение видеоклипов со сцены, посмотрите полную версию .
Вывод
В финальной версии все еще мало функциональности. Все загруженные изображения должны быть одинакового размера и не иметь большего предварительного просмотра. Вы можете добавить функцию изменения размера и параметр, чтобы просмотреть увеличенный предварительный просмотр изображения при нажатии. Кроме того, может быть добавлена возможность просмотра влево или вправо с помощью кнопок или события клавиатуры.
Как только вы поймете концепцию использования классов для разделения и структурирования вашего кода, это поможет в разработке и облегчит работу в долгосрочной перспективе. Я надеюсь, вам понравилось следовать за ним!