Flash-приложение на ActionScript 3 для программистов ;). Урок первый.

Flash-приложения(игры) у многих вызывают интерес, но чтобы изучать Adobe Flash CS4 необходимо для начала познакомиться с интерфейсом, научиться создавать простейшие приложения и ими управлять, скорее всего интерактивно, но для тех кто программирует на C++(или других языках), портировать приложение под Adobe Flash CS4 будет довольно затруднительно, отсюда возникает простой вопрос: А нельзя ли как-нибудь побыстрее без изучения кучи материалов, прямо сесть и начать писать порт(и не только)? Ответ: Можно! В этой серии уроков я познакомлю вас с основными принципами написания приложений на Action Script 3, при этом вам не потребуется знание или изучение новых визуальных редакторов.

Эта серия уроков будет интересна в первую очередь программистам и уже во вторую всем остальным. Если раньше вы писали отрисовку графики на DirectDraw или пользовались сторонними движками, такими как PopCap Framework, то в этих уроках я расскажу о том как так же как и в старом добром DirectDraw рисовать спрайты, если же вы использовали более высокую и развитую логическую структуру, запихивали графику в контейнеры которые отрисовывались через их родителей и т.п., тогда тут у вас как я вижу два варианта, либо использовать стандартные контейнеры и способы отрисовки которые предоставляет Flash, и о которых в этой серии уроков не пойдет разговор, или взять управление этим процессом в свои руки и портировать всю логическую цепочку под AS3, это может дать как свои плюсы так и минусы.

В основном я затрону работу с растровой графикой и немного со звуком, расскажу о прелоадере и о том как оптимизировать отрисовку спрайтов. Но в этой статье я начну с того что поведаю вам о том, что будет необходимо чтобы начать работу. Я расскажу о том как компилировать Flash-приложения под Windows, но если вы работаете в nix системах, то можете писать код в Eclipse, все остальное будет примерно одинаково.

И так, нам понадобиться визуальная среда для написания кода – FlashDevelop (http://www.flashdevelop.org/). Но этого не достаточно нам понадобиться еще бесплатный SDK от Adobe который и будет выполнять все операции по компиляции приложений, новую версию Flex SDK вы всегда можете скачать с сайта http://opensource.adobe.com/wiki/display/flexsdk/. Для компиляции приложений я использую версию FlexSDK3.4. После установки FlashDevelop, нам необходимо прописать пути к FlexSDK, предварительно распаковав его(Tools -> Program settings -> AS3Context -> Flex SDK Location).

Чтобы создать проект выбираем Project -> New Project -> AS3 Project, там так же можно выбрать AS3 Project with Preloader, поясню – проект с прелоадером означает, что при загрузке основного приложения (до 100%) будет выполняться код который содержится в прелоадере, в первую очередь прелоадер будет интересен нам для отрисовки прогресс бара, но об этом позже.

Сам AS3 очень похож на Java или C#, так что если вы знаете эти языки вам не составит труда разобраться в программировании на AS3, если же вы пишите на C++(я буду подходить в этих уроках именно с позиции ваших знаний о С++) или другом языке, я советую обратиться к книгам по AS3. Одна из лучших книг(если не самая лучшая) это книга которую написал Colin Moock – Essential ActionScript 3. Хоть в книгах вы найдете уйму информации по той теме которую я вам собрался поведать, все же этой информации не достаточно и она разбросана по чуть-чуть по разным источникам.

Ну хватит писать не по теме, для начала я позволю рассказать о загрузке данных. Я создавал класс CVar который должен содержать обсолютно все переменные которые мы используем в игре, это звуки, тексты, растровые изображения.
Объявление изображений:
[Embed(source = '../Data/Images/cursor_arrow.png')]
static private var src_Cursor_arrow:Class;
static public var pic_Cursor_arrow:Bitmap = new src_Cursor_arrow();

фактически мы будем пользоваться переменной pic_Cursor_arrow,остальной код вспомогательный для загрузки изображения, вначале мы объявляем Embed для того чтобы AS3 понял что мы хотим загрузить изображение, далее строчка с src_Cursor_arrow говорит что нам необходимо загрузить файл cursor_arrow.png в src_Cursor_arrow а после этого мы уже создаем Bitmap который и будем рисовать.
Примечание: Изображение, текст, звук загружаеться непосредственно в swf файл, если вы хотите грузить файлы с сервера смотрите дальше.
Загрузка звука:
[Embed(source = '../Data/Sound/track1.mp3')]
static private var src_track1:Class;
static public var snd_track1:Sound = new src_track1();
Примечание: звук в mp3 я делал 48kbps stereo 22khz, иначе просто не компилируется, может вы найдете другой формат J
Загрузка XML и текстовых файлов:
[Embed(source = '../Data/text.xml',mimeType = "application/octet-stream")]
static private var src_xmlText:Class;
static public var txt_Text:XML = new XML(new src_xmlText());
Примечание: для текстового будет так – static public var txt_ Text:String = new src_xmlText();

Дальше я приведу начальный класс для обработки сообщений(внимательно читайте комментарии) и на этом к сожалению придется закончить урок, а в следующем уроке я познакомлю вас с прелоадером и, и не буду раскрывать все карты, ведь согласитесь, это не так интересно:


public function Main():void
{

if (stage) init();//если главное приложение загружено выполняем инициализацию
else addEventListener(Event.ADDED_TO_STAGE, init);//если нет, добавляем инициализацию в стек событий, которые произойдут после загрузки главного приложения

}

private function init(e:Event = null):void //функция инициализации
{

GlobalStage = stage;//сохраняем в глобальную переменную главный хандл с которым мы будем работать
removeEventListener(Event.ADDED_TO_STAGE, init);
//удаляем из стека функцию инициализации – она нам больше не нужна
addEventListener(Event.RENDER, renderEv);//регистрируем функцию отрисовки
addEventListener(MouseEvent.MOUSE_MOVE, mousemoveEv);//регистрируем событие перемещения мыши
addEventListener(MouseEvent.MOUSE_DOWN, mousedownEv); //регистрируем событие нажатия клавиши мыши
addEventListener(MouseEvent.MOUSE_UP, mouseupEv); //регистрируем событие отжатия клавиши мыши
addEventListener(MouseEvent.ROLL_OUT,mouseoutEv); //регистрируем событие при покидании мышью нашего приложения
addEventListener(MouseEvent.ROLL_OVER,mouseoverEv); //регистрируем событие при возвращении мыши в наше приложение
UpdateTimer.addEventListener(TimerEvent.TIMER, updateEv);//создаем таймер для процедуры апдейта
UpdateTimer.start();//запускаем таймер
CurrCursor = CVar.pic_Cursor_arrow;//устанавливаем наш крусор на приложение

}

public function SetCursor(cur:Bitmap):void
{

CurrCursor = cur;//устанавливаем курсор

}

static public function SetWdg(wdg:FormTemplate):void
{

CurrWdg = wdg;//функция для смены виджета – понадобиться нам позже

}

private function mouseoutEv(e:MouseEvent):void
{

VisCursor = false;
Mouse.show();//если мышь покидает нас показываем мышь и не рисуем курсор(потому как мышь фактически застыла у границ приложения, мы можете закомментировать первую строчку в этой ф-и и посмотреть на результат)

}

private function mouseoverEv(e:MouseEvent):void
{

VisCursor = true;
Mouse.hide();//если мышь пришла в наше приложение скрываем виндосовский курсор и показываем наш

}

private function mousemoveEv(e:MouseEvent):void
{

CurrWdg.mousemove(e.stageX, e.stageY); //реагируем на событие перемещения мыши

}

private function mousedownEv(e:MouseEvent):void
{

CurrWdg.mousedown(e.stageX, e.stageY); //реагируем на событие нажатия клавиши мыши

}

private function mouseupEv(e:MouseEvent):void
{

CurrWdg.mouseup(e.stageX, e.stageY);//реагируем на событие отжатия клавиши мыши

}

private function updateEv(e:Event):void
{

CurrWdg.update();//обновляем окно и щитаем FPS
fps = (fps+ 1000 / (getTimer() – ttt))/2;
ttt = getTimer();

}

private function renderEv(e:Event):void //функция рендера
{

graphics.clear();//очищаем главную поверхность для рисования
CurrWdg.draw(graphics);//рисуем текущий виджет
if(VisCursor)//рисуем курсор
CDraw.DrawImage1(graphics, CVar.pic_Cursor_arrow, stage.mouseX,stage.mouseY);

}

Архив с примерами к первому уроку

Похожие записи:

16 Responses to Flash-приложение на ActionScript 3 для программистов ;). Урок первый.
  1. Кирилл Reply

    Спасибо большое. Тема интересная

  2. Gregory Reply

    Только перехожу на FlashDevelop, отличный урок!

  3. Budy Reply

    Прошу, измените цвета в посте. Нечитаемо

    • ekeeper Reply

      Поправил. Надеюсь, стало лучше.

      • Budy Reply

        Заметно лучше. Спасибо большое ))

  4. Budy Reply

    А можно посмотреть полный исходник кода?
    Я делаю по инструкции – компилятор ругается на все подряд: CVar, CurrWdg и прочее

    • ekeeper Reply

      Попробую автору достучаться.. :)

    • Bourn Reply

      скомпилить код не удасться, чтобы скомпилить необходимо учесть ряд факторов, чуть позже постараюсь прикрепить проект к посту

  5. Budy Reply

    Я разобрал несколько интересных примеров.
    Есть примеры с загрузкой ресурсов, пример с переходами между экранами, а также пример в 3D с использованием Away3D.com.
    Есть желание выложить эти примеры, да и вообще завести свой блог ))
    Думаю, что очень помогу начинающим игроделам.

    • ekeeper Reply

      Напиши на мыло – в письме укажи какой логин для блога тебе нужно сделать (только маленькие латинские буквы – так как пойдет в поддомен), какой пароль поставить, и самое главное – название блога (на русском, пару слов).

  6. Siluet Reply

    я неичего непонел так как незнаю ни 1 языка помогите выучить хотяб 1 язык

  7. Siluet Reply

    голова кругом … )

  8. Siluet Reply

    заранее я работаю с AS3

  9. user Reply

    Спасибо,Но Архив с примерами при инсталляции не показывает cursor_arrow.png.И не скрывает виндосовский курсор.У меня FlashDevelop 4.0.4

  10. владимир Reply

    неужели нельзя по человечесски статьи оформлять…

Leave a Reply to Валерий Бохан Cancel reply

Your email address will not be published. Please enter your name, email and a comment.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">