Туториал для изучения базы Haxe/Flash.
Эта статья — мой условный перевод с английского статьи: http://blog.neurotoxic.org/post/2009/01/13/first
Содержимое:- Привет Мир
- Простой прямоугольник
- Двигаем наш прямоугольник
- Пользовательский ввод
- Используем картинку в нашем приложении
- Используем несколько картинок для создания анимации
Так как я только новичек в использовании Haxe, я могу пойти не правильным путем. Я буду рад обсудить если это так.
Привет Мир:
Мы начнем с создания простейшего проекта, с простым отображением текста.Файл Tutorial.hx (с сайта Haxe.org):
class Tutorial
{
static function main()
{
// создает a TextField
var tf = new flash.text.TextField();
tf.text = "Hello World !";
// добавляем его в список отображения
flash.Lib.current.addChild(tf);
}
}
Файл compile.hxml:Строка -swf-header 320:240:30 означает что мы хотим 320 * 240 flash приложение, с 30 кадра/сек.-main Tutorial-swf-version 9-swf-header 320:240:30-swf tutorial.swf
Компилируем используя команду:
haxe compile.hxmlВы получите файл tutorial.swf, который можно открыть с помощью firefox.
Результат:
Простой прямоугольник:
Мы хотим создать цветной прямоугольник:
static function main()
{
var myRectangle : flash.display.Shape = new flash.display.Shape();
myRectangle.graphics.beginFill ( 0x990000 ); // the color of the rectangle
myRectangle.graphics.lineStyle ( 1, 0x000000, 1, false, flash.display.LineScaleMode.NONE ); // the border style// добавляем прямоугольник в верхний левый угол(коодринаты 0,0 )экрана, с шириной и длиной 10.myRectangle.graphics.drawRect ( 0, 0, 50, 50);
// и
myRectangle.graphics.endFill ();
flash.Lib.current.addChild(myRectangle);
}Вы можете посмотреть методы что мы используем для отрисовки в API. Помните что большинство методов наследуется от родительского класса DisplayObject.
Результат после компилирования:
Вы можете поиграть с координатами и цветом. Старайтесь использовать и другие классы графики, например lineTo, drawCircle...
Двигаем наш прямоугольник:
Для каждого нового сгенерированного фрейма мы хотим двигать наш прямоугольник.Мы определим прослушиватель событий
ENTER_FRAME для автоматического вызова нашего метода onEnterFrame():class Tutorial {
static var myRectangle : flash.display.Shape;
static var rectangleWidth = 50;
static var rectangleHeight = 50;
static function main()
{
myRectangle = new flash.display.Shape();
myRectangle.graphics.beginFill ( 0x990000 );
myRectangle.graphics.lineStyle ( 1, 0x000000, 1, false, flash.display.LineScaleMode.NONE );
myRectangle.graphics.drawRect ( 0, 0, rectangleWidth, rectangleHeight);
myRectangle.graphics.endFill ();
flash.Lib.current.addChild(myRectangle);
flash.Lib.current.addEventListener(flash.events.Event.ENTER_FRAME,function(_) Tutorial.onEnterFrame());
}
static function onEnterFrame()
{
myRectangle.x ++;
myRectangle.y ++;
if( myRectangle.x > flash.Lib.current.stage.stageWidth - rectangleWidth)
myRectangle.x = 0;
if( myRectangle.y > flash.Lib.current.stage.stageHeight - rectangleHeight)
myRectangle.y = 0;
}
}Результат:
Пользовательский ввод:
Что если мы хотим двигать прямоугольник используя клавиши стрелок?Мы просто определим прослушиватель на KeyboardEvent.KEY_DOWN и KeyboardEvent.KEY_UP, чтобы знать когда кнопка нажата/отпущена.
class Tutorial {
static var myRectangle : flash.display.Shape;
static var rectangleWidth = 50;
static var rectangleHeight = 50;
static var moveX : Float = 0; // движение прямоугольника по горизонтали каждый фрейм
static var moveY : Float = 0; // длижение прямоугольника по вертикали каждый фрейм
static function main()
{
myRectangle = new flash.display.Shape();
myRectangle.graphics.beginFill ( 0x990000 );
myRectangle.graphics.lineStyle ( 1, 0x000000, 1, false, flash.display.LineScaleMode.NONE );
myRectangle.graphics.drawRect ( 0, 0, rectangleWidth, rectangleHeight);
myRectangle.graphics.endFill ();
flash.Lib.current.addChild(myRectangle);
flash.Lib.current.addEventListener(flash.events.Event.ENTER_FRAME,function(_) Tutorial.onEnterFrame());
flash.Lib.current.stage.addEventListener(flash.events.KeyboardEvent.KEY_DOWN, key_down);
flash.Lib.current.stage.addEventListener(flash.events.KeyboardEvent.KEY_UP, key_up);
}
static function key_down(event:flash.events.KeyboardEvent)
{
if (event.keyCode == 37) // стрелка влево
moveX = -1;
else if (event.keyCode == 39) // стрелка вправо
moveX = 1;
else if (event.keyCode == 38) // стрелка вверх
moveY = -1;
else if (event.keyCode == 40) // стрелка вниз
moveY = 1;
}
static function key_up(event:flash.events.KeyboardEvent)
{
if (event.keyCode == 37 && moveX == -1) // стрелка влепо
moveX = 0;
else if (event.keyCode == 39 && moveX == 1) // стрелка вправо
moveX = 0;
else if (event.keyCode == 38 && moveY == -1) // стрелка вверх
moveY = 0;
else if (event.keyCode == 40 && moveY == 1) // стрелка вниз
moveY = 0;
}
static function onEnterFrame()
{
myRectangle.x += moveX;
myRectangle.y += moveY;
// теперь предотвратим выход прямоугольника за область отображения
if( myRectangle.x > flash.Lib.current.stage.stageWidth - rectangleWidth -1)
myRectangle.x = flash.Lib.current.stage.stageWidth - rectangleWidth -1;
else if( myRectangle.x < 0 )
myRectangle.x = 0;
if( myRectangle.y > flash.Lib.current.stage.stageHeight - rectangleHeight -1)
myRectangle.y = flash.Lib.current.stage.stageHeight - rectangleHeight -1;
else if( myRectangle.y < 0 )
myRectangle.y = 0;
}
}Результат:
Обратите внимание что сперва следует кликнуть на флеш передав ему фокус для перехвата событий ввода.
Внешнее изображение:
Я захотел добавить эту картинку в свое приложение:
Чтобы сделать это, я сперва сделал другой .swf который содержив все внешние ресурсы моего приложения.
В приложении используется swfmill.
Сперва создаем файл resource.xml что будет указывать какие ресурсы мы хотим включить в swfmill, и названия для идентификации этих ресурсов:
<?xml version="1.0" ?>
<movie version="9">
   <frame>
      <library>
         <clip id="men" import="men.png"/>
   </library>
   </frame>
</movie>
Создаем файл resource.swf используя команду swfmill simple resource.xml resource.swf.
Модифицируем compile.hxml для указания компилятору использовать resource.swf:
-main Tutorial
-swf-version 9
-swf-header 320:240:30
-swf-lib resource.swf
-swf tutorial.swfТеперь можем писать код в Tutorial.hx:
class Tutorial
{
static function main()
{
var s:flash.display.MovieClip = flash.Lib.attach("men"); // "men" название определенное в resource.xml
flash.Lib.current.addChild(s);
}
}Результат:
Анимация:
Нынешней целью для нас является создание анимации используя следующие картинки:
Нам нужно модифицировать только наш ресурсный файл resource.xml, для создания сцены состоящей из 4 фреймов, каждый из которых использует одну картинку:
<?xml version="1.0" ?>
<movie version="9">
      <clip id="men1" import="men1.png"/>
      <clip id="men2" import="men2.png"/>
      <clip id="men3" import="men3.png"/>
   <frame>
      <library>
         <clip id="men">
               <frame>
               <place id="men1" depth="1"/>
            </frame>
            <frame>
               <place id="men2" depth="1"/>
            </frame>
            <frame>
               <place id="men3" depth="1"/>
            </frame>
            <frame>
               <place id="men2" depth="1"/>
            </frame>
         </clip>
   </library>
   </frame>
</movie>
Как идентификатор "men" для сцены остался прежним, нам не нужно модифицировать наш Tutorial.hx, нужно только скомпилировать.
Результат:
Он пытается летать ? ;-)
Это конец туториала.
Теперь вы легко можете создавать легкие приложения используя haxe/Flash.
Обратите внимание что я не использовал ООП в коде, ввиду того что нужно было показать основы Flash.
Обратите внимание что я не использовал ООП в коде, ввиду того что нужно было показать основы Flash.
Комментариев нет:
Отправить комментарий