ActionScript 4

The range of applications and content for ActionScript has shifted significantly in recent years, while the ActionScript 3 language remains virtually unchanged since its introduction in 2006. Adobe believes it is time to revise the language to carefully steer its further evolution towards greater expressiveness as well as productivity and performance gains.

From a language design standpoint, Adobe uses the following assumptions as a guide for next-generation ActionScript development:

• Increasing demand for long-term productivity benefits such as robustness, modularity, and maintainability to complement shorter-term productivity benefits characteristic of scripting languages, such as speed of development
• Demand for high performance increases
• Demand for hardware utilization increases

First, Adobe plans to make significant performance increases in the short term with a goal of continuing performance improvements over the long term. Performance is the primary goal when we approach how to evolve ActionScript. Second, Adobe aims to increase developer productivity by simplifying the language, improving tool support, and boosting bug prevention. Finally, having reduced unnecessary complexity, we will be in a position to innovate within the Flash runtimes much more quickly.

Features Currently In Discussion;

• Stringent static typing as default, with optional dynamic typing: Most stretches of most programs are expected to benefit from static typing. However, ActionScript 3 tends to lapse into dynamic typing all too easily in places where absolutely stringent static typing would be preferable. This will be corrected. Dynamic typing will still be available when needed, but it will no longer be the default for ActionScript, and it will need to be enabled explicitly.
• Type inference: Type declarations will only be necessary in certain strategic places. Everywhere else the compiler will automatically infer suitable type declarations and treat the whole program as statically typed, even though the programmer does not have to state any types. Thus the convenience of untyped programming can be approximated quite well, while providing the performance advantages of typed programming.
• Hardware-oriented numeric types: For example, int , uint , float , float4 , byte , short , long , etc. (the exact set of types is still under discussion). Currently in ActionScript 3 integer values can overflow into floating point values. This will be changed so that numeric operations will never change the underlying representation of the numeric. We foresee this addition greatly reducing implementation complexity and improving runtime performance.

These are just a couple of areas that we are focusing on. We will update this document as our thinking evolves and solidifies around how the language and virtual machine will change.

Compatibility

Its is stated that AS4 will not be completely compatible with AS3. So maybe there will be a compiler option and one must choose EITHER one or the other (similar to the mutual exclusive option between AS3 and AS2. Depending on the amount of changes in AS4 we may see a new virtual machine inside the player designed to run only the AS4. Currently there are two VM’s – one for AS3 and one for older ActionScript.

Wishlist

Many developers have been dreaming (ex. here & here) of features for ActionScript for ages. Some features I would love to see;

• Abstract Classes with Abstract Methods (ASL-18) – Well, do I have to have to say something about that wish? Basically abstract classes are such an essential thing, I am still wondering how Action Script made it to 3.0 without them. Just documenting which Methods must be overridden is not enough. And the known workarounds are really… well… hm… forget it – this is a compiler thing, which cannot be checked at runtime.
• Generics (FP-811) – The Vector class is a good start – but it’s not well supported in Flex 3 (keyword: data binding) and it’s not a generic concept. There should be something like Generics in Java that provide type checking at compile time, but can also be used for any custom class, just like in Java.
• Enums – While I have a (almost) perfect workaround for Enums in AS3, it would be great to see native language support.
• Improved ‘Event Listener’ syntax and performance. I like the features offered by the AS3-Signals project.
• Operator Overloading (ASL-10) – Still missing it in Java and this is, where Action Script could actually beat Java. I don’t want to have another equals method for comparing arbitrary classes for equality – I want to be able to simply override the == operator to be able to compare any two objects for equality. Or the + operator for concatenating two data structures. Just like in C++ or smalltalk.
• Method Overloading (ASL-9) – While ActionScript provides an easy way to simplify methods with long parameter lists using default values for parameters it’s not enough to justify not having method overloading. I do not want to have to write methods like doSomethingWithString(value:String), doSomethingWithInt(value:int), doSomethingWithObjectA(value:ObjectA),…

What would you like to see in AS4?

The New Apache Flex Branding

The image above shows the winning design. It looks really great! See more versions of the winner design here. It is now the official logo for the Apache Flex project.

Some other Apache Flex logo design entrants that I really like are here;

• Grid of Circles Design
• Four-Friends Design

Five Questions

These are my best guess based on things read online. They may or may not be true.

1. Is Adobe still committed to Flex? Yes. We know Flex provides a unique set of benefits for enterprise application developers.  We also know that the technology landscape for application development is rapidly changing and our customers want more direct control over the underlying technologies they use.
2. Does Adobe recommend we use Flex or HTML5 for our enterprise application development? In the long-term, we believe HTML5 will be the best technology for enterprise application development. We also know that, currently, Flex has clear benefits for large-scale client projects typically associated with desktop application profiles.
3. Is Adobe still committed to Flash Builder? Yes. Flash Builder will continue to be developed and Adobe will work to ensure Flex developers can use Flash Builder as their development tool with future releases of Flex SDK.
4. What guarantees can Adobe make in relation to Flex applications continuing to run on Flash Player and Adobe AIR? Adobe will continue to support applications built with Flex, as well as all future versions of the SDK running in PC browsers with Adobe Flash Player and as mobile apps with Adobe AIR indefinitely on Apple iOS, Google Android and RIM BlackBerry Tablet OS.
5. You said Adobe is committed to Flash Builder – what exactly does that mean in the context of future Flex SDK support? Future versions of Adobe Flash Builder will continue to provide code editing, compilation, debugging and profiling support for Flex applications. Adobe will undertake the required work to ensure Flash Builder is compatible with future releases of Flex SDK.

The Big Question

• Isn’t Adobe just abandoning Flex SDK and putting it out to Apache to die?  Absolutely not – we are incredibly proud of what we’ve achieved with Flex and know that it will continue to provide significant value for many years to come. We expect active and on-going contributions from the Apache community. To be clear, Adobe plans on steadily contributing to the projects and we are working with the Flex community to make them contributors as well.

Flex vs. HTML5

So we see Adobe has a vested interest in both Flash Platform technology (Through Flash Builder, Flash Professional, and Flash Player) and HTML5 (Through Dreamweaver, and upcoming Muse and EDGE tools). So let’s take a quick look at Flex advantages.

Flex has now, and for many years will continue to have, advantages over HTML5 for enterprise application development – in particular:

• Flex offers complete feature-level consistency across multiple platforms
• The Flex component set and programming model makes it extremely productive when building complex application user interfaces
• ActionScript is a mature language, suitable for large application development
• Supporting tools (both Adobe’s and third-party) offer a productive environment with respect to code editing, debugging and profiling

In Summary…

I love the Flash Platform and I’m excited for the future of HTML5. I’ve worked mostly with Flash and Flex over a dozen years as a designer, developer, and consultant. It offers mature tools and a powerful OOP language to create great content. While I’m excited as always to learn more alternative platforms, I’ll continue to prioritize Flash and Flex development as long as I have clients contacting me and paying a premium for my Flash and Flex projects.

Resources

• The official Apache Flex project
• Adobe’s Devnet Article on “Adobe’s commitments to Flex in the future”
• My summary of HTML5 gaming frameworks (A MUST-SEE)
• My summary of HTML5 app frameworks.

For HTML5, I’ve found many frameworks to support application development in the browser. Many also have IDEs to help development and other (non-browser) publishing paths such as iOS/Android.

Fundamentals of HTML5

We probably all forget that HTML5 means “Hyper Text Markup Language”. Its a formatting language that allows for linking (hyper). Version 5 is here, but will not be finalized for a few years (2014?). So what is version 5 and why are people so excited?

Well, ‘HTML5′ technology is really a combination of 3 key technologies. All are free to use, standardized, and far more powerful than previous versions. So people are excited. Also many people are using mobile to access the web. And mobile web usage is increasing really fast. *AND* because mobile browser was created more recently (and thus not limited by historic limitations in computers and the related bureaucracy, *much* mobile web browsing TODAY is compatible with HTML5. All good things.

• HTML5
• JavaScript (Often via JQuery)
• CSS3

The Challenges of the New Platform

Software Developer Jesse Warden points out the following; The issue, however, is that it’s not that straightforward. There are 5 main issues that the HTML/JS/CSS stack (which I’ll here after refer to as the HTML stack), have when coming from the Flex platform in a consulting context (there are more, but these are the ones that matter with regards to the context of this post). They are:

1. DOM as a dynamic display technology
2. JavaScript lacking mature language constructs
3. There are larger problems for multiple Browser Vendors to solve
4. the industry’s libraries & frameworks are young from an Enterprise context (yet not!?)
5. The Video Codec Issues
6. Tooling

HTML5 ‘Frameworks’

Above HTML5+JS+CSS, a framework adds a consistent library of actions, events, and UI. We generally hope that a framework can be powerful to meet our needs, fast to meet our development deadlines, and flexible to allow us to customize and extend the framework to meet our particular needs and fringe cases.
Types of frameworks (sometimes they overlap

• HTML5 Framework- Low-level, flexible, but not specific for app, game, or mobile development. Runs in an HTML5-enabled browser
• HTML5 Game Framework- High-level and game specific. This is ONLY good for game development. Runs in an HTML5-enabled browser. See this awesome post Flyer Game for HTMl5.
• HTML5 App Framework- High-level and app specific. This is ONLY good for game development. Runs in an HTML5-enabled browser
• HTML5 Mobile Framework- This is generally an ‘app’ framework PLUS it may allow you to publish to ‘native’ device languages and handle finger ‘touch’ events, accelerometer and other mobiles-specific features.

Table of ‘HTML5 App Frameworks’

Resources

• HTML5 Resource Guide of links to simple starter templates.
• Non-frameworkHTML5 Boilerplate template
• Short list of Best HTML5 Frameworks

Next Steps

• I wanted to test out a few frameworks for HTML5 to learn more. Check back soon for a review of the best frameworks.
• Please add any comments or suggestions below…

I am planning some new videos. See the mindmap. The goal will be a code-only (no slides) screencast I as I code and talk improvisationally. Each bullet point will be addressed quickly with a working example and without much context or background. The tutorial videos and code samples will be cocktail themed (beer, wine, Gin & Tonics) in terminology and graphics. Why? Why not.

Suggestions

What would you suggest I add to the EXISTING topics? What NEW topics would you like to see? Please comment below this post.

Suggestions for topics to add to these tutorials?

MindMap of Topic Ideas

Want More Video Tutorials?

Introduction

BlazeDS is the server-based Java remoting and web messaging technology that enables developers to easily connect to back-end distributed data and push data in real-time to Adobe Flex and Adobe AIR applications for more responsive rich Internet application (RIA) experiences.

BlazeDS consists of three key services:

• The Remoting Service allows your Flex application to directly invoke methods of Java objects deployed in your application server.
• The Message Service provides a publish/subscribe infrastructure that allows your Flex application to publish messages and subscribe to a messaging destination, enabling the development of real-time data push and collaborative applications.
• The Proxy Service allows your Flex application to make cross-domain service requests in a secure and controlled manner. In other words, it allows your Flex application to access a service available on a different domain than the domain from where the application was downloaded (without having to deploy a crossdomain.xml policy file on the target domain).

There are certainly other free and commercial options. A well known one also comes from Adobe, LiveCycle DS.

There are many resources which compare these two products. Ben Watson says – LiveCycle Data Services is ultimately targeted at large enterprise deployments for web-based applications that would serve thousands of clients and as such is priced accordingly.  We have heavily invested for several years now to make a very unique, highly performant and valuable product for a very small market and as such we priced accordingly and turned the BlazeDS version over to the open source community, ultimately satisfying most of the use cases for free.

Installation Instructions for MacOSX

DOWNLOAD

1. Download the ‘Turnkey’ here: http://opensource.adobe.com/wiki/display/blazeds/BlazeDS
2. Unzip it anywhere you want
3. Open Mac OSX’s Terminal.app

START

4. Navigate to your blazeds install folder (use the ‘cd’ command)
5. Start Server – Run “tomcat/bin/startup.sh”
6. Start DB – Navigate to the /sampledb/ folder FIRST, then run “./startdb.sh”
7. Open a webbrowser to “http://127.0.0.1:8400/samples/testdrive.htm”

STOP

8. Hit Ctrl+C within terminal (to end step 6 that is still running)
9. Repeat step 4
10. Stop Server – Run “tomcat/bin/shutdown.sh”

My Thoughts

I have used a wide variety of backend technologies. For whatever reason I spent years with clients who preferred a LAMP stack with PHP connecting to Flash and Flex via AMFPHP (another great product). So much of my experience lies there, and .NET. However I’m excited by proven, free products like BlazeDS and am excited from my setup and research and doing a few simple demos. Perhaps soon I’ll post some demos. Stay tuned!

Do you have experience with BlazeDS? Please comment below.

Title

AS3: FDT Install & Project Setup

Runtime

7:01

Title

AS3: Language Basics With Cocktails

Runtime

24:28

Title

AS3: Flash Professional Install & Project Setup

Runtime

7:27

Title

AS3: FlashBuilder Install & Project Setup

Runtime

13:47

Video Description – Sections

1. IDE (Code Editors)

• Flash Builder: Install & Project Setup (Watch Video)
• Flash Professional: Install & Project Setup (Watch Video)
• FDT: Install & Project Setup (Watch Video)

2. Basic Programing (via Flash Builder)

• AS3 Basics With Cocktails (Watch Video)

3. Advanced Programming (via Flash Builder)

• OOP Programming w/ AS3 (Coming Soon…)
• Design Patterns (Coming Soon…)

4. Frameworks (via Flash Builder)

• PureMVC (Coming Soon…)
• Robotlegs (Coming Soon…)

Want More Video Tutorials?

The Syntax Highlighter plugin for WordPress does this well and is easy to add.

Example Code

[actionscript3 light="true"]
package classes
{
	//--------------------------------------
	//  Imports
	//--------------------------------------

	//--------------------------------------
	//  Class
	//--------------------------------------
	public class Sample
	{

		[Bindable]
		protected var _sample : String;

		public function Sample ()
		{
			_sample = "Hello World";
		}

	}

}
[/actionscript3]

Output Code

package classes
{
	//--------------------------------------
	//  Imports
	//--------------------------------------

	//--------------------------------------
	//  Class
	//--------------------------------------
	public class Sample
	{

		[Bindable]
		protected var _sample : String;

		public function Sample ()
		{
			_sample = "Hello World";
		}

	}

}

These instructions help you to create a new website running WordPress. WordPress is a fantastic, free website-creation tool that is popular and powerful. Its ideal for blogs or simple page based websites. It can integrate handle Flash media and e-Commerce business, but that is far outside the scope of this article.

This article assumes you have no web presence whatsoever, except a personal email, which we will use only sparingly.

ONE TIME SETUP

Web Host Setup

First you will need space to store your files. You can think of this as a harddrive, but one that is not on your computer. It exists in a building far far away. This way you can access the blog from anywhere on any computer, and so can your audience who reads your blog.

There are myriad options for a web host. I chose one ages ago, and always use it; DreamHost.

• Open your favorite web browser
• Browse to https://www.dreamhost.com/
• Sign-Up for your free Dreamhost Account.

Domain Registry

You can think of the domain as the front door to your blog. You can send anyone in the world your domain and they can access you. Its kind’ve like how an email address allows anyone send you an email – but the domain let’s anyone find your blog.

• Sign-In to the web panel. This is the Dreamhost Admin
• Add a New Domain. You may choose any name you like, as long as it doesn’t exist, but I recommend one long word without dashes without underscores ending in “.com” (i.e. “TravelingIsSuperFun.com”)
• Open your favorite web browser
• Waiting? Browse to your new domain (e.g. http://TravelingIsSuperFun.com). Most likely it is not ready yet. It will take “1 to 3 days” before we can Install WordPress per below. There is no way to speed this up. Just check back and when your domain shows “something”. Then you are ready to continue. While you wait you can “Setup New Email”. This is the only step you can do while you wait.
  Setup New Email

Certainly you already have a personal email. This is the one you likely used when you signed up with DreamHost per above. However for many reasons having a domain-specific email is beneficial (e.g. sammy@TravelingIsSuperFun.com). It looks more professional, and it helps separate your blog emails from your personal emails. It is unlikely you will receive much emails, unless you choose to distribute this email or list it on your blog. I do both.

• Sign-In to the web panel. This is the “DreamHost Admin”
• Add New Email. There you will see an option to “Create New Email Address”. Leave all settings as default, except these. Customize these settings;
  • Email Address
  • Mailbox Name
  • Password
• Choose “Create Address”
• Now Access Your Email To Test It. Enter your username and password at the “Webmail for your Email Account” (e.g. http://webmail.TravelIsSuperFun.com/ )

Install WordPress

Are all steps to “Domain Registry” complete? All of them? Sure? Ok then continue here.

WordPress will be the scaffolding for your entire site. It will be the graphics and text the user sees as well as the administration panel that you access to add/edit/remove content to your blog. There are mountains of great tutorials, videos on youtube, and books on the subject.

• Sign-In to the web panel. This is the “DreamHost Admin”/li>
• Add WordPress. Click the WordPress icon. It is located at the horizontal center and vertical center of the page.
• Choose “Simple Installation”.
• There are 4 form fields and one dropdown. Leave the first field blank.
• Set the dropdown to your new domain (e.g. TravelingIsSuperFun.com)
• Set the “Name:” to anything you like (e.g. This is my Travel Blog). You can change this later.
• Set the “Email:” to your new email (e.g. sammy@TravelingIsSuperFun.com).
• Click “Install It For Me Now”.
• Waiting? Browse to your new domain (e.g. http://TravelingIsSuperFun.com). Most likely it is not ready yet. It will take “10 to 15 minutes” before you see a WordPress at your new website. It will display something like “Welcome To WordPress”. At the same moment it becomes available, and email will be sent to your new email. So you can wait for that and click the links inside the email to see your blog.

Google Analytics Setup: Optional

Google Analytics is the enterprise-class web analytics solution that gives you rich insights into your website traffic and marketing effectiveness. You can check back and see who visited your website, why, for how long, etc… for any day ever in the history of your website. Very nice. And its free. It is best setup on day 1, but you can add it at any time in the future.

If you are not interested in analytics, skip this section and skip any instructions which mention “analytics” in other sections below.

• Sign-Up for Google Analytics. You can use your existing free Google account if you have one.
• “Add New Domain”. If you can’t find out how, search on http://www.google.com for “Adding a domain to Google Analytics” and follow the instructions. Complete analytics setup here is outside the scope of this article.

Google AdSense Setup: Optional

AdSense is an ad serving application run by Google Inc. Website owners can enroll in this program to enable text, image, and video advertisements on their websites. These advertisements are administered by Google and generate revenue. Its fast and easy to setup and totally free.

If you are not interested in AdSense, skip this section and skip any instructions which mention “AdSense” in other sections below.

• Sign-Up for Google AdSense. You can use your existing free Google account if you have one.
• “Add New Ad”. If you cannot find this. Follow this help section.

WordPress Setup: Part 1

• Following the “WordPress Install” section above you will receive an email outlining how to login to your website. You will access the admin with a web browser through a subdirectory of your domain (e.g. http://TravelingIsSuperFun.com/wp-admin/). This is your personal blog’s “WordPress Admin”. You will spend 99% of your time on this project inside this admin.
• The first page of the admin is the “Dashboard”. It shows a navigation bar with tons of buttons on the left.
• Click the arrow next to “Users” to expand the menu. Click on “Users” (yes, same word used twice)
• Click on “Admin”. Change the password. Memorize it.
• On the Users Menu, click “Add User”. Create a new account with your preferred username and password (you can use the same password as you used for admin if you like). Be sure to set the Role to Administrator. This way you can add/edit/delete (do everything) on the blog.
• In the upper right, choose log out.
• Log In again with your new username and password. Use this new username and password 100% of the time. Leave the original “admin” user account as a backup (i.e. You really never use it, but DO remember the password in case you need it.)
• Browse to your blog. Just to see how it looks. (e.g. http://TravelingIsSuperFun.com/).
• Then continue with ‘Part 2′.

WordPress Setup: Part 2

• You will access the admin with a web browser through a subdirectory of your domain (e.g. http://TravelingIsSuperFun.com/wp-admin/).
• On Left-bar menu, expand ‘Plugins’ and choose ‘Add New’. For each of the following; search, install, activate.
  • Advertising Manager – This you will use for AdSense, per above
  • Akismet
  • All in One SEO Pack
  • Google Analyticator – This you will use for Google Analytics, per above.
  • Duplicate Post
• On Left-bar menu, expand ‘Appearance’ and choose ‘Themes’. Browse any, preview, any, and activate one. For now this will be your theme, so pick one you want for at least a few weeks. Any changes to ‘widgets’ will be lost when you change themes, so pick one you like.
• On Left-bar menu, expand ‘Pages’ and choose ‘Add New’. You will add 4. For each; Enter a the title/description here.
  • Home / This is the home page.
  • About / This is the about page.
  • Services / This is the services page.
  • Contact Us / This is the contact page.

• Browse to your blog. Just to see how it looks. (e.g. http://TravelingIsSuperFun.com/).
• Then continue with ‘Part 3′.

WordPress Setup: Part 3

• You will access the admin with a web browser through a subdirectory of your domain (e.g. http://TravelingIsSuperFun.com/wp-admin/).
• On Left-bar menu, expand ‘Posts’ and choose ‘Categories’. Add 2 new ones. ‘Fun’ and ‘Work’. You can delete these later.
• On Left-bar menu, expand ‘Posts’ and choose ‘Add New’. Add a few posts. There is TONS you can do here. But just give a title, input a sample paragraph, choose a category (of ‘Fun’ or ‘Work’) and click ‘Update. Checkout the site again to see.
• On Left-bar menu, expand ‘Appearance’ and choose ‘Widgets’.  Each widget is a block of real estate on your blog. It can contain many things. A list of links, some text, an image, a calendar, a search text input, and much more.  Drag a box from the center area to the right. Checkout the site to see the progress. Experiment!

That’s it. You did it. We’ve used the most commonly used 20% of WordPress. There is much more to learn, but you already have all the basics now. You can send the link to your friends and share it!

ONGOING MAINTENANCE

DREAMHOST MAINTENANCE

-Only visit dreamhost to; pay your bill each year, add new email accounts. I.e. basically you never visit here.

WORDPRESS MAINTENANCE

-Login to the admin to add/edit/expand your website. You will login here frequently until your site is “done”.

That’s it!

I’ll provide more info soon about;

• Goals
• Marketing
• New Content – Video Tutorials
• Roadmap

For HTML5, I’ve found many frameworks to support graphics and video games. Some of of them are;

• ImpactJS, Akihabara, LimeJS,FlashJS, MelonJS, GameQuery, ProcessingJS
• EffectGames, Aves, CraftyJS, GameClosure, Mibbu, PropulsionJS,
• IsogenicEngine, and more…

I wanted to test out a few frameworks for HTML5 to learn more. I will start with a remake of my ‘Flyer Game’ I created years ago.

Articles

I wrote ‘Flyer Game’ for a series of articles I wrote for Adobe’s “Inspire” (formerly ‘EDGE’) online magazine. To appreciate the HTML5 versions of the game, its great to look back at the general game theory as well as the Flash theory shown in these articles.

• In “An introduction to developing games on the Adobe Flash Platform” I overview the complete AS3 source code in my article
• In “Developing Flash Platform games with the PushButtonEngine” I used a popular framework (PBE) to create the same game.

Downloads of FlyerGame

I provide full source-code to several versions of the FlyerGame. You can compare how each works, and learn more about gaming frameworks that way.

FLASH VERSIONS

• 1. Flash Pro and AS3 (Very Simple) – Great Article w/ Source Code
• 2. AS3 and PushButtonEngine (Component-Based) [PBEv1] – Great Article, Github for Flash Professional, Github for Flash Builder ActionScriptOnly
• 3. AS3 and PushButtonEngine (Component-Based) [PBEv2] – Github for Flash Builder ActionScriptOnly
• 4. AS3 and Flixel (Coming soon!)
• 5. AS3 and FlashPunk (Coming soon!)

OTHER VERSIONS

• Unity3D w/ C# – Github Source (Component-based, like #2 above)

HTML5 VERSIONS

• EaselJS Framework – Github Source (Simple, like #1 above)
• ImpactJS Framework – Github Source (Simple, like #1 above)
• CraftyJS Framework – Github Source (Component-based like #2 above)
• MelonJS Framework – Github Source (Simple, like #1 above)
• Spaceport.io Framework – Github Source (Simple, like #1 above)
• LimeJS Framework – Github Source (Coming soon!)