Von Animate CC (aka Flash) nach HTML5 mit IvanK Lib

Von Animate CC (aka Flash) nach HTML5 mit IvanK Lib

Viele Flash-Entwickler erkennen derzeit die Notwendigkeit, sich mit neuen Techniken auseinandersetzten zu müssen. Nach der Absage von Apple an das Flash-Plugin auf mobilen Endgeräten, gewinnt HTML5 immer mehr an Bedeutung.

Eine Möglichkeit, Flash-Inhalte nach HTML5 zu konvertieren, bietet CreateJS, ein Framework direkt von Adobe.

Beim Surfen im Netz bin ich auf ein anderes Framework aufmerksam geworden, das im Syntax sehr ähnlich zu ActionScript ist und die wichtigsten Klassen nachbildet. Ivan Kuckir hat IvanK Lib entwickelt, eine kleine und schnelle Bibliothek, die zusätzlich WebGL unterstützt.

Im Folgenden will ich die Umsetzung eines Beispiels von Flash/Actionscript in HTML5 mit der IvanK Lib zeigen.

 

Ausgangsdatei ist ein Flash-Datei, die das Hüpfen eines Balles simuliert. Zur Vereinfachung kommt hier die Sinus- bzw. Cosinus-Funktion zum Einsatz.

Abb. 1: Der Ball im Flash-Player (aus Gründen der Kompatibilität hier als Video-file)

 

Der relevante Quellcode:

var count:Number = Math.random() * 180;
var bounceHeight:Number = 100 + Math.random() * 200;
var floorHeight:Number = 300;
var speed:Number = .1;
var wert:Number = 1;
var ball_mc:Ball = new Ball();
ball_mc.x = stage.stageWidth / 2;

addChild(ball_mc);
this.addEventListener(Event.ENTER_FRAME, run);

function run(e:Event):void
{
ball_mc.y = floorHeight - Math.abs(Math.cos(count)) * bounceHeight;
ball_mc.x += 5 * wert;
if (ball_mc.x > stage.stageWidth) {
wert = -1;
}
if (ball_mc.x < 0) {
wert = 1;
}
count += speed;
}

Nachdem einige Variablen initialisiert werden, erfolgt die Positionierung des Balles über einen Event EnterFrame. Diese berechnet permanent die neue x- und y-Position des Balles. Um das Springen zu simulieren wird eine Cosinus-Funktion verwendet und der negative Kurvenverlauf über Math.abs() nach oben gespiegelt.

Mit Hilfe der IvanK Lib läßt sich die Programmierung fast 1:1 in HTML und Javascript übernehmen:


<script src="ivank.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
var stage; var ball; var wert = 1; var count = Math.random() *180; var bounceHeight = 100+Math.random()*200; var floorHeight = 300; var speed = .1; function Start() { stage = new Stage("c"); stage.stageWidth = 550; stage.stageHeight = 400; var bd = new BitmapData("ball.png"); ball = new Bitmap(bd); var bg = new Bitmap(new BitmapData("bg.png")); //bg.scaleX = stage.stageWidth / 1024; //bg.scaleY = stage.stageHeight / 512; stage.addChild(bg); ball.x = stage.stageWidth/2; stage.addChild(ball); stage.addEventListener(Event.ENTER_FRAME, run); } function run(e) { ball.y = floorHeight - Math.abs(Math.cos(count)) * bounceHeight; ball.x += 5 *wert; if (ball.x > 530){
wert= -1;
}
if (ball.x < 0){ wert= 1; } count += speed; }
// ]]></script>

 

Er treten nur leichte Unterschiede in der Programmierung auf, da natürlich die Grafiken anders eingebunden werden und die Variablen auf die Funktionen start() und run() verteilt werden müssen.

Download der Dateien: Archiv

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.