Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Изготовление флеш рисовалки


Изготовление флеш рисовалки
В этом уроке я постараюсь как можно подробнее рассказать о том, как написать флеш «рисовалку» на actionscript 2. Наша рисовалка будет иметь три инструмента: кисть, линия и прямоугольник. Также будут пара опций: смена диаметра кисти и регулировка интенсивности цвета. И, конечно, выбор цвета.
Дадим имена каждому элементу. Инструменты:
Кисть - i1
Линия – i2
Прямоугольник – i3
Холст для рисования назовём pole
Регулятор диаметра – diametr
Регулятор жёсткости – opacity
Индикатор диаметра и цвета (красный кружок) – smp
Палитра – palitra
Кнопка отмена – otm
Кнопка повтора – povt
Кнопка очистки – cl
Для каждой кнопки прописываем useHandCursor = false;
pole.useHandCursor = false;
palitra.useHandCursor = false;
otm.useHandCursor = false;
povt.useHandCursor = false;
cl.useHandCursor = false;
sss.useHandCursor = false;
i1.useHandCursor = false;
i2.useHandCursor = false;
i3.useHandCursor = false;

Инициализируем переменные:
undo = false; //значит, что отменять сейчас нечего
rep = false; //поторять изначально тоже нечего 

kolor = "0xFF0000";//дефолтный цвет
pole.instrument = 1;//дефолтный инструмент (кисть)

diam = 10; //размер кисти
smp.k._height = _root.diam;
smp.k._width = _root.diam;

al = 100; // жёсткость кисти


Приступаем к оформлению кнопок для выбора инструмента. Внутри каждого мувика делаем два кадра: первый – неактивная кнопка, второй – активная, на первый кадр каждой вешаем
stop();

Инструментом по умолчанию будет кисть, поэтому на кадр во временной диаграмме добавляем
i1.gotoAndStop(2);
pole.instrument = 1; // переменная, хранящая номер выбранного инструмента<!--code2-->


Сделаем переключение инструментов. Не знаю кто как, а я привык вешать скрипты – обработчики нажатий на сами кнопки, так можно намного быстрее их находить. На кнопку кисть вешаем:
on (rollOver) {
    if (_root.pole.instrument != 1) {
        gotoAndStop(2);
    }
}

on (press) {
    if (_root.pole.instrument != 1) {
        gotoAndStop(3);
    }
}

on (rollOut, releaseOutside) {
    if (_root.pole.instrument != 1) {
    gotoAndStop(1);
    }
}

on (release) {

    _root.i1.gotoAndStop(1);
    _root.i2.gotoAndStop(1);
    _root.i3.gotoAndStop(1);
    _root.pole.instrument = 1;
    gotoAndStop(3);
}

Аналогично на кнопки линия и прямоугольник:on (rollOver) {
    if (_root.pole.instrument != 2) {
        gotoAndStop(2);
    }
}

on (press) {
    if (_root.pole.instrument != 2) {
        gotoAndStop(3);
    }
}

on (rollOut, releaseOutside) {
    if (_root.pole.instrument != 2) {
    gotoAndStop(1);
    }
}

on (release) {

    _root.i1.gotoAndStop(1);
    _root.i2.gotoAndStop(1);
    _root.i3.gotoAndStop(1);
    _root.pole.instrument = 2;
    gotoAndStop(3);
}

и on (rollOver) {
    if (_root.pole.instrument != 3) {
        gotoAndStop(2);
    }
}

on (press) {
    if (_root.pole.instrument != 3) {
        gotoAndStop(3);
    }
}

on (rollOut, releaseOutside) {
    if (_root.pole.instrument != 3) {
    gotoAndStop(1);
    }
}

on (release) {
    _root.i1.gotoAndStop(1);
    _root.i2.gotoAndStop(1);
    _root.i3.gotoAndStop(1);
    _root.pole.instrument = 3;
    gotoAndStop(3);
}
Кнопки Отмена и Повтор будут иметь три кадра: первый – активная кнопка, которую можно нажать, второй кадр – кнопка при наведении на неё курсора, третий – неактивная кнопка. Изначально останавливаем кнопки на третьем кадре.
Далее приступим к созданию самого «движка» - скриптов для рисования. Вешать их будем на клип pole. Для начала внутри клипа pole инициализируем две переменные для хранения кол-ва клипов и глубин.
m = 0;
n = 0;

Теперь начинаем писать обработчик нажатия кнопки мыши на мувике pole.on (press) {

    if (instrument == 1) { //если выбрана кисть
m++; // наращиваем счётчик глубин
_root.otm.gotoAndStop(1); //переводим кнопку Отмена в активное положение
_root.undo = true; // означает, что сейчас можно отменить
_root.norep(); // функция, которую мы напишем позже.

aa = this.createEmptyMovieClip("ff"+m, m); // создаём новый клип
// пермещаем его в начало координат
aa._x = 0;
aa._y = 0;

// запоминаем позицию курсора когда нажали на кнопку
    x = aa._xmouse
    y = aa._ymouse
// применяем настройки стиля для линий
    aa.lineStyle(_root.diam, _root.kolor, _root.al);
    aa.moveTo(x, y);
// Для того, чтобы при простом нажатии и отпускании кнопки
// мыши у нас появлялась точка, пишем:
aa.lineTo( aa._xmouse+0.2, aa._ymouse+0.2);
// при каждом движении мыши дорисовуем ещё одну линию

onMouseMove = function() {
    aa.lineTo( aa._xmouse, aa._ymouse)
     xx = aa._xmouse
     yy = aa._ymouse
    }
}

    if (instrument == 2) { // если выбран инструмент линия
// начало аналогично первому варианту
    m++;
_root.otm.gotoAndStop(1);
_root.undo = true;
_root.norep();
    var ttt = this.createEmptyMovieClip("ff" + m, m);
    
    ttt._x = 0;
    ttt._y = 0;
// запоминаем положение курсора
    xx = this._xmouse;
    yy = this._ymouse;
    
    onMouseMove = function():Void {
    ttt.clear(); // очищаем клип
    // применяем стиль
    ttt.lineStyle(_root.diam, _root.kolor, _root.al);
// рисуем линию из первой точки (при нажатии на кнопку)
// в то место, где сейчас курсор
    ttt.moveTo(xx, yy);
    ttt.lineTo(this._xmouse, this._ymouse);
    
        }
    }

    if (instrument == 3) { //если выбран инструмент прямоугольник
// всё то же самое: создание клипа, применение стиля,
// запоминание позиции курсора
    m++;
ot = m;
_root.otm.gotoAndStop(1);
_root.undo = true;
_root.norep();
    var ttt = this.createEmptyMovieClip("ff" + m, m);
    trace(ttt);
    ttt._x = 0;
    ttt._y = 0;
    xx = this._xmouse;
    yy = this._ymouse;
    onMouseMove = function():Void {
    ttt.clear();

    ttt.lineStyle(_root.diam, _root.kolor, _root.al);
    ttt.moveTo(xx, yy);
    // рисуем сам прямоугольник
    ttt.lineTo(this._xmouse, yy);
    ttt.lineTo(this._xmouse, this._ymouse);
    ttt.lineTo(xx, this._ymouse);
    ttt.lineTo(xx, yy);

    }
}
// наращиваем счётчик клипов на 1
    n++;
}
// добавляем обработчик отпускания кнопки
on (release, releaseOutside) {
    delete onMouseMove;
}

Теперь сделаем рабочими кнопки Отменить и Повторить.
На кнопку Отмена вешаем

on (rollOver) {
    if (_root.undo) {
// undo – булева величина, хранит сведения о том, есть ли что сейчас отменить
        gotoAndStop(2);
    }
}
on (rollOut, releaseOutside) {
    if (_root.undo) {
    gotoAndStop(1);
    } else {
        gotoAndStop(3);
    }
}

on (release) {

if (_root.undo) {
// скрываем самый последний клип
_root.pole["ff"+_root.pole.m]._alpha = 0;
// уменьшаем счётчик
_root.pole.m--;
// теперь мы можем повторить
_root.rep = true;
_root.povt.gotoAndStop(1);
    
    }
    
    if (_root.pole.m == 1) {
        _root.undo = false;
        gotoAndStop(3);
    }
    
}

На кнопку Повторить:
on (rollOver) {
    if (_root.rep) {
        gotoAndStop(2);
    }
}

on (rollOut, releaseOutside) {
    if (_root.rep) { // если можно повторить
    gotoAndStop(1);
    } else {
        gotoAndStop(3);
    }
}

on (release) {
    if (_root.rep) {
    _root.pole.m++;
// показываем клип
_root.pole["ff"+_root.pole.m]._alpha = 100;
}

q = _root.pole.m+1;
// проверяем, можно ли ещё повторять
if (_root.pole["ff"+q] == undefined) { // если нельзя
    _root.rep = false;
    gotoAndStop(3);
}
}

На кнопку Очистить вешаем
on (release) {
var i = _root.pole.m;
while (true) { // Бесконечный цикл
if (_root.pole.m <= 1) {
break; // Если переменная i будет <= 1
// цикл прервется
}
// удаляе все клипы
_root.pole["ff"+_root.pole.m].removeMovieClip();
// уменьшаем счётчик
_root.pole.m--;
}
_root.norep(); // нельзя повторить
_root.undo = false; //нельзя отменить
_root.otm.gotoAndStop(3);
}


Делаем выбор цвета. На палитру вешаем on (release) {
// делаем снимок флешки
    import flash.display.BitmapData;
   var bmp:BitmapData = new BitmapData(598, 460, false);
   bmp.draw(_root);
// запоминаем координаты курсора
        XXX = _root._xmouse;
        YYY = _root._ymouse;
// получаем цвет пикселя по этим координатам
        _root.kolor = "0x" + bmp.getPixel(XXX, YYY).toString(16);
      
    // применяем новый цвет к индикатору
        color1 = new Color(_root.smp.k);
        color1.setRGB(_root.kolor);
}

Выбор диаметра. Сам ползунок делаем MovieClip, называем p. Внутри него делаем кнопку, называем b. На неё вешаем:
on (press) {
    this.startDrag(false, 0, 0, 80, 0);
    this.onMouseMove = function() {
        _root.diam = Math.round((_root.diametr.p._x / 80) * 30 + 2);
        _root.smp.k._width = _root.diam;
        _root.smp.k._height = _root.diam;
        
    }
}

on (release, releaseOutside) {
    this.stopDrag();
    delete onMouseMove;
}

На «дорожку» под ползунком вешаем on (release) {
    _parent.p._x = this._xmouse;
    _root.diam = Math.round((_root.diametr.p._x / 80) * 30 + 2);
    _root.smp.k._width = _root.diam;
    _root.smp.k._height = _root.diam;
    
}

Аналогично делаем выбор жёсткости, на кнопку b вешаем on (press) {
    this.startDrag(false, 0, 0, 80, 0);
    this.onMouseMove = function() {
        _root.al = Math.round((_root.opacity.p._x / 80) * 100);
        _root.smp.k._alpha = _root.al;
                
    }
}

on (release, releaseOutside) {
    this.stopDrag();
    delete onMouseMove;
}

На «дорожку»:on (release) {
    _parent.p._x = this._xmouse;
        _root.al = Math.round((_root.opacity.p._x / 80) * 100);
        _root.smp.k._alpha = _root.al;
}


Ну вот и всё, скачать исходник с этой рисовалкой можно здесь:
Нажмите для скачивания flash_risovalka.rar!
Название: flash_risovalka.rar
Размер: 5.31 Mb


Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

комментарии (2)

#1 написал: flash-world | 29 октября 2009 13:31
     

ай-ай-ай, воровать чужие уроки нехорошо smile
Хоть бы ссылку на источник в noindex не закрывали diablo
#2 написал: Jecky | 29 октября 2009 13:40
     

Цитата: flash-world
ай-ай-ай, воровать чужие уроки нехорошо Хоть бы ссылку на источник в noindex не закрывали

Что же Вы так ругаетесь? Ведь мы указываем источник для посетителей и они знают где Вас найти. А источники прячем в noindex чтобы не создавать лишних внешних ссылок.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.