Среда, 24.04.2024, 04:24Главная | Регистрация | Вход

Меню сайта

Точное время

Опрос Сайта

Добавить уроки по Photoshop?
Всего ответов: 22

Поиск

Делаем детские разукрашки - Форум
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: Smitg9  
Форум » Флеш » Flash програмирование » Делаем детские разукрашки (Лёгкий урок)
Делаем детские разукрашки
Smitg9Дата: Четверг, 24.12.2009, 23:30 | Сообщение # 1
Подполковник
Группа: Администраторы
Сообщений: 109
Награды: 1
Репутация: 51
Статус: Offline
И снова я рад приветствовать всех, кому не безразличен 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);
};

Наконец-то, после долгих мытарств, вот такая вот у нас получилась игрушка

Исходник тут: Присоединённый файл
gnomik.rar ( 23.02к )

ЖЕЛАЮ удачи!

 
Smitg9Дата: Четверг, 24.12.2009, 23:42 | Сообщение # 2
Подполковник
Группа: Администраторы
Сообщений: 109
Награды: 1
Репутация: 51
Статус: Offline
Если кому-то что-то непонятно в коде обращайтесь помогоу чем смогу smile
 
ГостьДата: Четверг, 05.05.2011, 20:36 | Сообщение # 3
Группа: Гости





Пиздить чужие работы без копирайтов и выдавать их за свои, много мозгов не надо. Правда?
 
Smitg9Дата: Воскресенье, 08.05.2011, 20:47 | Сообщение # 4
Группа: Гости





а кто сказал, что я выдаю их за свои?
где-то написана что я автор или типа того???
ну подумаешь копирайт не поставил!
 
ГостьДата: Вторник, 19.06.2012, 21:13 | Сообщение # 5
Группа: Гости





пыджений урок красиво smile
 
askutov123Дата: Пятница, 30.09.2016, 23:15 | Сообщение # 6
Рядовой
Группа: Посвящонные
Сообщений: 1
Награды: 0
Репутация: 0
Статус: Offline
Раскрути свой сайт, здесь бесплатные посетители и показы: http://livesurf.ru/promo/242281
 
Форум » Флеш » Flash програмирование » Делаем детские разукрашки (Лёгкий урок)
  • Страница 1 из 1
  • 1
Поиск:

portofollo.at.ua | Хостинг от uCoz