Урок в Adobe Flash CS6 - Анимация кусочками

Четверг, 02 Апреля 2015 г. 18:58 + в цитатник

Цитата сообщения Лариса_Гурьянова

Прочитать целиком В свой цитатник или сообщество!

Урок в Adobe Flash CS6 - Анимация кусочками

Да, простят меня корифеи флеш, но решила дополнить этот УРОК и расписать все подробно , именно для начинающих, тем более, что меня об этом уже несколько ПЧ попросили...))
В конце урока получим такой эффект (поводите мышкой по картинке)

Огромное СПАСИБО

novprospekt за TweenLite и код скрипта и

jzayka и

ВАТ за подсказки при выполнении урока. Без них не справилась бы...))

В-первых, скачали программу
Adobe Flash CS6
или
Adobe Flash CS6 Portable
Сразу предупрежу, портабельная версия не работает на Windows 7, 64 бит.

Приступим к уроку.
Для начала создайте на рабочем столе папку (назовите ее как хотите). Я назвала "Проекты флеш"

Потом скачайте из вложения снизу файл gs и поместите его в ту же папку.

Вложение 4112125_gs.rar

И в эту же папку поместите картинку, которую будем анимировать.

Все. Подготовительная работа закончена. Открываем программу Adobe Flash CS6

Копируем следующий код ( он длинный, не пугаемся...))) и вставляем в Окно -Действия:

//Импортируем TweenLite
import gs.*;
import gs.easing.*;

//Ширина и высота кусочка картинки
const IMAGE_PIECE_WIDTH:uint = 50;
const IMAGE_PIECE_HEIGHT:uint = 43;

//Мы хотим знать, сколько кусочков картинки размещается на сцене
var imagePieces:Number = 0;
picture.visible=false;
completeHandler();
function completeHandler():void {

//Получим bitmap data от картинки
var imageTextureMap:BitmapData = new BitmapData(picture.width,picture.height);
imageTextureMap.draw(picture);
//Вычисляем сколько колонок и строк мы будем иметь
var columns:Number = Math.ceil(imageTextureMap.width / IMAGE_PIECE_WIDTH);
var rows:Number = Math.ceil(imageTextureMap.height / IMAGE_PIECE_HEIGHT);

//Цикл по колонкам
for (var i = 0; i < columns; i++) {

//Цикл по строкам
for (var j = 0; j < rows; j++) {

//Создаем новый муви клип - контейнер одной частички картинки
var imagePieceHolder:MovieClip = new MovieClip();

//Создаем новый кусочек картинки, в который мы будем копировать bitmap data
//из картинки-оригинала.
var imagePiece:Bitmap = new Bitmap();
imagePiece.bitmapData = new BitmapData(IMAGE_PIECE_WIDTH,IMAGE_PIECE_HEIGHT);

//Копируем прямоугольную область из картинки-оригинала в наш кусочек картинки.
//Мы устанавливаем точку прямоугольника в (1,1) , таким образом мы получим белые контуры
//вокруг кусочков картинки. Мы будем копировать области колонку за колонкой (вы можете
//изменить это в циклах).
imagePiece.bitmapData.copyPixels(imageTextureMap,
new Rectangle(i * IMAGE_PIECE_WIDTH, j * IMAGE_PIECE_HEIGHT,
IMAGE_PIECE_WIDTH, IMAGE_PIECE_HEIGHT),
new Point(1,1));

//Добавляем кусок картинки в контейнер картинки
imagePieceHolder.addChild(imagePiece);

//Позиция контейнера картинки на сцене.
//Мы располагаем контейнеры так, что он выглядит как картинка-оригинал.
imagePieceHolder.x = i * IMAGE_PIECE_WIDTH;
imagePieceHolder.y = j * IMAGE_PIECE_HEIGHT;

//Запоминаем оригинальную позицию контейнера (нам понадобится это позже для анимации)
imagePieceHolder.origX = imagePieceHolder.x;
imagePieceHolder.origY = imagePieceHolder.y;

//Слушаем, когда мышь располагается сверху куска картинки
imagePieceHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);

//Добавляем контейнер куска картинки на сцену
addChild(imagePieceHolder);

//Изменяем счетчик кусочков картинки
imagePieces++;
}
}
}
//Эта функция вызывается, когда мышь проходит над контейнером куска картинки
function mouseOverHandler(e:Event):void {

//Сохраняем контейнер в локальную переменную
var imagePieceHolder = (MovieClip)(e.target);

//Вычисляем рандомно координаты target для контейнера
var randomX = Math.random() * 1000 - 500;
var randomY = Math.random() * 1000 - 500;
var targetX = imagePieceHolder.x + randomX;
var targetY = imagePieceHolder.y + randomY;

//Твин контейнера к рандомным координатам, используя TweenLite.
//Мы будем вызывать функцию "outTweenFinished()" когда анимация закончится.
TweenLite.to(imagePieceHolder, 1, {x:targetX, y:targetY, onComplete:outTweenFinished, onCompleteParams:[imagePieceHolder]});

//Добавляем контейнер вверх списка display.
//Это метод, чтобы прямоугольники перекрывали друг друга корректно.
setChildIndex(imagePieceHolder,imagePieces - 1);

//Удаляем слушатель для обработчика MOUSE_OVER
imagePieceHolder.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
}

//Эта функция вызывается, когда контейнер закончил твин
function outTweenFinished(imagePieceHolder:MovieClip):void {

//Получаем оригинальные координаты контейнера
var origX = imagePieceHolder.origX;
var origY = imagePieceHolder.origY;

//Твин контейнера к оригинальному положению
TweenLite.to(imagePieceHolder, 1, {x:origX, y:origY, onComplete:inTweenFinished, onCompleteParams:[imagePieceHolder]});
}

//Эта функция выполняется, когда контейнер возвращается к оригинальному положению
function inTweenFinished(imagePieceHolder:MovieClip):void {

//Мы можем начать снова слушать событие MOUSE_OVER
imagePieceHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);

}

Все! Флешка на нашем компьютере в созданной папке.
А как с компьютера флешку загрузить в дневник, читаем ЗДЕСЬ
После того, как вы все сделаете, вставляем код в дневник в простом редакторе

Надеюсь, вам все было понятно. С нетерпением жду ваших работ. Удачи!!!

Работы, сделанные по уроку:

НАДЕЖДА_БЫКОВСКИХ

ГАЛИНА_АЛАШНИКОВА

наталачка

LiSu

Любовь_Терехова

~~Lyudmila_Spring~~

Серия сообщений "* Мои уроки по флешкам":

Часть 1 - Красивые флешки с кодами
Часть 2 - Как во флеш-плеере поменять музыку...
...
Часть 20 - Урок - как сделать во флеш слайд-шоу
Часть 21 - Делаем флешку с видео
Часть 22 - Урок в Adobe Flash CS6 - Анимация кусочками
Часть 23 - Создайте 3D flash галерею всего в три шага
Часть 24 - Цветочный шлейф за курсором - урок № 1
...
Часть 29 - Как скопировать флешку с инета и поставить в свой дневник...
Часть 30 - Работаем в Portable Flash Effect Maker Pro v5.01
Часть 31 - Делаем флеш-плеер в Sothink SWF Quicker

Метки: урок флеш
Понравилось: 1 пользователю

<a href="https://www.liveinternet.ru/users/grif9000/post358233755/">РЈСЂРѕРє РІ Adobe Flash CS6 - РђРЅРёРјР°С†РёСЏ РєСѓСЃРѕС‡РєР°РјРё</a><br/>РЈСЂРѕРє РІ Adobe Flash CS6 - РђРЅРёРјР°С†РёСЏ РєСѓСЃРѕС‡РєР°РјРё

Р”Р°, РїСЂРѕСЃС‚СЏС‚ РјРµРЅСЏ РєРѕСЂРёС„РµРё С„Р»РµС€, РЅРѕ СЂРµС€РёР»Р° РґРѕРїРѕР»РЅРёС‚СЊ СЌС‚РѕС‚  РЈР РћРљ   Рё СЂР°СЃРїРёСЃР°С‚СЊ РІСЃРµ РїРѕРґСЂРѕР±РЅРѕ , РёРјРµРЅРЅРѕ РґР»СЏ РЅР°С‡РёРЅР°СЋС‰РёС…, С‚РµРј Р±РѕР»РµРµ, С‡С‚Рѕ РјРµРЅСЏ РѕР± СЌС‚РѕРј СѓР¶Рµ РЅРµСЃРєРѕР»СЊРєРѕ РџР§ РїРѕРїСЂРѕСЃРёР»Рё...))
Р’ РєРѕРЅС†Рµ СѓСЂРѕРєР° РїРѕР»СѓС‡РёРј С‚Р°РєРѕР№ СЌС„С„РµРєС‚ (РїРѕРІРѕРґРёС‚Рµ РјС‹С€РєРѕР№ РїРѕ РєР°СЂС‚РёРЅРєРµ)

РћРіСЂРѕРјРЅРѕРµ РЎРџРђРЎРР‘Рћ novprospekt Р·Р° TweenLite Рё РєРѕРґ СЃРєСЂРёРїС‚Р°  Рё jzayka Рё Р’РђРў Р·Р° РїРѕРґСЃРєР°Р·РєРё РїСЂРё РІС‹РїРѕР»РЅРµРЅРёРё СѓСЂРѕРєР°. Р‘РµР· РЅРёС… РЅРµ СЃРїСЂР°РІРёР»Р°СЃСЊ Р±С‹...))

Р’-РїРµСЂРІС‹С…, СЃРєР°С‡Р°Р»Рё РїСЂРѕРіСЂР°РјРјСѓ 
 Adobe Flash CS6 
РёР»Рё
Adobe Flash CS6 Portable
РЎСЂР°Р·Сѓ РїСЂРµРґСѓРїСЂРµР¶Сѓ, РїРѕСЂС‚Р°Р±РµР»СЊРЅР°СЏ РІРµСЂСЃРёСЏ РЅРµ СЂР°Р±РѕС‚Р°РµС‚ РЅР° Windows 7, 64 Р±РёС‚.

РџСЂРёСЃС‚СѓРїРёРј ... <a href="https://www.liveinternet.ru/users/grif9000/post358233755/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>