AS2 History class: The construct function

Here’s a little nugget of information that may or may not come in handy. If javascript is to get the revival that everybody is hoping for (with html5 and ajax), this kind of code could prove useful, especially since we’re touching on some common concepts (mostly prototype manipulation).

Also, if you are being forced to develop something for the flash museum, you might need this snippet of code.

But first, some history lecture…

The problem

Most of the time a flash developer is to develop a larger flash application, he wants to have control of the main timeline. As3 developers have it easy with the possibility of creating a Document class and flex coders extends the Application class all the time.

In flash 8 we typically added scripts in the top-most timeline in_level0 but there where always some problems with this approach, especially in modular applications where you could only cast a loaded swf file as a MovieClip and hope that that instance had had some function references added to it, with execution scope being addressed correctly.

Normal MovieClip symbols from the library could map to external as2 classes fine, but the _level0 timeline was out of reach, even though it behaves just like any other normal MovieClip symbol, when loaded into another swf file.

In as3 this architectural problem was addressed with the advent of the Document class, but you can actually do the same in as2:

The Solution

class Main extends MovieClip{
static var instance:Main;
public static function construct(timeline):Void{
if(!instance){
timeline.__proto__ = Main.prototype;
Function(Main).apply(timeline, arguments.slice(1));
instance = (Main)(timeline);
}
}

public function Main(){
}
}

Invoke the static construct method in _level0 in your 2004-tech flash file, with ‘this’ as the first argument like so:

Main.construct(this);

 

What this method does, is that it replaces the _level0 hidden property __proto__ with the one from your external as2 class, invokes your external as2 classes constructor and in practicality casts _level0 (with the new prototype inheritance chain) as an instance of your external as2 class.

This means that whenever we need to develop modular flash in yesterdays technology, we can stay comfortably in the OO-zone (especially if we also create and implement some interfaces to establish an api), and use _level0 as an instance of your ‘Document’ class

Very nice.

Compiling external javascript files into flash for javascript injection

This page contains detailed information about how you inject javascript into the web page that embeds your flash:

http://frontenddeveloper.net/wiki/index.php?title=JavaScript_and_VBScript_Injection_in_ActionScript_3

One of the drawbacks of adding javascript code directly into your as3 class files, is that it becomes less transparent where to look for the javascript code. But the solution is simply to add the javascript as an embedded resource, like you would a jpeg or png, using the Embed tag.

See this page for an example of how to embed text files:

http://techrays.wordpress.com/2007/09/19/embedding-text-files-in-a-flex-application/

Once you begin to think about that, you can create a JavaScript class that may help your workflow:

package dk.andkrup.resource {
import flash.external.ExternalInterface;
import flash.utils.ByteArray;

public class JavaScript extends ByteArray {
private var rValue : *;

public function get returnValue():*{
return rValue;
}

public static function inject(javascript:JavaScript):Boolean{
if(ExternalInterface.available){
javascript.rValue = ExternalInterface.call(javascript.toXML());
return true;
}
return false;
}

private function toXML():XML{
return new XML("<script><![CDATA["+this.toString()+"]]></script>");
}
}
}

Extend this class and add an Embed tag, in order to externalize your javascript in a separate *.js file.

Example embed tag:

[Embed(source="../js/javascript.js", mimeType="application/octet-stream")]
public class MyJavascript extends JavaScript{
...

(above example implies that you have a javascript called “javascript.js” in the relative location “../js”)

Then it becomes a small one-liner to inject your external javascript subclass with the static inject method like this:

JavaScript.inject(new MyJavascript());

Or, in order to retrieve any javascript return value:

var js:JavaScript = new MyJavascript();
if(JavaScript.inject(js)){
trace("return from javascript: "+js.returnValue);
}

This way you can keep your javascript separate from your actionscript, possibly making it easier to maintain your project.

Disabling the Warning: 1090: Migration issue

In actionscript 2, eventhandlers was already defined in the MovieClip class, so whenever you needed to run some code in an eventhandler, say in the onLoad function, you could ‘override’ the default (empty) onLoad function and all was good.

In actionscript 3 Flash CS assumes that you’re struggling with migration issues if the compiler encounters a function that is named similar to the actionscript 2 eventhandlers.

If I decide to listen for the Event.ADDED_TO_STAGE, and create  an eventlistener with the name onLoad, I will get the titular warning.

I don’t really need that warning; I like to give the eventhandler a meaningful name and that’s what I think ‘onLoad’ is.

To disable this warning, you can browse to this file on your Mac:

/Applications/Adobe Flash CS5/en_US/Configuration/ActionScript 3.0/EnabledWarnings.xml

(I would assume that the ‘EnabledWarnings.xml’ file is in a similar location on Windows)

and change the enabled-attribute value from true…

<warning id="1090" enabled="true"  label="kWarning_DepricatedEventHandlerError">EventHandler was not added as a listener.</warning>

to false.

<warning id="1090" enabled="false"  label="kWarning_DepricatedEventHandlerError">EventHandler was not added as a listener.</warning>

Ubuntu 10.10, Apache2, passenger, RVM, Capistrano and Git – the whole shebang!

I’m learning a lot about our new test server each day!

Today I set up RVM on our apache web server, so that it can serve Rails applications with multiple gem installations. There is a lot of tutorials and write-ups on this topic, but everybody encounters different problems, so why not document my own experiences?

Installation Strategy

My goal was to be able to create virtual hosts that can serve rails apps, depending on unique gemsets.

In order to do this, we need to:

• be able to create a gemset for every project that we deploy on the server

We will need to:

• prepare the rail projects for RVM and Capistrano
• set up apache with passenger and RVM
• prepare gemsets for projects on the server

Existing setup

The apache web server is run by the user www-data on the server, but I have previously set up a user, www-publisher with ssh, a homedir and as a member of the www-data group so I can update web content without sudo. This user will also need to be the user that installs RVM in order to access the rvm-gemsets with no problems.

Currently, when apache is running mod_passenger with RVM, you have some restrictions that you will need to work with.

First, you can only use 1 ruby, but with this ruby you can use different gemsets. This I believe, is because mod_passenger will be installed as a gem under RVM, and apache needs to serve rails apps with gemsets containing the passenger gem.

Existing software

The Ubuntu server was already set up to serve the rails app Redmine, which is an amazing piece of project managing software. More on that in a future post.

Unfortunately it was set up with mod_passenger installed with apt-get, so the first thing was to remove that module.

$ sudo a2dismod passenger # disable the passenger module
$ sudo apt-get remove libapache2-mod-passenger # uninstall passenger

The reason for uninstalling the apt-get installed passenger, is that Apache will need to have passenger in the RVM-controlled ruby that we’re using.

Afaik this means that we can only use 1 RVM-ruby. But we can still use as many gemsets as we’d like to.

Git was already set up on the server with gitosis serving repositories on the local network. I will describe setting up Git later.

Installing

After removing the unwanted software, I had the following list of software to install:

• rvm
• gems:
• passenger
• rails
• capistrano

Plus some additional setup of existing software:

• apache

Here’s what happened:

Installing RVM

In order to install in the correct location as a single-user, we need to install as www-publisher and we need www-publisher to be able to sudo. We also need to revoke sudo from www-publisher when we’re done so www-publisher won’t wreck unnecessary havoc later on. And we need to install the passenger gem so apache can serve rails pages.

$ groups www-publisher #list all groups that www-publisher is a member of
$ sudo usermod -G www-publisher,www-data,rvm,sudo www-publisher  # add www-publisher to the list of sudoers

Once we’re done we can revoke sudo from www-publisher by

 $ sudo usermod -G www-publisher,www-data,rvm www-publisher

Notice that www-publisher was already a member of rvm. I believe that was due to a previous (failed) rvm installation attempt 🙂

Installing in www-publishers home dir

$ su www-publisher #switch to www-publisher
$ cd ~ # not really necessary but now we're in www-publishers home dir
$ bash < <(curl -s https://rvm.beginrescueend.com/install/rvm) # installing rvm
$ echo '[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"' >> ~/.bashrc # adding the rvm function to the file .bashrc in www-publishers home dir
$ source ~/.rvm/scripts/rvm # initiating the rvm function

Testing the installation:

$ type rvm | head -1 # should display 'rvm is a function'

When the time comes, we can log in as, or switch to the user www-publisher in order to create gemsets and install some gems, but for now we really only need to install the ruby that we want to use and passenger gem:

$ rvm install 1.8.7 # installs ruby1.8.7
$ rvm use 1.8.7 # switch to ruby1.8.7
$ gem install passenger # install the passenger ruby API
$ rvmsudo passenger-install-apache2-module # run the install script for passenger on apache

The last line will output some lines that you can use later to configure the passenger module. Copy those lines and save them for later.

Setting up Apache and Passenger

So now we can switch back to our normal administrator user by typing

$ exit # quit being www-publisher

and set up apache.

First we need to set up the passenger module by adding the lines that was output when we ran the passenger-install-apache2-module script

$ sudo nano /etc/apache2/mods-available/passenger.load # edit /etc/apache2/mods-available/passenger.load with a simple editor
$ # in file /etc/apache2/mods-available/passenger.load
LoadModule passenger_module /home/www-publisher/.rvm/gems/ruby-1.8.7-p334/gems/passenger-3.0.7/ext/apache2/mod_passenger.so
$ sudo nano /etc/apache2/mods-available/passenger.conf # edit /etc/apache2/mods-available/passenger.conf with a simple editor
$ # in file /etc/apache2/mods-available/passenger.conf
<IfModule mod_passenger.c>
PassengerRoot /home/www-publisher/.rvm/gems/ruby-1.8.7-p334/gems/passenger-3.0.7
PassengerRuby /home/www-publisher/.rvm/wrappers/ruby-1.8.7-p334/ruby
</IfModule>

We also need to make apache trust the rvm settings that we decide to do later in our rails applications:

$ sudo echo "<code>rvm_trust_rvmrcs_flag=1</code>" >> /home/www-publisher/.rvmrc # set a flag that will make the www-publisher always trust .rvmrc files in capistrano deployed rails apps

Now we can set up multiple virtual hosts for our rails applications

Setting up for a Rails application

We need a RVM gemset

$ su www-publisher # switch to the www-publisher user so we can create gemsets and install required gems
$ rvm use 1.8.7 # selecting the ruby that we will install our new gemset in
$ rvm create gemset myprojectname # creating a gemset with the name 'myprojectname'

and a Virtual Host

$ sudo nano /etc/apache2/sites-available/myprojectname.domain # edit and create the file myprojectname.domain
# in file myprojectname.domain
<VirtualHost *:80>
ServerAdmin admin@domain.com
ServerName myprojectname.domain.com
DocumentRoot /home/www-publisher/myprojectname/www/current/public
RailsEnv development
RailsBaseURI /
ErrorLog /home/www-publisher/myprojectname/logs/error.log
CustomLog /home/www-publisher/myprojectname/logs/access.log combined
<Directory /home/www-publisher/myprojectname/www/current/public>
AllowOverride all
Options -MultiViews
</Directory>
</VirtualHost>

Above virtual host assumes that you wants to serve your rails app from the folder /home/www-publisher/myprojectname/www, while apache is logging to log files in /home/www-publisher/myprojectname/log

Preparing a Rails application for deployment with Capistrano to a server with RVM

We need to configure our Rails app so the passenger loaded apache server can select gems from the correct gemset.

Add a .rvmrc file in your Rails dir

# in file .rvmrc
rvm 1.8.7@myprojectname

This will make the pasenger loaded apache swap to the gemset with the name ‘myprojectname’

Add a setup_load_paths.rb file in the  config folder in your Rails dir

# in file .rvmrc
if ENV['MY_RUBY_HOME'] && ENV['MY_RUBY_HOME'].include?('rvm')
begin
rvm_path     = File.dirname(File.dirname(ENV['MY_RUBY_HOME']))
rvm_lib_path = File.join(rvm_path, 'lib')
$LOAD_PATH.unshift rvm_lib_path
require 'rvm'
RVM.use_from_path! File.dirname(File.dirname(__FILE__))
rescue LoadError
# RVM is unavailable at this point.
raise "RVM ruby lib is currently unavailable."
end
end
# If we're using a Bundler 1.0 beta
ENV['BUNDLE_GEMFILE'] = File.expand_path('../Gemfile', File.dirname(__FILE__))
require 'bundler/setup'

This post will be proofread very soon – there may still be some commands missing

Swf 2 Png

Just saw this tool – could be real nifty for cross-platform games development

http://marshgames.com/swftopng/

Launching a separate Firefox instance from Ant, testing php files locally

Darron Schall has a post about launching Firefox via Apache Ant on mac:

http://www.darronschall.com/weblog/2007/12/launching-firefox-from-ant-on-osx.cfm

I found the post very useful, although the post was made 3 years ago, but where Darron used the task to test Swf files, I was interested in Launching Firefox in order to test php files locally and this had some unfortunate consequences.

My test-task includes copying all relevant project php-files to the local web servers www-location, then opening Firefox as described in above link. Last, a clean-up task can be invoked to remove the test files.

The problem is that Apache will lock the php-files when you test them because your request will require Apache to execute the php scripts, which means that the clean-up task cannot remove the files, because Apache has a lock on them.

Closing the tab in Firefox doesn’t help – you have to close the browser instance (I assume that Firefox somehow sends a ‘end-session’ signal that will make Apache release its file locks – I don’t really have an understand in this regard, but it works if you close the browser).

But if you do not want to close Firefox because you don’t want to close other tabs, you can combine the tips from this post:

http://devongovett.wordpress.com/2009/04/14/multiple-firefox-mac/

By creating multiple Firefox profiles, you can open as many Firefox instances as you have profiles. This way you can open and close a separate ‘test’ Firefox instance that will allow Apache to release your test files from memory on closing the ‘test’-profile Firefox instance without requiring you to close your other tabs in your normal profile Firefox instance.

The arguments for ‘open’ should look like this:

open -n -a /Applications/Firefox.app/Contents/MacOS/firefox-bin http://localhost/${ant.project.name}/ --args -P developer

, where ‘http://localhost/${ant.project.name}/’ is the web directory that just has been created and enabled for testing by a prior Ant task.

My ‘Test on localhost’ target looks like this:

<target name="Test on localhost" depends="Deploy to localhost">
 <property name="browser" value="open" />
<property name="browser.args" value=" -n -a /Applications/Firefox.app/Contents/MacOS/firefox-bin http://localhost/${ant.project.name}/ --args -P developer" />
 <property name="browser" value="open" />
 <exec executable="${browser}" spawn="yes">
 <arg line="${browser.args}" />
</exec>
 </target>

, where the depending task ‘Deploy to localhost’ is the task that copies all files that I want to test to the localhost web directory, and the ‘–args -P developer’ part is the magic that enables Ant to launch Firefox as a separate application instance. The ‘developer’ argument indicates that I have created a new Firefox profile named ‘developer’

Automated Bitmap embedding with custom Ant Task

I just made my own Ant Task:

https://bitbucket.org/andkrup/a3tasks

The tutorial on apache ants homepage was very easy to follow and the work to do is really easy as well – if you can run Ant tasks in eclipse you can debug and run your java code as well.

This particular Task allows a user to specify a folder with image files which, when the task completes, each will be embedded in their own as3 class file.

It’s all very basic and there’s a lot of refinement to be done, for example there is a lot of stuff to add to support font embedding, and swf embedding is not supported at all. But this could help shave off some time embedding a lot of external assets without using the flash IDE.

Debug player options

These options are very useful if you want a lot of information out of your flash debug player

http://jpauclair.net/2010/02/10/mmcfg-treasure/

Flex 3.5, AIR swc & ANT tasks

I am stuck on Flex SDK 3.5 at work.

Today I wanted to create a code library swc file with some AIR-specific classes and I wanted to write a build file.

It seems that there isn’t an acompc-task included in the Flex 3.5 sdk (3.5.0 build 12683), so I was using the exec-task and wrote arg-tags to expand the list of included library-paths.

External-library-path is a nice alternative to library-path if you do not want to redistribute code existing in other swc files, but I got into some problems when I wanted to use -external-library-path, because the syntax apparently has to be a bit different.

This syntax is valid but doesn’t work:

<arg line='-external-library-path "path/to/my.swc"' />

This syntax is also valid, but appears to be similar to setting the attribute append to “true” in the compc ANT-task:

<arg line='-external-library-path+="path/to/my.swc"'/>

If you have tried to substitute the library-path option with external-library-path you might have found that you have to set append=”true” and apparently this is how the command-line version looks like.

Error: could not find source for resource bundle …

So I was working on a simple VideoPlayer class again and I got this error message out of nowhere.

The initial google search gave the following explanation on the FDT forum: http://fdt.powerflasher.com/forum/viewtopic.php?f=21&t=2492

In short the explanation there is that the project is now depending on some definitions found in the code libraries found in the locale/en_US/ folder., but I didn’t explicitly create this dependency so the culprit is obviously somewhere in the code.

I found that by mistake, I imported the com.adobe.protocols.dict.events.ErrorEvent instead of the flash.events.ErrorEvent. The com.adobe.protocols.dict.events.ErrorEvent definition is distributed in the as3corelib.swc that I used in this project, and including this ErrorEvent created a dependency that I wasn’t aware of.

One of the “symptoms” was also that my finished swc file grew 400% in size by including the locale dependencies, as suggested on the FDT forum.