Травянистое поле
Описание урока: В этом уроке вы научитесь создавать во флеш эффект травы, которая движется под действием ветра. При наведении мыши на траву, можно регулировать скорость ветра.
Как-то раз на одном форуме я увидел красиво сделанный футер. В этом футере была трава, которая реагировала на движения мыши и двигалась. Мне эта штука очень понравилась, и я решил сделать что-то подобное. Просидев с флэшем несколько часов, я создал нечто совершенно иное и выглядело оно примерно так, как описано ниже. Если вы хорошо знаете флэш, этот урок не научит вас ничему новому. Зато он научит вас как совмещая разные приёмы ActionScript, можно создавать красивую анимацию. В конце - концов, ведь задача программирования заключается в том, чтобы обратить ваши знания в нужный конечный результат. Не так ли? Если же вы новичок, вы найдете очень много полезного и интересного в этом примере. Итак, начнем.
Шаг 1
Создайте новый документ во флэше. Задайте ширину и высоту сцены 300x200 пикселей.
Теперь нам нужно нарисовать траву. С помощью инструмента «Карандаш» нарисуйте вот такую линию:
Шаг 2
После того как вы нарисовали травинку, её нужно сделать MovieClip (F8, или insert | Convert to Symbol). Из списка выбираем MovieClip, присваиваем имя и нажимаем OK.
Выберите только что созданный MovieClip и в панели Properties дайте ему название grass:
Шаг 3
Вместо того чтобы копировать и вставлять травинку большое количество раз, мы заставим флэш делать это за нас. Для этого нажмите правой кнопкой мыши по первому кадру, и выберите Actions. Вставьте следующий код:
Code
for (i=0; i<300; i++) {
_root.grass.duplicateMovieClip("movie"+i,i);
}
Шаг 4
Теперь, когда мы создали большое количество травинок, нужно расположить их, и задать такие параметры, как изменение размера, глубина, прозрачность. Для этого нажмите правой кнопкой мыши на клип, и выберите Actions. Вставьте следующий код:
Code
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) Установите курсор в самый конец кода и вставьте за ним продолжение:
Code
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 вы можете здесь
Источник http://web-silver.ru/