АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция

Проект 1: Прыгающий мяч (программная анимация)

Читайте также:
  1. Chef project skill secrets поможет Вам в запуске нового проекта.
  2. I. ТЕМИ КУРСОВОГО ПРОЕКТУ ТА ЇХ ВИБІР
  3. II. Виды работ по подготовке проектной документации
  4. II. Оформлення і порядок захисту курсового проекту
  5. II. Порядок формирования экспертных групп, организация экспертизы заявленных на Конкурс проектов и регламент работы Конкурсной комиссии
  6. II. Технико-экономическое обоснование предпринимательского проекта.
  7. IV: Проектировочный расчет вала.
  8. New Project in ISE (left top part) – окно нового проекта – левая верхняя часть окна.
  9. SCADA системы как инструмент проектирования АСУ ТП
  10. АВТОРСКИЙ ПРОЕКТ ФОРМИРОВАНИЯ КУЛЬТУРЫ ЛЮБВИ У ДЕТЕЙ –СОЦИАЛЬНЫХ СИРОТ МЕТОДОМ КАНИСТЕРАПИИ «ГОРОД СОЛНЦА» (Г. БАРНАУЛ)
  11. Актуальность проекта «Танцующий Саров»
  12. Альтернативный проект средневековья

 

Теория без практики мертва. Банальное, но чрезвычайно верное изречение. Действительно, глупо изучать тонкости ActionScript и быть неспособным написать крестики-нолики. Поэтому каждую теоретическую тему мы будем завершать проектом средней (относительно уже изученного материала) сложности. В нем мы будем отрабатывать основные навыки программирования во Flash, делая особый акцент на новом материале. В проекте могут присутствовать и еще не изученные элементы языка — это необходимо, чтобы при глубоком теоретическом разборе у вас уже было представление о них. Например, разве можно оценить красоту недокументированных возможностей по созданию событий, если о самих событиях было прочитано только пять минут назад! Однако не стоит беспокоиться, что в практикуме вы, что-то не поймете — используя не изученные объекты, мы будем давать им краткую характеристику.

 

Создание прыгающего мяча станет первым нашим проектом. Описание хода его выполнения будет чрезвычайно подробным, так как он должен быть доступен для самостоятельной реализации абсолютно всем. В дальнейшем руководства по созданию проектов будут куда более краткими, и многое вам придется додумывать самостоятельно. Закончив чтение этой книги, вы будете обладать не только приличными теоретическими знаниями, но и солидным практическим опытом. Во Flash существуют 4 различных по способу задания типа мультипликации:

 

• Покадровая анимация. Каждый из кадров создаваемого фильма рисуется отдельно. Полностью соответствует классической анимации. Подходит для создания сложных сцен и высокохудожественных фильмов, однако чрезвычайно трудоемка.

 

• Анимация трансформации движения. Вы задаете только начальное и конечное положение объекта, его размеры, время движения и траекторию (а также — при необходимости — некоторые другие параметры), а все его промежуточные состояния система просчитывает самостоятельно. Очень простой с технической точки зрения вид анимации, но при его помощи невозможно создавать сложные события.

 

• Анимация трансформации формы (морфинг). Этот вид анимации следует реализовывать тогда, когда один графический объект вашего мультфильма должен плавно видоизмениться в другой. Вы задаете только начальную и конечную формы, а промежуточные кадры будут заполнены автоматически.

 

• Программная анимация. Поведение объекта описывается при помощи сценария ActionScript. Именно этот тип нам наиболее интересен.

 

Зачастую сделать анимацию бывает гораздо проще, используя программирование, нежели с применением более традиционных средств. Например, чтобы описать при помощи кода прыгающий мяч, автору данной книги понадобилось всего несколько минут (а на то, чтобы создать такой же клип с использованием автоматического заполнения кадров — около получаса). К применению программирования стоит прибегать, прежде всего, в тех случаях, когда в основу анимации можно положить четкую математическую зависимость. Так, описать с нужной степенью точности движение мяча — это детская задача как с точки зрения математики, так и чисто технически.

 

Сейчас мы попробуем создать анимацию прыгающего мяча программными средствами. Вы увидите, насколько проще и изящнее такого рода задачи можно решать, владея программированием. Это описание построено так, чтобы оно было понятно человеку, совершенно не владеющему ActionScript (а так как мы знаем о языке программирования Flash уже немало, то никаких сложностей быть не должно). Все необходимые комментарии относительно незнакомого лексикона мы будем давать по ходу написания скрипта. Итак, приступаем.

 

Создаем новый документ. Переходим на первый слой и рисуем мяч. Для этого:

 

• Рисуем небольшой круг, используя инструмент Oval (Овал) при нажатой клавише <Shift>.

 

• Создаем радиальную заливку, которая поможет передать объемность мяча. Для этого маркеру центра ставим в соответствие белый цвет, маркеру границы - светло-коричневый (соответствующий традиционной окраске баскетбольного мяча). Для того чтобы переход от блика к умеренно освещенным фрагментам был естественным, где-то на расстоянии в одну треть от общей длины градиента добавляем новый маркер (левым щелчком мыши) и определяем его цвет — коричнево-красный. Чуть ближе к маркеру границы ставим новый маркере цветом, чуть более светлым, чем у последнего. Убрать лишние маркеры можно, выполнив их протаскивание при нажатой клавише мыши вниз,

 

• Заливаем круг созданным градиентом. На данном этапе наш объект не похож не то что на мяч, но даже и на шар (рис. 1.15, а). Чтобы придать ему больше естественности, при помощи инструмента Fill Transform (Преобразование заливки) перемещаем центр заливки ближе к краю мяча, немного увеличиваем ее радиус и сжимаем по оси, совпадающей по направлению с предполагаемым источником света. Итог представлен на рис. 1.15, Ь (черно-белый формат книги плохо передает сложные цветовые переходы).

 

 

Рис. 1.15. Создание прообраза мяча

 

Теперь — самый сложный этап. Рисуем характерные для баскетбольного мяча линии (сделать это нужно на отдельном слое). Чисто технически это реализуется несложно: в масштабе 300 % проводим при помощи инструмента Pencil (Карандаш) (в режиме Smooth (Гладкие)) три кривые и затем придаем им более правильную форму при помощи инструмента Array (Стрелка). Гораздо сложнее представить, как эти самые линии должны пройти. Для этого закройте глаза и немного пофантазируйте. Если и это не поможет — найдите картинку с изображением мяча и просто ее перерисуйте. При необходимости, выделив весь объект, увеличьте толщину линий. Вот и все. Ваш мяч должен выглядеть приблизительно так же, как на рис. 1.16.

 

 

Рис. 1.16. Готовый мяч

 

Знаете ли вы. что отличает художника от маляра-ремесленника? Нет. не высокий уровень изобразительной техники. И даже не вдохновленность. Художник может творить — фантазируя, переносить свои идеи на холст. Ремесленник же может лишь срисовывать. Если вы не уверены в наличии у себя сильного художественного дара, не ленитесь находить изображения тех объектов, которые вы хотите нарисовать, и просто их копируйте. Это поможет одновременно как улучшить качество ваших работ, так и сэкономить немало времени.

 

Раз на мяче имеется блик, значит, он освещен достаточно сильным источником и не может не отбрасывать тени. Чтобы ее создать:

 

• Вводим новый слой ниже существующих и перемешаемся на него.

• При помощи инструмента Oval (Овал) создаем эллипс и поворачиваем его так, чтобы его главная ось совпадала с гипотетическим направлением света от источника.

• Так как интенсивность тени должна падать от низа мяча (почти черный цвет) к своей вершине (совершенно белый цвет), то созданный эллипс необходимо залить подходящим радиальным градиентом (центр его должен быть помешен в начало тени). Через тень дол жен быть виден фон, поэтому ее коэффициент прозрачности следует уменьшить до 50 % (параметр Alpha (Альфа) панели Color Mixer (Смеситель цветов)). Результатом должно быть изображение, подобное представленному на рис. 1.17.

 

 

Рис. 1.17. Так должна выглядеть тень

 

Чтобы мы могли управлять поведением графического объекта, его необходимо перевести в символ. Для этого нужно, выделив его, нажать < F8>. Тип символа необходимо определить как MovieClip. В нашем случае движение мяча будет имитировано перемещением трех объектов — контура, «тела» и тени. Соответственно необходимо создать три символа, Назовите их как пожелаете (это не существенно).

 

В программе вы не можете написать: «Компьютер, возьми вон тот красный мячик в углу и передвинь его чуть-чуть вниз». Машина способна выполнять лишь четкие указания вроде: «При наступлении события Event координату Y экземпляра символа Object увеличить на 5». Следовательно, в самом начале мы должны дать нашим символам конкретные имена. Вернее, идентификаторы следует определить для экземпляров символов, так как материнские объекты уже имеют имена, которые были им даны при их создании. Сделать это можно в строке Instance Name (Имя экземпляра) Инспектора Свойств экземпляра (рис. 1.18). В качестве имени может выступать практически любой текст (кроме некоторых служебных символов, например /). Нашим объектам дадим следующие идентификаторы: contour. ball, shade.

Создайте новый слой и назовите его «Action*. Поместите его выше остальных. Выделив его первый кадр, нажмите <F9>. При этом будет открыта панель ввода кода Actions (Действия).

 

 

Рис. 1.18. Присвоение экземпляру символа имени

 

Подготовительный этап закончен. Можно приступать к написанию кода. Подумаем, что мы должны задать в самом начале. Очевидно, что следует привести систему в нужное исходное состояние — объекты должны быть помешены в точки, в которых начнется их движение. Почему этого нельзя сделать вручную? Во-первых, позиционировать символы с точностью до пикселя весьма непросто, во-вторых, если расположить их произвольным образом и написать код исходя из значений в соответствующих окошках Инспектора Свойств, то будет достаточно легкого смещения одного из объектов, чтобы все перестало работать. Итак, чтобы поместить экземпляр ball в нужную точку:

 

• Пишем «адрес» объекта. Так как экземпляры находятся на той же временной шкале, что и сам код, то задавать путь необязательно.

• Задаем имя экземпляра и ставим точку: «ball.». Это означает, что нужно обратиться к какому-то методу или свойству объекта с именем ball.

• Задаем имя свойства, к которому следует обратиться. В нашем случае это координата по оси X:

«ball._x». Знак подчеркивания в начале имени свойства — это особенность синтаксиса ActionScript, характерная для многих свойств: "_rotation, _xscale, _alpha. Если свойство было задано верно, то оно будет подсвечено синим цветом.

• Так как экземпляр ball уже присутствует на экране, то его свойство _х имеет конкретное значение. Нам же нужно переопределить его. Сделать это можно при помощи оператора присваивания, который задается в виде обычного «=»(логическое равенство чего-либо чему-либо проверяется в ActionScript, как вы помните, при помощи оператора «= =»): «ball._x=».

• Координаты документа на главной временной шкале отсчитываются по-другому, чем принято в декартовой системе. Точкой (0, 0) является верхний левый угол листа. Ось X направлена слева направо, а ось Y — сверху вниз. Таким образом, если мы хотим поместить объект левее видимой области, то его свойству _х должно быть определено некоторое отрицательное значение. Так как обшая длина листа составляет 550 рх, то приемлемым числом будет —50. Пишем: «ball.

х=–50;».

 


1 | 2 |

Поиск по сайту:



Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Студалл.Орг (0.006 сек.)