В этом уроке я расскажу, как масштабировать элементы flash сайта при помощи ActionScript 3.0. Мы создадим миниатюрный вариант страниц или вы сможете это использовать, как элементы сайт, сюда мы и встроим эффект зума.
Подготовка:
1. Создайте новый документ размером 300×300.
2. Нарисуйте три разноцветных квадрата размером 100×100.
3. Напишите какой-нибудь текст, например “страница 1″, “страница 2″ и “страница 3″.
4. Конвертируйте каждый квадрат с текстом в мувиклип, для этого надо выделить именно один квадрат с текстом и нажать F8. Назвать получившиеся мувиклипы вы можете, как хотите, но точка регистрации должна быть по центру
5. Расположите квадртаы, как на скриншоте ниже. Они должны аккуратно примыкать друг к другу
Пишем ActionScript
Не пугайтесь количеству кода, он сопровождается комментариями и, если вы внимательно будете читать, то всё поймёте.
7. Создайте новый слой, назовите его actionscript, в первом кадре нажмите F9 и вставьте туда код, который приведён ниже.
//Сохраняем текущую страницу, которая сейчас отображается
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);
//Эта функция прослушивает, когда мышка наведена на кнопку
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 главах. На сегодняшний день это единственный видеокурс, таких масштабов
Комментарии
Зеленый квадратик без эффекта.
уже работает