Had some free time around Christmas, so I decided to have a look at Unity 3D since it looks like (at this time) only reasonable way to do 3D in flash. Yes there are other 3D engines out there like Alternativa, Flare 3D, Away 3D, but none of them have a visual editor that comes even close to the Unity’s IDE.
The version that supports export to flash have been around a few weeks now, so I thought I’d give it a try.

Firstly I did a scene with the high poly count that tested the GPU rendering. This was absolutely fine, as the performance relied heavily on the GPU.
One thing I noticed though, that Terrain object wasn’t being rendered ? I guess it’s because in Unity Terrain is more of an abstract construct / game object rather than actual mesh.. Although, I’d imagine it would make sense to converted to editable mesh for flash ?

Secondly I tried converting an existing FPS game. It was a FPS tutorial made by Graham McAllister.

You can see the result here.

The conversion was pretty straightforward, there were a few compiler errors that needed fixing, but nothing too major.

The game itself work quite allright, there are some bits missing (like the lines of fire from the automated shooting robots) , but I guess it could be down to me not having a pro version..

The swf file size is 8.6 MB which is pretty hefty compared to normal 2D games or websites, but then, it’s a complete game , with lots of textures, meshes and sounds.

Also absence of mouse lock is quite evident, but this is fault of the flash plugin, not Unity. Support for mouse lock is coming soon though!

All in all, this is still a preview version, I imagine a lot of things will be fixed , optimised , added.

So far I am quite impressed (well done Ralph and team !)  and we’ll see how will it compare to the Unreal Engine to flash conversion!

This is my first HTML 5 demo

It was build using Canvas so should work on most of modern browsers that support HTML5.

Just a simple particle wall, with randomly coloured particles of red-ish hue, reacting to mouse movement (or ‘wind effect’ if you will) also if you press and hold the mouse, they will change in intensity.

I’ve started building this demo as a part of the “playtime” during the HTML 5 workshop called “Intro to creative Javascript and HTML 5 Canvas” with Seb Lee-Delisle at FOTB conference in Brighton, finished it today, (added a background and a dynamic resizing based on the window dimensions).

The positive thing about working with HTML 5 is that it made me very thankful for Flash plugin. No hacking around for unsuported features, no shims, no version degradation fallbacks… Just works in every browser. Haven’t really appreciated this until I’ve experienced html 5. Another thing that I become to appreciate is ActionScript as a language. OOP features that creates supports for encapsulation such as strong typing, private / protected variables, supports for real classes.

It felt like traveling back in time , to a time of flash plugin version 5/6 and AS2, when its scripting capabilities were quite limited, and flash multimedia / display capabilities were quite crude, compared to it’s current capabilities.
Fortunately , there seem to be a solution! It’s strongly typed modern language / platform called haXe (similar to C# or Java) which can output to several target platforms / languages, one of them being JavaScript. Good news is that my programing IDE of choice (FDT) will support this in the next version which is comming very soon!

Last week Adam Feldman Google’s APIs Product manager announced on the official Google Code blog that they are announcing some new apis but more importantly shutting down some old ones.
Among them a very popular Translate API.

This decision came as a big surprise to many developers, myself included. I have used this api in an CMS Flex App caled SiteManager.  SiteManager has a copy module and it’s used as a copy source for multilingual flash campaign websites. I used it to quickly generate non english copy for other versions of the site, to have a good idea how the multilingual labels and text would sit within the website whether there are any space or alignment problems etc.. It was just a great way to preview site in other languages before the officialy translated copy arrived from the client.

Now this is gone and while there are other alternatives (I recommend checking out the Microsoft Translator V2 ) this decision raises some questions about Google as a company and their relationship to developers.

I personally like(d) Google a lot, they were an example of a great open and innovative company, with a real love for developers. This love wasn’t just proclaimed but proved by many free APIs they provided for us developers.

But after this how can you trust Google API ever again ? What if this project I am working on and my customers will depend on it will be no longer working in half a year when Google decides to shut down a particular API the project uses? How am I supposed to explain that to my customers. What am I to do if they all demand their money back?

And what about their motto : “DO NO EVIL” ? Shutting down translate is clearly hurting many developers and many project, some of them non profit and designed to help other people from different countries. How is that NOT evil ?

And what’s next.. Google Maps ?!

The sad thing is , they have other alternatives like limiting the amount of queries per couple hundred a day for a free version and licencing projects that need more traffic.  Or to simply find a way to prevent an abuse. Shutting down this API is simply uncharacteristic of Google, very sudden and unkind decision. I’d expect it from Facebook but not from them. What’s going on with Google?

This is one of those articles where title pretty much says it all.

Now with AIR 2.6 iOS camera support and the unrestricted camera feed access to developers in iOS4, we can finaly build some cool AR apps on the mobiles right ?. Well… in theory at least!

The Setup :
To see how it would perform, I made a quick AR demo using Flar toolkit 2.5.5 for motion tracking and pattern recognision and Papervision 2.1 for the 3D scene. Scene consist of a simple flat shaded 3Ds model,  plus 4 interactive buttons. The whole scene has less then 170 polygons. A very lightweight scene with very low poly count. To make the conditions fair for both devices I kept the AR scene dimensions the same (hence it looks smaller on HTC Desire HD). Both apps use gpu rendering.

I exported the app into an iPhone format using latest available AIR SDK – 2.6. For comparison I also converted the flash project into Android format. I tested the iPhone version on iPhone 4 and Android version on HTC Desire HD.

The demo has 2 buttons that enable the user to turn off the motion tracking/pattern recognition - (FLAR ON/OFF), and scene 3D rendering. By turning off the 3D rendering, and seeing the changes in frame rate,  we can see how much resources are consumed only by the rendering of the 3D scene. By turning off the 3D rendering we can see how much resources are spent on the motion tracking.

Here’s the quick video showing the iPhone, and Android version

Framerate results comparison:

(Swf had frame rate set to 25fps)

And here are the lessons learned :

Lesson 1: Augmented reality can be implemented on mobile devices via flash conversion, just not in any usable manner

Although app will still run and function, the poor frame renders the application unusable. The problem is not just visual – stuttering screen playback, it’s also functional. If you have interactive elements in the scene such as buttons, low frame rate will make a click / touch detection difficult and user would have to try multiple times for a touch event to register.

Lesson 2: iOS conversion performance is superior to Android one.
Although both devices run on a similar hardware (both have 1GHz processor) and the apps were converted from the identical swf file – Android performance was on average worse. Also, while framerate on the iPhone seemed to be pretty stable, on the Android it was generally erratic and fluctuating.

Why is this happening?

I personally think it’s due to the way the apps are being converted and run on the device. While iPhone app is generated by converting the swf file into a native app, android app is being converted into an android air app compatible file and run by the Air runtime wrapper that has to be separately installed on the device.
That , in my opinion , creates a performance decrease , as it requires an extra hardware abstraction layer between the code and the device hardware. Think of it as flash file being run inside a flash plugin in the browser, versus OS native app. By design, swf app will never achieve the same performance as the native one.

The question here is , why does Adobe approaches Android conversion in this way. As for the iOS, it is quite clear why the iPhone apps are converted to native format. Apple wouldn’t let them do the Air wrapper approach. For the Android , they don’t need to however, yet they choose to do it. From the marketing point of view , it makes perfect sense of course. In the same way the spread of flash plugin helps to spread the entire platform and the tools (mainly the creative suite).
From the developers perspective it’s not that great though.

It means that every Android user , in order to run your app, will have to download AIR for android runtime. Although this helps to keep the file size relatively small (android version 451Kb vs 5.3MB iPhone version) the air runtime itself has 17 MB!
I would really like to hear justification from Adobe, as they were really conscious about increasing the file size of flash plugin (still less then 3MB) when almost everybody has broadband at home, yet they’re OK with forcing people to download 17MB on 2G/3G mobiles? I think they might be shooting themselves (and developers ) in the foot here.

The extra AIR Runtime file size issue is bad enough, but if you add an inferior and erratic performance to the mix there is really no reason to prefer conversion to air vs native app.

I am aware that performance in AIR 2.7 is better (there’s no Android Air runtime available at this moment so can’t test this personally) and with flash 11 and molehill we might see even better increase when it comes to GPU rendering.

However; there will always be applications that rely heavily on the cpu and for those, native app conversion will be always superior option.

Recently I’ve worked on a mobile app for the company I work for , and instead of just showing company’s address or displaying it on a map I thought.. wouldn’t it be more helpful to give user directions from wherever he is to where the company is ?
To do this, you of course, need to utilise a few APIs:

1. Google Maps API to download map tiles and draw a poly line from user’s location to destination,
2. Air’s Geolocation API to determine current users location
3. Air’s Multitouch API to let the user pan/zoom and rotate the map.

Getting the google maps to show on your display list is pretty straightforward, there’s a couple caveats though. It is now compulsory to initialise map with a sensor parameter (just a Boolean switch expressed in string format indicating whether map is used on a device with geolocating sensor.)
Also , to get it working in AIR app, you have to pass the ‘url’ parameter. I used local host for this.

		private function initMap() : void
		{
			//init map
			map = new Map3D();

			map.x = mapsDimensionsBox.x;
			map.y = mapsDimensionsBox.y;
			map.key = apiKey;
			map.url = "http://localhost";
			map.sensor = "true";

			map.setSize(new Point(mapsDimensionsBox.width, mapsDimensionsBox.height));
			map.addEventListener(MapEvent.MAP_READY, onMapReady);
			map.addEventListener(MapEvent.MAP_PREINITIALIZE, onMapPreinitialize);
			gfx.addChild(map);
		}

Getting user’s location is relatively simple, but it’s best to check first whether user’s device support’s it and whether it has been turned on :

	private function getGeolocation() : void
	{
		if (Geolocation.isSupported)
	         {
	            geo = new Geolocation();
	         	if (geo.muted)
	         	{
	         		alert("Please turn on the location or select a manual address input",showManualLocation);
	         	}
	         	else
	         	{
	            	geo.setRequestedUpdateInterval(100);
	            	geo.addEventListener(GeolocationEvent.UPDATE, geolocationUpdateHandler);
	         	}
	         }
	         else
	         {
	         	alert("Geolocation not supported, please input your location manualy", showManualLocation);
	         }
	}

Once we have the GeolocationEvent fired , we can determine user’s location from event.latitude and event.longitude.
However, Google maps Directions.load normally works with address format query, eg. “from 25 apple Street, NewYork to 22 Boulevard Street, San Francisco”. To get it working with LatLng you have to use this format (Thanks to Barry Hunter from Google maps forums for this tip)

private function geolocationUpdateHandler(event : GeolocationEvent) : void
{
	originLatLong = new LatLng(event.latitude, event.longitude);
	dirQuery =  "from: Start@"+originLatLong.lat()+","+originLatLong.lng()+" to: Destination@"+fbfLatLong.lat()+","+fbfLatLong.lng();
	initMap();
}

(fbfLatLong being hardcoded LatLng destination variable)

After the geolocation is known and direction query is formulater we can get directions by calling load function:

private function requestDirections() : void
{
	//create directions
	dir = new Directions();
       dir.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS, onDirLoad);
       dir.addEventListener(DirectionsEvent.DIRECTIONS_FAILURE, onDirFail);

       dir.load(dirQuery);
}

Once the requested directions are computed and returned we can draw the route. I am also attaching a custom markers at the start and the end of the journey.

private function onDirLoad(event : DirectionsEvent) : void
{
	map.clearOverlays();

	var directions : Directions = Directions(event.directions);
	var startLatLng:LatLng=directions.getRoute(0).getStep(0).latLng;
	var endLatLng:LatLng=directions.getRoute(directions.numRoutes-1).endLatLng;

	createMarkers(startLatLng,true);
	createMarkers(endLatLng,false);

	var directionsPolyline:IPolyline = directions.createPolyline();
	map.addOverlay(directionsPolyline);			

	//get bound center
	var directionsBounds : LatLngBounds = directionsPolyline.getLatLngBounds();
	map.setCenter(directionsBounds.getCenter());

	//get the zoom level from direction bounds
	var zoomLevel:Number = map.getBoundsZoomLevel(directionsBounds);
	map.setZoom(zoomLevel);
	map.setAttitude(map.getAttitude());
}

It’s important to centre and zoom the map so that the whole journey is visible on the map.
OnDirFail is called when the given coordinates couldn’t be resolved, and then it’s probably best option to give user a chance to input the address manually.
Tested on Android 2.2 on Desire HD with Air 2.6 runtime.

Few days ago , Flex 4.5 Burrito and SDK Hero was again  available for download so I went and downloaded the whole half a gig enchilada.  After running the installer there was a warning : installer has detected that system restart was pending but that could be ingnored so I went on fit the install.

Install failed miserably about the time it tried to install some microsoft libraries. Oh joy. Well , at least ALL it’s needed was a machine restart, and all would be jolly good right ?. Or so I naively thought. I couldn’t be more wrong.

No joy. The same error message. The same install fail

After unsucesfull googling and restarting couple of times I gave up and went to bed as it was well after my usual bedtime (1 am)..

Evening of day two…

More googling. Finding out many more people have the exactly the sameproblem with other CS5 installers , but none of them had actually any luck in resolving the issue (or bothered to write about it).

Official Adobe solution to this problem is :

a. Choose Start, type regedit in the Search box, and press Enter.

b. Navigate to HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager.

c. Delete the InProgress key

as stated at : http://kb2.adobe.com/cps/828/cpsid_82829.html

Now that would be awesome, if there was actually any “InProgress” key in my registry. If you read comments, that was mostly the case with most users so this advice was pretty useless.

OK. to make a long story short, I did find somebody suggesting to erase : “PendingFileRenameOperations” from registry from a certain location.

I did not find any keys in that particular location, but searching troughout the entire  registry for “PendingFileRenameOperations” revealed couple of instances.

I deleted them all and voilà ! the installer ran like a charm!

So if you have the same problem with the CS5 installer, try it, might help you as well.

Word of caution . Make sure your registry key has a NAME that matches “PendingFileRenameOperations” as there might be some keys that have this string as a data/value.

in my case it was :  HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\BackupRestore\KeysNotToRestore” key which value/data contained string “PendingFileRenameOperations” .

Do not delete those

Couple of people have posted their FOTB 2010 schedules on their blogs so here goes mine as well :

Sunday:

Monday :

Tuesday

Wednesday

In the previous post I introduced an air app that can parse photoshop layers and save it out as pngs or jpges. In this post I thought I upped the game a bit to make the app hopefully even more useful. I remembered the times I just needed quickly convert dozen or so icons (in ico format) to transparent pngs and there was really no elegant and quick solution. Well.. That’s thing of the past now. Enter Images Converter!

Features  :

• support for additional cca 40 image formats (via ZaaIL library) , see below full list of supported image formats.
• support for saving individual Photoshop layers
• support for dragging multiple files (including dragging multiple PSD files)
• images preview
• conversion progress feedback
• user preferences and the window position and remembered
• some bugs were fixed in the psd parser , so should be a bit more stable now…

The following image formats are supported : bmp, blp, cut, cur, dicom, dcm, dcx, dds, exr, ftx, fits, gif, hdr, hdp, icns, ico, icon, iff, ilbm, iwi, lif, mdl, mp3, pbm, pgm, pcx, pcd, pic, pix, png, pnm, psd, psp, pxr, raw, rot, sgi, bw, rgb, rgba, sun, texture, tga, tpl, utx, vtf, wad, wal, wbmp, wdp, xpm, jpg, jpeg, jpe, jp2

The source code can be downloaded here and the app itself here.

Enjoy!

To turn my PSDParser into something useful for more general use  I decided to make an Air app that enables user to drag’n'drop a photoshop file unto and saves the layers as images into a user selected directory.

App parses the photoshop file, finds the layers it can parse, uses the layer name as a filename. User can select the output image format as either jpg or png. Images are being cropped to their content bounding box.

If png is selected , alpha values are being preserved. If jpeg is selected, the output quality is customisable.

If “Always save to desktop” option is selected,  app  creates the directory called “_psd2imagesExport_”  on the user’s desktop and save’s the files there.

You can see and download the source files here and get the app here.

For a recent Flex CMS project I needed PSD importer so I went googling in a hope for a decent PSD parser.  I found only one somewhat usable project which was essenialy a Java port of this parser that imported psd files into flash..

The problem with this parser was in supported only very, basic, plain psd files, and adding anything (like a folder group for example ) would break it. So I decided to write my own one instead.

As you might have heard psd isn’t exactly the easiest format to parse, so rather then starting from the scratch I  based a portion of the code on the Munegon’s parser, also referenced Yet another PSD parser by Jonas Beckeman written in java. Quite helfull was this Python PSD parser and of course an official PSd file format specifications document from Adobe.It was still lot of trial and error, as even official CS format specification docs aren’t complete and contains errors. But at the end I got this :

and this is the same file in Photoshop :

What is currently supported :

PSD Viewer is a simple flex app that allows you to load and view psd files and reads the supported layers, while showing their blend modes, visibility , lock, alpha , layer effect etc, in “Photoshop-esque” style. View source is enabled so you can get the source code from here. (If you don’t have the psd file to test use the “testPSD1.psd” file from flex project’s “assets” subfolder).

Simple example is a basic single class as3 app that just loads the psd file and then on click cycles through the layers, bringing the one in the back to the top.

Enjoy!

PS:  As this is still early beta, some PSD files may/will break the parser (especially those with unsupported features (see above) or those not saved in compatibility mode…