What is the AS3 to HTML 5 Route?

First off, I just want to say to the creator of this forum zwetan, thank you.

The Flash community is dwindling but I will always remember the time where it was the hottest shit in town and everyone is just talking about how best to execute certain fun experiments in Flash 5 onwards.

This forum is where I come to and read stuff to be happy again.
Thank you for a place of home…a place where I can remember.
I couldn’t thank you enough zwetan.

I really appreciate what you are doing here…you sharing your story about how you were exposed to Flash while working for Microsoft and all that happens since then.

I have gotten to know you via your replies but I dare not show my presence because I like what you have created so much I don’t want to risk destroying what I needed so much, a place where I can feel that loving Flash is a wonderful thing, I don’t want to screw up this place with my stupid speeches and dumb responses.

But today, I believe I actually have a really valid question to ask so I will take the plunge:

First of all, my current work flow:
1: Do all the art and placement and movieclip and put it all on the stage arranged nicely. [YES MOVIECLIP ! Take that you elitist who are constantly trying to leave the Flash IDE, it is a wonderful WYSIWYG visual editor and I am done feeling like I should be ashamed to use it, it is a wonderful thing and I LOVE and EMBRACE IT !]
2: Code the *.as files in FlashDevelop, I love the way it format codes, it is just wonderful for it.

Now unto the question:
I wanted to see what are my options to export what I have created in the Flash IDE + external *.as files [linked via Flash’s library IDE I never use the “embed” codes in *.as files, I do all the linkage in Flash’s library IDE, no I will not be ashamed of it, NEVER ashamed of it and will not be made to feel ashamed because of it, LOVE the Flash IDE.] to HTML5.

1: I looked into Flash Builder…the whole Flash Builder/Flex Framework…
The Flex framework is basically just a glorified component framework right ? Like JQuery UI/Ionic components/Framework 7 components in JavaScript right ?
Never once understood why it seems to be impossible to use Flex’s component inside Flash [as in import the flex components into main.as and addchild, then menu->control->test movie in Flash IDE] even though the other way run seems to be totally easy [making a custom component in Flash IDE and export as swc for use in Flex using Flash Builder/FlashDevelop :: Easy compared to the other way round.]
In any case, I care very little about Flex beyond a breezing curiosity.
Don’t export to HTML 5 since it is just a glorified component framework and that have nothing to do with exporting to another format.

2: FlashDevelop
Everytime I google Flash Develop->HTML 5, all I get is that son of a bitch Haxe fucking language, I read the manual…study it…and I HATE it, I HAAATE Haxe, it’s like AS3 but trying to be different JUST to be different for no apparent reason, I can go into depth about how much I HATE Haxe but that is not the point, all I know is I will NEVER use Haxe even if it is the last computer language on Earth.
The creator could have create an AS3 compiler the same where he does the AS2 compiler but noooo, he think it has a “better” language, which would be actually awesome if it is actually better, but it is not better and it just being different for different’s sake, no…never EVER going to use it.
So can FlashDevelop actually use AS3 and export to HTML 5 without using fucking Haxe ?

3: Apache Royale
Finally some AS3 goodness…but didn’t get anything about a MovieClip class in Apache Royale…another Flash WYSIWYG IDE hating elitist concept, I will never understand why people would want to var button:button = new button(), then addChild and spend 20 minutes setting .x = bla and .y = bla and width/height = bla when they can just draw it out in the Flash IDE and move and size to their heart’s desire.
Is there a way to use the Flash for component/movieclip creation with all the power of it’s IDE timelines/scenes etc and then use this apache Royale thing to convert to HTML 5 ?

4: Is there any valid Flash IDE using AS3 to HTML5 output ?
[Please don’t suggest that built in canvas/webgl output in Animate CC, it doesn’t use AS3 and use some bastardized wannabe sorry excuse for a version of AS3 call createJS, what an act of utter betrayal that Adobe went this route instead of allowing devs to just use AS3 as per usual and just allow export to HTML 5 directly.

Is there any true AS3 to HTML 5 system ?

2 Likes

Hi and welcome to the forum,
kind of the enthusiastic message :slight_smile:

so first, it’s not just me, I host the thing, I try to animate it posting from time to time
but that’s about it, although I’m glad it can make some people happy

little correction, I never worked for Microsoft directly, I did work for MSN INFOS - Microsoft Network (MSN) France (when it was a thing in 1997 :smiley: )


Simple answer: no.

A more elaborate answer would be to talk about all the things you already mentioned, but let make a small summary.

First, it depends what you try to do.

If you’re into building long animations, best bet is to just export to a movie and play it in the browser.

If you’re into small’ish interactive piece, well… something like createJS and/or StageXL for Dart can maybe help.

Now for Apache Royale, technically it does have a compiler that take AS3 and cross-compile it to JS, but … this is in the context of Flex-like components (not the basic Flash symbols like MovieClip or Sprite).

It’s not bad per se, but it will not do what you are after, so like other frameworks (AngularJS, React, Vue.js, etc.) you will have to follow the rules of those components, see Apache Royale - Frameworks.

The good parts is you will be able to use AS3 to write code, and so reuse most of the AS3 logic to also export to other stuff than HTML, eg. Adobe AIR; but yeah it will not feel at all like the Flash/Animate CC timeline.

One possible alternative is to use Apache Royale in a different way that it is intended, eg. ignore the components part and build your own “Display List” library, so when you create a MovieClip or a Sprite it will export to something that HTML5 can understand.

Sadly, what HTML5 can understand for those kind of things is canvas2D, and that is slow;
you can try other manners like using SVG (it will be slow too), or do kinda like Starling and do the render on the webGL, which should be fast.

Kind of what is trying to do spriteflexjs but let’s say early beta.

And even if such project was fully tested and complete, I would say it is just the render part, ideally you would want the API part eg. almost everything under the flash.* package, and that’s a huge thing to implement.

Now I would ask you why is it so much important to publish to the web?

For example, someone could perfectly build a good product, app or game, that install as a desktop and/or mobile app, and simply promote it with video on an HTML page etc.

Remember that Google tried and abandoned Swiffy, Mozilla tried and abandoned Shumway, Adobe tried and abandoned Wallaby, etc. see Some Thoughts on the HTML Target for AIR

So yeah answer is “no”.

That said, you can repurpose your Flash skills to publish AIR apps, it’s different but it is a viable option.

@ForeverMacro A while back I found Red Tamarin project that zwetan also created. It is AS3 on the server side. It is awesome. It allows me as an AS3 / Flex developer to write the client and server side code in one language, with strong typing, OOP, packages, namespaces, inheritance, etc all the good stuff to use the same language on the server.

I am following zwetans progress and it is further along and very fast. I have a hosting company and worked towards getting it setup on that hosting provider but it is beyond my skillset to setup and not available yet broadly. So hopefully soon we will see it broadly or some hosting services by zwetan if you can go that route.

In the mean time I’ve had to create a apps that can run on Windows and Mac (possibly Linux). However, around Flash Builder 4.5 the Flash Builder team disabled the design view. They simply turned it off. So there was no design view for us visual designers / developers. So I asked the Flash Builder team if I could create my own and so I started on a project called Radiate. It was hobby / business idea. It would be design view and output to MXML.

Fast forward some years and it has progressed and outputs MXML. Then Adobe announced EOL of Flash Player in 2020. So now I decide to add an option to export to HTML and continue to support MXML for AIR apps.

The problem is it will take much more resources than I have to turn it into a full IDE and support designer / developer workflow and in addition some areas are still challenging. Also, others with more resources have taken up the challenge to make an IDE (like Moonshine team).

Fast forward again and I have the need to create web pages. Flash Player is not an option so I want to use a visual design tool and so I created Web Export for Adobe XD. It is design to code tool but non-destructive and I designed it to integrate with developers needs. By non destructive I mean that you can change the design and you can create designs that will not break the code you have written). Demo video here.

Great! Visual side is taken care of but if you want to go beyond graphics and text you need to code and on the web that means JavaScript. So if I want to create a web page visually but I would want use AS3.

Now we have Royale being developed by members of the AS3 and Flex community that converts AS3 into JS. It is maturing and it is clear it is a way to go to the web when AIR is not an option.

We have 3 conditions that we (or simply myself) would like:

  1. Have design view available for us graphic designer types
  2. Use language you love (for me AS3)
  3. In this case compile to web
  4. Have framework (for when we create applications)

Royale fits some of that and AS3 with HTML fits part of that.

I’m working on a few posts (first complete):

  1. How to create a desktop project with Electron and Royale in Visual Studio Code link
  2. How to create an AS3 only web page and desktop app in Visual Studio Code (guide is not written yet but video is here)

Royale provides forms, layouts, application like features.

I use Electron when I need SVG graphic support. The webkit in AIR does not support SVG so if you use Web Export plugin from Adobe XD that it won’t display.

And soon when Red Tamarin is published, you will be able to write AS3 client side and server side. I will write a guide for that when it comes out.

2 Likes

so I should not say that right now because it is barely alpha
but in the future people will be able to get a free hosting of their choosing on a subdomain of as3lang.dev

eg. if your username or name you want to use is foobar
you will be able to host stuff on foobar.as3lang.dev

it will support Redtamarin by default.


that is some pretty cool stuff :sunglasses:
Adobe XD is neat, and a web export is needed


It will be able to do a bit more :wink:

se for examples Create Desktop Apps with HTML5 and Go, lorca and carlo.

2 Likes

Personally, I have no problem (though with ES6 limitations) in coding for Canvas or WebGL using libraries such as CreateJS or ZIM. The thing that really irritates me is CSS.
Takes me hours to build a very complex application logic, stable, beautiful, clean and efficient, and then 1 day to manage to center something in another DIV. Coming from the Display List this gives me burning heart. A lot, a lot of antiacids when I work in HTML.

Man the good old times they flew you around the world to talk about your Flash experiments :smiley:

Previously I had wrote this article on https://royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/

In it you could use AS3 in the HTML page, in the Electron Renderer process, and on the Main process you would still use JS or TypeScript.

The latest development is you can use AS3 in the renderer Process and AS3 in the Main process and with or without Royale:

More info here:

ideally what you would really want is replace the V8 engine with the AVM2 engine
so you keep everything AS3, no need to transpile to JS.

1 Like

Would like to hear more your project but I don’t understand the point of the article? The author named his article, “Electron Apps Are Bad, So Now You Can Create Desktop Apps With HTML5 + Golang”. He doesn’t provide any evidence except saying Atom is slow. But is it? Visual Studio Code is built in Electron

He then goes on to say that Lorca has an advantage over Electron because it does not bundle Chrome. That results in a lower file size (good) but it depends on the user having Chrome installed (not good) and having a version installed that will be compatible with their project.

AIR had the issue that the web view was bundled and then it hasn’t been updated for years. Then AIR had StageWebView. That did what Lorca is doing. You would use the system browser. This was good for getting a possibly updated browser but it lacked any communication and debugging support.

What might have been better is for the SDK to be able to link in newer webkit builds for the internal HTMLControl so it can be updated separately. Or make the StageWebView more robust so it can download or update to the WebKit it needs. Android does something like this. It updates the system browser so that even outdated devices can use the latest browser.

Going to reply this comment from the post you linked to:

It’s not that newbies are jackoffs lol or that they were afraid to move to other technologies but rather that they saw the future on the web:

The web meant that:

  • anyone could start creating content no matter the skill set.
  • someone could install your “app” in an instant by visiting your web page
  • someone could update to the latest version of your “app” by reloading the page
  • the “app” would be compiled by the client browser and not compiled and uploaded to a server
  • with server side php or ajax you could add, update or retrieve dynamic data (this was new and amazing at the time - real time data)
  • you could link to other sites and they could link to yours
  • you could reach a wide audience on mac or pc or linux and later mobile all you need was a browser

The web meant that you avoided many of the problems that desktop developers had and gained many advantages over it.

What was missing at the time and what made development so difficult was a few things:

  • web technology - html was a markup language for documents, js was basic, no xhr
  • browser fragmentation - differences in rendering a page or layout meant loss of fidelity or features
  • visual tools - some visual tools did come out but the web tech wasn’t there
  • limited ides editors - editors came out but the web tech wasn’t there
  • instructions - there were no instructions, no classes and no references. knowledge was shared via forums. browsers didn’t come with instruction manuals
  • avoidance of application developers - this is a big one

The professional desktop application developers avoided the web. When they did work on it they were so appalled they abandoned it again and for good reason. The layout, positioning and sizing mechanisms were not designed for application development. It wasn’t possible. It was a downgrade. But instead of creating new frameworks or helping build the features the web needed they went back to their safe Visual Studio or Delphi or favorite desktop IDE and the web technologies stagnated for years (and the era of alternative platforms and frameworks emerged).

The whole desktop world has been so advanced compared to the web so the web has grown organically over time feature by feature by many people that aren’t or weren’t developers. I’ve mentioned numerous times that we could take everything we’ve learned and put that into a few new paradigms and fix many of these issues.

Most of the components out for .NET from 20 years ago monkey stomp web components of today by miles. And performance wise, native is 6 - 12 times faster than web… Going from AS3 to HTML has been a downgrade. I’m ranting… what I’m trying to say is web development would have been much further along if the desktop “master race” helped or would help the web “peasants” (somewhat joking). To be fair, I see Visual Studio Code as a step towards that.

The problem is to bet everything on the Web tech.

Things like lorca and cargo, do not use webview, they detect if Chrome is around and connect to it via chrome API, so off course it gonna be lighter than embedding anything.

Now the real kicker about those is to then be able to dev your app in something else than JS.

Despite all the hype, the framework, the Electron/Atom etc. JS still have issues, HTML still have issues.

You can find jackoff everywhere, building software is still something hard to do, there are still no magic bullets.

JS/HTML does not enable to build better apps, it just enable to start building apps even if you only know the basics, after that it is on the shoulder of the dev.

Whatever tech is used, people will give a good reputation to dev building good apps.

You don’t magically obtain a reputation of building good apps just because you use a particular tech.

You can use AIR, Starling, buy tons of ANE, etc. and still produce a shitty app.
And that is exactly the same for other tech.

Jut saying, even if you use web tech and Electron to build desktop apps, it does not absolve you from the desktop rules: how to load preferences, where to save preferences, how to install/update the app, etc.

There are certain ways that work a bit better than others.

It’s like with programming language, if you don’t use a versioning tool or a bug tracker, thing gonna be much harder to deal with, this dos apply universally to all PL.

You not gonna write better code because you use Git or Github,
things not gonna be bad if you use Subversion, the thing to understand
is that you have to use one whether git, hg, svn, etc.

Same for building apps, sure you can get away doing stuff with an IDE,
but imho using command-line tools and automated builds that put you in a much saner and efficient place.

1 Like

@ForeverMacro Have you tried OpenFL?

There is also support for SWF assets, like the “demos/NyanCat” or “features/display/UsingSWFAssets”

Run npm install -s then npm start -s in any of the directories to install the required dependencies then compile and launch a browser