Дополнение к уроку Jzayka

Можно выполнить в Adobe Flash, Sothink SWF Quicker и других прогах, поддерживающих скрипт AS2.

Данный урок в АФ CS6. Все настройки свойств могут быть изменены Вами. Исходники - во вложении к посту.

Первый этап: повтор урока (другим алгоритмом):

1. Создать документ AS2, размеры 700/400 px

2. Импортировать на сцену картинку 1 из папки: Ctrl +R  > выбрать картинку > импортировать

3. Преобразовать картинку в символ =Фрагмент ролика=, название не важно. Удалить со сцены.

4. Ролик в библиотеке. Выделите его, во втором столбце =Связывание= сделать двойной клик и в открывшемся текстовом поле написать     идентификатор: =myPic=

5. В единственном кадре слоя впишите скрипт (найдёте и во вложении):

function takePic()
{
    var picHolder = this.createEmptyMovieClip("picHol", 0);
    var dep = 0;
    var i = 0;
    while (i < picHeight / bSize)
    {
        var k = 0;
        while (k < picWidth / bSize)
        {
            var block = picHolder.createEmptyMovieClip("block" + i + k, dep);
            ++dep;
            with (block)
            {
                attachMovie("myPic", "myPic", 0);
                createEmptyMovieClip("mask", 1);
                mask._x = k * bSize;
                mask._y = i * bSize;
                mask.beginFill(0, 100);
                mask.lineTo(bSize, 0);
                mask.lineTo(bSize, bSize);
                mask.lineTo(0, bSize);
                mask.lineTo(0, 0);
                mask.endFill();
                myPic.setMask(block.mask);
                _x = picWidth - mask._x;
                _y = picHeight - mask._y;
            } // End of with
            block.intervalID = setInterval(blockMover, dep * 200 + 1000, block);
            ++k;
        } // end while
        ++i;
    } // end while
} // End of the function
function blockMover(clip)
{
    clearInterval(clip.intervalID);
    clip.targetX = clip.targetY = 0;
    clip.onEnterFrame = function ()
    {
        this.dist = Math.sqrt(Math.pow(this.targetX - this._x, 2) + Math.pow(this.targetY - this._y, 2));
        if (Math.abs(this.dist) > 1)
        {
            this._x = this._x + (this.targetX - this._x) / 4;
            this._y = this._y + (this.targetY - this._y) / 4;
        }
        else
        {
            this._x = this.targetX;
            this._y = this.targetY;
            delete this.onEnterFrame;
        } // end else if
    };
} // End of the function
var bSize = 100;
this.createEmptyMovieClip("temp", 0);
this.temp.attachMovie("myPic", "myPic", 0);
var picWidth = this.temp.myPic._width;
var picHeight = this.temp.myPic._height;
removeMovieClip (this.temp);
takePic();
onMouseUp = function ()
{
    takePic();
};

6. Тестировать ролик (Ctrl+Enter).

Второй этап: Добавление анимации "Дети".

7. Создать фрагмент ролика "Дети" (имя не обязательное, просто для порядка): Путь: Вставка > Создать символ > Фрагмент ролика (имя "Дети") > OK.

8. Находимся в мувике "Дети". Импортируем (Ctrl+R) из папки с исходниками гифку 2. Ролик готов.

9. Внимание: Создаём Фрагмент ролика "Дети_1" (Вставка > Создать символ > Фрагмент ролика) > OK.

10. Сюда (в ролик "Дети_1") из библиотеки переносим ролик "Дети"!  Выравниваем по центру. Увеличиваем немножко (пропорционально) его, примерно до 110 px по ширине (высота возьмётся автоматически, если включена связка в свойствах). Большое увеличение приведёт к ухудшению качества изображения.

11. Будем анимировать ролик. Для этого выделяем на временной шкале первый (единственный пока) кадр и, удерживая левую кнопку мыши, перемещаем его по шкале на (Ваш вариант) 130 кадр. (+-) .

12. Далее ставим ключевой кадр на 220 кадр.

13. Кликаем правой кнопкой мыши по любому кадру между 130 и 220 и выбираем "Создать классическую анимацию движения".

14. Стали на 130 кадр, выделить мувик на сцене и в панели "Свойства" задайте значения как на скрине.

15. Создайте поверх слоя с анимацией мувика слой для скрипта, на 220-м кадре вставьте ключевой кадр и в панели действия пишите скрипт:

stop();

16. В библиотеке выделяем мувик "Символ 1" и, двойным кликом, заходим в его редакцию. Создаём слой поверх имеющегося, имя "Дети_1" и переносим на первый кадр из библиотеки мувик "Дети_1".  Это будет маленький кружочек, выделите его аккуратно и задайте координаты в панели "Свойства" как на скрине:

17. Тестировать. Если справились со вторым этапом, то должно получиться примерно следующее.

Если не устали и не надоело, то приступаем к третьему этапу:

Создание и установка мувика "Кошка".

18. Поступаем аналогично второму этапу: создаём фрагмент ролика "Кошка": Вставка > Создать символ > Фрагмент ролика. Имя "Кошка". > OK.

19. Иммпортируем в нём из папки с материалами гифку 3 - Ctrl+R. Ролик готов.

20. Создаём фрагмент ролика "Кошка_1". Стали на 200-й кадр шкалы и вставляем ключевой кадр. Сюда переносим из библиотеки мувик "Кошка". Уменьшим немного его размеры примерно до 80 px по ширине, высота возьмётся автоматически - не забудьте связать. Далее выделяем 600-й кадр и ставим кючевой кадр.

21. Анимируем мувик: стали на 600-й ключевой кадр и перемещаем кошечку влево. Это проще делать в панели "Свойства", задав значения Y = -840 (примерно).  Кликаем правой кнопкой на любой кадр между 200-м и 600-м и в выпадающем меню выбираем "Создать классическую анимацию движения".

22. Теперь заходим в редакцию мувика "Символ 1!, создаём над слоем "Дети_1" слой "Кошка_1!  На его первый кадр переносим мувик "Кошка_1". В панели "Свойства" установите ему параметры: X = 740, Y = 365.

Всё! Тестируем. Должно получиться примерно как в шапке поста. Получилось - ПОЗДРАВЛЯЮ. Возникли вопросы - задавайте.