Author Archives: Josh Tynjala

About Josh Tynjala

Josh Tynjala is a frontend software developer, open source contributor, karaoke enthusiast, and he likes bowler hats. Josh develops Feathers UI, a user interface component library for creative apps, and he is a member of the OpenFL leadership team. One of his side projects is Logic.ly, a digital logic circuit simulator for education. You should follow Josh on Mastodon.

Introducing NextGen ActionScript

EDIT: I am no longer working on the NextGenAS tutorials, but if you’re interested in Apache Royale, check out the ActionScript & MXML extension for Visual Studio Code that I maintain. It’s a spin-off project from my NextGenAS efforts.

While many creative developers thrived during the best years of Flash, plugins on the web have fallen out of favor. To continue building immersive experiences in the browser, you need to start migrating to open web standards, if you haven’t already. JavaScript is alright for little prototypes and smaller projects, but for the kind of projects that we build, it really doesn’t compare to a language like ActionScript.

What if you could continue using ActionScript on the web, but without a plugin? What if you could use JS libraries like CreateJS and Pixi.js with ActionScript? Libraries that have familiar APIs inspired by years of working with Adobe Flash Player. I don’t think developers need to start from scratch. We should embrace the open web on our own terms. We’ve heard so many claims that Flash Player is bad, but we know better. We don’t need to abandon the parts that work so well. The ActionScript language especially, but also the great display list APIs and vector drawing capabilities that we came to love so much.

Today, I’m happy to introduce my new website, NextGen ActionScript. In the first tutorial I’ve written there, I teach you how to transpile ActionScript to JavaScript using Apache FlexJS. This tutorial shows you how to integrate with an HTML page natively, by calling DOM APIs with full compile-time type checking. From there, we’re just a step away from integrating with JavaScript libraries like jQuery, CreateJS, Pixi.js, three.js and more!

I also released a new command line utility named dts2as. The TypeScript community has put a ton of effort into adding type annotations to thousands of JavaScript libraries. As we begin transpiling ActionScript, we should be able to benefit from those same resources. The dts2as utility reads a TypeScript d.ts file and uses it to generate a SWC file for a JavaScript library. Pass this SWC file to the Apache FlexJS transpiler or an IDE like Flash Builder or IntelliJ IDEA, and it’ll be as if that library were written in ActionScript. The compiler will check for errors and you’ll get code hints to speed up your development. ~~For more details, read my second tutorial on NextGen ActionScript, Introduction to dts2as: Using TypeScript definitions with ActionScript.~~

I’m working on many more articles and tutorials (including videos!), and I’m adding new capabilities to the dts2as utility. I’m also watching out for additional ways that new open source tools can improve the workflow with transpiled ActionScript. If you’d love to learn more about how you can keep ActionScript in your workflow (or bring it back!), please support me by becoming a patron. Patreon follows a slightly different model than sites like Kickstarter. Instead of a one-time pledge, Patreon is about more long-term, sustainable funding with small, monthly donations. You’ll get frequent updates about new tutorials and tools as I work on them, and I hope to release some special patron-only exclusives too! It’s easy to sign up and you can cancel at any time. Pledge any amount that you prefer, even as little as a dollar.

Support Josh and the next generation of ActionScript on Patreon

Thank you so much, and happy coding!

Feathers MXML internals: abstracting away Starling initialization

In Starling projects, we need a startup class that extends flash.display.Sprite or flash.display.MovieClip. In this class, we create a starling.core.Starling instance, and we set up behavior for things like resizing the view port and pausing our app or game when it goes into the background. For many projects, this class looks mostly the same. When I create a new project, I usually just copy the startup class from an existing project and modify it to pass in a different Starling root class. It would be ideal if I could simply abstract this bootstrap code away instead.

Flex applications require a significant amount of bootstrapping code too. We don’t deal with any of it, though, because the Flex SDK compiler abstracts much of it away. We can simply create a simple MXML file extending spark.components.Application:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark">
</s:Application>

However, behind the scenes, a Flex SWF starts up with an mx.managers.SystemManager instance as the root display object. The spark.components.Application instance isn’t the root. It’s a child. Once the SWF fully loads and the Flex framework is ready, the SystemManager instantiates the Application and adds it to the display list.

You don’t need to worry about this bootstrapping code in Flex because the spark.components.Application class defines the following metadata:

[Frame(factoryClass="mx.managers.SystemManager")]

As long as you subclass Application this metadata will tell the compiler that your class should be included on the second frame of the SWF, and the class defined in the factoryClass should be the root display object instantiated when the SWF starts up. Once the first frame loads, the SystemManager can display a preloader while the second frame is loading. When the second frame is ready, the SystemManager instantiates the Application and adds it to the display list.

[Frame] metadata isn’t restricted to Flex applications. An ActionScript project built with the Flex SDK compiler may use [Frame] metadata too. In fact, some developers may have already used this metadata with Starling projects to create a preloader for SWFs that run in a web browser.

While it isn’t a strict requirement for supporting MXML in Feathers, I want the new project experience to be as simple Flex’s. We shouldn’t need to manually instantiate Starling and set up code to resize the view port and things. It should be part of some hidden bootstrap code. A new Feathers MXML application should look something like this:

<?xml version="1.0" encoding="utf-8"?>
<feathers:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:feathers="library://ns.feathersui.com/mxml">
</feathers:Application>

The upcoming Feathers MXML SDK will include a feathers.core.Application class that takes advantage of [Frame] metadata.

package feathers.core
{
	import feathers.controls.LayoutGroup;

	[Frame(factoryClass="feathers.core.StarlingBootstrap")]

	public class Application extends LayoutGroup
	{
		public function Application()
		{
			super();
			this.autoSizeMode = LayoutGroup.AUTO_SIZE_MODE_STAGE;
		}
	}
}

All the bootstrapping happens behind the scenes in this feathers.core.StarlingBootstrap class, which serves a similar purpose as the Flex SystemManager. However, instead of initializing the Flex framework, it sets up Starling instead. It passes our subclass of feathers.core.Application to Starling to use as the root class. It listens for the native stage Event.RESIZE to resize the Starling view port and stage. It looks just like any normal startup class for a Starling project. Not much different than Starling’s Scaffold_Mobile sample or the Feathers ComponentsExplorer example.

The main difference between StarlingBootstrap and other startup classes is that StarlingBootstrap must have a method named info(). The compiler generates a subclass of StarlingBootstrap and overrides info() to make it return an object with a number of properties. This object stores things like the name of the Starling root class and, optionally, a Feathers theme. You can see a slightly simplified example of this generated subclass below:

public class _MyFeathersApp_feathers_core_StarlingBootstrap
	extends feathers.core.StarlingBootstrap
{
	public function _MyFeathersApp_feathers_core_StarlingBootstrap()
	{
		super();
	}

	private var _info:Object;

	override public function info():Object
	{
		if (!_info)
		{
			_info = {
				rootClassName: "MyFeathersApp",
				themeClassName: "feathers.themes.MetalWorksDesktopTheme"
			};
		}
		return _info;
	}
}

You can see that our main class was named MyFeathersApp. A string representation is stored in the rootClassName property returned by the info() function. StarlingBootstrap uses getDefinitionByName() to access the Class:

var rootClassName:String = info()["rootClassName"];
var rootClass:Class = Class(getDefinitionByName(rootClassName));

Once it has the Class reference, StarlingBootstrap can pass it to Starling to instantiate when Stage 3D is ready. The compiler will automatically ensure that MyFeathersApp is compiled into the SWF, even though it is not strictly imported here.

Anyone will be able to read the ActionScript code that gets generated by the Feathers MXML SDK compiler. Similar to the Flex SDK, we will be able to add the -keep compiler argument to include a folder of generated ActionScript files in the same place as the compiled SWF.

Additionally, using the StarlingBootstrap class to bootstrap a Feathers MXML application won’t be strictly required. Custom [Frame] metadata may be added to any subclass of feathers.core.Application that will override its default metadata. This will let us provide a different startup experience, if needed. We might want to customize the stage size to support contentScaleFactor, for instance. Ideally, the bootstrapping mechanism should provide acceptable defaults for most projects, while keeping things as flexible as possible for more advanced requirements.

Twitter should natively integrate blogging

Recently, I’ve been noticing that some people on Twitter have been posting strings of multiple related tweets about a single subject. Maybe these have caught your attention too. They’re like little blog posts where the authors can go beyond the 140 character brevity enforced by Twitter. It’s an interesting hack of Twitter’s restrictions that is both clever for helping you talk to your audience a little more in-depth, but it’s also annoying because a single author can dominate your feed.

The first thing I do after publishing a new post on my own blog is post a link to it on Twitter. A lot of my blog’s traffic comes from my followers and their retweets. Similarly, for me personally, Twitter is a wonderfully valuable resource for reading material. Twitter helps me stay up-to-date on the latest news about my favorite technologies, and it helps me keep my audience up-to-date about my personal projects.

A blog requires a certain amount of maintenance. If I install WordPress or something like it on my website, I need to keep it updated. Even if someone else hosts everything for me, I still feel an obligation to post often enough to keep a formal blog. All too frequently, blogs are set aside while we focus on the other work. After a while, we feel guilty, and it becomes too easy to abandon them because we’re a little embarrassed.

Today, I don’t blog as often as I did before Twitter was introduced. It’s easy to feel satisfied from sharing an informal opinion with a quick tweet. At least I said something – even if it’s only 140 characters long. Many of those tweets deserve to be expanded, with a deeper look at the subject, but a quick tweet or two is more convenient. I think these strings of tweets are scratching the blogging itch for many authors, while keeping things a little more informal.

Twitter is about bite sized content, though, and I can’t help but feel like the author is being rude by posting many tweets in succession (even if it’s interesting content that I would otherwise enjoy). It’s a little spammy when someone takes over my feed like that. Many people on Twitter follow many different sources, and we scan through a lot of dirt to find the gems. I love that I have the choice to dig in if I’ve been hooked by a good title or summary, but I can quickly bypass something that doesn’t sound interesting. Multiple tweets in a row from the same author force me to briefly dig in when I don’t necessarily want to.

Authors can benefit from staying within the Twitter ecosystem. That’s where their audience is finding content, so make it convenient for the audience to read your content. Twitter benefits from people staying within the Twitter ecosystem because those people aren’t going elsewhere. However, the 140-character format required by Twitter doesn’t work very well with the type of content that some authors want to write. I think that Twitter can fix this missing piece, though.

Embrace and encourage common behaviors

Twitter should embrace how people are posting strings of related tweets, and how bloggers share links to their posts on Twitter. People want to say more to their audience than Twitter allows, and it seems that some prefer not to leave in order to say it. The company should be asking itself how it can serve that content directly within the Twitter app and website. The more time people spend on Twitter, the more the company benefits.

How do people share interesting articles (their own or written by others) on Twitter? They usually post the title (or a quote) along with a link. How are blog post editors usually designed? Two separate text boxes. One for a title and the other for the body of the post. Wouldn’t it be easy to limit the title to 140 characters? That’s enough to fit into a tweet. All Twitter needs to do is give a blog post some kind of special decoration to show that this tweet includes more content. Anyone who is interested can simply tap or click to read it. A simple button at the beginning and/or end of the post can bring you back to the main feed where you left off.

How these blog posts integrate with Twitter as we know it today is important. The 140 character limit is also one of Twitter’s best features. The full body of a blog post wouldn’t appear on someone’s main feed. It wouldn’t take up more space than a regular tweet. What we see in our feeds are the titles, limited to 140 characters. It will be clear that there’s more to read, but you see the full text only if you want to read it. It becomes the best of both worlds.

Comments and retweets

Commenting is available for free, of course. Anyone would be able to reply to a blog post with a regular tweet. Twitter could go a step further and allow a reply to a blog post that is another blog post. Many people complain that Twitter only allows shallow discussions because you’re limited to 140 characters, and it’s hard not to speak bluntly. With a longer blog format, discussions can be more subtle and go into more depth.

Often, someone sharing an article wants to quote part of it that is especially relevant. Retweeting a Twitter blog post doesn’t necessarily have to be limited to the title that the original author chose. What if you could pick a quote in the middle and retweet that instead of the title? A retweet with a quote would still open up the same full-length blog post, but you’d be tailoring the article to more closely match your audience’s interests.

But what about…?

In the past, companies have tried to provide products that would let you post longer tweets. Obviously, they weren’t all that successful. However, if blog posts were natively integrated into Twitter, I believe that many would embrace them. By making it easy to share and discuss (with retweets and longer replies), and by making it easier to go back and forth between blog posts and back to the feed, the smoother and more engaging experience would allow Twitter to succeed where others couldn’t, in my opinion.

The main issue that Twitter would need to address is people abusing these new blog posts for short tweets that they’re too lazy to edit down to fit within 140 characters. A Twitter feed filled with a bunch of 150 character blog posts would get annoying real fast. Maybe a blog post would require a minimum number of characters, like 500-750. Enough that 4-5 regular tweets would have been needed to fit all of the text.

For a better Twitter

While I’ve frequently talking about keeping the main feed on Twitter looking mostly the same, I think that adding blogging would still change the way that Twitter is used overall. Some people today say that they don’t “get” Twitter. More in-depth content would help reveal the hidden value of this service. Discussions are currently artificially limited. They’re shallow and lack subtlety. I think that this change would encourage people to talk to each other more instead of simply promoting themselves. It would clear up common misunderstandings caused by Twitter’s communication barriers. For those of us that like blogging, I think it would encourage us to do it more. We’d feel less guilty when we don’t blog for a while because blogging would become a part of the same service we visit daily. We’re frequently on Twitter, so we haven’t abandoned anything.