Сегодня: 21 января 2017 года, суббота

Поиск по сайту


Дизайнерский форум

Рассылка

Наша кнопка

Мы рекомендуем

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

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

Шаг 1

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

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

Шаг 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);
}
}
Запустив ролик, вы увидите ту анимацию, которую мы и хотели получить.

Скачать исходник *.fla вы можете здесь.
Дизайн навигатор - Photoshop, уроки фотошоп, шаблоны сайтов