Рисование на ActionScript во Flash MX |
|
Отличный урок для практики в программировании на ActionScript, сегодня мы попробуем рисовать некоторые примитивные линиии и фигуры с помощью средств ActionScript. Данный урок построен таким образом, что предполагается, что вы уже знакомы с основами данного языка, поэтому стоит оставить данную страничку в закладках, если это пока не так. Для того, что бы нарисовать хотя бы примитивные фигуры нам потребуются следующии функции объекта "MovieClip": beginFill ([rgb[, alpha]]) beginGradientFill (fillType, colors, alphas, ratios, matrix) clear() curveTo (controlX, controlY, anchorX, anchorY) endFill() lineStyle ([thickness[, rgb[, alpha]]]) lineTo (x, y) moveTo (x, y) ![]() Начнем с функций "moveTo()" и "lineTo()", которые будудт использоваться для начертания самих линий: "moveTo()" устанавливает позицию "карандаша" (курсора) в позицию x, y. "lineTo()" проводит эту линию от позиции, установленной функцией "moveTo()", до позиции, обозначенной параметрами x, y в самой функции "lineTo()". Но, прежде чем рисовать линии этими функциями, нужно установить свойства линии функцией "lineStyle()". У неё три необязательных параметра: "thickness" - указывает толщину линии; "rgb" - цвет (а-ля 0x56FFCC); "alpha" - значение прозрачности. Если же последний параметр не указан явно, это будет обозначать, что он равен нулю! Приведу пример, который нарисует синий квадрат в текущем объекте "MovieClip": lineStyle(1, 0x0000FF); moveTo(100, 100); lineTo(200, 100); lineTo(200, 200); lineTo(100, 200); lineTo(100, 100); Координатная решетка любого объекта типа MovieClip начинается с верхнего левого угла и растет вправо вниз, как видно на рисунке выше. Для закраски нарисованных фигур используются функции beginFill() и endFill(). Функцию beginGradientFill() для создания градиентной закраски мы рассмотрим позже. beginFill() включает режим закраски. После её вызова, все нарисованные контуры будут закрашиваться, образую замкнутые фигуры. beginFill() имеет два необязательных параметра: rgb указывает цвет закраски, alpha - прозрачность. endFill() отключает режим закраски. Рекомендуется для рисовательной деятельности создавать пустой объект при помощи функции createEmptyMovieClip(). Этой функции передаются два параметра: имя экземпляра клипа, и целое значение, указывающее глубину клипа на экране, относительно других клипов. Вот пример c использованием функций beginFill() и endFill(): _root.createEmptyMovieClip("myClip", 1); myClip.lineStyle(2,0x234567); myClip.beginFill(0x7878FF); myClip.moveTo(70,20); myClip.lineTo(20,100); myClip.lineTo(120,100); myClip.lineTo(70,20); myClip.endFill(); myClip.lineStyle(4, 0x0078DD); myClip.moveTo(140,20); myClip.lineTo(190,20); myClip.lineTo(190,70); myClip.lineTo(140,70); myClip.lineTo(140,20); myClip.beginFill(0x00FF00, 30); myClip.lineStyle(1, 0xDC2323); myClip.moveTo(230, 20); myClip.lineTo(350, 100); myClip.lineTo(350, 20); myClip.lineTo(230, 100); myClip.lineTo(230, 20); Вот как выглядит результат работы этого скрипта: Рассмотрим функцию, которая рисует кривые: curveTo(controlX, controlY, anchorX, anchorY). Функция имеет четыре обязательных параметра. При отсутствии хотя бы одного из них она не срабатывает. Началом кривой считается текущая позиция курсора ("карандаша"), которая устанавливается при помощи "moveTo()", или же позицией, в которой закончили черчение функции "lineTo()" или "curveTo()". Конец кривой указывается параметрами "anchorX" и "anchorY". Параметры "controlX" и "controlY" указывают точку, к которой направлены начало и конец линии. Для наглядности на рисунке ниже обозначены все точки. ![]() И вот что получиться в результате его воспроизведения: lineStyle(1); beginFill(0xFF9921, 20); moveTo(70,20); curveTo(120,20,120,70); curveTo(120,120,70,120); curveTo(20,120,20,70); curveTo(20,20,70,20); endFill(); moveTo(140,120); curveTo(140,20,160,20); curveTo(180,20,180,120); Наконец, рассмотрим самую сложную функцию "beginGradientFill" ("fillType", "colors", "alphas", "ratios", "matrix"), служащая для градиентной закраски. Параметр "fillType" указывает тип закраски может быть равен одной из следующих строк: "linear" - линейная "radial" - радиальная Не забудьте, что это строки и их следует указывать в кавычках. Следующие четыре параметра представляют из себя массивы, каждый из которых мы сейчас рассмотри подробнее. "colors" - массив, содержащий цвета градиента. "alphas" содержит "alphа"-канал (прозрачность) каждого цвета. "ratios" содержит значения распределения цветов. Возможные значения: 0-255. Это значение указывает место в процентном соотношении, где значение цвета достигает максимума. matrix является матрицей преобразования, которая может описываться двумя наборами значений: a, b, c, d, e, f, g, h, i, которые представляют из себя матрицу типаa b c d e f g h i или matrixType, x, y, w, h, r, где matrixType - строка "box"; x и y - смещение центра градиента, относительно точки регистрации объекта; w и h - ширина и высота градиента соответственно; r - угол поворота градиента в радианах. Для обращения к свойствам объекта можно использовать инструкцию with(). Вот пример, в котором мы создаём классическую "хромовую" закраску, повёрнутую на 45 градусов. _root.createEmptyMovieClip( "myClip", 1 ); with ( _root.myClip ) { colors = [ 0x0066FD, 0xFFFFFF, 0xFFFFFF, 0x996600, 0xFFCC00, 0xFFFFFF]; alphas = [ 100, 100, 100, 100, 100, 100 ]; ratios = [ 0, 100, 120, 125, 165, 255]; matrix = { matrixType:"box", x:20, y:20, w:130, h:100, r:(45/180)*Math.PI }; beginGradientFill( "linear", colors, alphas, ratios, matrix ); moveto(20,20); lineto(150,20); lineto(150,120); lineto(20,120); lineto(20,20); endFill(); } Ну вот и всё, а казалось так сложно. На самом деле с небольшим количеством практики данный пример становится простым и являетс не больше чем разминкой. Удачи и успехов! |
Разделы сайта
- Интернет новости
- Как создать сайт
- Хостинг сайтов
- Технологии и стандарты
- Веб-дизайн
- Вёрстка (xHTML коддинг)
- Веб-программирование
- SEO (раскрутка сайтов)
- Бесплатный хостинг
- Защита компьютера
- Мошенничество в сети
- Администрирование
- Заработок в Интернете
- Полезные статьи
- Блогосфера
- Уроки для дизайнеров
- Онлайн учебники
- Книги и справочники
- Скрипты
- Клипарт
- Социальная сеть
- Форум веб-мастеров
Последние статьи
Самое популярное
- Взлом пароля почты или как узнать пароль e-mail
- Создание шапки для сайта в Adobe Photoshop
- Скачать шапки для сайта
- Как украсть красивый номер ICQ?
- Бесплатные иконки для сайтов
- Функция mail в php. Отправляем сообщение
- Можно ли взломать Вконтакте - социальная сеть
Последние новости
- Отсутствие Интернета приводит к депрессии и мыслям о самоубийстве
- «ВКонтакте» посоветует пользователям популярные статьи
- Браузер Firefox получит кнопку «Сбросить Firefox»
- USB-флешка с голосовым управлением
- Общественный Интернет-канал в Москве
- Панорамы соборов и дворцов на «Яндекс.Афиша» в честь «Ночи музеев»
- Facebook определил стоимость 1-ой акции на IPO
Разделы форума



