![]() |
|
... Часто хочется украсить сайт какой-нибудь заковыристой текстовой надписью. В этом случае на помощь обычно приходит всем известный PhotoShop. Но растровые картинки, как правило, занимают слишком много места, особенно при больших размерах изображения. Приходится ради уменьшения объема файла жертвовать качеством картинки. Но есть и другой подход. С помощью программы Flash возможно создание удивительно компактных изображений любого размера без потери качества (все-таки векторная графика, как-никак). И сегодня хочу предложить вашему вниманию способ создания кирпичного текста. ![]() Первым делом нужно подготовить кирпичи, из которых будет состоять изображение. Их придется нарисовать вручную. Понадобится два типа кирпичей (см. рис. 2). ![]() ![]() Теперь займемся программированием. Суть проста: нужно импортировать клип с текстом, скрыть его и просканировать с некоторым шагом, т.е. как бы наложить на изображение клетчатый лист бумаги и просмотреть его узлы. Если на каком-то шаге в каком-то узле окажемся над буквой, то импортируем в это место один из клипов, содержащих кирпичи. Для определения попадания в букву будем использовать метод hitTest. Первые два параметра этого метода — координаты тестируемой точки, третий параметр должен иметь значение true, иначе будет тестироваться попадание точки не в изображение текста, а в ограничивающий этот текст прямоугольник. //импортируем клип //с текстом var text:MovieClip=attachMovie("text", "text", 0); //делаем его невидимым text._visible = false; //вычисляем правую и //нижнюю границы //текста var width:Number = text._x+text._width; var height:Number = text._y+text._height; //ax и ay — вертикальные //и горизонтальные размеры //одного кирпича — не всего //мувика с кирпичами, а только //одного кирпича; //эти размеры можно //определить с помощью //панели Properties var ax:Number=25.1; var ay:Number=8.4; //масштаб, здесь //можно экспериментировать, //меня устроило такое //значение: var scale:Number=1.35; //шаги для сканирования //по вертикали и по //горизонтали var stepx:Number=ax*scale; var stepy:Number=ay*scale; //уровень, на который должен //помещаться очередной клип //c кирпичами. Каждый //клип должен быть на //своем уровне var count:Number=2; //сканируем изображение снизу вверх for (var j:Number=height-1; j>=text._y; j -= stepy) { for (var i:Number=text._x; i<width; i+=stepx) { if (text.hitTest(i, j, true)) { //k определяет, какой //тип кирпичей будет //использоваться var k:Number=random(3); var clip:MovieClip; if (k>0) { clip = attachMovie("b1", "b"+count, count) }else{ clip = attachMovie("b2", "b"+count, count) } //масштабируем кирпичи clip._xscale = clip._yscale=scale*100; count++; clip._x = i; clip._y = j; } } } Надпись готова. Теперь анимируем появление кирпичей, чтобы они появлялись не сразу, а постепенно, снизу вверх. Для этого воспользуемся функцией setInterval. Эта функция позволяет задать интервал времени, через который будет вызвана какая-либо другая функция или какой-то метод заданного объекта. Первый параметр — объект, метод которого нужно вызвать, второй параметр — строка, содержащая имя вызываемого метода, третий параметр — время в миллисекундах, которое должно пройти до срабатывания функции. Следующий код заставит кирпичи появляться через определенное время. //отключаем отображение кирпича clip._visible=false; //создаем метод, который будет //вызываться функцией //setInterval clip.control=function (){ //показываем блок кирпичей this._visible=true; //если не вызвать //cleatInterval, //то метод control //будет вызываться снова //и снова clearInterval(this.ID); }; //в свойстве ID сохраняем //информацию, которую возвращает //setInterval, чтобы //можно было воспользоваться //clearInterval clip.ID=setInterval(clip,"control", Math.random()*300+(height-j)*3); ![]() ![]() Виктор Терещук, twa@tut.by © Компьютерная газета
|
|