To celebrate the launch of AIR2 for Mac, Windows and Linux in this blog post I am providing the full source and build chain for Helisso. In case you missed the blog post…
Helisso is a packaging tool that allows you to package your AS2 Flash applications that target Flash Lite. Under the hood Helisso uses a combination of Python compiled binaries, OpenSSL and an AS3 based cab packager written by our engineering team.
In the source you are going to find a huge swathe of code, everything from the Symbian stub applications source to the template Windows application and Python sources. Prepare to be blown away by the amount of work that went into this
What is it?
- A packaging utility that can produce SIS packages for S60 devices
- This new version supports Windows Mobile 5/6 devices
- It targets the Flash Lite 3.x runtime
- It runs on Windows and Mac OS, all versions
Helisso would not have been possible without AIR2, for the simple reason that the time investment in creating two separate applications would have been too great. Ask yourself, how many examples of SIS or CAB packaging have you seen on Mac OS? (clue: none!)
Within the application source you’ll discover a class called PackagerService that makes use of the AIR2 NativeProcess API. This is a HUGE boon for development on platforms using native code, for the first time with AIR it’s possible to make use of applications and services running natively on the OS.
In the case of Helisso, we use NativeProcess to run the Python compile binary Wrap.app and Wrap.exe. Although in the case of the Mac we use a simple script called doWrap.sh, which has the wonderful task of ensuring that we use the correct version of Python on the Mac. So this will be a particular point of interest for the Python developers among you.
At the time that I began work on the user interface we were testing Flash Catalyst CS5, so I thought it appropriate to use this for my project. I began the work in Fireworks CS5 and then moved to Photoshop CS5 for some optimization and to generate the PSD.
From there I was able to produce the simple UI and skin my very first Flex 4 application. If you haven’t tried this then I cannot recommend it enough, the process is ridiculously simple and you can get started in no time.
You can learn more about Flash Catalyst over here.
Flash Builder 4
Using Catalyst it’s possible to produce skins and define the user experience and interface for your Flex 4 applications. Flash Catalyst will write A LOT of code for you, but to really get the most out of the Flash Platform you should know a bit of Actionscript 3.
Flash Builder 4 is now a CS5 product, and its the second step to working with Flash Catalyst, allowing me to add all of the backend code. I merely had to import the FXP file from Catalyst and I was all set after moving a few items around. There were some minor issues with the actual display of fonts at the time, all of which are now fixed in this latest version.
From there I added quite a bit of code to handle the various buttons presses, error events and used our corporate “Adobe Clean” font. So that way it actually looks consistent on Windows and Mac – as well as appearing like an Adobe application.
I must also acknowledge the efforts of Steve Hartley at Oppian who worked tirelessly on this project. Many of you have noticed the “much faster SIS package installations” and various other super-tweaks applied to make the end-user experience amazing.
End User Installation
Helisso Source Installation
Place the Flex/AIR SDK into the helisso\SDK\ folder so that it looks like this..
Add this SDK to Flash Builder preferences, it should look like this…
Mac users are now all setup because Python and OpenSSL are baked into the OS. Windows users need to install Python and OpenSSL separately, so follow closely
The installer is located in Helisso\tools\build\pc\installs\python-2.6.4.msi
Run this installer and use the default settings
Unzip the file Helisso\tools\build\pc\installs\openssl-0.9.8h-1-bin.zip
Rename the folder to OpenSSL and move it to a root folder, you might want to put it in the same location as Python
Add Python and OpenSSL to the Path variable
Check out this video that shows you how to add an Environment variable and find the Environment variables dialog (watch carefully)
You merely have to add C:\Python24;C:\OpenSSL\bin to the end of the string
I hope you enjoy looking at the code and playing with all of these Flash Platform tools. Let me know if you have any questions regarding Helisso and about your AIR 2 projects and ideas.