Hi,
I am completely new to OpenFL. I am Javascript Game Developer on Phaser Platform .We got a project in which we have to convert Flash Games to HTML5 upon researching I found out that OpenFL will help to convert flash to HTML5 So I have installed OpenFL and Haxelib.
I went through the examples of Open FL samples particularly Pirate pig what I came to know was I need to have some experience with Flash and action script and HAXE.
So my problem is can you please give me step by step approach to convert Flash game to HTML5 so that even a person who doesn’t know how to work on flash can also easily convert to HTML5.
Thanks.
Hi Sai_Raghava.
Welcome to the forum!
Beforehand - I’d say there is no such thing as a general way to port an
existing flash game to HTML5 utilizing OpenFL. It depends on a number
of things and being a Phaser developer doesn’t really help.
Some important questions are:
-Do you absolutely have no clue about Flash?
-Do you have the source files of the Flash games (including assets like sounds/graphics)?
-Are those using ActionScript 2 or ActionScript 3?
-Do the games use bitmap graphics only or vector art/animation (or a combination)?
In any case the sourcecode of the flash games needs to be ported to the Haxe
language. At least this ain’t too much of a problem if it’s ActionScript 3 because Haxe
is very similar. On the other hand this is just easy if you know about ActionScript 3.
Here’s some further reading:
http://haxedev.wikidot.com/article:as3-to-haxe-quick-guide
A tool like this:
might help automate the process but in my experience I had better luck porting the code
by hand.
Hey obsure ,Thanks for the fast reply.
So you asked me four question .I am gonna give answer to them first
- I don’t have any idea how flash works
2.Yes , I have flash files and there source code
- We have some games in action script 2 and action script 3
4.No Idea whether they are using bitmap graphics or vector animations
Secondly, you have shared a link which converts action script 3 files to haxe code.so accordingly I put all my .as files in test and run the code it gives me all .hx files in out folder.so now I take all those converted files and run main.hx it gives me lots of errors which needs to fixed .please help me .
Thanks
Hi again Sai_Raghava!
I don’t want to step on your toes but maybe you need to evaluate first if OpenFL is the
right tool for you. Though of course it’s possible to port an existing Flash game to HTML5
using OpenFL, OpenFL itself aims at former Flash developers who want to be able to target
different platforms while reusing their existing knowledge. So depending on the complexity
of your original games it might be easier to remake them using Phaser than trying to learn
a complete new API and programming language first.
Unfortunately, as you realized, it’s not as easy as running your AS3 code through as3hx and
your done and without having a bit more-in depth knowledge of ActionScript I doubt you’ll
succeed.
Don’t get me wrong though. OpenFL is great and Haxe is easy to learn - if you really want to start
from scratch.
At the moment I’m just a little unsure how I can help. Are you interested in some more basic
stuff about Flash and ActionScript in general? Are you using an IDE like FlashDevelop?
Also, have you checked out the NPM release?
https://www.openfl.org/learn/npm/getting-started/
If you are coming from Phaser, it might be more your style.
Thanks guys,
I am trying to figure out conversion in OpenFL itself.
Adobe CS6 with createJS toolkit is used to convert the flash to HTML5 but we are not able to install AbodeCS6 . so the only option left with me is OpenFl how i would convert game with your platform
Thanks,
Can I find a refernce project where Flash is converted to Haxe .That would be more helpful
It would be great if we had more examples. There are some that I know of, such as the Away3D samples or the Starling demo, which have clear AS3 and Haxe examples.
Here’s an article I wrote a long time ago:
I believe the syntax here would work fine using OpenFL, we use project.xml and <haxelib name="openfl" /> rather than NMML and NME though.
It’s easier to port ActionScript code to OpenFL, though. I see a few features here from AS3 that weren’t supported properly at the time of writing, but work well in OpenFL. Here’s an updated source file:
@@ -1,20 +1,25 @@
-package {
+package;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.utils.Timer;
import flash.events.TimerEvent;
+ import openfl.Vector;
public class Main extends Sprite {
// variable to see which toony I am moving, if any. Starts at null value because
// I am not moving any toony at the beginning of the game
private var movingToony:Toony=null;
// timer to handle new toony creation. A new toony will be created every 2 seconds
private var theTimer:Timer=new Timer(2000);
// vector to manage all toonies
- private var toonyVector:Vector.<Toony>=new Vector.<Toony>();
+ private var toonyVector:Vector<Toony>=new Vector<Toony>();
- public function Main() {
+ public function new() {
+ super ();
// creation of the four draggable toonies
- for (var i:int=1; i<=4; i++) {
+ for (i in 1...5) {
var toony:Toony=new Toony();
addChild(toony);
toony.gotoAndStop(i);
@@ -27,32 +32,34 @@
// main game loop
addEventListener(Event.ENTER_FRAME,update);
// event to be triggered when the player releases the mouse button
stage.addEventListener(MouseEvent.MOUSE_UP,toonyReleased);
// event to be triggered avery two seconds, to generate a new toony
theTimer.addEventListener(TimerEvent.TIMER,newToony);
// starting the timer
theTimer.start();
}
// what happens when the player presses the mouse on a toony?
- private function toonyClicked(e:MouseEvent):void {
+ private function toonyClicked(e:MouseEvent):Void {
// if I am not moving any toony...
if (movingToony==null) {
// setting the toony I am about to move to the toony I just pressed the mouse on
- movingToony=e.target as Toony;
+ movingToony=cast e.target;
}
}
// what happens when the player releases the mouse?
- private function toonyReleased(e:MouseEvent):void {
+ private function toonyReleased(e:MouseEvent):Void {
// if I am moving a toony...
if (movingToony!=null) {
// looping through toonies vector
- for (var i:int=toonyVector.length-1; i>=0; i--) {
+ var i:Int = toonyVector.length-1;
+ while (i >= 0) {
// if I am touching a falling toony with the same shape as the toony I am currently moving...
// (that is: if both toonies are showing the same frame...)
if (toonyVector[i].hitTestPoint(mouseX,mouseY,true)&&movingToony.currentFrame==toonyVector[i].currentFrame) {
// the toonies match!! Highlighting the falling toony
toonyVector[i].alpha=1;
}
+ i--;
}
// putting the moved toony back to its place
movingToony.y=430;
@@ -63,7 +70,7 @@
}
}
// how do I create a new toony?
- private function newToony(e:TimerEvent):void {
+ private function newToony(e:TimerEvent):Void {
// it's simple: I just create a new Toony instance and place it
// randomly in the game field with a random frame shown
var toony:Toony = new Toony();
@@ -76,7 +83,7 @@
toonyVector.push(toony);
}
// main function
- private function update(e:Event):void {
+ private function update(e:Event):Void {
// if I am moving a toony...
if (movingToony!=null) {
// updating toony position according to mouse position
@@ -84,7 +91,8 @@
movingToony.y=mouseY;
}
// looping through toonies vector
- for (var i:int=toonyVector.length-1; i>=0; i--) {
+ var i:Int = toonyVector.length-1;
+ while (i>=0) {
// moving toonies down
toonyVector[i].y++;
// removing toonies from the stage if they are too close to the bottom of the stage
@@ -93,7 +101,13 @@
// removing toony item from toonies vector
toonyVector.splice(i,1);
}
+ i--;
}
}
}
-}
and here’s an example project.xml:
<?xml version="1.0" encoding="utf-8"?>
<project>
<meta title="Toony" package="com.emanueleferonato.toony" version="1.0.0" />
<app main="Main" />
<window background="#000000" />
<haxelib name="openfl" />
<library path="toony.swf" preload="true" generate="true" />
</project>