How to use transpiled ActionScript with HTML

by Josh Tynjala

HTML graphic

With Apache FlexJS, we can build web apps and pages using ActionScript... no plugin required! HTML is the basic building block of the web, so it's important to understand how ActionScript can create it, modify it, and enhance it.

Let's learn how to combine transpiled ActionScript and HTML by building a simple HTML widget. It will be a loan payment calculator that takes some input values and calculates a result. We're going to build it three different ways, and in the process, we'll learn how well ActionScript can integrate with HTML in a web browser.

Requirements

For this tutorial, you should install Apache FlexJS 0.6 or newer. Use the Apache Flex SDK Installer to download it.

Part 1: Build the HTML DOM in ActionScript

Screenshot of Part 1 running in browser

In the first part, we'll build our HTML widget entirely in ActionScript code. We'll get learn how to create HTML elements in ActionScript and add them to the DOM.

Read Part 1 Get Code

Part 2: Markup and style sheets with ActionScript

Screenshot of Part 2 running in browser

Let's rebuild the same widget using real HTML markup and a style sheet, and we'll learn how to query the DOM with ActionScript to hook everything up.

Read Part 2 Get Code

Part 3: Material Design Lite with ActionScript

Screenshot of Part 3 running in browser

Finally, let's restyle the widget using a popular CSS framework. We'll use Google's Material Design Lite, but Bootstrap and others are easy to integrate too!

Read Part 3 Get Code

Looking for more tutorials like this one?

Would you like to learn more about transpiling ActionScript? Please become a patron, and support the creation of a whole library of detailed, step-by-step tutorials — including video tutorials! Let's work together to teach the next generation of ActionScript developers.

Become a Patron