Mxml

Here’s a little neat trick I didn’t know – actually I haven’t used mxml that much so I don’t really know if this is trivial…

<?xml version="1.0"?>
<fd:MovieClip xmlns:mx="http://ns.adobe.com/mxml/2009"
    xmlns:fd="flash.display.*">
</fd:MovieClip>

It looks like a custom component, but actually it’s just a bread’n’butter MovieClip (or it’s a componentized MovieClip).

It compiles as a swf with the mxml compiler, so flex applications doesn’t have to use <mx:Application/> as root element.

In other words, you don’t have to use the flex component framework in order to use mxml to mark up your application layout.

Obviously, you will then have to manage the layout yourself.

Advertisements

Converting fla files to xfl and vice versa to simplify copying publish settings

A really nice feature of the xfl flash file format is that (mostly) everything is text-based.

Today I was working on a small landing page project with 1 fla file that is supposed to display small variations each week for the next 6 weeks. Some of the variations are changes in graphics, and the easiest solution was to create 7 different publish settings each with different compiler constants.

Copying a publish setting will copy all the current settings, bit for some reason, the library settings pointing to the swc files used, was not copied into the new publish setting.

Instead of tediously selecting and copying every compiler constants back and forth in 7 publish settings, it was much easier and faster to convert the fla file to xfl, and edit the PublishSettings.xml with a simple search and replace.

This way you can replace a text like this:

<AS3ConfigConst>CONFIG::FLASH_AUTHORING=&quot;true&quot;;CONFIG::debug=&quot;false&quot;;CONFIG::production=&quot;true&quot;;</AS3ConfigConst>

with a text like this.

<AS3ConfigConst>CONFIG::FLASH_AUTHORING=&quot;true&quot;;CONFIG::debug=&quot;false&quot;;CONFIG::production=&quot;true&quot;;CONFIG::week34=&quot;false&quot;;CONFIG::week35=&quot;false&quot;;CONFIG::week36=&quot;false&quot;;CONFIG::week37=&quot;false&quot;;CONFIG::week38=&quot;false&quot;;CONFIG::week39=&quot;true&quot;;</AS3ConfigConst>

in the PublishSettings.xml instead of risking carpal tunnel syndrome by copying each constant and clicking a lot of gui components in the gui.

Converting a fla file into a xfl file is as easy as unzipping the fla file – it’s a zip file with the *.fla extension. Converting back is rather obvious.

I use some ant tasks to streamline the process:

<target name="Convert Xfl to Fla">
<zip destfile="${dir.flash}/${_flash.name}.fla" basedir="${dir.flash}/${_flash.name}" />
<delete dir="${dir.flash}/${_flash.name}" />
</target>

<target name="Convert Fla to Xfl">
<mkdir dir="${dir.flash}/${_flash.name}" />
<unzip src="${dir.flash}/${_flash.name}.fla" dest="${dir.flash}/${_flash.name}" />
<delete file="${dir.flash}/${_flash.name}.fla" />
</target>

 

Problems & Errors encountered during Red5 installation on Ubuntu 11.04

During a Red5 installation on Ubuntu 11.04 I encountered some problems and errors.

The Red5 documentation does not really include the common problems that you may encounter while installing it.

This can be attributed to Red5 previously requiring java, ant and subversion.

Target System

Ubuntu 11.04

Java

Look up resources on how to install java on ubuntu 11.04. The short version is that java isn’t included in Natty and Natty doesn’t know where to look for it, so you need to add a line in a file with an url so Natty can look up a java distribution and install it.

Anyway, this is how it went:

Problems while installing Red5

Problems while testing Red5

After creating the start-up scripts (can be found on the bottom of this page ) Red5 hopefully starts up like we want it, and we want to test it.

But first we need to get acquainted with Red5 terminology in order to be able to google properly.

The Red5 version 1.0 installation contains client-side demo samples that require a server-side counterpart. Clients connect to a Red5 server application which you must install in the Red5 webapp folder.

NetConnection.Connection.Failed

Most of the time this status message was popping up because Red5 couldn’t install the server application correctly. Somehow I got this to work when:

1. Red5 was started with sudo (see below), so file permissions is out of the picture
2. Connecting to the correct url

Starting the Red5 server manually:

sudo /etc/init.d/red5 start > dev/null &

Problems with the admin part

In order to run the admin demo, you need to do this first:

1. find the documentation about how to install the required parts (it’s here: http://wiki.red5.org/wiki/AppServer/Plugins – the page is aptly named so it’s easy to find) so you know what to do.
2. download the admin plugin (it’s here: http://red5.googlecode.com/files/AdminPlugin-1.0.zip)
3. download the admin.jsp into the webapp/root folder (from here: http://red5.googlecode.com/files/admin.jsp)
4. use the admin.jsp to create a new admin user.
5. input the correct text in the server input field (only the server name, like in an apache config without stating protocol and port)

Installing on Natty can be done like so (assuming that you installed red5 in (/opt/red5):

cd /opt/red5/webapps/root
sudo wget http://red5.googlecode.com/files/AdminPlugin-1.0.zip
unzip AdminPlugin-1.0.zip

The documentation assumes that all required jar files are included in the zip file, but atm, they’re not…

java.lang.ClassNotFoundException

The name says it all – you need some classes, because either the Red5 team assumes you already have them installed or they just didn’t bother including them in the distribution.

This support ticket describesthe problem:

http://code.google.com/p/red5/issues/detail?id=41

While the ticket status is set to fixed, you would assume that the AdminPlugin-1.0.zip has been re-packaged, but at the time of writing you need to fetch the missing jar files from somewhere else:

Using jarfinder.com I found these compatible files:

• http://mirrors.ibiblio.org/pub/mirrors/maven2/org/apache/tomcat/jasper/6.0.18/jasper-6.0.18.jar
• http://mirrors.ibiblio.org/pub/mirrors/maven2/org/apache/tomcat/jasper-jdt/6.0.18/jasper-jdt-6.0.18.jar
• http://mirrors.ibiblio.org/pub/mirrors/maven2/org/apache/tomcat/jasper-el/6.0.18/jasper-el-6.0.18.jar

that you can download directly into the plugins folder like so (assuming that you installed red5 in (/opt/red5):

cd /opt/red5/plugins
sudo wget http://mirrors.ibiblio.org/pub/mirrors/maven2/org/apache/tomcat/jasper/6.0.18/jasper-6.0.18.jar
unzip jasper-6.0.18.jar
sudo wget http://mirrors.ibiblio.org/pub/mirrors/maven2/org/apache/tomcat/jasper-jdt/6.0.18/jasper-jdt-6.0.18.jar
unzip jasper-jdt-6.0.18.jar
sudo wget http://mirrors.ibiblio.org/pub/mirrors/maven2/org/apache/tomcat/jasper-el/6.0.18/jasper-el-6.0.18.jar
unzip jasper-el-6.0.18.jar

Hopefully this helps

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