Здравствуйте, гость ( Вход | Регистрация )

Свернуть

Новости

Форум Лучшее из галереи Уроки и статьи
07.12.2015 Выставочный зал: кошарик - персональная выставка
31.08.2015 Интересные ссылки для рисовальщиков
21.01.2015 Выставочный зал 2: Игрушки Олеси Гавриленко

27.12.2014 Выставочный зал: кошарик - персональная выставка
17.11.2014 Дуэль "Рыбки" - победитель Лисичка
05.11.2014 Конкурс иллюстраций "Снежная королева", до 31 января
30.10.2014 Дуэль "Рыбки" до 16 ноября
14.07.2014 Мастер-класс Мини-мишка в технике фелтинга
26.05.2013 Ау! Мы ищем таланты! – приглашаем модераторов!
«Так-таак...»
tn_gallery_3299_126_159486.jpg

© элис
06.01.2016 Виртуальный Музей: Русский живописец Василий Дмитриевич Поленов
28.12.2015 Виртуальный Музей: Нидерландский живописец Квентин Массейс
16.12.2015 Виртуальный Музей: Итальянский живописец Франче́ско Айец
17.11.2015 Виртуальный Музей: Луи Анкетен (Louis Anquetin)
11.11.2015 Виртуальный Музей: Русский живописец Алексей Иванович Корзухин
Файловый архив
06.09.2013 Прочее: Файлы к уроку "Чайная церемония"
05.09.2013 Журнал Art Tower: ArtTower Magazine #8
16.05.2013 Adobe Photoshop: Кисти: Reid Southen brush
16.05.2013 Adobe Photoshop: Кисти: Goro Fujita brush
16.05.2013 Adobe Photoshop: Кисти: Кисти для рисования в Photoshop
Блоги Новости в цифровом мире и мире дизайна
02.12.2014 Дама с каменьями: Вести с крыши 2
08.11.2014 Timenews: Вассерман: прежняя модель мировой экономики исчерпала себя
06.11.2014 Дама с каменьями: Приятные вести с крыши))) от Гаргула)
02.11.2014 Spell: Книги Дж. Кэмерон
22.10.2014 Vjaz: от ФУ до МА
25.11.2015 Комментарий от Foxx в Costa Rica Adventure Divers, Логотип для компании и рисунок на майку (maria_mer)
18.11.2015 Комментарий от maria_mer в Spellforce - майка, для фанов игры (maria_mer)
18.11.2015 Комментарий от maria_mer в Белая книга. Целитель - любительский прект (maria_mer)
09.04.2015 Комментарий от Romana в Книги Дж. Кэмерон (Spell)
08.04.2015 Комментарий от Romana в Я решил вернуться... (Элбирет)
16.03.2015 ФОТОФОРУМ-2015
01.01.2015 ARQUTE.com и ArtTalk.ru закрываются
19.01.2017 Конкурс дизайна логотипов
26.12.2016 ру/Ководство: О творческом развитии
14.10.2016 ру/Ководство: Разнообразие

 
Добавить ответ в эту темуОткрыть тему
> Основоположения программирования - часть III.4, Программируем: фигуры Лиссажу.
V
Des
сообщение 10.08.2008 - 22:07
Сообщение #1


тритониус
****

Звезда писателя I степениЗа вклад в развитие ArtTower.ru
Группа: Почетные граждане
Сообщений: 728
Регистрация: 9.12.2007
Из: Москва \ Питер
Пользователь №: 6553
дышу под водой
Галерея Блог


Симпатии:  68  


Предыдущая часть: Основоположения программирования. часть III.3
Начало: Основоположения программирования. Часть I.

4. Первый опыт программирования: фигуры Лиссажу

Исходные коды к уроку: Прикрепленный файл  lesson_prg_3.4.rar ( 26.4 килобайт ) Кол-во скачиваний: 696


Ну вот мы (те, кто одолел предыдущие части "Основоположений...") и добрались до этой долгожданной фразы:
запускаем Flash CS3. Сегодня мы напишем первый работающий и при этом полностью нам понятный код.

Для начала мы сделаем что-нибудь простое. Например, заставим объект двигаться по определенной нами формуле движения. А потом мы сможем менять параметры этой формулы или саму формулу. Уже на основе этого простенького действия можно выдумать и реализовать множество дизайнерских и художественных эффектов - впрочем, это уже, как говорится, up to you... после прохождения урока.

Итак, создаем новый документ Flash, выбираем тип "Flash AS2". Сразу настраиваем свойства документа: размер 300 x 300 px, частота 60 к.сек (Вы можете установить и меньше, но "резкие движения" нашего объекта тогда будут прорисовываться плохо - будут "бить"). Публикация в swf и в HTML. Параметры публикации вкладки "Flash": Flash Player 8 (его достаточно для AS2), Action Script 2.0, "пропустить действия трассировки", "экспорт скрытых слоев", "Сжать ролик". Параметры html можно оставить по умолчанию.

Переименовываем "Слой 0" в "as" или что-то подобное. Я рекомендую Вам сразу выделять под скрипты отдельный слой, соответственно поименованный, и ничего в нем не размещать. Это позволит Вам, во-первых, не путаться что где, а во-вторых, создавать ключевые кадры специально для AS там, где нужно.
Создаем еще два слоя, называем их "Back" и "Dot" (у меня это "dot" - "точка", у Вас может быть что-нибудь другое. Именование слоя нам ни зачем, кроме как для порядка, не нужно - однако когда этих слоев будет с полсотни, порядок очень даже не помешает... - лучше вводить именование слоев в "автоматизм" сразу).
На слое back создаем (соответствующим инструментом рисования) прямоугольник, задаем ему в свойствах ширину и высоту по 300 px, и там же устанавливаем его верхний левый угол в координаты 0,0. Без этого шага можно и обойтись - для иллюстрации программирования он не нужен - но пусть у нас будет хоть чуть-чуть посимпатичнее - задайте прямоугольнику какой-нибудь красивый на Ваш вкус градиент. А можно нажать [F8], выбрать тип объекта - "Графика" (Graphic), задать имя вроде "backgr", сделать двойной щелчок на появившемся в библиотеке символе "backgr" и немножко оторваться smile.gif на рисовании симпатичного многослойного фона.
Когда это нехитрое действие будет окончено, перейдем на слой "dot" (вообще говоря, удобно "запирать", нажимая на "замочек" над перечнем слоев, все слои, открывая только тот (те), на которых непосредственно работаем) и создадим на нем тот самый объект, который мы заставим двигаться. У меня это был небольшой кружок, который тут же превращается в MovieClip - [F8], выбрать тип объекта "MovieClip", задать имя - у меня "dot", у Вас может быть иное, это еще не то имя, по которому мы будем обращаться к объекту из программы, это имя библиотечного символа (вообще говоря - класса объекта, но создатели Flash для "описаний объектов" в библиотеке оставляют название "символ", наверно, во избежание путаницы) - нажимаем "ок". Можем теперь сделать двойной щелчок на нашем объекте и превратить его во что-нибудь посимпатичнее, чем просто "плоский кружок". Можно сделать "шарик", "камушек", бриллиантик" - что угодно, лишь бы оно было небольшим и выделялось на фоне.
После создания нашего объекта-мувика выбираем его "стрелкой" и в свойствах задаем имя экземпляра. ВОт это уже - то имя, по которому мы будем к нему обращаться из программы, и поэтому, если Вы зададите не так, как у меня - "dot" (без кавычек, само собой), то Вам придется менять имя объекта-мувика во всех скриптах, которые мы с Вами напишем.

Переходим на слой "as", выбираем первый фрейм (у нас и всего фреймов - 1, но нам нужен именно фрейм 1 слоя "as") и нажимаем [F9]. Наконец-то: перед нами AS-редактор, в котором мы будем писать нашу программу.

В первой строке пишем stop(); и делаем пару переводов строки-отступов. Весь код мы будем писать перед оператором 1 stop(), останавливающим "ход" ролика.
Вообще говоря, в свф-ке, содержащей один фрейм, "stop()" не нужен - такой ролик и так "застопорен" на одном этом фрейме. Но: для данного простого примера мы прелоадер не писали - мал больно, хотя в неучебном флэш-творчестве роликов без прелоадеров не делают - моветон. Вот уже с прелоадером нам "stop()" понадобится - иначе наша сцена начнет "прыгать" между прелоадером и самой сценой, показывая зрителю крайнее безобразие, но никак не симпатично двигающийся объект. А уж если в ролике не один фрейм - то без stop(); или "gotoAndPlay(<...>); в конце никак не обойтись - расчитывать на автоматическое циклическое воспроизведение не стоит, оно зависит от параметров в HTML-странице, т.е., грубо говоря, не от нас уже (в случае баннера, напр.) А нам нужно "держать под контролем" все, что происходит в нашем ролике. Самим. Хорошая привычка - стопорить ролик принудительно из AS всегда, когда нам не нужно иное.

У Вас должно к этому моменту получиться что-то похожее на "lissazhu00.fla" из исходных кодов к уроку. Можно проверить, что у нас получилось: [F12]. Поле-бэкграунд и на нем одиноко скучает наш еще неокоженный (от слова код smile.gif ) "объект".

Продолжаем программировать. Все дальнейшее пишем перед оператором stop(); - для этого мы и делали отступ.
Инициализируем переменные, которые нам понадобятся:
CODE

var time:Number = 0;
/* в нашем ролике будет "тикать время".
Поскольку "гонять" объект мы хотим по формуле, то,
вспоминая школьную алгебру - и вся сцена у нас будет -
что-то вроде "графика", по оси X которого мы будем
откладывать "время", а по оси Y - координату,
которую тут же и присвоим объекту.*/

var timerID:Number;
/* эта переменная нам понадобится для того, чтобы
организовать вызов одной и той же функции через
определенный промежуток времени. Можно, конечно,
положиться на событие onEnterFrame какого-нибудь
пустого мувиклипа, и вызывать эту функцию из него,
но это не наш метод: нам будет интересно и удобно
свободно менять тот самый интервал, с которым
вызывается эта функция - т.е. "частоту пульса"
нашего "тиканья времени" */

// Зададим несколько вспомогательных переменных.

var yOffset:Number = 150;
/* начало координат у нас в верхнем левом углу.
А нам хочется, чтобы воображаемая наша "ось X"
проходила через середину ролика. Добавляя
к координате Y половину высоты ролика, мы как
раз этого и добьемся. Такая "добавка" к
координате или к любой другой меняющейся
величине называется смещением - оffset */

var yLimit:Number = 150;
/* высота ролика у нас 300px, а ось X (наш "0"
по вертикали с учетом yOffset проходит посередине.
Т.е. по вертикали наш объект может двигаться
на 150 px вверх от этого смещенного "нуля" и на 150
вниз. Мы теперь можем задавать координату по Y
числом от -1 до 1, а потом умножать это число на
yLimit - и получать, куда именно нам нужно
"поставить" объект */

var timeInterval:Number = 25;
/* это число миллисекунд, через которое
будет вызываться функция пересчета
координат и постановки объекта "в точку".
Обратная величина - 1000/timeInterval -
будет "скоростью течения времени" в нашем
ролике (в "пересчетах в секунду").
var yKoeff:Number = 0.2; /* этот коеффициент
позволит нам управлять скоростью движения
объекта по координате Y - мы используем его
в формуле вычисления координаты */



Установим наш объект в "начальную позицию"
CODE

dot._x = 0;
dot._y = yOffset;

/* присвоение свойствам _x,_y,_rotation,_visible,
_xscale,_yscale,_alpha новых значений немедленно
отображается в сцене */


Что ж, все готово и инициализировано, напишем эту самую функцию пересчета координат. Для начала зададим, напр., синусоиду как закон движения.

CODE

function setPosition() {
dot._x = time * 3; // формула зависимости координаты X от времени
dot._y = yLimit * (Math.sin(time * yKoeff / Math.PI)) + yOffset;
/*
ну вот и синусоида. Формула движения по координате Y -
классическая формула движения по синусоидальной кривой.
Сам синус вычисляется методом sin() стандартного объекта
Math. А поскольку этот объект работает с углами в радианах,
а не в градусах - мы поделим время, умноженное на "скорость
синусования" smile.gif , на Math.PI - стандартную константу, всегда
в точности равную smile.gif числу "Pi".
*/
time++; // на каждом шаге не забываем прибавлять время.
}
/* end setPosition - таким комментарием "помечают"
закрывающие скобки конструкций, особенно длинных. Чтобы,
когда закрывающих скобок будет десяток друг за другом -
не запутаться, какая от какого программного блока */


Так, функция у нас готова к употреблению. Однако [F12] нам пока ничего не даст - объект где стоял, там и будет стоять. Все верно - функцию еще никто не вызывал.
CODE

timerID = setInterval(setPosition,timeInterval);


Вот теперь заработает... [F12]
setInterval() - стандартная функция, после вызова которой функция, имя которой стоит (без кавычек!) первым аргументом, будет вызываться через промежутки времени, указанные во втором аргументе (у нас - timeInterval). А переменной timerID будет присвоено некоторое значение, которое само по себе нас не волнует - идентификатор и идентификатор, ну это какое-то число, случайное, которое нам никогда не понадобится само по себе - но с помощью которого мы сможем периодический вызов нашей функции прекратить, написав clearInterval(timerID). Идентификатор нужен, поскольку в флэшке может быть сколь угодно (сколь производительности хватит) установленных интервалов - и, очищая, нам нужно знать, какой именно мы "очищаем".

Исходник - lissazhu01.fla

[F12]. Работает? А [F5] нажать в броузере? Что-то проехало один раз - и все, да?
Все правильно. "Компьютер делает то, что Вы ему приказали, а не то, что Вы хотите, чтобы он делал" (© "Законы Мерфи"). После того, как наш объект ушел за край флэшки... ничего не произошло. "Время" (time) все также добавляется, координата Y все так же вычисляется по закону синуса, а по координате X наш объект все удаляется... и удаляется... и удаляется вправо от флэшки.
Сделаем просто: будем на каждом шаге (да, один раз в 25 миллисекунд - пентиум позволяет smile.gif ) проверять, не дошел ли наш объект до края ролика, и если дошел - возвращать "на исходную". А заодно и время обнулять, поскольку если прибавлять его до бесконечности, то "бесконечность" рано или поздно кончится, и произойдет у нас в программе самая наинеприятная ошибка: число, которое мы хотим сохранить, больше, чем возможности программы сохранять числа вообще - т.н. ошибка переполнения, при которой присвоено в результате будет флэш знает что, а программа даст, как минимум, сбой - и хорошо если не вместе с броузером. В нашей маленькой программке эта ошибка еще не так коварна, но вообще она - бич программиста, и поэтому старайтесь всегда проверять растущие (или, наоборот, уменьшающиеся) величины на "конечность" - где-то должно быть место, где бесконечный рост ограничен Вами и, т.о., полностью под Вашим контролем.

Добавляем после строки "time++;" следующее:
CODE

if (dot._x >= 300) {
time = 0;
dot._x = 0;
dot._y = 150;
}



Вот. Теперь с нашей синусоидой все замечательно. Идет и повторяется. Если, конечно, Ваш скрипт похож на скрипт из lissazhu02.fla

Можно "поиграть" с коэффициентами в формулах пересчета координат - синусоида изменит частоту или, если изменить переменную yOffset - амплитуду колебаний.

Однако синусоида - это ведь не так весело и интересно, правда? Это что-то из области приборов и лабораторий, образы и настроение которых если и нужны в дизайне, то не каждый день... Попробуем повеселее. Ведь у нас теперь - ни много ни мало как системка для вывода объекта в координаты по параметрически заданным формулам...2

Изменим кое-что в нашей программе.
А именно: в начало добавим переменные xOffset, xLimit и xKoeff.
CODE

var xKoeff:Number = 0.4;
var xOffset:Number = 150;
var xLimit:Number = 150;

// ...а формулу вычисления координаты X заменим
на аналогичную той, по которой мы вычисляем значение Y:

dot._x = xLimit * (Math.cos(time * xKoeff )/ Math.PI) + xOffset;


lissazhu03.fla

[F12]. Оп-па! Веселее? smile.gif
Попробуйте "поиграть" с параметрами теперь... А проверку на достижение границы можно закомментировать - по нашим формулам объект за границы ролика уже не выйдет, и X, и Y изменяются теперь в диапазоне от 0 до 300 (от -150 до 150 до добавления смещений) - и проверять нам ничего не нужно.3 lissazhu04.fla

Ну и добавим еще одну зависимость. В формуле пересчета координат добавьте после вычисления координат:
CODE

dot._xscale = dot._y * 2;
dot._yscale = dot._y * 2;


[F12]. lissazhu05.fla
Придумаете художественное применение такому эффекту? smile.gif


Продолжение

_____________________

1 Конечно, никакой это не оператор, строго говоря, а метод класса MovieClip. Но еще одна путаная языковая традиция, никуда не денешься: многие методы этого класса (stop(), gotoAndStop(), gotoAndPlay(), напр.) называют операторами - даром что последним из приведенных двух аж аргументы передавать положено, чего с истинными операторами никогда не случается - операторы работают с операндами, а не аргументами.
О языковой путанице между "операторами" и "инструкциями" мы уже говорили в одной из предыдущих частей урока.

2 Обычные формулы - это зависимость одной координаты от другой с течением времени. Напр., Y = sin(X). В их правую часть может входить изменяемый параметр, например, время t. Так обычно задают, напр., формулу свободного падения.
Параметрически заданный закон - это "комплект" из законов зависимости от времени каждой из координат.
Напр., X = t; Y = sin(w*t) - формула движения по синусоиде.
Параметрические формулы можно преобразовать в обычные. Но в некоторых случаях именно параметрическое представление - "контроль" по каждой координате в отдельности - очень удобно.

3 Фигуры, которые выписывает наш "dot", имеют специальное название, хорошо знакомое тем, кто имел дело с осциллографом и\или с математикой: фигуры Лиссажу. Они очень интересны: хотя бы тем, что в зависимости от коэффициентов в формулах образуются разные фигуры, а если коэффициенты менять плавно - преобразующиеся одна в другую весьма причудливым образом. Подробнее о них Вы можете прочитать здесь: Википедия - фигуры Лиссажу


____________________________________


Автором урока является Des.
Запрещается копирование и публикация урока на других сайтах без письменного согласия автора и размещения ссылок.


The tutorial is written by Des.
No part of this tutorial can be copied/pasted on any other website without the author's express written permission.


Сообщение отредактировал Des - 17.01.2009 - 09:40


--------------------
"Высшая мудрость - умение разговаривать с людьми" ((с) Ямамото Цунэтомо (Дзётё), "Хагакурэ")
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Гость_Slam_*
сообщение 16.01.2009 - 12:57
Сообщение #2





Гости






   


Спасибо Des за уроки, пытаюсь освоить Flash.
Вот здесь закралась ошибка, скорее всего опечатка

function setPosition() {
dot._x += time * 3; // формула зависимости координаты X от времени


плюс там лишний иначе получается пролетающий с молниеносной скоростью шарик без всякой синусоиды, точнее она наверно есть но растянута очень
dot._x = time * 3; // вот так все работает smile.gif
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Des
сообщение 17.01.2009 - 09:42
Сообщение #3


тритониус
****

Звезда писателя I степениЗа вклад в развитие ArtTower.ru
Группа: Почетные граждане
Сообщений: 728
Регистрация: 9.12.2007
Из: Москва \ Питер
Пользователь №: 6553
дышу под водой
Галерея Блог


Симпатии:  68  


Цитата(Гость_Slam_* @ 16.01.2009 - 12:31) *
Спасибо Des за уроки, пытаюсь освоить Flash.
Вот здесь закралась ошибка, скорее всего опечатка
<...>
dot._x = time * 3; // вот так все работает smile.gif


Спасибо! В исходниках опечатки не было, проверил. В тексте урока исправил.


--------------------
"Высшая мудрость - умение разговаривать с людьми" ((с) Ямамото Цунэтомо (Дзётё), "Хагакурэ")
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Stals25
сообщение 5.03.2010 - 16:42
Сообщение #4






Группа: Туристы
Сообщений: 2
Регистрация: 3.03.2010
Пользователь №: 15545



Симпатии:  0  


Спасибо за урок !!
очень познавательный!!
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения

Быстрый ответДобавить ответ в эту темуОткрыть тему
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0

 



- Текстовая версия форума Сейчас: 17.12.2017 - 11:07