Tell me about computers

RTMFP - Flex Mobile Redeems Itself

2011-12-28T05:48:00.000-08:00

Peer-to-peer with Flex Mobile using RTMFP

As I was starting to doubt that Flex Mobile, I had an idea to link together my iPad with my Android phone. That was when I came across RTMFP. This is a really really simple way to connect multiple devices on the same wireless network. Just create a NetConnection and connect with 'rtmfp'. Then join a group and you're good to send and receive messages from all members of the group!

I created a simple app which will transfer images between the devices. I am sure this will not be allowed by Apple as it means you can transfer images without iTunes. Great for me though!

It should be possible to transfer any type of file between any devices that support AIR using this technique. It's not super quick (takes about 4 seconds to transfer an image) but could probably be speeded up by using FZip of something similar.

To use devices that are not connected via the same LAN is still possible, but you'd need to use Adobe's Cirrus.

http://labs.adobe.com/technologies/cirrus/

which is not currently available for commercial use.

Here is the code snippet to connect devices on the same LAN.


localNc = new NetConnection();
localNc.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
localNc.connect("rtmfp:");

Then you need to join a group:


//define the group
var groupspec:GroupSpecifier = new GroupSpecifier("MyGroupName");
groupspec.ipMulticastMemberUpdatesEnabled = true;
groupspec.multicastEnabled = true;
groupspec.routingEnabled = true;
groupspec.postingEnabled = true;
//multicast ip should begin with 224 at least and port should be higher than 1024
groupspec.addIPMulticastAddress("238.254.254.1:30302");
//creates/joins existing group
netGroup = new NetGroup(localNc, groupspec.groupspecWithAuthorizations());
netGroup.addEventListener(NetStatusEvent.NET_STATUS, netStatus);

To send an image, you first need to turn it into a byte array:


var size:Rectangle = new Rectangle(0,0,loader.content.width,loader.content.height);
var byteArray:ByteArray = Bitmap(loader.content).bitmapData.getPixels(size);
byteArray.position = 0;
//send object to listeners
netGroup.sendToAllNeighbors({type:GALLERY_IMAGE, size:size,ba:byteArray});

When this is received it can be deserialsed. Here I display the image and attempt to save it to the gallery as well:


var byteArray:ByteArray = data.ba;
var bitmapData:BitmapData = new BitmapData( data.size.width,  data.size.height, false,0x00000000);
bitmapData.setPixels(new Rectangle(0,0, data.size.width,  data.size.height),byteArray);
myImage.source =  bitmapData;
if(CameraRoll.supportsAddBitmapData){
 //this will probably not be allowed by Apple as I believe it is against their control policy
 trace('saving image to gallery');
 var cr:CameraRoll = new CameraRoll();
 cr.addBitmapData(bitmapData);
}else{
 trace('cannot save image to gallery');
}

The full source for this experiment can be found here:

SOURCE

It's rough, but just shows the process of how to do the above.

Flex Mobile In Practice

2011-12-28T05:20:00.000-08:00

So I need to make an a mobile app... should I build it natively twice (I can do a bit of Java dev, but would have to learn xcode a bit better for this), build it in HTML (not sure how jazzy it's going to look) or try out Flex mobile (should be easy for an AS3 developer right?! And it's going to work on a Blackberry Playbook without any extra work!).

So, I have spent a few weeks exploring the pros and cons of Flex mobile development. There are a number of decent tutorials that are out there, but I found that I still had to work out a lot of stuff for myself (like in the olden days), so I decided to note down a few things that I have learnt that may save someone a bit of searching.

This is written for experienced AS3 developers. The things I picked up are from my own research and inevitably a bit of searching on the web.

I usually don't work in Flex, just pure AS3. I decided to go down the Flex route for this though, mainly to save time as I didn't want to build common components from scratch and that Adobe are pushing 'Flex Mobile', which comes with a few nice inclusions such as (amongst other things) simple navigation and data storage.

The first thing I learnt was that in actual fact, although some components are, not all Flex components are actually 'mobile ready' at the time of writing. The list of ones that are ready, which should be kept up to date can be found here:

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/skins/mobile/package-detail.html

In the end I used Flash Builder 4.6 as it worked with Flex 4.6 out of the bag. I usually use FDT, but Flash Builder seems a bit better at dealing with MXML for the uninitiated, as it's always possible to switch to design view. There was also an issue whereby I couldn't get FDT debug to run on my device either, but it seemed to work ok from Flash Builder and I didn't have the patience to work out why.

The devices I was testing on were an HTC Incredible S and a Sony S Tablet. Setting up the Android SDK and getting them recognised by the ADT was pretty straight forward and there are lots of tutorials that will help you do this. The only minor pain was finding drivers for the devices, but this was just a case of googling around a bit.

Switching between layouts

When making any mobile app, effectively you are making an app that needs to look good in three resolutions (160,240 and 320 dpi) all of which run in two layouts (horizontal and vertical). So that's 6 different layouts per app!
From reading around, it seems that the best thing to do is to make the app for the smallest target dpi (160) and scale up. Bitmaps are handled slightly differently but I'll look at that later. By declaring the application dpi in the application's mxml constructor (not sure the correct name for this in Flex) as such:

applicationDPI="160"

Flex will then scale everything up automatically for the bigger dpi's.
One of the drawbacks of this are that it's probably not desirable for bitmaps to be scaled up. This is easily remedied by using the mutli-dpi source bitmap property of a Flex Image component.


<s:image id="myImage">
<s:source>
  <s:multidpibitmapsource
source160dpi="assets/low-res/my-image.jpg"
source240dpi="assets/med-res/my-image.jpg"
source320dpi="assets/high-res/my-image.jpg">
  </s:multidpibitmapsource>
</s:source>
</s:image>

All three images get packaged up into your application, but the one closest to the target applications dpi will be used. Simple.

One thing that I wanted to do was to be able to change the actual layout when there were different dpi's and different orientations. The 'cleanest' way seemed to be through CSS. It took a bit of messing around but eventually I worked out how to do this.

For orientations, it was just a case of listening to the onResize event in the main application and then check whether the width was more than the height or visa versa. This would tell me whether the app was in landscape or portrait.

So, in the application's mxml constructor I defined resize function:
resize="resizeHandler(event)"

defined the possible orientation states:


<s:states>
        <s:state name="portraitPhone" stategroups="phone,portrait">
        <s:state name="landscapePhone" stategroups="landscape,phone">
        <s:state name="portraitTablet" stategroups="portrait,tablet">
        <s:state name="landscapeTablet" stategroups="landscape,tablet">
</s:state>

and defined the resize handler, which would work out what the orientation and device type was.

protected function resizeHandler(event:ResizeEvent):void
{
var isPortrait:Boolean = height > width;
//determining if its a tablet worked ok with the hardware I tested, but this is not a water tight method.
isTablet = height > 960 || width > 960;

var orientation:String = (isPortrait ? "portrait" : "landscape");
var device:String = (isTablet ? "Tablet" : "Phone");

currentState = orientation + device;
}

Ok, so that's pretty easy.

The CSS in Flex is pretty nifty and can be written in such a way as to change automatically depending on the state of the application. This makes it easy to deal with the orientations. The example I am about to give is not that great. It shows what I am talking about, but once I had it sussed I found out that Form components were not actually mobile ready! Still, the syntax is the same. It's possible to change properties of classes as such:

s|Application:portraitPhone s|FormItem #labelDisplay
{
text-align: left ;
}

s|Application:landscapePhone s|FormItem #labelDisplay
{
text-align: right ;
}

and also the skins of componenets as such:

s|Application:portraitPhone s|FormItem
{
skinClass: ClassReference("spark.skins.spark.StackedFormItemSkin");
}

s|Application:landscapePhone s|FormItem
{
skinClass: ClassReference("spark.skins.spark.FormItemSkin");
}

So, as I was changing the state dependant on orientation in the main Application class, the syntax is:

s|Application:stateName

When the main application changes state the Forms label display should switch from left to right. There was a few more bits of CSS to get the form changing but as I mentioned above, at the moment, you shouldn't be using Forms components in mobile apps, so I won't bother to show the complete example.

Now to get the componenets to update their CSS and redraw at runtime, you will need to add the following line to the end of the resize handler:

styleManager.styleDeclarationsChanged();

I have no idea how fast or slow this is in comparison to other methods people may have, or whether there is a better solution, but the method above seems clean and can be used in conjuction with dpi declarations by nesting them in a @media tag (this is not something I got round to testing mind). It would look something like this:

/* landscape @ 240dpi */
@media (application-dpi: 240) {
s|Application:landscapePhone s|FormItem
{
skinClass: ClassReference("spark.skins.spark.FormItemSkin");
}
}

So, that is the basics of dealing with the different layouts on Flex mobile.

Loading in local HTML files

One thing I wanted to do, as lots of apps will, is to use Google Maps. This is very simple and looks great using native Android programming, but I found that the same is not true in Flex. In fact I would go as far as to say that if you want to use Google Maps in your app then don't use Flex. It sucks.

As the Flash API is now deprecated from Google Maps (and even if you do use it, it won't work on Apple devices), the answer is to use the Javascript API. Hmmmm.... There were a number of things I needed to do such as placing down markers that the user could then move around so i figured I needed some JS functions to achieve this. No problem, I would just use a static HTML page, put all the JS I needed into that and load that into a stageWebView.

Displaying local HTML pages in a Flex mobile app and communicating with it via JavaScript was not as straightforward as I had hoped. After a lot of looking around, experimenting, laughing, crying and cups of tea I ended up using this incredibly useful set of classes called the stageWebViewBridge. The details of this project can be found here:

http://code.google.com/p/stagewebviewbridge/

Essentially it simplifies the process of loading in local files and communicating via JavaScript. The wiki entry regarding loading the files was still a bit confusing if using Flash Builder as all the examples are made in Flash CS 5.5 (yes some serious programmer is still using Flash!). The main confusion for myself was working out where to put the HTML files on my machine and how to reference that location from Flash Builder so I will try and clear that up a bit.

When running the app from Flash Builder on a device all you need to do is to create a folder called "www" in the source folder (by default src). This automatically gets copied across to the bin-debug folder by Felx and can then be loaded using:


webView.loadLocalURL("applink:/myHTMLpage.html");

When running using the emulator, things seemed a tad more odd. I had to put the files in:

C:\Users\UserName\AppData\Roaming\LocationAlarm.debug\Local Store\wwwSource

Which got copied across to

C:\Users\UserName\AppData\Roaming\LocationAlarm.debug\Local Store\www

at runtime by the bridge. To load the file was exactly the same as for using a device.

Communication to and from JavaScript was very simple and needs no explanation. Just read the stageWebViewBridge wiki on the link above.

One issue I did have was due to the auto-scaling feature of Flash mobile that I was using. The viewport for the StageWebView needs to have it's size set in pixels. I was using a TabbedViewNavigatorApplication as my main class and wanted the web view to sit inside this. The StageWebView reminds me a bit of the 'directToStage' video in Director (remember that?) in that it sits above all content above the actual application. So, it needs to be the right size. My tabbed navigator was using auto-scaling though, so I had to work out how many pixels big the StageWebView needed to be for the current device. I couldn't find an elegant solution for this but I did find a solution. As discussed here you need to scale it yourself:

http://stackoverflow.com/questions/6759547/air-stagewebview-on-iphone

So, I needed to get the size of the screen inbetween the (scaled) top bar and the (scaled) tabs. This is how I did that:

//firstly get the current scale factor

var currentFlexScalingFactor:Number=FlexGlobals.topLevelApplication.runtimeDPI/FlexGlobals.topLevelApplication.applicationDPI;
//then get the size of the screen minus the scaled sizes of the top bar and the bottom nav buttons
webView.viewPort=new Rectangle(0, systemManager.screen.height*currentFlexScalingFactor-height*currentFlexScalingFactor-FlexGlobals.topLevelApplication.tabbedNavigator.tabBar.height*currentFlexScalingFactor,width*currentFlexScalingFactor,height*currentFlexScalingFactor);

Not very pretty, but it works.
The code to size the viewport needs to be called when the device's orientation changes as well. This will not happen automatically.

So, ultimately I got my map working, but then came across a problem whereby the actual web page would zoom in and out when using pinch/reverse pinch gestures. So the map controls then get massive when zooming in and out, rather than just the map. I found the following "fix" for this. In the HTML page (which I created) just add the following meta tag:


<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Simple? Well it would be if it worked. Unfortunately HTC have their own flavour of browser which doesn't support the viewport meta tag. This means that on virtually all HTC devices (I believe there may be one exception) the stageWebView is not a good user experience.

I guess (although am yet to test) that this means HTML based apps will suffer the same problems on HTC devices. If so, they're not an option for commercial apps targeting Android. HTC has distributed way too many devices to be ignored.

Next up was storing data locally. This was easy enough. I ended up using a SQLlite database. This is done the same as it would be in any AIR application. There are great tutorials all over the web on this so I will not bother to explain how this is done.

There is an 'auto-save' type function alos, to save small bits of data when switching between views. Essentially, you just turn it on in the main navigation constructor by setting:


persistNavigatorState="true"

As far as I could tell this is a shortcut to creating shared objects which you save and load using:

//set value
persistenceManager.setProperty("someProp","myProperty");
//get value
persistenceManager.getProperty("someProp");

A more detailed discussion of how this works and other ways of working with it can be found here:

http://devgirl.org/2011/05/18/flex-4-5-mobile-data-handling/

By this point I had come to the conclusion that Flex Mobile was not good at handling any of the 'phone' features that may need to be intergrated. I had a brief look at using Native Libraries to get the phone to vibrate but it isn't a simple procedure. When making a native android app it's two lines of code!

Nissan Music Mixer

2011-03-27T14:24:00.000-07:00

UPDATE: This project won a DMA Gold Award (whatever that's worth)
http://www.dmaawards.org.uk/content/2011gold-best-use-social-media-or-viral

I recently worked on a really interesting project for Nissan, which essentially was to be a live mixing desk. As doing anything 'clever' with sound in Flash is something most people (bar Andre Michelle) steer clear of I was looking forward to seeing how much things had changed since my last sound exploits. Not being a maestro of digital sound/music creation, I knew this was going to be fairly tough assignment but one I was going to learn a lot from.

The brief went something like this. The application would consist of five sound channels each channel being a different component of a song (e.g. drums, bass etc). The channels would be represented by cars (the Nissan angle). Each channel would play one of five loops, each loop being a different genre of music (e.g. funk, ambient, rock) which could be changed by clicking on the car. It was also to be possible to change the volume of each channel by moving the car forward and backward. The idea then was that the user could mix and match genre on the fly, bringing in and out different components of the track to create their own master piece. There needed to be a number of sound effects that could be applied too, such as envelopes, flanges and such like. Once they had a play around, they could then record a mix, which would be uploaded to a server as an MP3. Oh, and they wanted some lighting effects in the background (such as fireworks) and a spectrum analyser! Nothing too much then.

Initially there were a number of technical questions I had, like what the hell is a flange and whether it was even possible to create an MP3 from within Flash! Also, how much control we had over the loops (which were to be made by LaRoux) in regards to length and BPM as I had an idea matching up beats was going to be very difficult, given Flash's slack regard to accurate timing!

So, beat matching... firstly it was decided that the loops should all be the same length and the same BPM as this would make life easier. Naturally there were assets available but luckily one of the guys I was working with was really into his music and knocked up some beats for me. It soon became apparent that Flash's onSoundComplete event is hopelessly inefficient for beat matching as there would always end up being a very small delay between stopping and starting a sound, which was never going to acceptable.

Eventually (with a little help from my very talented friend Kelvin Luck!) I turned to ByteArrays. The solution was to start a single 'empty' sound and add a SampleDataEvent.SAMPLE_DATA event, which would be called everytime the sound buffer was empty. It was then a case of reading the correct samples of each track that was designated to play, alter the volumes of the samples to that which were set, add any sound effect that was on at the time and then write this out to the event data to be outputed as one sound. By doing the mixing in Flash and playing a single sound, things would never get out of synch, which was always the problem playing and changing multiple sounds at the same time.

So first I needed to start the empty sound and listen for the SampleDataEvent.


_sound = new Sound();
_sound.addEventListener(SampleDataEvent.SAMPLE_DATA, onSampleData);
_sound.play();

I would store an index for the current sample to read which would be incremented by 4096 (1 second) each time the buffer was empty. When the function was called, I extracted the appropriate samples from each of the tracks that were playing.

//Get index var n:int = _currentSample + 1 *SAMPLES_PER_EVENT; //SAMPLES_PER_EVENT was set at 4096 //create Vectors for the extracted audio and the volumes var extractedAudios:Vector. = new Vector.(); var volumes : Vector. = new Vector.(); //and another Vector for the final output var buffer : Vector.> = new Vector.>(); buffer[0] = new Vector.(); buffer[1] = new Vector.(); for each(var loopId:int in loopIds) { var playableLoop:PlayableLoop = loops[loopId]; if (playableLoop.isPlaying) { //store the volume of the track volumes.push(playableLoop.volume); //create a new byte array var sd:ByteArray = new ByteArray(); //get all the samples up to the total samples of the loop var samplesLoaded:int = playableLoop.sound.extract(sd, SAMPLES_PER_EVENT, _currentSample % _totalSamples); //get some more samples from the start of the track if the loop got to the end if (samplesLoaded < SAMPLES_PER_EVENT) { playableLoop.sound.extract(sd, SAMPLES_PER_EVENT - samplesLoaded, 0); } //reset the byte array position sd.position = 0; //add the byteArray to the Vector extractedAudios.push(sd); } }

Then I looped through all the extracted samples multiplying the bytes by the volume of the channel and then looped through again, adding the bytes together.

for (; _currentSample < n ; _currentSample++) { var leftChannel:Number = 0; var rightChannel:Number = 0; var index:Number = 0; for each(var soundData:ByteArray in extractedAudios) { leftChannel += (soundData.readFloat()*volumes[index]); rightChannel += (soundData.readFloat()*volumes[index]); index++; } buffer[0].push(leftChannel); buffer[1].push(rightChannel); }

This could perhaps be done in the first loop to make it more effecient, but it worked fine so I just left it as such. I needed to add the effects too. I don't have the knowledge required to write sound modulators from scratch so adapted some I found on popforge by Andre Michelle. These took a Number Vector as input and made the mathematical changes for the required effect.

With all that done, I could loop through and write out the byte arrays into the event.

for ( ; i < len ; i++) { event.data.writeFloat(buffer[0][i]); event.data.writeFloat(buffer[1][i]); }

Eh voila, the sound mixing part of the project was done!

The next challenge was to create an MP3 from within Flash. Again, a tricky task indeed, if infact it could be done. After a whole lot of googling and experimenting, it seemed that it was going to be possible to create a WAV from within Flash, and then post that to the backend to be converted into an MP3. I think someone 'may' have written a WAV to MP3 converter in Flash using Alchemy (I vaugely remember seeing something like that), but the client was happy enough with a WAV, which in itself was pretty tricky to do.

Luckily I found a WAVWriter class by Bernard Visscher, which took the samples as a byteArray, adds a header and rewrites the samples so that they are read correctly when played as a WAV. Job done! To test I saved the WAV to the desktop using the FileReference class and it worked great, other than that Flash can't time 30 seconds accurately and the tracks were usually about 36 seconds long using getTimer() in Flash to time 30 seconds! I soon found John Dalziel's Timekeeper class which sorted this out without any dramas.

Is the future of Flash mobile?

2011-03-27T14:18:00.000-07:00

Recently I started to get interested in the future of Flash. Given all the Apple fueled hype of HTML 5 I wondered where will Flash be most useful. One massive problem with mobile and tablet development is that when a client wants an application to run on mobile then it has to be remade at great expense on each platform. I would have to find an Objective C developer for the mandatory iPhone version, a Java programmer for the Android version and so on. The images have to be remade and the projects have to managed. Not an ideal scenario...

This is where AIR comes (is coming?) in. I find that mobile apps are often 'addons' to the main web offerings. If the web app is already done in Flash/Flex then it seems like a good idea to create all the other versions in AIR, as most the code is already done.

I had a friend who has a Flash game that he wanted to put onto Android, so I thought this would be the perfect time to have a look at how Flash Mobile is getting on. I downloaded the Flex Hero SDK, the Android SDK and after looking around the web a lot managed to get it all working with FDT. I found a beautie ANT script that will output multiple versions to iPhone, Android and Blackberry Tablet (of which I know nothing about). Anyway I only got to test the Android version on a Galaxy Tab and it worked straight off the bat.

I tried the same project, compiling from Flash CS5 as well, which was super super easy to set up and run.

Also I had a look at Flash Builder Burrito, which has some nice project templates for mobile apps and the Hero components, which are Flex components for use on all mobile platforms to try and keep the interface consistent.

The main downside to using AIR is that it will not run as fast as natively programmed apps and that there is no access to native componenets (sliders, buttons and so on) so the app will not look like a native app.

Juding by what I played around with, it looks like Adobe have really targeted mobile development for the next phase of the future of digital communication and I think there will be real benefits for AIR in the mobile market place.

Unity 3D two day training course

2010-10-22T13:01:00.000-07:00

I have just completed a 2 day training course in using Unity3D which I thought would be another string to my bow. I think it's useful to have 'some' knowledge about as many technologies as possible to keep decision making over which technology is best for a job less biased. Given the choice I think people tend to go for what they know rather than what is most appropriate.

Unity3D is an IDE specifically built for creating 3D games. It's cross platform and has exporters for iPhone, Android, standalone (for PC and Mac) and web. Initially it was for first person games only, but in the most recent release it will support third person games as well. This is great, as I did worry about the variety of games that would end up being created. There's only so many ways to skin a cat, and FPS's have been done to death on the console.

So Unity3D is amazing for creating terrains and running around in them. This can be done very quickly with no coding necessary. All the collistion detection can be done very simply too. Shadows are a breeze to create (baked that is... real time shadows didn't really look that great). There is a really good physics engine built in and the whole thing runs really quickly. Yeah, you have to install the plugin, but it's really quick and easy. I don't think that will be a barrier to it's future.

The scripting can be done in c# or javascript. I think the scripting side may seem a bit messy compared to most modern languages, and is a bit reminiscent of the days AS2. Organising which scripts are attached where and referencing other scripts can lead to messy code. I was told that the c# code supports listeners but haven't got round to looking to see if that works the same way as it does in AS.

Here is the game I ended up creating:

Unity3D ROBOT WARS IN THE DESERT!

I was inspired to make some more games, but finding the right models for my ideas may put a stop to me getting too into the whole thing. I like the ability in 2D to be able to quickly knock up images for myself to use which is proving a lot more time consuming in 3D.

Sony 3D

2010-10-19T13:08:00.000-07:00

I was lucky enough to recently re-make the Sony 3D European flagship site at Tonic.
The site supports around 25 countries, all of which need to able to localise all new and existing content as well as customise the size and style of boxes.

The site was made originally for the US market by a Japanese company, and then hacked by a number of developers so that it had become completely unmaintainable. This wasn't helped by Sony's CMS/asset server set up which really seems to be set up for banners and microsites, as opposed to this pretty huge Flash site.

I was charged with starting from scratch to create a version that could be used going forward. I really had carte blanche to approach it any way I saw fit. After a number of discussions with the Tech Director, we decided to try and remake it in Robot Legs using a very different structure than was there. Also we intergrated the build into Hudson and using Ant, got it building and deploying automatically to a test server.

Code wise it took a while to pull out the useful bits and I had to rewrite most of it.

The final product is about 10x quicker than the original (even quicker than the original Japanese version) and changes that before were taking a week could now be done in a day. All in all a great project to be involved in. It's one of the very few projects I've worked on that makes good use of Papervision and not a carousel in sight!

At the time of writing, the UK version is available to see here:
Sony 3D World

Childline

2010-06-03T14:25:00.000-07:00

One of the latest projects I did was a hi profile job for Saatchi/MovingPictureCompany which was part of a large crosss-media campaign for the NSPCC called How You Feelin?

The project was tied in closely with the TV advert which was a series of clips projected onto buildings of children saying how they felt to a funky beats created by Orbital's Paul Hartnell.

Using a host of videos and sound clips, users piece together a 30 second remix which can then be played back in a fashion which makes it look similar to the original. They can then enter a competition which gives saves their entry and provides them with a url to share if they want to. The winning entry was remade at video quality and aired on MTV.

Php/SQL

I was the only technical guy on the job. As the timeline wasn't too bad I decided not only to do the Flash but to also do the PHP/SQL and to set up the mySql database. I thought it was about time I started branching out and getting some commercial experience in other languages.

The setup was fairly simple, with the Flash app saving to the database using amfphp. The Php also creates a unique url and sends an email to the judges to let them know that a new entry has been entered, with a link to that entry. The user also gets the url once they have saved the entry. Clicking on the unique url would send the user to a seperate page where the Flash would pull in the remix data, again via amfphp, with the users name and the title of the remix displayed. The user could then link back to the original site to make a new remix.

Social Networking

Originally we were then going to allow the users to then share their url directly to Facebook, mySpace, Twitter and Yahoo without leaving Flash, although due to legal reasons related to Childline this functionality was dropped. I did create a service class which did this though so I am hoping a project in the not too near future will ask for similar functionailty as it was pretty tough to make!

I used the new(ish) Adobe networking classes which work in conjunction with Gigya. It was pretty tricky to get it all working though, as each site that I needed to publish too had to be set up on the Gigya site first which in turn created api keys for each of the sites. Any incorrect settings meant that the thing just didn't work! Luckily there are some good instructions on how to do this, although I did struggle occasionaly. Once it was working though it was great. The user would click on the icon of the site they wanted to publish to, a popup would appear asking them to login. Once they clicked the login button the popup would ask for any permissions required to be granted and then close. The item would then be published. The beauty was that once permissions were granted, if the person was already logged into say a Facebook session no popups would be created if they did it again, it just published straight to their wall.

Synching Video and Sound issues

One big issue I had was synching video and audio. Typically there would be around 20 video clips of varying lengths with their own soundtracks, that would play in sync with between none and around 15 audio clips. There was a timeline too, so everything had to look and sound right.
Sounded simple enough. If we have how ever many video clips which last 30 seconds (say 30x1 second clips) and we have say 15x2 second audio clips then everything should be fine. Of course in theory this is ok, but.... I found out along this rocky road that Flash videos would never take the same amount of time to play the same video! That is, creating a little code to trace out the start and end of the video and then set the video to play say 20 times, every time it would take a different amount of time to play! It was never much, around a tenth or two tenths of a second different normally, so generally imperceptably to the human eye, but times this delay by 30 and suddely the video runs over by 3 or more seconds!

After much brain ache and testing, the solution which I used, which worked, was to embed all the videos into swfs and put a silent clip on the timeline under them which I set to synch as Stream. I also embedded all the sounds in swfs, so I could then use frame counting as a way of keeping them in synch rather than timings which never really seem accurate in Flash at the best of times. There was still a problem though as Flash didn't want to drop frames from the video, no matter how loaded the processor got. What I did then, was to count the number of frames passed when the video finished, compared to the number of frames that the video was supposed to have lasted for. I would then skip the first x number of frames of the next clip, thus making everything synch. Admitedly this is not 'the way' to always synch video and could cause problems with very short video clips, typically the video would only overrun by 2 or 3 frames. On a 30 frame clip, skipping the first couple of frames wasn't too bad and ultimately it all synched up.

RobotLegs - MVCS framework

This was my first project using the RobotLegs MVCS framework.
I had been using my own MVC template after trying Cairngorm (boo, hiss) and deciding that frameworks were to bloated, slowed production and actually made sites less maintainable as you had to find someone else who knew the framework to make changes. I went to a talk by Richard Lord at the London Flash User Group, who made a very good presentation on the various new frameworks which gave me the inspiration to go back and take another look at them.

The last point is still valid (on the whole, you still need to find someone who is familiar with the framework to fix and change things), but I have been fully converted and wouldn't start a project now without RobotLegs! It is really lightweight, simple and intuitive. I really liked it and will continue working with it for the foreseable future. Try it out if you haven't already. My own MVC template did start to run into troubles in big projects, but was fine for small/medium projects, although I have dropped it altogether now.

P&O AIR application

2010-06-03T14:23:00.000-07:00

This is the first commercial AIR application I made, despite learning as much as I could about AIR several years ago when it came out.

The company I did it for, The Tin have made a number of commercail AIR apps, including a really cool animated FTP app.
This widget is part of a bigger project, which is a two phase site launch, dedicated to P&O's building of two new ships.

I found AIR really fun to use. It was easy to use and very powerful. One challenge I was tasked with was to make it check to see if there had been any updates. A quick search of the web lead me to see there are a handful of ways people do this, but they all required quite a bit of manual work, changing numbers in xml files, which is never a great method. I ended up using this brilliant class by Claus Wahlers from a Brazillian company called Côdeazur.

Essentailly as the .AIR installer file is a PKZIP archive the second file of which contains the version number. The class uses FZIP to stream in this file and then closes the stream, uncompresses it and reads the version number. Genius!

P&O Ferries new site

2010-06-03T14:15:00.000-07:00

I had to make this site which charts the making of the new P&O ferries which are currently in production.

It links with a seperate blog via RSS and has to be updated with new content regularly. Added to this, there were two phases of launch, but phase two had around 80% of phase one's pages in it, but at different page sizes. This made the build quite challenging. I had to therefore kind of build phase two as well, although most of the assets were not going to be ready for some months after I finished. The client I was working for, The Tin, didn't want to have to maintain two seperate sites, as there were likely to be changes down the road, so I had to keep them merged into one project as much as possible but also keep them seperate enough that if one part of phase one changed, phase two would still work the same. It was challenging, but ultimately we got it pretty well worked out.

Adobe Media Encoder Issue
I got to revisit cue points in flash video in phase two, as there was an interactive video where uses could click on hotspots or jump to places in the timeline to see information about certain aspects of the ships. I had done something very similar a few years back for Agency.com for the British Airways site so it wasn't too bad. One weird thing I did notice though was that the Adobe Media Encoder (AME) doesn't count frames properly when putting in cue points. AME measures the video at 30fps in the cuepoint window even if the video is 25fps!

For example if the position that the cuepoint should be added is frame 50, this would be 2 seconds into the video and not 1sec20 as AME would have you believe.

Space Ranger

2010-06-03T14:11:00.000-07:00

A bit of fun at last! I love making games (even ones with the brief to make it play exactly like another one).

This was a game that sat on Facebook to drive traffic to enter free prize draws (with a view to collecting user data). It was only a couple of days work, but really good to be making a game again.

A handy regular expression

2010-01-06T08:36:00.000-08:00

Often I need to find a substring which can be easily done with a regular expression.

I find regular expressions really useful once I worked it out, but invaribly it takes me longer to work it out than to use substr or something similar

Hopefully this snippet will be handy for someone else, or at the very least a reference for me the next time I need to do it and have forgotten how it's done.

So, for example if my string is:
var videoName:String = "assets/videos/video_235.flv";
and I need to find the number of it (235) then a quick and easy way is to use a regular expression such as:
var regEx:RegExp = /assets\/videos\/video_([^;]+).swf/
trace(regEx.exec(videoName)[1]);
will display 235
The handy bit is:
([^;]+)

This will get the regex to return everything inbetween what you put infront and behind it.
The backslashes I used are just to escape the forward slashes in the url.

FlashLite 3.1

2009-11-02T13:07:00.000-08:00

I have recently being done some FlashLite 3.1 work for Sky's next generation set-top boxes.

The project is under wraps so I can't reveal much, but the future STB's are looking fairly powerful but still waiting for technology to catch up. Until the boxes become quicker, Flash on an STB still has to be pretty basic in terms of animation and effects. There is a lot of development going on though and new boxes should be around in early 2010 which promise better processors. Once that happens Sky have got a number of rearly nice looking interfaces in development which will look very different from ones on the boxes today.

There are new control devices in development too, which again I am not at liberty to divulge, but I can say there are a number of concepts being explored at the moment, but in my opinion, nothing drastically different will be introduced in the near future.

So, Flashlite 3.1 is supposed to be much better than Flashlite 2.0, but at the end of the day it's still AS2 which if you don't remember is not a lot of fun to work with. To be honest there were a couple of things that are actually easier to do (attaching movieclips and associating clips with a class) but this is heavily out weighed by the silent erroring which is so painful when you've only been doing AS3 for ages. Also the main problem is that the devices that run the code are so slow that even though nice interfaces can be created, the rarely run as planned, so testing on the actual device throughout development is essential.

Math and Physics Demos

2009-11-02T12:55:00.000-08:00

I (fairly) recently went on a two day course with Keith Peters which was all about animating with code. This was rearly interesting. I have been meaning to do a maths refresher course for a while but never got round to it so thought this would be ideal, which it turns out it was!

We covered a lot of basic trig and physics (including velocity, kinematics, collision detection and resolution) over the two days which is always necessary for games programming. Once you understand how to perform roataions and understand velocity, there is so many things you can do with such little code.

I have included a few demos which look nice, but are infact really simple to make.

This is some basic kinematics of some running legs that you can interact with to make the affect more or less realistic.

This is a pseudo 3D demo, which uses rotation and scaling to create the affect.

Finally a nice little demo which uses easing on the ball. So simple, but looks pretty cool. Move the mouse around the window to throw the ball on the spring around.

Sky Free Pass Weekend

2009-11-02T12:48:00.000-08:00

I have been lucky enough to continue working at Sky as new projects have come up as others end. I programmed the Free Weekend Pass site, which was part of a large campaign across the company which proved very successful. So much so that the department got other work off the back of it!

Even though the site was just for a weekend, it is still online at the time of writing at:

http://www.sky.com/freepass

Saving Binary Data - better than XML?

2009-09-02T12:31:00.001-07:00

Appologies for the formatting of the code coming up. This is the first time I have put up code on Blogger and probably the last as it has almost no options to let me publish it in a readable format.

The project I was working on was a microsite for the Sky Animation Season. To give you a taste here are a few screen shots:

You can see it in all it's glory (if it's still live at the time of reading) here:
Sky Animation Season

Basically the main part of the site which is of interest for this article was the section where a user can create a flickbook by drawing lines (the second image above). They can have up to 100 pages and there is not really a limit on the number of lines they can draw for each page. This data needed to be stored for the show a friend section.

My normal initial reaction when saving data is to use XML as it's easy to use and everyone knows what it is. In this case though each line would have a start point, end point, colour, thickness and page number. Once a user draws a curve, the lines really start to add up! I could of course save each page as bitmap data as it didn't need to be re-edited but 100 pages of bitmap data is a lot of data as well and test were showing that it was going to be a bit slow.

For this project we were going to use AMFPHP as the backend and somewhere along the line when I was reading something about AMFPHP I read something about saving data as binary arrays and decided that this was going to be a much better way to go. I have a load of data which I wanted to save as a block, why can't I just put that wad of data into a database and then read it back out when I wanted it? Well, I could! Basically we could convert all the data into a binary array, send that to the database, which only had to expect one entry (the binary data) and just do the reverse when we wanted the data back. This would mean the size of the data would be really small and fast. There were other benefits too which I will sum up at the end.

So, how did we do it? Firstly by looking on google! There were a couple of good but not complete tutorials on similar subjects. I can't remember what they were now to give credit to them, but if you search for 'saving binary data in amfphp' you should stumble upon them pretty quickly.

Here is the crux of the code:

Firstly you have to register your classes. As far as I can tell this adds a little data to them so that when they are turned back into classes from binary data, they remember what objects they were.

registerClassAlias("com.skymovies.flipbook.model.vo.Line",Line);
registerClassAlias("com.skymovies.flipbook.model.vo.SendDetails",SendDetails);
registerClassAlias("com.skymovies.flipbook.model.vo.FlipBookLines",FlipBookLines);

This only really works on value objects as far as I can tell, but these values can be other value objects.
Here's an example of a value object:

package com.skymovies.flipbook.model.vo {
    class FlipBookLines {
     public var arrLines:Array;//an array of Line value objects
     public var sendDetails:SendDetails;//send details is another value object
     public function FlipBookLines() {
     }
}
}

So this is how to convert the data into an array and send it. Some of this is project specific but you should get the gist. Don't forget to import the relevant classes if you're using some dodgy IDE that doesn't do this for you.

public function sendData():void{
    //get the line data
     var voFlipBook:FlipBookLines = getFlipbookData();
    var byteArray:ByteArray = new ByteArray();
    byteArray.writeObject(voFlipBook);
    byteArray.compress();
    //pass array of lines to amfphp
    myService = new NetConnection();
    NetConnection.defaultObjectEncoding = ObjectEncoding.AMF3;
    myService.connect('../../gateway.php');//the path to the gateway.php file
    //the responder handles the server response. The arguments are the functions that will be called
    var responder:Responder = new Responder(onResult, onFault);
    //call(className.methodName, responder object, line data);
    myService.call("FlipBookLines.putFlipBook", responder, byteArray);
}

So that sends the data as a single blob of binary, how is it retrieved?

//retreive data like this
public function retrieveData() : void {
    //call the amfphp service
    var myService:NetConnection = new NetConnection();
    NetConnection.defaultObjectEncoding = ObjectEncoding.AMF3;
    myService.addEventListener(NetStatusEvent.NET_STATUS,netError);
    myService.connect(drawMod.gateway);
    var responder:Responder = new Responder(onLinesLoaded, onFault);
    //call(className.methodName, responder object, line data, send data);
    myService.call("FlipBookLines.getFlipBook", responder, drawMod.saved_flipbook_id);
}

//once the response has been got it gets a little more interesting
private function onLinesLoaded(result:Object):void{
    if (! (result is ByteArray)) {
     throw new Error("Result is not a ByteArray. Check AMFPHP 'encoding' property");
    }
    var ba:ByteArray = result as ByteArray;
    if (! ba) {
     throw new Error("An error occurred: " + result.toString());
    }
    //decompress
    ba.uncompress();
    //read object turns it back into a FlipBookLines object
    var fbLines:FlipBookLines = ba.readObject() as FlipBookLines
//
    if (! fbLines) {
     throw new Error("An error occurred.");
    }else{
     //success
     dispatchEvent(new Event(FLIPBOOK_LOADED));
    }
}

Eh voila we have a value object back just as it was in the begining which makes it nice and easy to redraw the screens.
The php service is very simple as well. Here are the bones of it:

Php

public function putFlipBook($arrLines){
$this->connect();
$arrLines = $arrLines->data;
$arrLines = mysql_real_escape_string($arrLines);

$query = "INSERT into linedata (picture_id, arrlines) VALUES ('$hash', '$arrLines')";
$result = mysql_query($query);
$error = mysql_error();
$recnum = mysql_insert_id();
mysql_close();
if ($error)
return "error: " . $error;
else
return $hash;
}

One important thing to note that in the database, the data needs to be saved as a BLOB (Binary Large Object)!

So what are the benefits of doing it in like this?
Data can be changed in the AS; new items can be added, existing items can be changed without any change needed to the back end.
Low data size vs xml. Much quicker to save, load.
Items are converted back to objects on load, which cuts down parsing xml and creating new objects and setting values.

Its not all a bed of roses though, there could be potential problems.
Nothing else can use the data. If you are collecting names and addresses this isn't any use.
If it needs manually edited or moderated at the database end this can't be done as there is nothing really to inspect.

So thats it. In this case it was really useful and saved me a lot of xml creation and reading and the backend didn't have to do anything either. It won't be great in all circumstances but if you have a piece of data that will only be read by that app that needs to be saved for later retrieval this could be a good option to expore.

Flash 10 Audio

2009-05-03T03:17:00.000-07:00

Here's a little demo I put together trying to learn a bit more about manipulating sound in Flash 10. Clicking on a radio button will generate a different type of soundwave and moving the slider changed the amplitude. Finally at the bottom, I am drawing the wave that is created.

This demo requires Flash 10 Player to be installed!

Skellig Game

2009-04-30T12:00:00.001-07:00

I recently had the luck to work with some really tallented guys over at Sky on one of my favourite projects of recent time.
Behold Skellig - Shed or Alive!

>>>>Play it here<<<<

It's a sideways scroller, based around the film made by Sky, "Skellig" which is out around now.

You have to fly the fly out of the shed to freedom. You get three lives and limited energy for each fly. The shed is comprised of three levels and has a host of different garden implements to avoid such as spanners, saws, blowtorches, hungry frogs, wasps and more. There is even a bit where you get caught with fly spray which makes our hero trip out for a few seconds!

There are loads of great graphical bits in it and the sound for each level has a unique feel to it. It plays pretty well too, even though I'm having to do a lot of collision detection and scroll massive bitmaps as well it seems to run quickly enough.

It was a great team effort and a lot of fun to work on.

FITC Amsterdam

2009-04-30T11:21:00.001-07:00

Recently I attended the FITC conference in Amsterdam for the second year running.
The more conferences I go to, the more I see the same people talking about the same things! This year there wasn't too much new.

The two main things I went for were:
1. A CS4/Flash 10 workshop to get me up to speed on new things in Flash 10.
2. An iPhone development session.

The CS4 workshop was by Lee Brimlow who is a pretty good presenter. Sadly CS4 is possibly worse than CS3 and holds nothing new for programmers. It's as if they have gone out of their way to add features that do not benefit programmers in any way, thus creating a workflow in which we need to buy Flex, Flash and Photoshop. Having spent an afternoon playing around with the new Sound capabilites, I can honestly say that I don't see anyone buying Flash CS4 anytime soon. It's slow and crashes soo often. I only use Flash these days to label assets anyway, so I think CS3 is going to stay for a while longer.

The iPhone developer session was useful in as much as it put me off wanting to develop for the iPhone. Sure, it looks good to have Objective C on your CV at the moment but the hassle of being able to commercially develop (registering with Apple as a developer for instance, which costs money and takes months, buying an Apple computer as they don't have and SDK for PC, and the SDK which is so feature poor it makes Flash look like the best bit of software ever written.

Apart from that there were the usual band of speakers.

Carlos and others talking about Papervision as usual. His new site looks great! He explained how he put it together. Papervision is becoming so complicated now-a-days and constantly being updated (such is OS code) that unless you're constantly doing projects with it, it's hard to keep up. Then again, isn't everyone just using if for carousels now, replacing 'page flipping over' as the current client-must-have.

A number of people were banging on about AIR still, same as last year. I have seen a couple of AIR apps, but most the places I work haven't embraced it like I think Adobe would have hoped. I saw a cool site recently which has just come out which allows people to make cash distributing their AIR apps which may get more people to come up with cool apps.

Andre Michelle is still developing his music application, under the auspicious title of AudioTool. I saw it last year and it is even better now. I would go as far as to say it's one of the 'best' Flash applications I've seen to date. Where does he find the time??? I struggle to keep this blog up-to-date!

Thats it!

Nissan Europe - Murano and Qashqai entry page

2008-12-05T09:29:00.000-08:00

This was my first bigish papervision projects and although initially I was a little doubtful of the concept at first (driving cars around with no purpose) I think it turned out pretty good in the end. My biggest surprise was how quickly it ran. I had to do a bit of fixing, swapping the 3d car on the bottom of the screen for a bit map when it wasn't in use to keep things quick but apart from that not too much optimising was necessary. We kept adding to the polys on the car to see how it would run and it runs fast! Too fast almost.

www.nissan-crossover.co.uk

Click on one of the cars for the full 3D experience! Wow.

Cross Domain Issues in AS3

2008-12-05T09:25:00.000-08:00

Working for Sony was 'challenging', for one thing they keep all the assets for a project (external images, videos etc) on seperate server to the main Flash app, which has to uploaded via a CMS. Why do companies persist with CMS'? Maybe because they were sold them 3 years ago for a huge amount of money by someone promising that they would be future proof. Of course, the internet moves so quickly I don't think anything online can be sure to be good for more than a year. Anyway, back to CMS'. They are ALWAYS a pain in the ass to develop on.
Making sure everything will load cross-domain can be tricky and it took a while to figure out that we had to use little line of code:

context.securityDomain = SecurityDomain.currentDomain;

but this would course an error when running it locally, so this had to be switched on and off. A bit of a pain but once in, it sorted the cross domain errors. This is a lot less hassle than doing projects cross-domain with AS2, thats for sure.

Fun things I worked on at Dare

2008-12-05T09:19:00.000-08:00

I got to work on a couple of really cool projects at Dare. I got to work on this one for Vodafone music which has great creative. It was lacking content on launch (clients not supplying content? There's a surprise.) but still looks great.

http://music.vodafone.com/

I had to do some updates to this fairly aged site, which still looks nice.
http://www.sonyericsson.com/walkman/

A couple of small flash apps I did for the Sony e-book, the Reader:
http://www.sony.co.uk/hub/reader-ebook/block/2

And in a similare vein:
http://www.sony.co.uk/hub/reader-ebook

Standardising code - are frameworks really the answer?

2008-12-05T09:15:00.000-08:00

Another interesting thing about working at Dare was their attempt at standardising code. This makes sense. They have a lot of freelancers and permanent Flash staff so having to find your way into different styles of coding to make changes can be time consuming. What they have come up with is a framework based on Cairngorm which they use for all projects.I hear from friends that other compaines are doing the same, PureMVC being quite popular too. In theory it is a great idea. All projects will look the same, run the same way, can be worked on by multiple developers and new developers should require less supervision when writing the projects, once the framework has been learnt. This works great for large scale projects however for smaller projects, learning how bits of the framework worked for doing tracking or similar simple tasks and then implementing it took ages. If for instance the project had two calls to action which needed to be tracked two, I had to create an xml file for the tracking, load it in, set up the tracking manager, dispatch system events and so on. It seemed a bit much for something that could have been 'bodged' in 5 minutes with a few lines of code. So although this approach certainly has it's merits I think it still needs working on. I know someone, not at Dare I hasten to add, who had to do a three button page where each button changed an image. They were told it had to be done using PureMVC and were given 2 weeks to do it! If done the 'old fashioned' way, it could have been done in an afternoon. My own preference would be to use a project template (which I now do) rather than using a framework, which has inspired me to start writing an article on the use of Frameworks in Flash which I think has got a little out of hand. Banners made using Cairngorm? Why would you you do that?

Nissan Film Festival

2008-12-05T09:09:00.001-08:00

I did quite a bit of work for Duke Interactive for a large site they were building for Nissan UK.

Primarily I did a preview page which consisted of a 3d cirle of images that the user can navigate around and watch previews of various films which can then be downloaded if certain conditions are met (using IE on a PC and have Media Player!). The videos are downloaded in conjuction with Microsofts Digital Rights Management (DRM) and I know the server developer had a lot of trouble getting this to run smoothly. Sounded like a real nightmare. The back end was made using RoR and the live version seems to have a number of issues still.

The video preview section can be seen HERE.
but seems to download rather slowly...

Working on this site has inspired and article I am currently writing called 'Work flow roles and responsibilities'. I will publish it here soon. I will think of a snappier title once it's finished! It outlines my theory on how projects should be organised and deployed picking on my fairly wide experience of companies worked as a freelancer.

Develop with Flex Builder 3 or FDT3??

2008-12-05T08:54:00.000-08:00

I have had a stint at Dare Digital for around 3 months. They exculsively use Flex/AS3 for all projects, except banners. All programmers have to use FDT 3 for all Flash/Flex projects which was interesting. I have used FDT for a couple of years for AS2 stuff and more recently Flex Builder 3 (FB3) for doing AS3/Flex projects so using FDT for Flex builds was new for me. A few comparisons that quickly become obvious:

FDT vs Flex Builder 3 for AS3/Flex projects

FDT is a pain in the ass to set up. Quite a lot of stuff has to be configured which can be a real bugger.
FB3 requires no set up

FDT seems to be constantly building, locking the machine.
FB3 only builds on compile (as far as I can tell)

FDT error checking is instant and it highlight issues straight away, sometimes too quickly.
In FB3 you have to look at the Errors window to see any issues. This can cause problems to new users is the error window is not tabbed. Usually it will report that there are errors when you try to compile but sometimes it seems not to. Hence it will still appear to compile and show you the last swf that it made so you can go mad trying to see why something is not happening, only to find out that there was an error in the compile and you're infact looking at an old swf.

FDT templates are great.
In FB3 I still have to write out loops and other mundane stuff :( Maybe this is added in FB4? I hope so.

Auto-completion is better in FDT.

FDT doesn't run Flash in a browser. As all developers know running things in browsers is not the same as running it in an external player.
Although FB3 does run in a browser, sometimes folders get copied from the source folder to the deploy folder automatically in FB3 which shouldn't. Some folders of code were getting copied across which shouldn't be included in the deployment. I can't find a way of getting FB3 to ignore them.

For AS2 projects I used to swear by FDT, but doing AS3 projects I feel a little differently, actually prefering FB3. It does a little less stuff for you but feels cleaner and runs quicker in my opinion.

Post summer update!

2008-12-05T08:52:00.000-08:00

I haven't updated this blog for quite a while now... I haven't had to do an AS2 project since March I think. I have been doing almost exclusively papervision for the last 3 months, a bit of consultancy but mostly project work with a few other bits and pieces thrown in before that for good measure.

3ds vs DAE files in Papervision

2008-08-05T14:01:00.000-07:00

I have been lucky enough to work on a cool Papervision project this week. It's for a car company and in idea is rather similar to Carlos' Ford Focus on his site, but hey, I get paid to make these things, not come up with the concepts. The guy doing the 3d is great at 3d but has no experience porting to Flash and I have very little 3d modelling experience so it was always going to be a steep learning curve!

What follows is our findings on whether it is better to use 3ds models or DAE models.

Initially I asked for DAE's as this seems to by the Papervision 'standard' format. The presented the first problem we had, which was that the 3d guy couldn't get a Collada model to export correctly from Studio Max. He kept sending me models but they would never get parsed by Flash. I kept getting a vertice count of null. I found on the web somewhere this little gem to quickly if a DAE file was exported correctly:

If you open the file and there is a < polygon> node (or polygons I forget exactly) then it's not been triangulated properly. There should be a < triangles> node! If not then it aint right!
The 3d guy insisted that the models were triangulated and that he was using the latest and greatest Collada export plugin. This may well have been true but Papervision isn't the latest and greatest application which uses Collada! By the end of the day when I persuaded him to use the plug in from feeling software rather than the great Autodesk one, then the models actually started to export properly.

In the time between us not being able to use any of the DAE models and using Feeling Software's plugin we tried to use 3ds models. They are approximately half the size of the DAE's and seemed to import just fine. No export issues either. Great! But not. Almost an entire day of tests later we realised that we needed to go back to creating DAE's. The issues were these:
1. No heirarchy of objects would be imported into Flash. So as we had a car, with wheels as children, we expected this to come in as such, but it didn't. It would only come in with all objects all as children on the same level. We tried grouping them and putting them in more containers but nothing seemed to work.
2. Objects that had their own pivot points shifted once they were imported into Flash. So, if a wheel had it's pivot point say 100 units forward and 20 units to the right of the world centre then when imported into Papervision, the wheel would appear 100 units forward and 20 units to the right of the car! The 3d guy came up with a wa y to get the model to come in with everything in the correct place in the end, but that wasn't the final issue.
3. The final issue was that after running a number of tests it appears that it isn't possible to rotate any of the objects in the model around anywhere but the world centre, no matter what we did!

One solution would have been to import each object as it's own 3ds file and then positioned them together in Flash, but once we got the DAE model exporting ok, all these problems evaporated.

In summary then, I would recommend using 3ds models only when the object has one rotation point for all children, as the file size is very small, but when the object has multiple rotation points for various children, then from my findings, you have to use DAEs.

I could find no information on the web about using 3ds models in Papervision, so hopefully this will save someone a few hours of wasted effort. Papervision is being developed at such a rate however that I am sure that someone will get all this working sometime soon, but until then....

Papervision Course - Stockholm

2008-06-20T13:20:00.001-07:00

I attended FitC's 2 day Papervision course in Stockholm as a follow on from the course I did with Rob Bateman in London. The course was hosted by Ralph Hewart (can't remember how to spell his surname) who is one of the guys in the core Papervision team. The course was quite different from Rob's one in London. Although some of the same things were gone over in both courses, I probably learnt equal amounts from both.

Rob went over basic things in more detail and was better at explaining things IMHO. What Ralph did though was go into more detail about importing different models types into Papervision and exporting from 3D Studio Max, all of which was new to me.

Since coming back, I have been offered a few Papervison-orientated projects so hopefully I will be putting my knowledge to good use. It's really only through projects that I think you can really learn any new developments. There is only so much you can learn by doing demos, so hopefully I will have some good commercial use of Papervision up here to show in the next 6 weeks...

APE AS3 Physics Engine

2008-06-20T13:10:00.000-07:00

I have recently been looking at what people have been doing in 3D physics with a view to ramping up what I can do in Papervision. During my research I came across APE (Actionscript Physics Engine) and I have to say it is pretty amazing.

It is a 2D physics engine and like lot's of new things in the Flash world, it's very easy to make cool demos with, but hopefully I will find a 'real life' use for this on a job soon... in the mean time, here is a cool demo which I knocked up in an hour....

GRATUITOUS DEMO

Scrapshoot goes live

2008-06-09T05:42:00.000-07:00

Scrapshoot has finally gone live in Europe!
The standalone UK version is HERE

It seems to have been nabbed by a whole load of websites!

The MSN version is going live this week to but there is a preview page here:
MSN Scrapshoot
You play against a friend and have to blow up the stuff before they do!

Both games were done in AS2, mainly because of MSN restrictions....

Check them out!

Skybox Panaorama

2008-06-09T05:21:00.000-07:00

Creating a skybox is a really nice and simple demo to do. One of the tough parts is creating the image and making sure it is layed out correctly.

How it works is that it applies the image (which looks something like this):

as a texture to the inside of a cube and then the camera is moved inside of the cube. Moving the mouse then gives the effect of being in a 3D world.

Away3D has a very nice simple Skybox6 class which allows you to put all the images into 1 image and use that, as opposed to applying 6 images, one to each side of the cube, which can be tricky to get them in the right order at first.

Here's one I made earlier (down shep)

This one uses Rectangle Clipping too, just to make it a bit quicker.

Extruding map example

2008-06-09T03:47:00.001-07:00

Following on from the Away3D course I thought I better knock together a few of my own demos! Here is a simple example of how to make a terrain.
First you need to create a 2D map in a sort of ordanance survey style, with lighter colours representing peaks and darker colours represnting valleys on a sliding scale. This is a very simple one that I knocked up quickly in Flash.

Take this into Photoshop or whatever you use and change the colour pallete to grey scale, so you have another image that looks like this:

Next step is to create a plane with around 25 polygons (depending on your speed/detail requirements) and use the colour image as the material, which will give you a flat plane with the colour image on it.
The code will look something like this:
material = new BitmapMaterial( Cast.bitmap(elevationImage) );
var nPolys:Number = 25;
plane = new Plane({material:material, width:512, height:512, segmentsW:nPolys,segmentsH:nPolys});

Then create a bitmap data object from the grey scale image and loop through that picking a pixel at increments of the width/number of polygons. If you use getPixel32 and bit shift the result, then set it to a base 10 number, you will get a number between 0(black) and 255(white). The code will be something ala:
var px = (bmp.getPixel32((nWidth/nPolys)*(nPolys-x),(nHeight/nPolys)*(nPolys-y)) & 0xFF).toString(10);
You can use this number to extrude that vertex of the plane to a the number px/maximum height you are achieving:
var vert:Vertex = plane.vertex(y,nPolys-x);
vert.position = new Number3D(vert.x,vert.y+(px*.75),vert.z);

There is an example of how it works here

This could have real application for something such as an extruding floor plan for an estate agent.

Away3D/Papervision course

2008-06-09T03:31:00.000-07:00

I attended Rob Bateman's Away3D/Papervision course a few weeks ago so thought I would make a quick blog entry about it. It spanned two days and covered all the basics from setup to interaction using PhongMaterials. We covered lights, textures, transforms, filters, loading and interacting with models using Colada.

All in all it was a very good course. I learnt and understand all the basics of what's what and how it fits together now. Also I now have a decent overview on what is and isn't possible with 3D in Flash. When to use it and when to look at alternatives can be a tricky thing to decide especially with all the hype surrounding Papervision and Flash generally.

I think that Flash 3D (whether it be Papervision or Away) certainly does have a place, although it should not be used for the sake of having 3D. Spinning globes and the like are fine but I haven't seen too much else which really warrants the use of 3D in Flash (with one notable exception which used a really nice 3D navigation which I can't remember the url of!)

In Flash3D, the interaction between objects is very limited (although Wow physics engine looks very promising) and creating games or immersive environments seems to be beyond it at the moment. There are better tools for this such as Unity or even Director 3D, which although I haven't used for a number of years was still well ahead then where 3D in Flash is now.

MSN Messenger Game

2008-04-29T12:33:00.000-07:00

I am currently working on an MSN version of a really cool shoot-em-up game that I made for WallE. The standalone version is not live anywhere yet as it was just release to the markets today. The stand along version is a basic duck shoot type of affair with 6 levels, a whole host of different objects to shoot and a bonus video trailer to unlock. It should be live in the next week.

The MSN Messenger version will allow two people to play against each other in real time . Each player has to shoot the items first to get the points. There is going to be a little lag as MSN only allows for 2 messages to be sent a second, but so far in testing it looking very playable! I will put it up here as soon as it goes live, which 'hopefully' will be in the next week or so....

Wall E - europe version live

2008-04-29T12:20:00.000-07:00

I recently worked on the trailer site for the new disney movie WallE. It is AS3 and I hasten to add, was designed in the States! It had been made but in a completely non-localisable fashion. I reworked it to include a few design tweaks, update a few sections and make it all xml driven for 12 European markets. It was made originally in an 'interesting' fashion (think all AS3 on the timeline!) which made it quite a challenge! Still, it was good to be doing some more AS3 stuff.
Have a look at the french version here: http://www.disney.fr/FilmsDisney/Wall-E/index_fr.html

Famous Five goes live!

2008-04-29T12:04:00.000-07:00

The new Famous Five website has just gone live.
It is one of the first AS3 sites I have done and although it is very simple, is clean was turned around very quickly and works pretty seemlessly.

www.famousfive.co.uk

AS3 Speed tests and paticle fun

2008-03-16T06:13:00.000-07:00

Inspired by an excellent demo on particle creation that I saw at FITC Amsterdam by Seb Lee Delisle, I put together this demo of exploding confetti to see how many seperate clips I could realistically expect to be able to generate for particle effects... remember these clips are all being rotated and there is an blur filter attached to the screen. I am currenly working on a game which is going to use loads of these effects as they are so versatile.

Cross Platform Desktop Characters in AIR

2008-03-14T17:17:00.000-07:00

I saw some transparent windows in an AIR application which looked really good... having desktop applications of any shape and size brings up loads of possibilities... one I thought of was to make a desktop character that runs around doing stuff... so I made this guy who runs across the screen then turns round and comes back when he gets to the edge of the screen... not amazingly exciting, but it has a lot of potential, maybe reacting to windows events (deleting files and so on).. due to it's design as a cross platform distributable however, I guess that's not going to happen... I suppose I could get it to chase the mouse around the screen and then stop and start panting which would be slightly amusing... sadly my graphical skills aren't up to it so you'll have to make do with this....

DOWNLOAD IT HERE

British Airways Terminal 5 Lounges

2008-03-14T14:53:00.001-07:00

The video laden site that I made for British Airways/Agency.com showcasing their new first class lounges has gone live... loads of great 3d and AfterEffects (which I can't take credit for), I just put it all together... it shows what you can do if you have the budget. I think it is debateable what the target market is and who will benefit from the site, but it looks great!

Check it out at:

Click to see the page here and click on the "Lounges" button on the left menu as it gets loaded into a javascript overlay.

Viva voodo doll creator goes live

2008-03-14T14:39:00.000-07:00

I was lucky enough to work on a doll maker application for the incredible Vivavoodo site.. it allows you to create jpegs of twisted looking dolls that you can create in your likeness, or pick from one of the celebrity lookey likeys...

Here's one I made earlier... if I was with you now, you'd swear it was a photo of me..

Adobe Air FLV Player

2008-03-14T14:13:00.000-07:00

Fresh from my masterclass on Adobe Air I decided to try and make something useful using native windows... I decided on a standalone FLV player to start with as I reckoned that it wasn't going to take too long... it uses the native window class to allow the user to drag on flv's and it resizes itself to fit the the dimensions with a little tween... also you can right click to get the meta data...
Added to that the app comes with cool icons..
i will update it when I have time to, so that it lists where the cue points are and puts all the meta and cue data in an easy to read panel... when their's time...

If you want to look at it, you can download it here:
Simple FLV Player
view the source by rightclicking over the initial screen when the app has installed and is running.

If you're short of flv's to test with, you can download this little experiment I did in AfterEffects Sample FLV

You will need to install the AIR runtime as well which I think happens automatically after a few prompts...

FiTc Amsterdam

2008-03-12T15:35:00.000-07:00

So I went along to FiTc Amsterdam for the three days...
It kicked off with the Air Masterclass on the Sunday which was more like an introduction to Air than a masterclass, but interesting none the less... then it was two days of talks from the usual suspects. Lots of stuff on Air and a few other interesting bits and pieces. I will edit this post at a later date to give credit those who interested me. There were some evening events with free beer (good), but not surprisingly the male to female ratio was 1:0 (not so good) ... I left shortly afterward arriving.
The whole event was pretty good but probably not as inspiring as Flash on The Beach, but I will go again next year.

Nissan Adventure Widget Phase 1 Goes Live

2008-03-12T15:06:00.000-07:00

After what ended up being a protracted project the Nissan Adventure Widget has finally gone live! It was a really great project to work on and ended up being very Web 2.0 intergrating Google Maps, YouTube and Flickr into a widget... no mean feat as it turned out! :)

Firstly I had to intergrate Google Maps into the Flash which was no mean feat! There is a component that does it but that routed calls via it's server, which was no good for a commercial project.... fortunately I found some open source code from Critical Mass who made the best part of a google maps engine in Flash for a Rolex project. God knows how long it took them to do.. as far as I can tell it works out which images google will download and creates the urls needed. Good work and big thanks to those guys! It took a while to work out what did what, but once I did that, it didn't require too much hacking to get it to do what I wanted... which was nice. It is only AS2 mind, but then you can't have everything!

Next the client needed to be able to upload photos to a flickr account which the widget would then be pulled in by the widget as thumbnails and be able to view the image in a larger size and then link out to the correct image in Flickr... hmmm, fortunately as is usually the case with Flash someone has already done pretty well everything that you will need to do... this time I looked to a friend Kelvin Luck who has made a right fancy set of classes which act as a wrapper for calls to Flickr. It can do a lot more than I wanted and I would say if you do have to intergrate Flickr have a look at Flashr. Word on the street is that there may be an AS3 version coming out sooooon.

Finally to complete their Web 2.0 requests the client also wanted to be able to do a similar thing with YouTube, being able to upload videos to a profile and then use the widget to download them, display thumbnails and show the video within the application! Again someone has already done this (I think it was Flash Dynamix or something like that) but it used their servers, which again was no good for a commercial project... the tricky bits where that as a widget if I tried to make calls directly to YouTube I was getting security errors... on top of this to play the video in Flash I needed the url of the actual clip which isn't in the xml that gets returned from YouTube... the security errors were sorted by doing some simple backend programming which acted as a proxy for Flash... to construct the url of the video I did what I often do and set about finding someone else who has done it! Fortunately I stumbled upon this rather clever Indian fella Abdul Qabiz who has loads of really useful info on his site...

Mr Men wins Revolution Creative award

2008-03-12T15:04:00.000-07:00

The Mr Men TV site that I made (along with a group of talented individuals at Digital Outlook!) won the Revolution Creative Award against some stiff competition... this is the first award winning project I have worked on, and it hopefully won't be the last!

The site is about to be localised for the French...

Useful equations

2008-03-12T15:03:00.001-07:00

To make an item face the way it is moving use:
clip.rotation = Math.atan2(yVel,xVel)*(180/Math.PI);

Mr Men Phase 2 Launched

2007-10-03T03:28:00.000-07:00

The second phase of http://www.mrmen.com which I have been working on for a while has now launched and I think it looks great! It's aimed at 7 year olds and judging by my playtesting with my nephew, it is spot on. Lots of great animation and catchphrases, fun games and things for the kids to download and colour in.

The whole site was made in Flash and is fully localisable so watch out for forthcoming different language versions.

The new tv series launches at the start of Januray (I think) in the UK and US and was made entirely in Flash!