Вс. Апр 28th, 2024

Травянистое поле

By Admin50085 Июн 8, 2011

Как-то раз на одном форуме я увидел красиво сделанный футер. В этом футере была трава, которая реагировала на движения мыши и двигалась. Мне эта штука очень понравилась, и я решил сделать что-то подобное. Просидев с флэшем несколько часов, я создал нечто совершенно иное и выглядело оно примерно так, как описано ниже.

Если вы хорошо знаете флэш, этот урок не научит вас ничему новому. Зато он научит вас как совмещая разные приёмы ActionScript, можно создавать красивую анимацию. В конце — концов, ведь задача программирования заключается в том, чтобы обратить ваши знания в нужный конечный результат. Не так ли? Если же вы новичок, вы найдете очень много полезного и интересного в этом примере. Итак, начнём.

Шаг 1

Создайте новый документ во флэше. Задайте ширину и высоту сцены 300×200 пикселей.

Теперь нам нужно нарисовать траву. С помощью инструмента «Карандаш» нарисуйте вот такую линию:

Шаг 2

После того как вы нарисовали травинку, её нужно сделать MovieClip (F8, или insert | Convert to Symbol). Из списка выбираем MovieClip, присваиваем имя и нажимаем OK.

Выберите только что созданный MovieClip и в панели Properties дайте ему название grass:

Шаг 3

Вместо того чтобы копировать и вставлять травинку большое количество раз, мы заставим флэш делать это за нас. Для этого нажмите правой кнопкой мыши по первому кадру, и выберите Actions. Вставьте следующий код:

for (i=0; i<300; i++) {
_root.grass.duplicateMovieClip(«movie»+i,i);
}

Шаг 4

Теперь, когда мы создали большое количество травинок, нужно расположить их, и задать такие параметры, как изменение размера, глубина, прозрачность. Для этого нажмите правой кнопкой мыши на клип, и выберите Actions. Вставьте следующий код:

onClipEvent (load) {
this._x = Math.round(-10 + Math.random()*350);
this._xscale = (50+Math.random()*350);
this._yscale = (50+Math.random()*150);
this._alpha = (10+Math.random()*90);
rxn = Math.round(2+Math.random()*4);
}

Шаг 5

Если вы сейчас запустите ролик, то увидите большое количество травинок на сцене, но все они статичны, и безжизненны. Настало время заставить траву двигаться:

1) Нажмите правой кнопкой мыши на клип, и выберите Actions. Вы увидите код, который вставили ранее.
2) Убедитесь, что редактор находится в режиме Expert Mode.
3) Установите курсор в самый конец кода и вставьте за ним продолжение:

onClipEvent (enterFrame) {
x = (_root._xmouse+50)/rxn;
this._xscale = -x;
this._x -= x/10;
pos = this._x;
if (pos<-50) {
this._x += Math.round(290+Math.random()*100);
}
}

Запустив ролик, вы увидите ту анимацию, которую мы и хотели получить.

Related Post

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *