To add QR codes to your project you can use this great library from Jean-Baptiste on GitHub.

In the code below you can switch in the various string variables to have the QR code either, display text, like to a website, send a text message or send an email.

package com.kafkaris.qrcodedemo
{
	import org.qrcode.QRCode;

	import flash.display.Bitmap;
	import flash.display.Sprite;

	public class QRCodeDSemo extends Sprite
	{
		private var _text:String = "Words from QR";
		private var _website:String = "http://kafkaris.com";
		private var _textMessage:String = "SMSTO:0410444555:Hello";
		private var _email:String = "SMTP:jonathan.kafkaris@gmail.com:Hello:Message to Jono";

		private var _qrImg:Bitmap;

		public function QRCodeDSemo()
		{
			var qrObj:QRCode = new QRCode();
    		qrObj.encode(_website);

			_qrImg = new Bitmap(qrObj.bitmapData);
			_qrImg.width = _qrImg.height = 300;

			addChild(_qrImg);
		}
	}
}

Thanks again to Jean-Baptiste.

JK.

(Click on it for new perlin noise generated flow field)

Working on a project that is calling for some interesting ways to show information. Colleague of mine and Computational Designer/Developer at Spinifex, René Christen, introduced me to flow fields. A really nice example he showed was one of Processing guru Daniel Shiffman had online.

I’ve played around with Shiffman’s examples before, recreating them in Processing and sometimes porting them to Flash – so gave it another go with this flow field example.

After porting/tweaking/banging-head (and using the CASA Lib library for a nice NumberUtil) I’ve come up with the example you see above. The field is generated with perlin noise and there are 1000 boids (the black dots) flowing over the screen with relative ease. Obviously not as quick as Processing but I’m happy with the result.

Thanks also have to go to Joel Gillman and schickm.

Grab the source code and have a play! Be sure to let me know of anything you make!

JK

Recently completed and installed for the Sydney Theatre Company is this latest project I worked on at Spinifex Group.

The project was developed using FDT for all coding and Flash Professional to create graphic elements (as .swc files). The end product was an Adobe Air desktop application. Again I took advantage of the great Robotlegs framework for this project and my favourite tweening engine of all Greensock’s Tweenmax. This also marked the first application I used Gestureworks for the touch handling.

Developing over multiple screens can be a bit tricky!

This was our first chance to use the new 3M multitouch screens, and I must say they are the best screen I have used from a touch perspective. Using a Windows 7 installation the screens are detected automatically and require no calibration to instantly give you mullitouch functionality. Unfortunately (at the time of development) there are no drivers for OSX.

The hardware solution was for each screen to have a computer – thus, each one is connected to a Mac Mini with a Bootcamp installation of Windows 7.

There are times when each 3rd of the kiosk needs to know what the other 2 are doing or send what it is doing to them. This was resolved by usingRTMFP for the communication . For example, when someone chooses to watch a video on one screen the others are alerted that this is happening and they temporarily make their video content unavailable. This was done to stop the sound of the videos over-riding each other due to their close proximity to each other. Once the video was complete or the visitor stopped it, the others were alerted to make their video available again.

Google Analytics

Also included in this kiosk was tracking via Google Analytics. Generally only websites can be tracked with this, but with a bit of thinking and a HTMLLoader instance it was achieved!

Installation day came and I was tucked up in a little computer room with the 3 screen, 3 Mac Minis and cables galore. Once I had the computers running and connecting to the local network and tested that they could talk to each other, it was time to leave them for the fabricators to piece it all together.

Setup and testing onsite at Sydney Theatre Company

There was an update that needed to be installed after the kiosk was installed, I was able to do this remotely using Teamviewer – and will also use this process to install any new content or versions of the kiosk.

Updates via Teamviewer

At the end of it all, Spinfex was invited to come along for some drinks for the unavailing of the kiosk and rub shoulders with a few famous people in attendance! Overall I really enjoyed this project, it threw a few curve-balls but I think they got knocked out of the park

Some screenshots and more information can be found at Spinfex Group.

JK

This is how I do it on OSX.

For this example I am merging AIR SDK 2.7 into Flex SDK 4.5.0.20967

Locations of SDKs at time of this post:
Flex SDK – http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.5
AIR SDK – http://www.adobe.com/products/air/sdk/

Download Flex SDK and unzip archive. I then rename the folder to reflect the AIR SDK I’m going to be merging into it – “flex_sdk_4.5.0.20967_air_sdk_2.7″

Download the AIR SDK “AdobeAIRSDK.tbz2″ and place it in the folder you just renamed.

Open terminal and go to the folder you just copied the AIR SDK to.

Type the following and press return:

tar jxvf AdobeAIRSDK.tbz2

This will then unpack the archive and merge it.

Once this is done – add it to your favourite IDE (In my case FDT) and you are ready to go!

JK.

This kiosk has been a massive one in terms of features, content and revisions. When I joined Spinifex this project was already underway, it was being developed by another Flash developer and when it was initially launched for the first time in late 2009 I still had not much to do with it.

The developer moved into a different role in the company so I took over responsibility of the development of the project early 2010. After the 2010 season it was then updated and used again for the currently running 2011 season.

Spinifex Group – Interactive Development from JKaris on Vimeo.

It incorporates content from a 3rd party that is used on the Acura website. This content was developed in AS2 and was having some problems when we were attempting to load it into our kiosk so in the end I decided to load it into a HTMLLoader instance and it worked perfectly.

The kiosk also sends user data to another system we have developed for creating customer leads and tracking the use of the kiosk. Relevant information is sent to prospective customers based on their preferences. The tracking of pages visited also gives the client an overview of how often the kiosk was used and what was popular… or not popular!

Other features include a dealer locator that is accessing a SQLite database or all the zipcodes in the US with their longitude and latitude co-ordinates. With the customers zip we then use a bit of math to work out the distance all the dealerships away, posting the closest 6 dealers. Using AIR’s ability to access SQLite databases makes this a fast process and simple to update if new dealerships are added later.

Twitter is all the rage so @Acura_Insider posts are also visible.

A good old page turner interactive is also in the kiosk for an Acura magazine – is a pretty cool experience turning the pages on a 46″ touchscreen!

Our video department created the video transitions and attractor.

Was a rather challenging project given the number of people involved over the past 2 seasons and 18 months and counting of updates and changes as the kiosk have evolved, but seemed to be worth it as we were told that Acura could attribute a solid percentage of sales due to the kiosk.

JK

(thanks for taking the pic Terry!)

I got a call from friend and Adobe guru Paul Burnett Wednesday telling me that a couple of Adobe presenters had flight problems and could make the conference and if I would like to fill in and talk about how Spinifex has been using Adobe AIR – the next day!

I’d never given a talk on what I do and with basically an evening after work to get something put together of some interest to an eagerly awaiting audience – so I thought… “why not!”.

I shared the keynote talk with Paul and 2 other guys – Adobe’s Renaun Erickson and Indie games developer Terry Paton.

Following up Terry was a bit daunting after his amazing demos of the Molehill API drawing some “oohs” and “aahs”, but I got up and gave my best go. I’d like to think my content was pretty solid – where as my voice was a little shaky!

I thought it would be easier to show some of my work in context whether it be it in use or in a test environment.

I showed a short clip from the TV show What Do You Know? as fitting 11 screens and 2 buzzers only a laptop was not gong to fly!

I then showed a video of a soon to be installed kiosk still in development but demonstrating the Peer to Peer communication available in Flash.

I started making some slides at about 11pm but they were taking too long and were rather bland looking – so for something different I scrapped all that – opened Photoshop and pulled out the Wacom tablet and drew some!

I even got a nice souvenir of the experience to remember it by

It was a fun first time experience (even with the crazy short preparation time!), thanks to Paul, Adobe and webDU, for giving me a shot, thanks for all those that where there and I hope there was something of some interest to you, maybe I’ll see you again!

JK

Some of these kiosks may have to stay running for weeks, months or years, it’s different to a website where someone can browse away eventually – following these steps should keep the kiosk secure and running smooth.

Disable/Cancel all updates:
Windows Updates
Apple Updates
AIR Updates (via http://airdownload.adobe.com/air/applications/SettingsManager/SettingsManager.air)

Remove the login screen:
Open “Run” and type “control userpasswords2″
Uncheck “User must enter a username and password to use this computer”
Apply this and then you will have to enter the username and password that the computer will automatically use.

Add to Startup:
Add the .exe to the startup folder so the kiosk opens as soon as Windows has logged in.

Allow for power failures:
In Boot Camp Control Panel, Power tab, select checkbox “Restart automatically after power failure”

Add Tasks to Task Scheduler:
I add 3 here, 2 are for closing and reopening the application at a time when the kiosk will be not in use. I usually give 5 seconds before I open it again.

The other task is one that will constantly try to open the app – in case it closes or crashes for whatever reason. I tested to see what happens if the app is already open and it seems that multiple instances being opened does not occur – just the one stays open. I usually get this to run every 1 minute.

Opening applications via Task Manager is pretty straight forward, set a time, select what to open. But closing is a little trickier. The way I do it is to have the task run a script.

Somewhere on your computer (I use the Documents folder) create a new file with a .bat extension ie. “close-app.bat”

Inside this file have the following line replacing “application” with whatever the .exe is you want to open:
taskkill /f /im application.exe

Bluetooth
Turn Blue Tooth off so it does not try to discover any devices in range.

Power Settings
Unless you know otherwise, set the computer to never sleep or turn monitor off, basically anything that will cause the kiosk to no longer be usable without having to re-activate it.

Screen Keyboard
When touching the screen by default a screen keyboard becomes available. To turn this off, go to:
Control Panel > Tablet PC Settings
click on the “Other” tab
in the “Tablet PC Input Panel options” area click the “Go to Input Panel Settings”
click on the “Opening Tab”
uncheck “Use the Input Panel Tab”
click OK to confirm.

Operating System UI
For whatever reason the desktop becomes visible for a moment between the scheduler reopening it you’d like nothing to be accessible. I remove all other icons from the desktop except for a shortcut to the application itself.

Auto-hiding the taskbar seems to make it unreachable by a finger touch so I turn this option on. I also turn off the option that allows you to hold a touch and activate a right-click.

These are all the UI I can figure to disable without installing any 3rd party apps or disabling required functionality.

If I come across anything else I’ll add it to this post – if anyone else has something they’d like to add or suggest just pop it in the comments below.

JK

I was scratching my head as to how I was going to do this but a visit to Adobe Refresh and watching a demo of AIR applications on desktop and mobile devices by my good ol’ friend Paul Burnett I was beginning to think this may be a solution.

I had a chat to Paul after the show about how he was managing the communication between applications, he was using Cirrus to achieve this. He advised me to look up Tom Krcha as he had helped him out with this.

Tom’s blog is awesome and after reading a heap of it found a way to get peer-to-peer communication without having to use the Cirrus server (basically because I the kiosks were going to be right next to each other – no need to go out to the internet).

This is where I learned about RTMFP (Real Time Media Flow Protocol). After reading up the docs and building a proof-of-concept app a solution was born!

I am using the Robotlegs framework for my jobs these days so I thought I’d share the Service I created and explain how it works.

package com.kafkaris
{
	import org.robotlegs.mvcs.Actor;

	import flash.events.Event;
	import flash.events.NetStatusEvent;
	import flash.net.GroupSpecifier;
	import flash.net.NetConnection;
	import flash.net.NetGroup;

	/**
	 * @author jono kafkaris
	 */
	public class PeerToPeerService extends Actor
	{
		private var _nc:NetConnection;
		private var _group:NetGroup;
		private var _counter:Number = 0;

		public function init(event:Event = null):void
		{
			_nc = new NetConnection();
			_nc.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
			_nc.connect("rtmfp:");
		}

		private function netStatus(event:NetStatusEvent):void
		{
			switch(event.info.code)
			{
				case "NetConnection.Connect.Success":
					setupGroup();
					break;
				case "NetGroup.Posting.Notify":
					receiveMessage(event.info.message);
					break;
				case "NetStream.Pause.Notify":
					break;
			}
		}

		private function setupGroup():void
		{
			var groupspec:GroupSpecifier = new GroupSpecifier("kafkaris/group1");
			groupspec.postingEnabled = true;
			groupspec.ipMulticastMemberUpdatesEnabled = true;
			groupspec.addIPMulticastAddress("225.225.0.1:30303");

			_group = new NetGroup(_nc, groupspec.groupspecWithAuthorizations());
			_group.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
		}

		// send message to others with this function
		public function sendMessage(txt:String):void
		{
			var message:Object = new Object();
			message.text = txt;
			message.sender = _group.convertPeerIDToGroupAddress(_nc.nearID);
			message.id = _counter;

			_group.post(message);
			_counter++;
		}

		// recieved messages from others handles here
		public function receiveMessage(message:Object):void
		{
			// Now do something with the message - like dispatch an event.
			trace(message.text);
		}
	}
}

Now once you have injected the Service in your Context file:

injector.mapSingleton(PeerToPeerService);

And then Injected it into another class:

[Inject]
public var peerToPeerService:PeerToPeerService;

and call it’s init() function to set it up (I do this in my startup command)

peerToPeerService.init();

you are ready to receive messages and all you have to do to send out a message to other applications that are set up the same way, is to:

peerToPeerService.sendMessage("some string others will hear!");

Then you can handle the received message however you like in the receiveMessage function.

A couple of “gotchas” that stumped me for a bit were:
- The application that sends out a message won’t hear that message.
- Each message has to be unique (hence the counter in the above code – could use a date stamp also perhaps).

There is a little latency I found, roughly half a second but that was fine for me for a solution that did not require an additional app running as a server for the communication.

So once again thanks to Adobe Refresh, Paul and Tom for their knowledge. If you have any questions let me know!

JK

I also found images of the kiosks – unfortunately it was such a crazy install and it was still a construction site at the time that I did not get any shots.

I’m hoping to create a few more blogs like this showcasing the final product and a little debrief.

These interactive were developed during my transition from FlashDevelop to FDT – 2 of them were developed in FlashDevelop and published in Flash Professional – the other developed and published in FDT with an asset .swc file published in Flash Professional.

I had posted an interactive demo of one of these kiosks last year but the quality that YouTube crunched it to was rather poor.

To summaries libraries and technology used – CASALib, Prefuse Flare and Greensock TweenMax were all used. Hardware consisted of Mac Minis and touchscreens were created by using a touch-foil over a curved surface.

Spinifex’s role was to collate all the content, code the kiosks and install the hardware. I had assistance in the collating and installing and a little coding assistance on the Building kiosk due to lack of time – the other 2 I did solo.

Got any questions about any bit feel free to ask.

Spinifex Group – Interactive Development from JKaris on Vimeo.

Brand and History Kiosk

Spinifex Group – Interactive Development from JKaris on Vimeo.

Building Kiosk

Spinifex Group – Interactive Development from JKaris on Vimeo.

Regional Stories Kiosk

And some images – click to see larger versions:

I sourced the images from here and here. Taken by the designer Yuttana Yoosawat.

I hope to clean it up and and add screenshots or create a new post if I find a better way to do it, but until then I just did not want to leave it sitting in my drafts in case it may assist someone.

Now you’ve read that, you can proceed!
******************

******************
EDIT 09/07/2011: Since the release of FDT 4.5 much of this you don’t have to do!
I’m pretty sure this way will still work but, adding things like Android’s Eclipse debugging tools can be handy and creating virtual devices and testing on them would be handy too if you don’t have an Android device.
******************

This is a post on how I have my set-up to develop with Android and Adobe AIR.

It involved visited many sites, reading blogs, watching videos and banging my head on the table.

But I got there – this may not be the most efficient way to do this so always open for suggestions on how to make it easier or better.

I will try to reference all sites and info I used – this post is more for me to remember how I set things up but if it helps anyone else, that’s a bonus.

This is for setting up on OSX 10.6.4

Get Android SDK:

http://developer.android.com/sdk/index.html

Download and unzip. Run “android” from the “tools” folder.

Click on “Available Packages” fold down “Android Repository”

Check:
Android SDK Tools
Android SDK Platform-tools
Documentation for Android
SDK Platform Android 2.3
SDK Platform Android 2.2

Click “Install Selected” – will install the above, give a few minutes.

Click “Virtual devices”, click new, give it a name, select a target, click “Create AVD”. We can now develop on an Android emulator.

Click “Start…” and then “Launch” to get it running.

First time you will need to install the AIR runtime on the emulator.

Open “Terminal”, navigate to the “platform tools” folder.

type and run:
./adb install //flex_sdk_4.5.0.18623/runtimes/air/android/emulator/Runtime.apk

If you would like Android’s Eclipse debugging tools available, in FDT got to Help > Install New Software…

In the “Work with” field enter “https://dl-ssl.google.com/android/eclipse/”

This will find “Developer Tools”. Follow installation steps.

Once installed restart FDT, you may get a message about the Android SDK is missing, if so, go to, FDT > Perferences > Android and in the “SDK Location” field browse to the Android SDK you downloaded earlier.

navigate to Window > Show View > Other

Under Android all “Devices” and “LogCat”

If you have your emulator running you will see it in the “Devices” tab.

If you select the device or emulator you will be installing your app to, your trace() statements will be seen in LogCat.

If you have an Android device, go to the Android Market and search for “Adobe AIR”. Should be first listed, install it.

Get either AIR 2.5 SDK

http://www.adobe.com/products/air/sdk/

and merge with your existing Flex 4.1 SDK

To merge, copy AdobeAIRSDK.tbz2 to your Flex SDK root folder and in terminal use “tar jxvf AdobeAIRSDK.tbz2″

or get Flex Hero

http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+Hero

Add the chosen SDKs to FDT

Install Open Screen Project Manager. This is an great project that Romain Ecarnot has released. Not only can you develop for Android but also other mobile devices.

http://blog.customactions.net/2010/12/openscreen-project-manager-released/

Follow Romain Ecarnot instructions.

The version on the site is slightly different to the one shown in the video and also the Android SDK folder structure had change too.

In the ANT file for Android “build > device > android > build.xml” all references to the “adb” file are currently pointing at the “tools” folder in the Android SDK. This has changed. It is now located in the “platform-tools” folder. Find and change all occurrences of this.

In the build folder run “project.osp”

click on Platform – point to Android SDK and save.
click on Device – select a profile from “Android profile” and save
click on Project and fill out empty fields and add any other setting that are available and save.

If you Ant tab is not visible got Window > Show View > Ant

From the build folder drag “build.xml” to the Ant tab. spin the drop down and you should see a number of option.

The Ant file will only work if it is set to the same JRE as the workspace. To do this got to “External Tool Configurations…” under the drop-down of the icon with the toolbox. With your Ant Build selected, click on the JRE tab and in the option under “Runtime JRE”, “Run in the same JRE as the workspace”. Apply and Close.

Write some code to the location as you setup in “project.osp”

If your Emulator is not open, in the Ant tab, double click Android 01 and start the Emulator

If you have an Android device, switch it to Developer mode and attach the USB.

If this worked correctly you should now see 2 devices in the “Devices” tab.

Double Click “Android 02″ – and you should see your app in running in the external adl player.

Double Click “Android 03″ – and it should install and run on the Emulator.

Double Click “Android 04″ – and it should install and run on the connected device.

This post is featured on FDT’s Community Resources – check out this page for HEAPS more great info! – http://fdt.powerflasher.com/docs/Community_Resources