Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Урок Macromedia Flash: Травянистое поле


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

 

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

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

 

 

alt

 

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

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

 

alt


Шаг 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);
}
}

 

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

 

Скачать исходник *.fla вы можете Нажмите для скачивания grass.zip!
Название: grass.zip
Размер: 3.85 Kb

 



Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

комментарии (1)

#1 написал: pa-inter | 10 февраля 2012 14:27
     

Классная трава, если внутри символа травинку нарисовать более подробно, а не просто полоской, то эффект просто впечаляет. Так и охота пустить туда своего персонажа побегать по свежей травке...
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.