Сейчас я работаю над одним весьма интересным проектом — это будет всего лишь интерактивная флеш-шапка, но она будет полна анимации с алогичным волшебством: кони-рыбы, люди-фрукты и так далее ))
В процессе работы, я уверен, будет накапливатся масса интересных и полезных мелочей, коими я конечно же поспешу поделиться. Сейчас таких мелочей есть две: программный растеризатор сложного вектора. Вектора будет много, и он как пить дать убъет процессор; пришлось выдумывать хитрые вещи. Но об этом позже, сначала я должен убедиться в эффективности выбранного решения ))
Сегодня же я расскажу о колесах. Будет скрипт )) Несложный, но он даст нам чудное колесо, и оно будет вращаться в точности в соответсвии с тем, как далеко продвигается то, к чему это колесо крепится ))) Итак, под кат, там есть небольшой мультик ))
Оставим пока лошадей ) (Я намерен, кстати выложить видео запись процесса работы над этой анимацией – так сказать серия Animator at work)
Понаблюдайте за каретой. Колеса, как видите вращаются весьма правильно )) Они следуют всем законам земным и божеским. Вы думаете, я сидел с линейкой и мерял кадр за кадром – каково смещение? Нет. Я вспомнил, что в школе я неплохо разбирался в геометрии ))
Итак, каждое колесо запаковано в мувиКлип, сама карета с ее вложенной анимацией также упакавана в мувиклип.
Каждый клип колеса имеет точку регистрации ровно в его центре, чтобы колесо вращалось вокруг своей оси.
Из геометрии мы знаем формулу длины окружности L = 2PI*R, где R – радиус.
В правильном колесе радиус – это половина ширины клипа.
Рассуждаем логически: когда наше колесо повернется на 360 градусов, оно должно сместиться на расстояние L. Супер! Значит, если колесо повернется на один градус, расстояние будет равно L/360! Запомним это число, и повесим на колесо событие onEnterFrame в котором смотрим — на сколько сместилась карета (моушвтины тоже считаются!), и считаем угол поворота – дистанцию делим на L/360. Вуаля.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
init(wheel1); // обучаем первое колесо
init(wheel2); // обучаем второе колесоfunction init(mc:MovieClip):Void{
mc.radius = mc._width/2; // собрали радиус
mc.baseX = mc._parent._x; // запомнили начальную позицию кареты// l = 2PI*R - ах, геометрия...
mc.degreeLength = (2*3.1415926*mc.radius)/360; // смещение при повороте на один градус
mc.onEnterFrame = function():Void{var distance:Number = this.baseX - this._parent._x; // на сколько сместилась карета?this._rotation = -distance/this.degreeLength; // поворачиваем колесо}}
Как показывает практика, многие избегают использования scrollRect (я писал об этой чудесной возможности в одной из статей) по той простой причине, что не понимают, как работать с координатами. Действительно, после использования маски с клипом, где каждый участник процесса имеет свои понятные иксы и игреки, переход на scrollRect бывает труден.
Сегодня я еще раз попробую обратить вас в свою веру )).
Основная, бесспорная причина, по которой стоит использовать scrollRect вместо прямоугольных масок – производительность.
10 масок убьют CPU намного быстрее, чем 10 scrollRect-ов. Даже в хелпе сказано, что при использовании scrollRect используется попиксельное копирование участка клипа, а не полная его перерисовка.
Вторая причина – (вытекает из первой) можно маскировать НЕ внедренные шрифты, которые, как мы знаем, пропадают при маскировании обычным способом.
Также для меня лично плюсом является то, что мне не надо плодить новые клипы, только для того чтобы замаскировать контент.
Теперь о том, как это работает.
В процессе участвует MovieClip и объект Rectangle.
Когда к клипу применяется scrollRect – то на экран выводится только тот участок клипа, который КАК бы лежит под заданным прямоугольником. Координаты прямоугольника при этом задаются в системе координат маскируемого клипа – то есть от его точки регистрации. Хотим увидеть квадрат 20х20 левого верхнего угла клипа – задаем mc.scrollRect = new Rectangle(0,0,20,20);
Заметьте, если вы начинаете сдвигать координату прямоугольника – координаты клипа остаются неизменными, хотя визуально кажется, будто он движется под маской. Еще раз напомню – происходит попиксельное копирование участка клипа.
Пример 1. Левый клип замаскирован scrollRect-ом. Перемещая рамку над правым – меняем x и y scrollRect-а.
Пример 2. Прокрутка большого клипа в окне заданного размера.
Координаты Rectangle изменяются в зависимости от координат мыши.
Пример 3. Комбинация перемещения клипа + перемещение scrollRect дает забавный эффект.
Попробуйте перевесить картину )
Пример 4. Покрутите ручки сами.Некоторые свойства Rectangle:
x, y – координата левого верхнего угла прямоугольника; width, heigth – ширина, высота прямоугольника; left – координата левой стороны. Изменяя это свойство мы меняем сразу и width, и x; right -координата правой стороны. Изменяя это свойство мы изменяем также и width; top – координата верхней стороны. Изменяя это свойство мы меняем сразу и height, и y; bottom -координата нижней стороны. Изменяя это свойство мы изменяем также и height;Покрутив ручки MovieClip вы увидите разницу между перемещением клипа и перемещением прямоугольника scrollRect.
Интересный факт. Изменяя width прямоугольника мы меняем _width клипа (это логично). Но если мы при scrollRect начнем изменять непосредственно _width (_height) клипа – то клип начнет искажаться, тогда как scrollRect останется при своем _width.
Крутите ручки – экспериментируйте.
Иногда бывает нужно, чтобы случайное число с большей вероятностью выпадало ближе к минимальным, или максимальным значениям.
Простой пример – Слот машина.
Бонусные символы должны выпадать гораздо реже обычных символов.
Существует масса способов реализовать такой рандом, о них, к примеру была речь на форуме flash-mx
Вот и мне тут понадобилась такая функция.
Некогда мною было написано некоторое количество игр для казино, все они быи завязаны на сервер, который нынче мертв. Жалко мне стало игрушек – красивые были, вот я сейчас и пишу аля-эмулятор сервера со всей логикой игры. Как раз тут вопрос и возник.
Более того мне необходимо, что бы числа возвращались в жестко заданном диапазоне.
Немного мозгового скрипа дало мне вот такую функцию.
1
2
3
4
5
6
function expoRandom(range:Number,w:Number):Number{
w = Math.max(w,1);
w = Math.min(w,709);
returnMath.log(1+Math.random()*(Math.exp(w)-1))*(range/w);
}
В функцию передается два параметра – собственно диапазон, и, не знаю как это правильно обозвать, степень разброса. От это степени зависит насколько сильно выпадающие значения будут тесниться к максимальному краю. Чем больше степень, тем ближе к краю.
В функцию вставлена небольшая проверка – чтобы ширина не была меньше 1 (в этом случае мы получим обычный рандом) и не была больше 709 (в этом случае выражение Math.exp(w) даст нам infinity). Их собсвенно можно убрать, дабы не забивать процессор лишней работой.
Вся магия тут завязана на простой принцип – есть график логарифма. Мы берем случайное число по оси X и находим его логарифм по оси Y. Немного корректируем под наш диапазон – и результат на лице.
