• Авторизация


Кто в доме хозяин? (С уроком!) 06-08-2015 00:09 к комментариям - к полной версии - понравилось!

Это цитата сообщения Jorjorych Оригинальное сообщение

Кто в доме хозяин? (С уроком!).


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

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

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

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

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

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

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

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

[375x231]

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. Ролик готов.

1 1

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

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

1 2

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

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

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

1 3

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

   1 4

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

stop();

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

1 5

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


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

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

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

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

1 6

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

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

1 7

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

1 8

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

 

вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Кто в доме хозяин? (С уроком!) | Оленька_555 - virtual world | Лента друзей Оленька_555 / Полная версия Добавить в друзья Страницы: раньше»