ITCS - Территория Flash. Основы ActionScript 2.0. Выпуск 1 - РАЗРАБОТКА КОМПЬЮТЕРНЫХ ИГР
Сегодня: Четверг, 08.12.2016, 01:08 (МСК)| Здравствуйте, Гость| Мой профиль | Регистрация | Вход | RSS

Военные технологии на пользовательском рынке

Спецэффекты в Cinema4D

Роботы и экзоскелеты

Новинки в области цифровых камер

Плагины Sonnox Oxford
Главная » РАЗРАБОТКА КОМПЬЮТЕРНЫХ ИГР

Территория Flash. Основы ActionScript 2.0. Выпуск 1

30.07.2010
Итак, рассматриваем интерфейс и пишем программу «Hello, world!». Для удобства дальнейшего понимания вопроса отмечу еще один важный момент: все, делаемое во флэше, особенно, программируемое, рассчитано для воспроизведения только в одной программной оболочке — Flash Player.


Графический интерфейс Adobe/Macromedia Flash 8/9/CS3/CS4 (во всех версиях интерфейс, его структура, не очень меняется)


Когда вы установите программу (в процессе инсталляции предусмотрена установка и самого Flash Player), то при первом запуске перед вами появится окно выбора между проектами. В принципе, ключевым вариантом будет New Flash Document, хотя можно создать и отдельные ActionScript-файлы и даже JavaScript. О последнем стоит сказать отдельно, поскольку в этом варианте, вы можете руководить оболочкой Flash’а как бы извне, то есть создавать дополнительные инструменты и так далее. Это используется достаточно редко, хотя на специализированных ресурсах вы можете найти огромное количество новых инструментов, позволяющих рисовать спирали, торы, делать новые варианты закраски (заливки), кроме стандартно предусмотренных типов градиента и так далее. Если эта тема вам потом покажется интересной, то множество примеров и листингов есть в интернете. Пока мы остановимся только на варианте New Flash Document. Итак, файл проекта открыт.
Что мы видим из интерфейсного:

  • Главное меню.
  • Временная диаграмма с возможностью создавать множество слоев (Layers, они же и треки).
  • Рабочая область в центре. Причем белым квадратом там обозначен сам рабочий стол (белый цвет), а все, что вокруг закрашено серым, то есть, в этой области можно проектировать любые элементы для рабочего стола, и потом переносить их на него. Сами размеры рабочего стола — это реальные графические размеры вашей будущей анимации или программы.
  • Справа находится панель инструментов, в число которых входит множество стандартных.
  • Под рабочим столом находятся окна-закладки Action (там где мы вводим программный код), Properties (если мы создаем некий графический объект с помощью инструментов, а не программно, то тут указываются все основные его свойства. Честно сказать, для больших проектов лучше не возлагать на эти установки большие надежды, а прописывать все программным образом, поскольку я не раз наблюдал картину, когда текстовые цвета и шрифты просто сбиваются). Также, если вы вызовите Flash Help (F1), то первоначально окно помощи появится в этой связке окон.
  • Слева располагается множество служебной информации, т.е. дополнительные окна. В них вы можете найти и библиотеку собственных компонент (Library), также есть и специальная библиотека от разработчиков (Common Libraries), в которую входят всевозможные скролл-бары, мемо-окна, чек-боксы, радио-баттоны и т.п. То есть, для пользователей других современных объектно-ориентированных средств разработки — это та же VCL, то есть Visual Component Library. Хотя не совсем та, поскольку именно во Flash есть все возможность как угодно рисовать/создавать свои собственные компоненты. Для флэш-программистов и дизайнеров — производство таковых очень просто, и на самом деле очень редко можно увидеть что-нибудь из стандартной библиотеки компонент во множестве профессиональных работ. Это как… в общем:), не солидно, особенно для такой среды.
Миф: Flash — это пакет для двумерной, то есть 2D-анимации.
Его развенчание: Да, проектирование и рисование идет только в двух осях: x и y. Но у нас есть множество инструментов и знаний, которые позволяют делать объекты трехмерными. В принципе, каждый, изучавший программирование знает, как сделать трехмерным текст, то есть совместить сразу несколько идентичных объектов с различными оттенками того или иного цвета, тем самым, показывая выделение объекта на общем фоне или его углубление. Это касается не только текста, но и множества других графических объектов. То есть, нарисовать интерфейс современного Office в данном пакете не составляет никакого труда. Помимо этого, все объекты можно вращать, делать дополнительную прорисовку, и импортировать любые анимационные файлы, созданные в ряде других специализированных программ. Плюс к этому можно руководить освещением, создавая специальные промежуточные слои, и указывая в них различные степени прозрачности плюс даже угол заливки градиента можно менять. То есть, данный пакет позволяет сделать все, главное, это сесть и подумать, над тем, что мы хотим получить в итоге и пути решения всех обозначенных проблем.


Программа «Hello, world!»


Потом вы увидите, что сама панель-окно Actions автоматически переключается в зависимости от того, какой слой/объект у вас является рабочим или выделенным на данный момент. Но в варианте с первой загрузкой флэш-документа перед нами чистый рабочий стол и один слой, который по умолчанию всегда обозначен как Layer 1. Мы ничего не будем сейчас рисовать или делать графического. Достаточно нажать указателем мыши на Layer 1 во временной панели, он выделится темно-синим цветом, а в окне Actions напишем следующую строку:

trace ("Hello, world!")

Нажимаем Ctrl+Enter (запуск приложения на исполнение), и в результате загрузится пустое окно, а поверх его окно Output, в котором будет написано «Hello, world!». Одна программа — одна строчка.



Что такое команда trace? С ее помощью вы можете отобразить/проверить в окне Output любую переменную, ее характеристику и т.п. Данная функция является служебной и очень удобна при отладке приложений, хотя в момент полной компиляции, как вы понимаете, все строки trace следует убрать.
Как ввести комментарии? Строки-комментарии нужны всегда, хотя многие программисты ими не редко пренебрегают, а начинающие часто перенасыщают код подобной информацией. Лично по мне, так лучше второе, чем первое, потому как, в случаях, когда нужно будет вернуться к коду через полгода или же передать его на рассмотрение или оптимизацию другому программисту, то без комментариев все становится непонятным.
Если комментарий умещается в одну строку, то перед ним ставится «//», а если в несколько, то выделение этого блока обозначается открытием «/*» и закрытием «*/».
То есть, например, наша программа:

trace ("Hello, world!") // Выводим в окне Output надпись…

Когда вы это введете, то заметите, что комментарии отмечаются серым цветом, в то время как команда trace — синим (им выделяются все документированные команды, функции и т.п.), а надпись "Hello, world!" — зеленым (так обозначается символьное наполнение строчных переменных).
Теперь перейдем на другой уровень. 
Возьмите строку trace ("Hello, world!"), скопируйте ее, поместите в блокнот (текстовый редактор) и сохраните файл под именем HW.as. При этом сам файл проекта сохраните в ту же директорию, что и созданный ранее текстовый файл. В файле проекта стираем нашу единственную строку, а вместо нее пишем:

#include "HW.as"

При запуске файла на исполнение картина практически не поменяется, то есть окно Output выведет вам тот же «Hello, world!». При этом вам даже не нужно было особо и применять расширение as для текстового файла, оно может быть любым, но при этом, как вы уже поняли, любой программный код можно разделять между различными файлами, а потом собирать все воедино. Особенно это удобно, если вы хотите создавать абстрактные недокументированные классы, писать собственные специализированные функции и т.п. Расширение «as» в данном случае удобно, поскольку эти файлы можете открыть в том же флэше, где есть идентификация ошибок. То есть, так лучше все оптимизировать. 
Единственное, что здесь необходимо отметить отдельно, команда #unclude (т.е. «включить что-то в рамках чего-то») исполняется только в процессе компиляции кода при подготовке окончательного файла. И если вы потом будете вносить изменения, то обновлять нужно все. Данная команда очень близка к очень многим решениям импорта, включая и сценарии, связанные с компонентами, хотя она является самой простой и очевидной в понимании.
Примечание: обратите внимание на то, что все наши действия мы выполняли в рамках только одного кадра, на временной диаграмме он стал выделенным за счет присутствия закрашенного черного кружка и буквы «а», последняя указывает, что здесь есть программный код в окне Action. 


Кнопка, и чуть-чуть о муви-клипах…


От дел служебных перейдем к делам практическим. Стоит задача нарисовать кнопку, и указать, что по ее нажатии выводится надпись «Hello, world!». Делается все очень просто. Пока мы не будем рисовать что-то программно, а возьмем инструмент «прямоугольник» (Rectangle Tool) из панели инструментов. Рисуем его. Закрашиваем в нужный цвет (можете поэкспериментировать с градиентными заливками). Потом поверх него делаем некую надпись с помощью Text Tool, например, «OK». Обводим и выделяем все с помощью Selection Tool и нажимаем F8. Перед вами откроется окно, в котором предлагаются варианты инициализации объекта, где предлагается выбирать среди трех вариантов: MovieClip (анимационный клип), Button (кнопка), Graphic (статический графический объект). Выбираем «кнопку», при этом вносим ее имя, а также делаем активным флажок Export for ActionScript, вводим имя для идентификации.
Таким образом, мы создали новый объект-кнопку и сделали его доступным для программирования. Он сразу же отобразится в панели Library. Единственное, что необходимо, так это обозначить имя этого конкретного объекта, которое будет нужным для его дальнейшего использования в ActionScript. Это делается в панели Properties (Instance Name). Допустим «BtnOK», тогда код в нулевом фрейме на Layer 1 в ActionScript будет выглядеть следующим образом:

BtnOK.onPress = function () {
#include "HW.as" // или же trace ("Hello, world!")
}

Работать будет несколько коряво, оно и понятно, но уже над этим вам стоит подумать и поэкспериментировать. При этом, если вы сделаете двойной клик на самой сделанной кнопке, то перед вами откроется ее временная диаграмма, где уже автоматически прописаны реакции на события указателя мыши Up, Over, Down, Hit. По существу, это поведение данного графического объекта, которое может быть абсолютно любым, и вы его можете задавать самостоятельно (изменять объекты: их месторасположение, форму, цвет, параметры градиентной заливки, а также вносить новые элементы). 
Таким образом, вы сами самостоятельно можете создать анимированную кнопку любой степени сложности.
Примечание: В программных кодах, а также во множестве специализированной литературы вы можете встретить написание кода не только на onPress (при нажатии), но и на onRelease (при отжатии). В данном примере может использоваться как и то, так и другое, только вы должны понимать, что речь идет о разных событиях.
Еще одно примечание: Если вы сделали самостоятельно анимированную кнопку, то можете выделить ее, нажать F8 и обозначить как MovieClip. А какие будут изменения при запуске проекта, вы увидите сами:).

Кристофер

Перепечатка материалов или их фрагментов возможна только с согласия автора.




Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Ассоциация боевых роботов
Рекомендуем...
Новости

Разделы

Опросы

Какой язык программирования вы считаете наиболее актуальным сегодня?
Всего ответов: 308

Друзья

3D-кино






Найти на сайте:








Об авторе       Контакты      Вопрос-ответ        Хостинг от uCoz