WebDix
Это веб-диз, детка!Выпуск #8 | 11 сентября 2006
Введение
Веб-дизайн
Раскрутка
Веб-заработок
Программирование
Photoshop CS
Flash
RusForumz
Новости
Интересности
Быстрый переход
WebDix › Выпуск #8 › Flash

Программная раскраска мувиклипов

Автор: Nikitar
http://rusforumz.com

Сегодня мы займёмся программной раскраской мувиклипов. Для начала что это такое? Все видели силуеты. И знают что они представляют из себя. Это полностью зарисованная область каким-то цветом. конечно, можно взять в Фотошопе фигуру, зарисовать её и сделать силует. Но мы будем делать это в флэше. Хотя вначале надо будет в Фотошоп залезть.

1. Открываем Photoshop. B импортируем какую-нибудь фигуру. Естественно, желательно человека. Я, например, возьму многострадальную фигуру Шакиры (из вот этого урока)




2. Волшебной палочкой удаляем белый фон и сохраняем как png с прозрачностью. Не забудьте удалить весь фон, чтобы осталась только фигура.



3. Теперь открываем Macromedia Flash. У меня скриншоты сделаны в 8-й версии, но в более ранних версиях всё устроено также. Создаём новый документ. Делаем fps 25. Вставляем нашу фигуру (File (Файл) - Import (Импорт)). Размеры можно подогнать под фигуру. Фигуру выделяем, жмём F8, выбираем мувиклип и жмём ОК. В instance name (имя экземпляра) пишем sl

4. Делаем новый слой, выше этого с картинкой. И создаём новое текстовое поле. ДЛя этого воспользуемся инструментом Text Tool (Текст). Выберите этот инструмент и кликните по рабочей области, чтобы создать текстовое поле. Посмотрите внизу (в ролике), в какое место я поставил текстовое поле. Внизу, "в ногах".

5. Итак, вы сделали текстовое поле, и у вас ещё выбран инструмент Text Tool. Внизу в панели Properties (Свойства) поставьте такие же значения как и на скриншоте ниже. То есть
Тип поля: Input
Шрифт: Любой
Var (Переменная): fds
Maximum Characters (Максимальное количество символов): 6




6. Теперь для чего это надо. Это текстовое поле ввода, в который нужно ввести цвет, на который поменяется символ сразу же. Теперь давайте введём весь программный код, который будет за это отвечать. Для этого создайте ещё один слой и в кадр будем вставлять код. Но сначала объясню. Сделаем так, чтобы каждый раз силует окрашивался в разный цвет (если вы заново откроете эту страницу, то вы увидите, что фигура на ролике внизу страницы поменяла цвет). Из чего состоит код цвета? Из цифр и букв, причём букв всего 6: A, B, C, D, E, F. Всё это я уже учёл в коде, и только буду давать пояснения

Итак код, который надо вставить в кадр.

ActionScriptCode

//Начальные установки цвета - случайный цвет.

fds=""//Сначала цвет не определён, но переменная уже создана
myColor = new Color(sl);//Создаём новый объект Color, который привязан к мувиклипу sl
myColor.setRGB("0x"+fds);
for(i=0;i<=5;i++){
_root["letter"+i]=random(16);//Случайное число
switch(_root["letter"+i]){
  case 10:
      _root["letter"+i]="A";
     break;
   case 11:
     _root["letter"+i]="B";
     break;
   case 12:
     _root["letter"+i]="C";
     break;
   case 13:
     _root["letter"+i]="D";
     break;
   case 14:
     _root["letter"+i]="E";
     break;
   case 15:
     _root["letter"+i]="F";
     break;
   default:
     _root["letter"+i]=_root["letter"+i];
     break;
}
fds+=_root["letter"+i]//Полученную цифру, которую преобразовали в букву или оставили цифрой добавляем к коду окончательного цвета.
}

// Эта часть отвечает за изменение кода
this.onEnterFrame=function(){//Действие, которое описано ниже, производится со скоростью 25 кадров в секунду.

   myColor = new Color(sl);
   myColor.setRGB("0x"+fds);// Проверка текстового поля и присвоение его значения цвету силуета.
}


7. Вот весь код, в принципе ничего сложного. Первая часть кода отвечает за случайный цвет, который сам назначается, когда человек открывает только ролик, а вторая часть - за изменение кода цвета. Если хотите, то можете текстовое поле убрать и тогда у вас просто будет силует, который меняет при каждом вашем заходе на страницу свой цвет.

8. Теперь только Ctrl+Enter и проверяем ролик, в самом начале должен быть случайный цвет, а его код в текстовом поле под фигурой. Ниже вы видите, что получилось у меня. Если у вас какие-то проблемы, или что-то не получилось, то спрашивайте у меня на Flash-форуме RusForumz.com




« Делаем игру "Куклы"СодержаниеНовости »
Выпуск подготовили: Exact, Nikitar, Psi, Alisha |  Copyright RusForumz.com 2006
Перепечатка материалов возможна только с письменного разрешения администрации
Журнал WebDix («Это веб-диз, детка!»), 2006-2008.
Сайт журнала: webdix.ru · форум: rusforumz.com
Об архиве
Рейтинг Old-Web