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



Огромное СПАСИБО 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 - Как во флеш-плеере поменять музыку...
...
Часть 22 - Урок - как сделать во флеш слайд-шоу
Часть 23 - Делаем флешку с видео
Часть 24 - Урок в Adobe Flash CS6 - Анимация кусочками
Часть 25 - Создайте 3D flash галерею всего в три шага
Часть 26 - Цветочный шлейф за курсором - урок № 1
...
Часть 29 - Как скопировать флешку с инета и поставить в свой дневник...
Часть 30 - Работаем в Portable Flash Effect Maker Pro v5.01
Часть 31 - Делаем флеш-плеер в Sothink SWF Quicker

Серия сообщений "* Adobe Flash":

Часть 1 - Adobe Flash CS6 Portable
Часть 2 - Работа с шаблонами в Adobe Flash. Обратный отсчет даты
...
Часть 8 - Эффект листопада в Adobe Flash CS6( АS2)
Часть 9 - Панель "Фрагменты кода" в Adobe Flash CS6
Часть 10 - Урок в Adobe Flash CS6 - Анимация кусочками
Часть 11 - Делаем заготовку для флеш-календарика в Adobe Flash CS6..
Часть 12 - Создание 3D карусели (пояснения к уроку)
...
Часть 39 - Вертикальное вращение во флеш
Часть 40 - Делаем в Adobe Flash 3D Эффект переворота(3D вертелка)
Часть 41 - Скачать и установить Adobe Flash Professional CS6 12.0.0.481 [MULTi / Русский]