Скачать флеш исходники уроки примеры flash игры с исходниками

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

Флеш примеры и уроки
В этом уроке я постараюсь как можно подробнее рассказать о том, как написать флеш «рисовалку» на actionscript 2, наподобии той, которая на vkontakte.ru и даже получше :) Наша рисовалка будет иметь три инструмента: кисть, линия и прямоугольник. Также будут пара опций: смена диаметра кисти и регулировка интенсивности цвета. И, конечно, выбор цвета.
Начнём, естественно, с изготовления «тела» :) у меня получилось вот что:
Изготовление флеш рисовалки как вконтакте граффити

Дадим имена каждому элементу. Инструменты:
Кисть - 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;
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; // переменная, хранящая номер выбранного инструмента


Сделаем переключение инструментов. Не знаю кто как, а я привык вешать скрипты – обработчики нажатий на сами кнопки, так можно намного быстрее их находить. На кнопку кисть вешаем:
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 рисовалки и исходник можно ОТСЮДА

 (голосов: 17)

Почитать ещё:
 
#1 написал: alex1997 (27 апреля 2009 17:37)
отличная вещь для сайта!
#2 написал: Влад (28 апреля 2009 23:54)
нупский вопрос - а как задается размер поля для рисования, кроме изменения комп. pole? а то меняю его размер, а границы остаются прежними. маска?
#3 написал: admin (28 апреля 2009 23:56)
Ну конечно)
#4 написал: Влад (29 апреля 2009 21:43)
пасиб. интересны были бы еще вкусности, как формирование png or etc. картинки, и передача ее php скрипту. не планируется?
#5 написал: admin (29 апреля 2009 21:48)
Конечно планируется, уже давно, всё руки никак не доходят.
На днях обязательно напишу.
Будет и jpg и png, ждите fellow
#6 написал: Влад (29 апреля 2009 21:52)
а ничего так, оперативненько отвечаете, респект. потрясу бубном для благословления на подвиг)
#7 написал: admin (1 мая 2009 03:52)
Влад, большое спасибо вам за комментарии и благословение) В общем, к 3-м часам ночи всё-таки "родил" статью wink
Лежит здесь.
За опечатки строго не судите, завтра буду исправлять =)
#8 написал: music (10 июня 2009 18:04)
admin, статья супер, спс са сее чудо wink

Влад,
можешь(те) обьяснить что за маски? ато тоже границам нет предела...
#9 написал: admin (10 июня 2009 18:10)
Над слоем с мувиком pole находится слой-маска. так вот, для того, чтобы изменить площадь холста для рисования недостаточно просто поменять размер pole, нужно также изменить размер маски.
#10 написал: music (10 июня 2009 18:23)
admin, спасибо, нашёл, сделал.
#11 написал: Rolik (22 июня 2009 21:26)
Простите, а как из этого примера сделать разукрашку, я пытаюсь подставить картинку на задний план, но она все равно остается на переднем. Может вопрос покажется глупым, но я делетант во Flash
#12 написал: admin (22 июня 2009 21:31)
Странно.. Создайте ещё один слой, ниже всех, и на нём размещайте картинку.
#13 написал: bars (24 июня 2009 09:25)
господа гуру- подскажите как под холст для рисования подложить картинку и при том еще и менять его из actionscript. я во флеш - ламер:)

Уважаемые администраторы. Можно Вам заказать доработку рисовалки? Доработка пустяковая.заплачу 1000.
#14 написал: admin (24 июня 2009 13:22)
Можно, смотрите почту
#15 написал: kirikaman (8 июля 2009 12:04)
А почему я зарегестрироватся не могу???
#16 написал: admin (8 июля 2009 13:47)
kirikaman, здесь отключена регистрация.
а зачем Вам регистрироваться?
Скоро планирую поставить здесь ещё и форум, вот там уже и регистрируйтесь smile
#17 написал: admin (11 июля 2009 09:46)
Видимо, сбои на сервисе letitbit.net
Отправил рисовалку с исходником на почту
#18 написал: ILUT (22 августа 2009 02:12)
Доброе время суток. К сожалению у меня не скачивается исходник, пишет что файл не найден. Вышлите мне, пожалуйста, рисовалку на мыло. Буду очень признателен)
#19 написал: admin (22 августа 2009 02:16)
Отправил
#20 написал: Кирилл (23 августа 2009 13:48)
Отправьте мне пожалуйста тоже=)
#21 написал: Илья (15 ноября 2009 22:13)
А что означает кнопка sss?
#22 написал: admin (15 ноября 2009 22:16)
Видимо, какая-то кнопка для тестирования, которой в финальной версии нет smile Спасибо что заметили
#23 написал: Phantom (18 декабря 2009 10:47)
Возможно, кто-то уже спрашивал.

Почему изначально используется красный цвет, но в палитре его нет?
#24 написал: admin (18 декабря 2009 13:21)
Разве в палитре нет этого цвета?
Может поставить по дефолту другой цвет (чёрный, например) и заменить палитру.
#25 написал: Rafer (23 января 2010 07:14)
Дядька админ скинь на почту файлик плиз smile

И вопрос если есть желание немного заработать напиши поставим мне ее на сайт я в долгу не останусь.

Спасибо.
#26 написал: Владимир (24 января 2010 21:08)
Здравствуйте, все класно написано. Большое спасибо. Меня интересует следующие вопросы. Чем отличаеться ActionScript2 от ActionScript3? что за тип данных в виде звездочки * ? И еще, может кто то доделать мою рисовалку что бы она сохраняла изображение в файл за деньги? Нужно что бы программа отправляла PHP скрипту готовый PNG файл как это делает рисовалка вконтакте. Декомпилировал Flash графити с контакта но они не компилируються. Думаю вы поймете этот дикомпилированый код. Еще хотелось сделать что бы при отмене, отдельный слой плавно пропадал. Там это реализовано с помощью "Tweener.addTween". Пишите на vladimirok5959@gmail.com, или на ICQ 433419090. Всем спасибо!
#27 написал: Сева (9 февраля 2010 06:29)
Слухай нк класно! А как добовлять элементы, ско не мучился ошибки кампилятора sad
#28 написал: Валера (4 марта 2010 19:23)
А как сделать чтобы приложение можно было загружать со стены???
#29 написал: admin (4 марта 2010 19:28)
Какое приложение и что значит "со стены"?
#30 написал: валерко (5 марта 2010 16:33)
Ну вот это приложение чтобы можно было отправлять друзьям графити. Как это сделать???
Добавление комментария