И снова я рад приветствовать всех, кому не безразличен Flash! Я думаю, нет человека, кому в детстве не нравилось разукрашивать цветными карандашами или фломастерами различные картинки. Весьма занимательный процесс. Именно созданием детских интерактивных разукрашек мы сегодня и займемся.... Для урока нам потребуется: собственно картинка, которую будем разукрашивать, небольшое знания AS2 и пару часов времени. Итак, если все из вышеназванного у нас есть, то приступим! Вначале немного порисуем... берем исходную картинку (я выбрал Гномика - милого Диснеевского персонажа, знакомого, думаю, всем детям)
импортируем ее во Flash и делаем на ее основании свою картинку в векторе (кто не знает как перерисовать картинку смотрим урок) вот что у меня получилось:
сама исходная картинка нам в игре не нужна, поэтому мы ее благополучно удаляем из клипа и библиотеки, а нарисованное векторное изображение конвертируем символ (F8) и создаем Movie Clip с именем GNOM ВАЖНО! рисунок не должен содержать заливок, только контур! Это наш основной рисунок, на основании которого мы и делаем игрушку... Теперь нам надо "разрезать" имеющийся рисунок на составные части, которые и будут в дальнейшем разукрашиваться. Для каждой "запчасти" нашего гнома создаем отдельный символ-клип (Ctrl+F8) и соответственно называем (чтобы не запутаться). Я "раскромсал" рисунок на 11 частей (чем больше частей рисунка мы создаем, тем более трудоемким становится процесс создания игры, зато более интересным результат) Итак, мы создали 11 клипов с именами фрагментов рисунка (telo, kepka, noc, kostum и т.д.). Теперь в каждый созданный клип копируем нашего гномика, а затем отсекаем все лишнее. Если проще то в клипе kepka от рисунка оставляем только кепку гнома, а все остальное безжалостно удаляем, в клипе telo оставляем только тело гнома и т.д. Думаю, принцип понятен... Полученную картинку заливаем белым цветом (FFFFFF) должно получится так:
Страшноватенько получилось? Ничего, скоро все изменится! Итак, у нас уже есть сам гном и 11 его составляющих. Теперь нужны краски, которыми будем рисовать. Опять таки создаем новый символ-клип (Ctrl+F8) в котором не мудрствуя лукаво инструментом Oval Tool (O) рисуем простой круг (или овал или кто что захочет...) с белой заливкой внутри. Это и будут наши краски. А как же рисовать без кисточки??? Опять жмем Ctrl+F8 и создаем клип kist, внутри которого создаем 2 слоя(Layer). В слое 2 рисуем ручку , а в слое 1 - кисточку.
В 11 фрейме создаем ключевые кадры на уровне 1 и 2 ВАЖНО! Фреймов сделать можно и больше все будет зависеть от того, сколько красок у нас будет, я остановился на 10 + 1 исходный белый цвет заливки. На 1 уровне в каждом фрейме также добавляем ключевые кадры. Делаем разную заливку кисточек в 1 слое (на 1 фрейме заливка белая, а на остальных - согласно красок, которыми будем рисовать, коды цветов лучше переписать сразу, чтобы не запутаться в дальнейшем). В каждом фрейме в 1 слое открываем панель Action (F9) и пишем:
Code
stop();
Ну вот, почти закончили. Теперь у нас есть гном, 12 фрагментов, кисть и шаблон для красок. В Timeline начинаем собирать этот конструктор воедино. Создаем 15 слоев и размещаем наши творения: Верхний слой Action - там будем творить код Чуть ниже - будет располагаться гном Еще ниже фрагменты гнома, при вставке клипов в Свойствах (Properties) не забываем давать им имена!!!! (у меня они такие: kepka, telo, kostum, tapki, latka1, latka2, pygovka1, pygovka2, noc, remen, jazik
клипы вставляем аккуратно по контуру основного рисунка. Желательно увеличит масштаб, неточность вставки будет видна в игре и портить впечатление!
В самом низу слой с кисточкой. Кисточку выносим за границу клипа и называем ее kist.
И самый последний слой - краски. Тут подробнее, ведь мы создали только символ... В слой переносим 10 созданных символов (по количеству красок), в Свойствах (Properties) каждому даем имя (k1, k2.....k10) и определяем их заливку цветом (согласно цветов, которыми мы закрашивали кисточку, помните какими?).
Красиво располагаем краски на поле. Добавляем любые другие элементы дизайна на Ваше усмотрение У меня получилось так
Ну вот и все, с рисованием закончили, игра на 90% готова, самое тяжелое позади. Осталось только "оживить" наше творение и заставить приносить радость детям и взрослым! На верхнем слое открываем панель Action (F9) и пишем волшебный код:
CODE
Code
var col = 0xFFFFFF;//переменная, которая будет содержать //значение выбранного цвета. По умолчанию - белый var my_mc = null;//переменная, которой будет присваиваться имя клипа //создаем функцию, которая закрашивает выбранный клип в необходимый цвет var my_col = function () { iColor = new Color(my_mc); iColor.setRGB(col); }; //определяем какой цвет выбран для заливки k1.onPress = function() { col = 0xFF0000; kist.gotoAndStop(2); }; k2.onPress = function() { col = 0x00FF00; kist.gotoAndStop(3); }; k3.onPress = function() { col = 0x33CCCC; kist.gotoAndStop(4); }; k4.onPress = function() { col = 0x6600CC; kist.gotoAndStop(5); }; k5.onPress = function() { col = 0xFFDD75; kist.gotoAndStop(6); }; k6.onPress = function() { col = 0x996600; kist.gotoAndStop(7); }; k7.onPress = function() { col = 0xFFFF00; kist.gotoAndStop(8); }; k8.onPress = function() { col = 0xFEAC76; kist.gotoAndStop(9); }; k9.onPress = function() { col = 0x99FF33; kist.gotoAndStop(10); }; k10.onPress = function() { col = 0x660033; kist.gotoAndStop(11); }; //нажатием на клип закрашиваем его выбранным цветом kepka.onPress = function() { my_mc = kepka; my_col(); }; telo.onPress = function() { my_mc = telo; my_col(); }; kostum.onPress = function() { my_mc = kostum; my_col(); }; tapki.onPress = function() { my_mc = tapki; my_col(); }; latka1.onPress = function() { my_mc = latka1; my_col(); }; latka2.onPress = function() { my_mc = latka2; my_col(); }; pygovka1.onPress = function() { my_mc = pygovka1; my_col(); }; pygovka2.onPress = function() { my_mc = pygovka2; my_col(); }; noc.onPress = function() { my_mc = noc; my_col(); }; remen.onPress = function() { my_mc = remen; my_col(); }; jazik.onPress = function() { my_mc = jazik; my_col(); }; //делаем свой курсор kist.startDrag("true"); Mouse.hide(); //создаем свой вариант разукрашивания (не обязательно) knopa.onPress = function() { gnom.gotoAndStop(2); }; knopa.onRelease = function() { gnom.gotoAndStop(1); };
Наконец-то, после долгих мытарств, вот такая вот у нас получилась игрушка