Opening a file in a non-default application with Adobe AIR

On a current project I had to launch files in an application that was not Windows’ default app for opening. Specifically – I needed to open images in Photoshop or Fireworks from my AIR app, even when the default app for .png and .jpg is the Windows Photo Viewer.

As you might already know the File API has had the  file.openWithDefaultApplication() method since AIR 2.0. But this wasn’t going to cut it since I needed to open in a specific application. So I turned to the NativeProcess API which allows you to launch a native process from your AIR app (i.e run an .exe on Windows). I decided I should make a post on how to do it since I couldn’t find any good resources or examples for it.

READ MORE

Experiences with Flash, AIR and iOS

Well I’ve been pretty busy latey and not much has happened on here for over month. I decided I should post some work and experiments I have been doing with building iOS apps with AIR for iOS. So below is a series of video demos of some experiments and actual projects I have been doing recently. All apps were compiled using Flash CS5. Note that none of these apps are available in the public app store.

Adventure Golf

Adventure Golf is a simple mini golf game I worked on for a client last year which was written in AS2. I decided to see how easy it was to build existing games for iOS so I converted all the AS2 to AS3 with minimal code changes/optimisations and Published for iOS. All graphics are pulled from the Flash library, with levels laid out on the stage on different frames. The hardest thing I had to do was resize the stage. Everything else just worked and I was surprised at how well it did considering it was converted from old AS2 code. I would like build this into a full app one day when I have lots of spare time!

READ MORE

Paint Maestro 2 sneak peek

I was going to record a full demo of my upcoming multitouch painting application ‘Paint Maestro 2’, but I had some technical difficulties so here is a small demo of the stencils. The application is written in AS3 and uses Adobe AIR. I posted this video over at NUI Group a couple weeks ago and got a pretty good response. But I never posted it here so here it is below. More info on Paint Maestro 2 will be coming soon so stay tuned…

READ MORE

Reading and Writing your own file type with AS3 and AIR

If your building an AIR application and you want to have your own native custom file type association for your app, it is surprisingly easy to to with ActionScript 3 in air as I found out. I was unable to find any information on reading and writing custom files so I decided to post my experience here. I remembered watching a tutorial by Lee Brimelow at gotoAndLearn a while back where he showed how to decode a BMP file using ByteArrays. So I revised the tutorial and used the ideas from this to create my own file.

For this example I will create a simple graphic file containing some metadata and some bitmap data.

1. Write out the specification

The first thing you should do is map out a spec sheet for it, outlining all the data and datatypes you want to store and the order it will be written. This is important so you don’t forget later on, and if you want others to be able to use it as well. Your custom file must be read and written in the same order. I just did it in Notepad like so:

image name – String
image author – String
image width – int
image height – int
bitmapdata length – int
bitmapdata – bytearray

Note that this is a very basic file, so you could save all different data types such as Boolean, Number, String, int, uint etc.

2. Get your data into a ByteArray

To write the file first we need to create a bytearray and then using the write methods of the ByteArray class write the bits of data to it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// the stuff we want to save - name, author and a bitmap - in this case I've created a red square 300x300px
var name:String = "a new picture";
var author:String = "Ted Mosby";
var bitmap:Bitmap = new Bitmap(new BitmapData(300,300,false,0xFF0000));

// convert bitmap to byte array
var bitmapBA:ByteArray = bitmap.bitmapData.getPixels();

// create a bytearray to save into file
var bytearray:ByteArray = new ByteArray();

// write the image name
bytearray.writeUTF(name);

// write author
bytearray.writeUTF(author);

// write image width and height
bytearray.writeInt(bitmap.width);
bytearray.writeInt(bitmap.height);

// write bitmap data length
bytearray.writeInt(bitmapBA.length);

// write the bitmap
bytearray.writeBytes(bitmapBA);

READ MORE

Multitouch Paint – Part 2

Here is an updated version of my MT Paint application. Some of the improvements are:

  • New UI (work in progress)
  • Custom canvas size
  • Up to 5 Layers with Merge and Duplicate
  • Layer Blend Modes, Opacity and Visibilty
  • Load in Image to layer
  • Get Colour From Layer – select a layer to live sample colours from
  • Improved performance
  • Hardness and Opacity works on brushes
  • Eye Dropper colour selection tool (currently selects from selected layer, not whole image)
  • Rename layers

Note: Currently the application is best displayed on a screen at 1920×1080, it will still work on lower resolutions but some parts may be cut off.
Note 2: You can use your mouse too if you don’t have a touch screen!

Download AIR Installer

Videos from Adobe MAX Sneaks

Below is some videos taken at the Adobe MAX 2010 conferences during Sneaks sessions. Sneaks sessions are a chance for Adobe to demonstrate prototypes and new technologies that may or may not make it into future Adobe products. Some pretty interesting stuff!

Typography of Code- a new way of displaying and reading code for designers

Wallaby – Exporting an FLA to HTML

Flash StageVideo – a performance demo showing smooth playback with low CPU usage when overlaying vector graphics on 1080p video

Flash StageVideo – smooth playback of 4K video in Flash

Video Tapestry – a new way to navigate a video

Photoshop Future – matching colours in photos

Pixel Bender 3D – shaders for the new ‘Molehill’ 3D api coming to Flash

AS3: Code hinting, completion and highlighting in Air apps

Over the last couple of months I have been working on a text editor, for which I made a history manager class that I posted about a little while back. This time as a bit of an experiment/challenge I tried to include some code hinting and code completion functionality to the editor similar to Dreamweaver, to speed up the process of manually typing tags.

Another feature I added to the text editor was some syntax highlighting, so that tags and attributes would be a different colour to the content, which most text editors have these days. I achieved this by using regular expressions to check each line for tags, and then format that text if they are found, and then using another regex to check the found tags for attributes and colour them differently again.

Below is a small demo of what I’ve done so far.
Start typing some HTML tags in the text box to get the hinting drop down. In this demo the drop down contains a very rough selection of html tags and attributes. You can use the arrow keys to select a tag and hit enter to insert it. You can also get hinting for attributes for example if you type "<p" and then hit space, a list of available attributes for that tag will be displayed. When you type "</" to close the tags the last opened tag will automatically be completed for you. You will notice that once a tag is completed it will be highlighted blue, with any attributed in brown.

Since the demo below is in Flash player and not Air, there are a couple is issues with the keyboard… the event.preventDefault() method seems to only work in Air. When you are selecting items in the drop down the cursor in the text box will also move, and when you hit enter you will also break the text in the text box. So to get a proper demo just download the source FLA (CS4) at the bottom of the post and preview/publish the project as an Air package.

Any feedback regarding bugs would be greatly appreciated. Since this is quite complex it’s pretty hard to test all situations, but I think I have found most.

Get Adobe Flash player

Enough talking:
Get the sauce.

Multitouch Jukebox Concept

As most people may know, Adobe released CS5 last week and with it Flash CS5 which now has built in native multitouch events. As an experiment with these new APIs I decided to rework my AS3 coverflow into a multitouch music player using gestures to scroll through album covers. Below you can watch a quick video I recorded of it in action. The basic controls are as follows:

  • Use two fingers touch and and scroll through albums
  • Single finger tap on cover to reveal songs
  • Single finger tap song to play
  • Two finger tap on song list to play ablum
  • Simple drag and drop songs into playlist

The performance is quite good with the camera in the MT screen running at 60fps, and the app running at 30fps. The advantage of using the native touch events is that the events are recieved from the Windows 7 HID driver so Windows can be controlled at the same time and the whole experience is much more seamless.

Oh and by the way… the screen I am using is a DIY 19″ LCD FTIR

Photo Painter App

Here is my latest experiment in Flash… this time its an app that takes a source image (jpg) and paints it giving it a very painterly look. You can tweak some of the settings such as brush size and blur. The image above was created using this. You can download the Air installer or source files below to have a play around with it. More examples below also!

[DOWNLOAD AIR] [SOURCE]

more examples:

ParticlePlayground Air App

Over the last week or two I have been playing around with particle systems and creating my own to learn all the maths equations behind them. Why? I was playing with Trapcode Particular and started wondering what all the maths behind it was. So I started creating my own particle system in Flash from the ground up – writing my own equations to move the particles. While they may not be the most efficient… they work pretty well and you can get some pretty cool results. The FLVs will save to the desktop as myParticles1.flv, myParticles2.flv etc.

Then I thought… man it would be cool if you could export the particle designs as videos, so I had a look around and found a FLV Recording class at http://code.google.com/p/flvrecorder/. For this this to work I had to be using Air, so I quickly moved it from Flash Player across to Air and incorporated the FLV recording. It might seem like it slows down and take while to save… but hell you can be waiting hours for AfterEffects to render.

This particle app was the reason I created the gradient slider (shown in the previous blog post). I wanted to be able to adjust the colour and alpha over time like in Trapcode Particular.  After creating the Gradient slider, my next issue was actually getting the particles to fade in the correct order and time. This was solved by using Greensocks TimelineLite and TweenLite.

Issues etc:

  • The real-time render button currently does nothing except turn the quailty switch on or off, which also doesn’t work since Air currently only supports high quality (flash player supports low and medium quality as well)
  • Currently FLVs won’t save with transparency (i think)
  • the particles/sec slider is dodgey
  • currently you can only export 1 swf per session ( i had problems with the FLVs playing back after saving more than one)
  • no help screen

I could probly say more stuff but I shall end the post here. Click below to download the Air app and all the source files.

[DOWNLOAD]

examples: