Компакт диск (Aсtion Script3) -> Demiart - Photoshop Форум

Все проекты Демиарта ¬ · Правила Форума · Путеводитель Новичка · Есть Вопрос? | Поиск ¬ · Участники · Дневники ¬ · Гильдии ¬ · Чат · Игры · Подарки · Галерея

Как же я рад тебя видеть, ( Выход ) | Настройки · Закладки · Дневник · Дискуссии · Помощник

• Demiart - Photoshop Форум » Flash » Уроки Flash

Новости

- 07.02 Требуются модераторы
- 07.02 warm wind - победитель конкурса «Вы на Пандоре!»
- 05.02 Голосование «Города»
- 22.01 Добавлено 100 новых flash-игр
- 20.01 Фото-конкурс «Эмоции»
- 19.01 Новый тег «MEDIA»
- 10.01 Открыт набор на курс «Photoshop для начинающих»
- 28.12 Дискуссии: Онлайн-оповещения о новых сообщениях

Горячие темы

- 58 «Портреты девушек. Для всех. 7» →
- 44 «Сайт компании Muscle Drive» →
- 33 «Пейзажи и природа 4» →
- 28 «Сицилия... Италия... Разное...» →
- 28 «Прости... Абрамс...» →
- 24 «лиса и колобок ))» →
- 22 «Выбор фотоаппарата» →
- 19 «Муми-Сумерки» →
- 19 «Визитка - прошу Вашего мнения» →
- 18 «"Обломи соседа" 2» →

Лучшие темы

- 84 «Муми-Сумерки» →
- 71 «лиса и колобок ))» →
- 67 «Узоры на пластике» →
- 66 «Прости... Абрамс...» →
- 66 «Дым осеннего костра» →
- 62 «Где-то на Пандоре» →
- 59 «Ночной охотник. Оцелот.» →
- 33 «Белые цветы» →
- 26 «Рисуем «Сладкая как леденец» …» →
- 24 «Чудовище на охоте» →

Кармовые записи

- 133 «Простенько» © Mewmew
- 105 «Плакаты кистью и красками» © SDofB
- 66 «Снова про ГМО» © Sandra Clark
- 65 «Ррабо-ота...» © Kettana
- 63 «Вязанная запись № 2» © ямі ямі ямі ямі
- 62 «Все я кодируюсь, начинаю нову…» © женеч
- 55 «Перлы начальства» © User 8909
- 54 «Деревья Селебры» © Magus Verus
- 54 «Сказки детства» © Iced Wings
- 50 «Твиттер» © Мания Величия

Правила раздела "Уроки Flash"
1. В данной ветке форума запрещено создавать темы. Если вы хотите выложить свой собственный урок или перевод - это можно сделать здесь.
2. Запрещен флуд (чрезмерное увлечение публикацией собственных картинок полученных в результатате урока) и разговоры не по теме.
3. + остальные правила форума

» Компакт диск (Aсtion Script3), урок | Просмотров: 3786 | спецэффекты, средние
Подписаться на дискуссию · Уведомлять по e-mail · Версия для печати Ищем в теме:
Рейтинг темы: 0.

kedicik | Пост №1 * 3 Сентября 2009, 19:19

online
Рычащий!
Группа: Мастера
Сообщений: 3 254
Пользователь № 60 948
Возраст: 31
Регистрация: 29.11.2007
Проживает: Москва
Дневник: 335 записей
Награды:
Репутация: 405° [ + | — ]
Подарков: 104
Дэмани: 4303 D

Компакт диск (Aсtion Script3)
Предлагаю вам мой урок по созданию компакт диска.
Вот что мы должны получить
Этот урок предназначен для начинающих.
Он написан на Action Script3 и научит вас
1) рисовать круги с градиентной заливкой
2) размещать символы по кругу заданного радиуса
3) пользоваться твинами для поворота и тонирования символов с использованием TweenLite
Идея этого урока для отрисовки компакт диска была взята здесь
Уроки Adobe Illustrator
Итак начнем.
Настройка окружения
Cоздайте документ Flash (Ation Script3) размером 500х500.
Цвет документа я взяла черный.
Для того, чтобы пользоваться TweenLite, поместите папку gs (которую вы скачали) в тот же каталог, где находится ваш файл fla.
Это важно!
Или же настройте ваш документ следующим образом.
В параметрах публикации документа на вкладке Flash по кнопке Параметры высветите следующее окно (см. картинку ниже), в котором введите путь к папке с TweenLite
Отрисовка кругов с градиентной заливкой. Отрисовка середины диска
Отрисовка компакт диска будет происходить полностью программно, а не вручную. Здесь я расскажу о том, какой алгоритм я использовала при отрисовке. Вручную вам этого делать не надо.)))
1) Для того, чтобы получить красивый компакт-диск, создадим круг с градиентной заливкой. Мы должны взять такой градиент, чтобы у нас получилась только вертикальная полоска по диаметру этого круга. То есть слева и справа нам нужен белый цвет с прозрачностью=0, чтобы его не было видно, а посередине будет другой цвет заданной прозрачности. Таким образом мы должны получить цветную размытую полоску. Повернем ее на -15 градусов.
Таким образом мы создадим несколько полосок с разными цветами и разной прозрачностью. И будем поворачивать каждую относительно предыдущей полоски на -15 градусов. Накладывая друг на друга такие круги, получим вот что
2) Отрисуем ободок диска и серединку диска. Отрисовка производится программно.
Создание надписи по кругу
Надпись на диске мы разместим тоже с помощью скрипта. Но предварительно создадим мувиклип для одной буквы, который будем использовать в скрипте.
1) На сцене создадим динамическое текстовое поле со следующими свойствами, которые показаны на картинке ниже.
Укажите инстанс имя для текстового поля - txt и внедрите шрифт по кнопке
2) Конвертируйте это текстовое поле в муви клип. Для этого выделите поле и по правой кнопке мыши из появившегося меню выберите Convert To Symbol.
3) В появившемся окне выберите тип Movie Clip, введите имя мувиклипа letter. Точку регистрации установите в центре. Отметьте галочку Export to Action Script и Export in Frame1. Дайте имя классу letter. Нажмите OK. После этого вы получите сообщение о том, что такого класса нет. Не волнуйтесь. Он будет создан динамически.
4) Удалите созданный символ со сцены. Он будет у вас в библиотеке. Далее в скрипте мы будем использовать ссылку на этот символ. Этот символ будет использоваться для одной буквы. Мы расположим текст из таких символов по кругу.
Пишем скрипт
Мы находимся на основной сцене. Напишем скрипт в первый кадр слоя на cцене.
Этот скрипт приводится ниже и хорошо откомментирован.
CODE
// Импорт необходимых классов
import flash.geom.*;
import flash.display.*;
import flash.display.Sprite;
//Импортируем TweenLite
import gs.*;
import gs.easing.*;
import gs.TweenLite;
//текст, который будем выводить на диске
var record:String="demiart.ru kedicik";
//занесем каждый символ-букву в массив
var results:Array = record.split("");
//объявляем массив цветов для раскраски диска
//все цвета были взяты из соответствующего урока на Демиарте по Иллюстратору
var masColors:Array= [ 0xE0E7B3,0xCAB3BF,0xD1BDC0,0xD1ECC1,0x90E7C8,0x96DFEE,0xC1272D,0xFFFF00,0x8CE6B0
,0x8Cc63f,0xFF00FF,0x006837,0x7091A3];
//объявляем массив прозрачностей для каждого цвета
//все прозрачности были взяты из соответствующего урока на Демиарте по Иллюстратору
var masTrans:Array=[0.58,0.58,0.58,0.58,0.58,0.58,0.37,0.37,0.58,0.37,0.37,0.37,0.58];
//создадим мувик, в котором будем строить наш диск
var disk:MovieClip=new MovieClip();
//создадим мувик - кружок - серединку
var smallDisk:MovieClip=new MovieClip();
//добавим мувик-диск на сцену
addChild(disk);
//поместим диск в середине сцены
disk.x=stage.stageWidth/2;
disk.y=stage.stageHeight/2;
//радиус диска
var radius:uint = 200;
//внутренний радиус для кольца-бублика (обод диска)
var radius2:uint = 170;
//угол поворота цветной полоски (круга с градиентной заливкой) на диске
var degree:int=-15;
//в цикле строим диск, состоящий из цветных полосок, повернутых, каждая на свой угол, относительно центра диска
for (var i:uint=0; i<masColors.length; i++) {
if (i==12) {
degree=0;
} else {
//рисуем цветную полоску со своей прозрачностью и поворачиваем ее на свой угол
doDrawCircleColor(masColors[i],masTrans[i],radius,degree*(i+1));
}
}
//рисуем ободок диска поверх цветного диска
doDrawBublic(radius,radius2);
//рисуем серединку диска
doDrawBorder(75,1,0);
doDrawFill(0,70);
doDrawFill(0xCCCCCC,52);
doDrawBorder(48,1,0);
doDrawFill(0xDEDEDE,44);
doDrawBorder(38,1,0xCCCCCC);
doDrawFill(0,28);
//размещаем буквы по кругу
setLetters();
//функция для отрисовки ободка диска
//рисуем бублик с заданными радиусами и закрашиваем серым цветом с прозрачностью 0.21
function doDrawBublic(radius:uint,radius2:uint):void {
var child:Shape = new Shape();
child.graphics.beginFill(0xB2B2B2,0.21);
child.graphics.drawCircle(0, 0, radius);
child.graphics.drawCircle(0, 0, radius2);
child.graphics.endFill();
//добавляем бублик к диску
disk.addChild(child);
}
//рисуем окружность с заданным радиусом, толщиной обводки и заданным цветом
function doDrawBorder(radius:Number,borderSize:Number,borderColor:uint):void {
var child:Shape = new Shape();
child.graphics.lineStyle(borderSize, borderColor);
child.graphics.drawCircle(0, 0, radius);
//добавляем окружность к мувику smallDisk
smallDisk.addChild(child);
}
//рисуем круг с заданным радиусом и заданным цветом
function doDrawFill(currColor:uint,radius:Number):void {
var child:Shape = new Shape();
child.graphics.beginFill(currColor,1);
child.graphics.drawCircle(0, 0, radius);
child.graphics.endFill();
//добавляем круг к мувику smallDisk
smallDisk.addChild(child);
}
//функция отрисовки цветной полоски
//рисуем круг с заданным радиусом, заданным цветом, прозрачностью и поворачиваем его на заданным угол
function doDrawCircleColor(currColor:uint,trans:Number,radius:uint,degree:int):void {
//создаем новый шейп
var child:Shape = new Shape();
//берем линейный градиент
var fillType:String = GradientType.LINEAR;
//берем цвета для градиента : белый и заданный цвет currColor
var colors:Array = [0xFFFFFF, currColor];
//прозрачности для цветов
//для белого - прозрачность = 0 (белый виден не будет)
//для цвета currColor - прозрачность - входной параметр (trans)
var alphas:Array = [0, trans];
//массив проц содержания, откуда начинается цвет
// для белого цвета я взяла - 127 (чем больше это значение, тем уже будет цветная полоска)
// для цвета currColor возьмем 255
var ratios:Array = [127, 255];
// объявляем новую матрицу
var matr:Matrix = new Matrix();
matr.createGradientBox(radius, radius, 0,-radius,0);
//берем REFLECT для симметрии
var spreadMethod:String = SpreadMethod.REFLECT;
child.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);
//рисуем круг с градиентной заливкой
child.graphics.drawCircle(0, 0, radius);
//поворачиваем круг
child.rotation=degree;
//добавляем круг в мувик disk
disk.addChild(child);
}
// займемся поворотом диска и его тонированием
//создаем таймер
//количество генерируемых событий =2
var timer = new Timer(4000,2);
//добавляем слушатель таймера
timer.addEventListener(TimerEvent.TIMER, animateColor);
//добавляем слушатель завершения (остановки) таймера
timer.addEventListener(TimerEvent.TIMER_COMPLETE,again);
//запуск таймера
timer.start();
//функция выполняется после того, как таймер остановился
//число сгенерированных событий достигло 2
function again(e:Event):void {
//останавливаем таймер и возвращаем свойство currentCount в 0
timer.reset();
//запускаем таймер
timer.start();
}
//функция, которая будет вызываться периодически на событие Timer
function animateColor(e:TimerEvent):void {
//угол поворота диска
var angle:uint;
//для поворота берем случайный угол
angle=30+Math.random()*90;
//цвет тона
var currColor:uint;
//если событие таймера генерируется второй раз, задаем цвет белый
if (timer.currentCount==2) {
currColor=0xFFFFFF;
//применяем твин к мувику - изменяем тон
//берем amount=0 (насыщенность=0) - мувик будет не тонирован
TweenMax.to(disk, 4, {colorMatrixFilter:{colorize:currColor, amount:0}});
//поворот
TweenLite.to(disk, 4, {rotation:angle});
}
//если событие таймера генерируется первый раз, задаем цвет случайным образом
else {
currColor=Math.random()*0xFFFFFF;
//применяем твин к мувику - изменяем тон. Параметр amount отвечает за насыщенность тона
//берем amount=0.8 (вы можете поиграться с этим параметром)
TweenMax.to(disk, 4, {colorMatrixFilter:{colorize:currColor, amount:0.8}});
//поворот
TweenLite.to(disk, 4, {rotation:angle});
}
}
//Располагаем буквы по кругу заданного радиуса через 15 градусов каждая
function setLetters():void {
var mc:MovieClip=new MovieClip();//объявляем мувик-контейнер для букв и серединки диска
//добавляем в контейнер наш маленький круг
mc.addChild(smallDisk);
//теперь работаем с буквами
//цикл по всем элементам в массиве
for (var i=0; i<results.length; i++) {
//создаем новый мувик класса letter (вспомним, что мы создали такой класс)
var myLet:letter = new letter();
//берем букву из массива и устанавливаем для нее текст из массива букв
myLet.txt.text=results[i];
//буквы по окружности через 15 градусов
myLet.x=62*Math.cos(i*Math.PI/12);
myLet.y=62*Math.sin(i*Math.PI/12);
//разворачиваем букву по касательной к кругу
myLet.rotation=15*i+90;
mc.addChild(myLet);//добавляем букву в контейнер-мувик
}
//теперь мувик mc сделаем битмапом
var m:Matrix = new Matrix();
m.tx=mc.width/2;
m.ty=mc.height/2;
//создадим объект BitmapData
var bd:BitmapData=new BitmapData(mc.width, mc.height,true,0);
//копируем мувик в битмапдату
bd.draw(mc,m);
//передаем объект в конструктор класса Bitmap
var bmp:Bitmap=new Bitmap(bd);
//точка регистрации в центре
bmp.x=-bmp.width/2;
bmp.y=-bmp.height/2;
//сглаживание
bmp.smoothing=true;
//добавим к диску наш битмап - круг с буквами
disk.addChild(bmp);
}
Надеюсь, урок вам понравился.
Автор Я
Это сообщение отредактировал kedicik - 25 Октября 2009, 17:16
Присоединённые файлы
myKompakt.rar ( 8.74к ) Кол-во скачиваний: 169
--------------------
Уроки
Уроки AS3

ключевые слова: компакт диск Photoshop, demiart диск, отрисовка, illustrator компакт диск, картинки компакт-дисков, програмно заливку, диск, timer acrtion script 3, точка регистрации addchild rotation, игры астион

| · ·

Google | Чтобы отключить показ этого рекламного блока зарегистрируйтесь на форуме и переведитесь в группу Хранители
| · ·

MOHCTEP | Пост №2 * 3 Сентября 2009, 20:46 (спустя 1 час 27 мин.)

online
Статский советник
Группа: Мастера
Сообщений: 4 966
Пользователь № 9 953
Возраст: 47
Регистрация: 29.05.2006
Проживает: Эстония
Дневник: 32 записи
Награды:
Репутация: 344° [ + | — ]
Подарков: 77
Дэмани: 2083 D

Вай! Наконец-то!
Поздравляю с дебютом, автор!
Тема в уроках.
--------------------
Мои уроки

| · ·

kedicik | Пост №3 * 3 Сентября 2009, 20:47 (спустя 50 сек.)

online
Рычащий!
Группа: Мастера
Сообщений: 3 254
Пользователь № 60 948
Возраст: 31
Регистрация: 29.11.2007
Проживает: Москва
Дневник: 335 записей
Награды:
Репутация: 405° [ + | — ]
Подарков: 104
Дэмани: 4303 D

MOHCTEP, свершилось Спасибо!
--------------------
Уроки
Уроки AS3

| · ·

EVIA | Пост №4 * 7 Сентября 2009, 14:51 (спустя 3 дня)

offline
неугомонный
Группа: Хранители
Гильдия: Девичник
Сообщений: 201
Пользователь № 431 821
Возраст: 21
Регистрация: 18.02.2009
Проживает: Москва
Дневник: 3 записи
Репутация: 7° [ + | — ]
Подарков: 1
Дэмани: 1210 D

Урок мне не понятен. Почему в исходнике только 2 слоя (скрипт и пустой)? А где отрисованный компакт диск? Куда делся? Я все слои с половинками собрала и сохранила как муви-клип. Сверху сделала слой с AS и закинула туда скрипты. Не работает, конечно же)) Где и чего нужно поменять, чтобы заработало?
--------------------
Опыт - это такая вещь, которая появляется сразу после того, как она была нужна.

| · · Авторитетность комментария: 0

MOHCTEP | Пост №5 * 7 Сентября 2009, 17:23 (спустя 2 часа 32 мин.)

online
Статский советник
Группа: Мастера
Сообщений: 4 966
Пользователь № 9 953
Возраст: 47
Регистрация: 29.05.2006
Проживает: Эстония
Дневник: 32 записи
Награды:
Репутация: 344° [ + | — ]
Подарков: 77
Дэмани: 2083 D

EVIA, Если непонятно, прочтите урок повторно. Но не пытайтесь искать того, чего и в помине нет.
Цитирую (kedicik)
Отрисовка компакт диска будет происходить полностью программно, а не вручную. Здесь я расскажу о том, какой алгоритм я использовала при отрисовке. Вручную вам этого делать не надо.)))
--------------------
Мои уроки

| · ·

Lemonadnый_Jo | Пост №6 * 5 Октября 2009, 10:16 (спустя 27 дней)

offline
шептун
Группа: Размышляющие
Сообщений: 19
Пользователь № 544 123
Возраст: 64
Регистрация: 12.04.2009
Проживает: Эгильсштадир
Репутация: 1° [ + | — ]
Дэмани: 26 D

Тут какая-то глюка в коде:
//все цвета были взяты из соответствующего урока на Демиарте по Иллюстратору
var masColors: Array=& #91;0xE0E7B3,0xCAB3BF,0xD1BDC0,0xD1ECC1,0x90E7C8,0x96DFEE,0xC1272D,0xFFFF00,0x8C
E6B0,0x8Cc63f,0xFF00FF,0x006837,0x7091A3];
А ещё было бы здорово добавить пару комментариев по всем диаметрам и радиусам, чтобы можно было сделать диск меньшего размера.
И ешё подсказку, как этот диск клонировать )
Это сообщение отредактировал Lemonadnый_Jo - 5 Октября 2009, 11:09

| · · Авторитетность комментария: 0

MOHCTEP | Пост №7 * 5 Октября 2009, 13:48 (спустя 3 часа 32 мин.)

online
Статский советник
Группа: Мастера
Сообщений: 4 966
Пользователь № 9 953
Возраст: 47
Регистрация: 29.05.2006
Проживает: Эстония
Дневник: 32 записи
Награды:
Репутация: 344° [ + | — ]
Подарков: 77
Дэмани: 2083 D

Поправлено
--------------------
Мои уроки

| · ·

kedicik | Пост №8 * 5 Октября 2009, 20:32 (спустя 6 часов 43 мин.)

online
Рычащий!
Группа: Мастера
Сообщений: 3 254
Пользователь № 60 948
Возраст: 31
Регистрация: 29.11.2007
Проживает: Москва
Дневник: 335 записей
Награды:
Репутация: 405° [ + | — ]
Подарков: 104
Дэмани: 4303 D

МОНСТЕР спасибо
Цитирую (Lemonadnый_Jo)
пару комментариев по всем диаметрам и радиусам, чтобы можно было сделать диск меньшего размера.
все радиусы были взяты приблизительно из соответствующего урока по Иллюстратору.
Если бы Вы составили масштабные коэффициенты между радиусами на основании этого урока, было бы здорово.
Тогда бы я предоставила возможность клонирования с разными радиусами.
Подсказка - сделать класс для диска.
--------------------
Уроки
Уроки AS3

| · ·

Lemonadnый_Jo | Пост №9 * 6 Октября 2009, 10:10 (спустя 13 часов 38 мин.)

offline
шептун
Группа: Размышляющие
Сообщений: 19
Пользователь № 544 123
Возраст: 64
Регистрация: 12.04.2009
Проживает: Эгильсштадир
Репутация: 1° [ + | — ]
Дэмани: 26 D

спс, буду шаманить.

| · · Авторитетность комментария: 0

» Быстрый Ответ

Закрыть все тэги |

Смайлики
Показать всё

Запрещен флуд и бессодержательные комментарии вида: «круто», «спасибо за урок», «обязательно попробую».
Такие сообщения будут удаляться, а их авторы наказываться.

Включить онлайн-уведомления о новых сообщениях в этой теме

1 человек читает эту тему ()
1 пользователь: Strelok
« Предыдущая тема | Уроки Flash | Следующая тема »

» Похожие темы

Эффект спрея (Action Script3) Урок | kedicik | 24 | 6254 |  | 16 Января 2010 - 22:28 » к последнему сообщению

Быстрый переход по разделам:
Текстовая версия темы

Demiart.ru © 2000-2010. Реклама на Демиарте | Условия использования материалов форума Privacy policy | Powered by Invision Power Board(U) © 2003 IPS, Inc. Настройка и оптимизация сервера — Garrotte VDS-Admin
| Join the Dark Side! We have cookies! |