Масштабирование элемента flash сайта с ActionScript 3

Content on this page requires a newer version of Adobe Flash Player.

Информация
Автор/переводчик: 
Fly
Описание: 

В этом уроке я расскажу, как масштабировать элементы flash сайта при помощи ActionScript 3.0. Мы создадим миниатюрный вариант страниц или вы сможете это использовать, как элементы сайт, сюда мы и встроим эффект зума.

Подготовка:

1. Создайте новый документ размером 300×300.
2. Нарисуйте три разноцветных квадрата размером 100×100.
3. Напишите какой-нибудь текст, например “страница 1″, “страница 2″ и “страница 3″.
4. Конвертируйте каждый квадрат с текстом в мувиклип, для этого надо выделить именно один квадрат с текстом и нажать F8. Назвать получившиеся мувиклипы вы можете, как хотите, но точка регистрации должна быть по центру

5. Расположите квадртаы, как на скриншоте ниже. Они должны аккуратно примыкать друг к другу

Пишем ActionScript

Не пугайтесь количеству кода, он сопровождается комментариями и, если вы внимательно будете читать, то всё поймёте.

7. Создайте новый слой, назовите его actionscript, в первом кадре нажмите F9 и вставьте туда код, который приведён ниже.

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

//Сохраняем текущую страницу, которая сейчас отображается
var currentPage:MovieClip = null;

//Этот массив будет хранить всю анимацию движения
var tweens:Array = new Array();

//Делаем наши кнопки прозрачными на 50%
page01.alpha = 0.5;
page02.alpha = 0.5;
page03.alpha = 0.5;

//Делаем наши квадраты кнопками (что бы при наведении курсора он менялся на руку)
page01.buttonMode = true;
page02.buttonMode = true;
page03.buttonMode = true;

//Добавляем слушатель событий
addEventListeners();

//Эта функция добавляет необходимые слушатели событий для кнопок
function addEventListeners():void {

//Добавляет слушатель на событие mouse over (когда указатель находится в пределах области элемента) для кнопок
page01.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
page02.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
page03.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);

//Добавляет слушатель на событие mouse out (когда указатель выходит за пределы области элемента) для кнопок
page01.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
page02.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
page03.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);

//Добавляем событие клика по кнопке
page01.addEventListener(MouseEvent.CLICK, mouseClickHandler);
page02.addEventListener(MouseEvent.CLICK, mouseClickHandler);
page03.addEventListener(MouseEvent.CLICK, mouseClickHandler);

}

//Эта функция удаляет все слушатели событий, созданные в функции addEventListeners()
function removeEventListeners():void {

//Удаляем обработчик на событие mouse over
page01.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
page02.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
page03.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);

//Удаляем обработчик на событие mouse out
page01.removeEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
page02.removeEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
page03.removeEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);

//Удаляем обработчик на событие mouse click
page01.removeEventListener(MouseEvent.CLICK, mouseClickHandler);
page02.removeEventListener(MouseEvent.CLICK, mouseClickHandler);
page03.removeEventListener(MouseEvent.CLICK, mouseClickHandler);

}

//Эта функция прослушивает, когда мышка наведена на кнопку
function mouseOverHandler(e:MouseEvent):void {

//Получаем саму кнопку из события
var button:MovieClip = e.target as MovieClip;

//Делаем кнопку полностью непрозрачной
button.alpha = 1;
}

//Эта функция слушает, когда курсор мыши покидает границы кнопки
function mouseOutHandler(e:MouseEvent):void {

//Получаем саму кнопку из события
var button:MovieClip = e.target as MovieClip;

//50% прозрачности
button.alpha = 0.5;
}

//Эта функция слушает, когда по кнопке совершается клик
function mouseClickHandler(e:MouseEvent):void {

//Удаление слушателей событий, когда начинается анимация
removeEventListeners();

//Получаем саму кнопку из события
var button:MovieClip = e.target as MovieClip;

//При клике на кнопку - появляется "текущая страница"
currentPage = button;

//"текущая страница" делается полностью непрозрачной
currentPage.alpha = 1;

//Добавляем текущую страницу на верх сцены.
setChildIndex(currentPage, 2);

//Анимируем кнопку, делаем его по центру сцены.
var tweenX:Tween = new Tween(currentPage, "x", Regular.easeOut,
currentPage.x, 150, 0.5, true);

//Добавляем анимацию в массив
tweens.push(tweenX);

//Слушаем, когда анимация заканчивается
tweenX.addEventListener(TweenEvent.MOTION_FINISH, centerTweenFinished);
}

//Слушаем, когда страница оказывается по центру сцены
function centerTweenFinished(e:TweenEvent):void {

//Увеличивает страницу почти на всю обозримую область
var tweenX:Tween = new Tween(currentPage, "scaleX", Regular.easeOut, 1, 2.5, 1, true);
var tweenY:Tween = new Tween(currentPage, "scaleY", Regular.easeOut, 1, 2.5, 1, true);

//Добавляем анимацию в массив
tweens.push(tweenX);
tweens.push(tweenY);

//Добавляем слушатель событий для закрытия текущей страницы
currentPage.addEventListener(MouseEvent.CLICK, currentPageClicked);

}

//Эта функция слушает, когда совершается клик по текущей странице
function currentPageClicked(e:Event):void {

//Убирает текущую страницу вниз
var tweenX:Tween = new Tween(currentPage, "scaleX", Regular.easeOut,
2.5, 1, 1, true);
var tweenY:Tween = new Tween(currentPage, "scaleY", Regular.easeOut,
2.5, 1, 1, true);

//Добавляем анимацию в массив
tweens.push(tweenX);
tweens.push(tweenY);

//Слушает, когда текущая страница опускается вниз
tweenX.addEventListener(TweenEvent.MOTION_FINISH, scaleDownFinished);

//Удаляет слушатели собитий по нажатию для текущей страницы
currentPage.removeEventListener(MouseEvent.CLICK, currentPageClicked);

}

//Эта функция слушает, когда заканчивается опускание вниз текущей страницы
function scaleDownFinished(e:Event):void {

var tweenX:Tween;

//Перемещает текущую страницу в исходную позицию
if (currentPage == page01) {
tweenX = new Tween(currentPage, "x", Regular.easeOut,
currentPage.x, 50, 0.5, true);
} else if (currentPage == page02) {
tweenX = new Tween(currentPage, "x", Regular.easeOut,
currentPage.x, 150, 0.5, true);
} else {
tweenX = new Tween(currentPage, "x", Regular.easeOut,
currentPage.x, 250, 0.5, true);
}
//Добавляем анимацию в массив
tweens.push(tweenX);

//Добавить все слушатели назад
addEventListeners();
}

На этом урок закончен, если у вас будут вопросы, то задавайте их на форуме

Исходник: 

Впервые!

Если у вас было хоть раз желание сделать что-то новое и необычное, то этот видеокурс для вас! Знания ActionScript 3.0 вдохнут в ваши проекты новую жизнь, позволив тем самым поднять их на новый уровень

С помощью этого видеокурса вы пройдёте путь от новичка до Объектно-Ориентированного Программирования, сможете работать со многими популярными библиотеками и научитесь создавать сайты во flash! + Видеокурс по PaperVision3D в подарок!

Видеокурс содержит 119 видеоуроков в 12 главах. На сегодняшний день это единственный видеокурс, таких масштабов

Узнайте о других возможностях ActionScript 3.0

Комментарии

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

Зеленый квадратик без эффекта.

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

уже работает