Porting Flash Lite to the Iphone: Rock Werchter Mobile

Today we released a mobile guide for one of the worlds biggest and most popular music festival: Rock Werchter. I think I might say our concept is becoming well known amongst the community but now we finally are reaching out to a more widespread target. Rock Werchter equals 4 days of musical entertainment, belgian beers and lots of fun. Every year thousands of flyers/brochures/posters/…  are being designed, printed and handed out or hang up like everywhere you go.

This year we finally take it to the medium of the future (Mobile for those who should have doubts). Our mobile guide offers a complete Rock Werchter schedule, giving you a quick and clear overview of who is performing when and where and against which artist he is competing. (There are always 2 stages having concerts at the same time). The whole Rock Werchter Area is being visualised into a small and handy road map so unless your name is Pete Doherty you should not get lost. Attending Rock Werchter or just interested in the mobile app? Go check it out here!

But what’s most important: this time we do not only reach out to flash lite enabled phones from Nokia, Sony Ericson, … we have ported our app to the iphone. For the first time (unless we missed something) flash lite content is ported to the iphone. Of course with all of the iphone UI advantages implemented! “How exactly did they managed this!” I hear you guys shout out loud. A while ago I was contacted by Emanuele Cipolloni from barefootsoft.com telling me about an awesome project they were working on: b.Tween. This is a framework using barefootsoft’s EyeGT technology to compile mobile content and deliver it across other devices. They were finishing the framework and wanted to test it out on Flash Lite content which I’d gladly delivered as you probably could imagine!

To summarize: eyeGT is the most comprehensive graphics and
multimedia toolkit that combines an antialiasing vector animation and rendering
engine with extensive texturing support and a multi channel synchronized sound
system. eyeGT provides all this in a compact code base that interfaces to
applications via an extended set of methods and functions (API). The API controls
every aspect of eyeGT, allowing for the finest and most detailed customizations
without reinventing and changing the structure of your existing code.

You can find more information about EyeGT at www.barefootsoft.com. Even though the b.Tween framework is still in a beta version and it is not 100% perfectly optimized, the result is stunning! Check out the youtube video:

For more information about how to download and install Rock Werchter Mobile onto the iphone and any Flash Lite enabled phone, check out our Mobile Werchter Page.

Jarpa: How to package your flash lite project into a JAR file

A while ago I started exploring the new Jarpa Framework. This project is offering a way to package your flash lite project into a JAR file so your application can easily be installed on all types of smartphones!

Even though it sounds simple, most Flash Lite developers are not that familiar with JavaME (at least I’m not) and that makes it a bit difficult to get started. There is no documentation available, just some source code from Felipe and that’s basically it. I think it could be quite handy to have a quick summary of how to get started using Jarpa as a packaging tool.

First things first: you need to set up your development environment: I am using a mac and after a few hours trying a must admit it is a no go. Here is what I came up with:

STEP 1
Setting up your development environment:

• Running Windows xp pro sp2
• download and install the java development kit
• download and install netbeans 6.1 Mobility Pack
• download and install the wireless sun toolkit 2.5.2 so you can emulate your project
• download the specified nokia sdk’s if you like to test it on nokia emulators
• use the nokia sdk install guide (comes with the sdk’s ) to check out how to add these platform into your project ( the install guide offers nice printscreens btw! )

it is important to add the sdk’s as a platform to emulate your project. If you have downloaded and installed these tools you are ready to go and give Jarpa a try!

STEP 2
Download and use the Jarpa Classes

• Download the Jarpa classes and start up a new mobile project in Netbeans.
• Put the donwloaded classes in the src directory ( make sure to check the class paths to structure your src directory correctly! ) Replace the created Midlet by the Jarpa.java file you downloaded.
• Read Felipe’s post to take a quick look at the 3 Jarpa files (Jarpa.java; Connection.java; Resources.java)  and see what they do and how they work together.

Step 3
Using Jarpa to package your swf file into a JAR:

If you have downloaded the classes and made a new mobile project in Netbeans there are a few things you should know as a Flash Lite Developer. It basically works like this:

• The jarpa.java file is a midlet and starts running when clicking the app’s icon once it is installed
• jarpa.java copies the swf file from the builded jar file (yes with swf included ) onto the device
• Via the ”platformrequest” command the midlet opens the copied swf file and launches it on top of the java midlet.

More info:
In your netbeans project directory you have some folders like ”src”, ”build”, … etc. There is also a Resources folder. In this folder you need to stash your swf file! Just right click onto this directory and choose ”add Folder” and then browse to the folder where you have saved your swf file. When building and compiling the project, all the files/folders in this Resources directory are being copied into the JAR file (you can find this builded JAR in the ”dist” directory )

When the user starts up the javaME midlet by clicking the icon, Jarpa looks for the swf file in the JAR and copies it to a directory on the phone. Make sure to check if the midlet does find the swf thats being held in the JAR. In Felipe’s source example the Jarpa Midlet finds the swf in a folder named ”res”. This means that a ”res” folder was added to the project’s Resources directory, containing the swf file. When the JAR is build, it copies that res folder. When the Jarpa midlet finds the swf it copies it to file:///E:Others. This is where you need to put your swf file if you are testing on a s60 device like a nokia n95 for example.

After that the jarpa midlet uses the ”platformrequest” command to lauch the copied swf file in the others directory to open your flash lite project on top of the midlet. If the swf file is running fullscreen it just looks like your flash lite project is launching from itself!

Summary

• Use the 3 Jarpa files to start up a mobile project in netbeans
• add your swf file in the Resources directory using right click and ”add Folder” (browse to the folder where the swf file is located )
• Build your project
• check if the builded JAR in the dist directory contains the folder you added (just open with winrar to check this)
• if the JAR file contains your folder, make sure the Jarpa Resources class links to this directory ( ‘/res/” in Felipe’s Example this should be replaced with ‘/YourFolder/’
• Build your project again

Result

You should know have build a JAR file containg an added folder (“res” in Felipe’s Example) which contains your swf file. If you install this JAR onto your target (nokia n95 for example, using the s60sdk) you see an icon added in the applications section. (using netbeans you should be able to configure which icon you would like ) When you click on this icon the Jarpa midlet launches and looks for the added folder in the JAR file to find the swf file and then copies it to the file:///E:Others directory. After that it uses ”platformrequest” to open the copied swf file on top of the midlet.

Congratulations you know have succesfully packaged your flash lite project into a JAR file. I really hope I explained the flow of Jarpa in a clear way. Please be aware Jarpa does not work on every phone. Check the website for more info. You can always leave a comment if you are having trouble getting started, or just follow the Jarpa Google Group or Felipe’s Forum Nokia Blog.

I hope this tutorial reaches out to many Flash Lite developers because I think it is a nice way to package your projects like this. I know Felipe is working on a tool that does the packaging for you. When I was in Toronto Bill showed us an Adobe Packaging Tool doing the same thing. Packaging your swf file into a JAR.

But you do not longer have to wait for these tools and just do it yourself!

Multimediacollege FlashLite Afterhours Presentation Files

Last week I gave a Flash Lite afterhours session at multimediacollege. I talked about all the basics you need to know when you want to start developing mobile content. At the beginning I talked a bit about Flash Lite adoption, Interface Design, Usability and User-Context. I also gave some tips and tricks to keep an eye on the cpu and memory management. The second part was more code based, having some demos showing how to do stuff like key and device interaction, loading external data like xml and video, some text rendering, tweening images and even some twitter and flickr implementation based on Aral’s SWX Library.

For those who could not make it to the session you can download my presentation files here. If you have any questions feel free to drop a comment!

I had a great time and if you attended my session don’t hesitate giving some feedback.

Sketch Paper for mobile design

Last week a colleauge at Boulevart, Erlend, came up with a brilliant idea. He was wondering why it is not possibile for a mobile designer to storyboard an application’s workflow.

For those who like to sketch the design/flow of their mobile app or website Boulevart is presenting: sketch paper for the iPhone and Nokia N95.

It might be useful when you are brainstorming or trying to find the perfect flow for your app or website.

PDF Files (300dpi):

• Download iPhone sketch paper (.pdf – 5.4Mb)
• Download Nokia N95 sketch paper (.pdf – 6.6Mb)

Photoshop CS3 files (72dpi):

• Download iPhone sketch paper (.psd – 3.1Mb)
• Download Nokia N95 sketch paper (.psd – 4.3Mb)

More info on www.labs.boulevart.be. Erlend even made it on tuaw.com!

Here is already an example I made with it:

Comparing Mobile Platforms: Java ME and Adobe Flash Lite

If you are a mobile developer, you are always being confronted with the Flash Lite vs Java discussion. You may have noticed that more devices these days are supporting Adobe Flash Lite. According to the latest figures, approximately 500 million devices in the market support some form of the Flash Lite specification. That’s not that much compared to the 1.2 billion Java ME devices that are currently available

Bruce Hopkins thought that it would be worthwhile to see the strengths and weaknesses of each platform side by side. He is comparing the latest and greatest specifications for both platforms in the following categories

Graphics
Multimedia
Local Device Accessibility
Security
Network Connectivity
Miscellaneous

Definately check out the whole article.

He concludes saying each platform has its own strengths and weaknesses when it comes to mobile application development. Flash Lite-enabled devices are really good at displaying graphics and multimedia, which lends itself to several gaming applications. On the other hand, devices that support the Java ME MSA platform are the obvious choice when you need to communicate with Bluetooth devices, use location based services, capture audio/video, render 3D graphics, or perform any form of asynchronous communication.

To make your applications as ”rich” as possible you should try to combine both technologies. Use Flash lite to build up a stunnig visual Mobile Interface and try to use Jave ME to expand your app and provide all sorts of functionalities like Reading/Writing phone data, use Bluetooth, Camera, Contact List acces..

This should already be possible using the Jarpa Framework. Created by Felipe Andrade and Alessandro Pace, Jarpa is a free of charge software solution under terms of Apache Software License. You can make richer apps using this framework but you should know it does not work on every phone.

get a list of Compatible Jarpa Devices

I’m really looking forward using/trying/exploring Jarpa, i’m just waiting for some more source code examples in their “How To” section. If you guys should read this, can you give us some more insight on that?

A while ago Sony Ericsson, has made significant progress on bridging the gap between both platforms with its Capuchin technology, which was announced in late April: “…a Java ME API that defines a bridge between the Java ME and Adobe Flash Lite programming environments. This API makes it possible to use Flash Lite as the front end and Java ME as the back end of applications, meaning that Flash tools can be used for UI design while still having access to all the phone services available to Java ME.

Looks promising!

Scotch On The Rocks goes Mobile

I finished an event guide for Scotch On The Rocks today. They contacted me a while ago via Peter Elst asking me if I could provide them a mobile guide. I could do and try out whatever I liked to and I started exploring Flash Lite 3 and the possibilities it offers. I experimented on a global navigation concept, based on stunning motion graphics, composed by my friend Ben Dekeyzer who is also elected for the semifinal round in Adobe’s Design Achievement Awards. Ben did an amazing job turning his motion graphics into amazing optimized mobile formats. Just watch the video below and see how the SOTR Mobile Guide looks like. I’m sorry for the quality but still I think it does showcase the concept very well.

It was a bit of a last minute call so I have not had the time to create installers. I zipped the projects and you can download them here. I have a Flash Lite 2 and 3 version. The fl3 version is the one showed in the video. Feel free to check them out and let me know what you think! Hope you guys like it! Any kind of feedback is always appreciated, just drop a comment :)

DOWNLOAD
———-

flash lite 2 version: download here
flash lite 3 version: download here

I’m not attending SOTR myself but my colleague Nicolas Lierman is. Have a great time at SOTR and I hope you can use the app!