Last Instinct

For the launch of the new Jeep Cherokee in 2008, I made a frontflash and a spot for the campaign at Basilicon.

The main design and animation was made by me, but I got some help from Anders Ekström, who really wanted the leopard to jump in from the right. Since we only had a leopard laying down, we had to fabricate the jumping leopard.

At Basilicon, we were recently proud to release a dedicated video player for Thule globally. I have over some years developed a unique video technique for Basilicon which is rather cutting edge. It measures and estimates your bandwidth capabilities in 0.3 seconds and adapts the video to this.

Well, this can be done with any sophisticated streaming server, but this technique does it without the need of a streaming server, which reduces the cost and maintenance significantly. It’s done using Adobe Flash and it’s currently not possible to do in HTML5. It uses H.264 codec, which works like a charm in the latest Flash Player. Even on my old crappy laptop. It also features automatic quality control to optimize performance during playback.

Everything from video coding to player design and setting up the server was done by me. It was a bit nervous to estimate what performance we needed from the server and find a hosting partner that could deliver this for a reasonable price. I chose a cloud VPS for this, which could be upgraded with better performance when necessary. We have not needed to upgrade it yet and I am really satisfied with the performance and flexibility of our hosting. After some fine tuning it now serves 10000+ videos every day perfectly. That number will probably increase a lot later on, but the server has much more to give.

This was a campaign site for Mercedes-Benz company cars I made at Basilicon in 2009. It was an flash application with a funny approach to comparing leasing costs for cars. Everything was measured in how many caffe lattes you saved each month.

It was actually based on a similar campaign made by another web agency earlier. I got the assignment to redesign it so it matched Mercedes-Benz new corporate identity. But the project ended up being a lot bigger than that, since the wanted to update most car models and add pages with environmental information on so on. I also had to rewrite most of the code, since it was such bad design and so buggy from the start. So at the end I had rebuilt the whole application.

This was my first big campaign when I started working at Basilicon in 2007. Jeep had a collaboration together with the wildlife park Kolmården where Jeep sponsored a terrain driving track. We made the campaign site and also the booking system, which my boss Anders Ekström put lots of energy into.

I directed the art and programmed most of the flash interaction and the implementation in HTML. I worked together with David Andersson in designing all the sub sections. The main design was formed as an old map with a little Jeep as mouse pointer. The little car was actually the hardest part to get to work correctly.

The technical solution for the window was really cool, since most of the campaigns back then used rather annoying popup-windows. This was made as a layer with transparency and shadows in flash instead. This wasn’t really possible before that point, since Safari on Mac had terrible and very buggy support for this. Fortunately, Firefox had just gotten better support for it. The web support have really developed a lot on Mac in the three years since then!

This was a project I made together with Danny Gomez in 2008 at Basilicon. Duni wanted an interactive product presentation for their customizable transparent plastic salad bowl. I made the design, the text & logo effects and interaction flow, while Danny made the 3D-model and animation. I think we got a realistic and really interesting presentation of the product.

I’ve updated the website of my friend Linn Nydrén. New features include online shopping through PayPal and VIP mailinglist. She has just released her new Holiday collection and you can even order Customized Clothing. So visit the l i n n n clothing web shop and make an order!

Now to the tech talk: I added form support, so that she could add forms from PayPal on her own. I also updated the js-libraries to include SWFAdress for deep linking with Flash and UFO for unobtrusive Flash embedding. SWFAdress is really tricky to get working. I think video tutorials take too much time, so someone should really make a great non-video tutorial on how to use it with Flash properly. But once it works, it does an excellent job.

I chose UFO instead to the newer SWFObject 2.0, since the syntax is cleaner and more consistent. Also, I had more trouble with SWFObject than UFO, especially with the static publishing method. I was also looking for an old thing called SWFSize, but I couldn’t find it. Then I realized that I didn’t need it, since the size constraint I wanted to achieve can be accomplished using min-width in CSS3.

I got a bit inspired by my previous Sparkling sunset made with Photoshop and wanted to make a proof of concept for Adobe Flash. So I animated the sunset. This is what you can do with Flash without using much code. I have just used a few lines to randomize starting points. All other graphic effects are built into Flash and needs no coding.

Wouldn’t it be cool if sunsets like these existed?

If you want to encode JPEG images in AS3 there are a number of encoders to use and obviously there is one that is better than all the rest. Mateusz Małczak has made an excellent JPEG encoder based on the libjpeg C-library compiled into Actionscript using Adobe Alchemy. It not only produces small JPEGs with high quality really fast, but it’s also asyncronous meaning that it doesn’t lock up your application while encoding, like many of the other encoders do. This way you can also monitor the progress of the encoding process while encoding. The disadvantage is that you need an extra click from the user to save the file when the process is complete. This is due to limitations in the security model in the Flash Player, which only allow file saving exactly when you make a click, which doesn’t work with asynchronous scripts. However, this isn’t a big problem if you make a logic design.

Step 1

Start by making a new Flash File (Actionscript 3.0) and save it in a folder of your choice.

Step 2

Download the jpegencoder.swc from segfaultlabs. Just click on the jpegencoder.swc in the folder /libs/. Save the file to the folder where you have your .fla file.

Step 3

Open the publish settings in flash and select the flash tab.

To get the SWC library working when you publish your swf you need to do a little magic trick, otherwise you will get the error ReferenceError: Error #1065: Variable MainTimeline is not defined when publishing or testing the SWF. To deal with this error we need to include the required things to use SWC libraries in the SWF.

Check the Export SWC checkbox in the publish settings.

Note: this setting will also produce another SWC file with the same name as your SWF when publishing. This file is not needed when distributing the SWF to the web or similar and can be deleted.

Step 4

Click on Actionscript settings.

Go to the Library path section. Click on Browse to SWC file and locate the jpegencoder.swc and include it.

Click OK to save your library settings.

Voilà! Now you are ready to use the Alchemy JPEG Encoder in your code!

Initializing the library

To initialize the Alchemy JPEG library use the following lines in your actionscript:

import cmodule.jpegencoder.CLibInit;   
 
/// init alchemy object
var jpeginit:CLibInit = new CLibInit(); // get library
var jpeglib:Object = jpeginit.init(); // initialize library exported class to an object

Starting the encoder

To use the encoder simply call the jpeglib.encodeAsync function and use it with a ByteArray. There is also a non-asyncronous function you can use which is a little bit faster. Even if its faster I recommend using the asynchronous function, since it doesn’t lock up your application while encoding.

// Refer to your own BitmapData object
var imgBitmap:BitmapData = someBitmapDataYouHaveAlreadyCreated;
 
// Prepare Alchemy objects
var imgData:ByteArray = imgBitmap.getPixels(imgBitmap.rect);;
var imgEncoded:ByteArray = new ByteArray();
imgData.position = 0;
 
// Function called when completed
var encodeComplete:Function = function() {
    trace("Encoding complete");
};
 
// Start JPEG encoder
trace("Start encoding");
var jpegQuality:Number = 80;
jpeglib.encodeAsync(encodeComplete, imgData, imgEncoded, imgBitmap.width, imgBitmap.height, jpegQuality);

Monitor progress

To see the progress of the encoding you need to set up a function that monitors the position of the ByteArray reader in the encoder. This is done by simply using a setInterval function during the encoding. Don’t forget to clear the interval when the encoding is complete.

// Encoding progress monitor function
var encodeProgress:Function = function() {
	// Listen to the position of the data reader
	trace("Encoding progress: " + Math.round(imgData.position/imgData.length*100) + "%");
};
// Start monitoring the progress of the encoding
var progressMonitor:Number = setInterval(encodeProgress, 20);
 
// Encoding progress complete function
var encodeComplete:Function = function() {
	trace("Encoding complete");
 
	// Stop monitoring the progress
	clearInterval(progressMonitor);
};

Full example

Here is a full example of encoding some graphics into a JPEG while monitoring the progress and then saving it onto the user’s hard drive.

In a school project I had now, we were supposed to make a simple animated link button with a sound using Flash (really not very difficult). Well, I felt like doing some graffiti to get some bonus out of it. The drawing functions in Flash are actually pretty good for fast graffiti production.

A great source for inspiration and making your own color themes is Adobe Kuler. It’s a free service and features all the common color picking techniques. They also have an API available for non-commercial use. It’s perfect for use with flash and its really simple to use thanks to the ColorMunch AS3 class by Ben Kanizay. I used it for color picking in my ChannelColorizer.

Here is a basic example for making a search for “banana”-themes from Kuler in Actionscript 3. To use it you need the ColorMunch class an your own Kuler API key. There are some more examples in the ColorMunch wiki, but you’ll find the most useful information in the documentation provided in the ColorMunch zip-package.

• Register for a Kuler API key
• Download the ColorMunch class and extract it to your fla-folder.

Example of using Adobe Kuler in Flash AS3 via the ColorMunch class:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

import beekay.colormunch.*;
 
// creates a new ColorMunch instance with your Kuler API key
var colormunch:ColorMunch = new ColorMunch("INSERT_YOUR_KULER_API_KEY_HERE");
 
// At a minimum listen for the 'resultReady' event
// This will fire when the result has been recieved and processed
colormunch.addEventListener(ColorMunchEvent.RESULT_READY, onResultReady);
colormunch.addEventListener(ColorMunchEvent.ERROR, onResultError);
 
function onResultReady(event:ColorMunchEvent) {
	trace("Kuler recieved");
	var theme:Theme = colormunch.getRandomTheme();
	var themeSprite:Sprite = theme.getThemeSprite();
	themeSprite.width = stage.stageWidth;
	themeSprite.height = stage.stageHeight;
 
	// Put the theme sprite on the stage
	addChild(themeSprite);
 
	// Get information about the selected theme
	trace("Loading theme: " + theme.getThemeTitle());
 
	// access swatch information through the theme object
	var swatch:Swatch;
	var col:uint;
	var cR:uint;
	var cG:uint;
	var cB:uint;
 
	for (var i:int = 0; i < theme.getSwatchCount(); i++) {
		// get the color
		swatch= theme.getSwatchByIndex(i);
		col	= swatch.getHex();
 
		// Split the color into RGB
		cR 	= (col >> 16) & 0xFF;
		cG 	= (col >> 8) & 0xFF;
		cB 	= col & 0xFF;
		trace("RGB:", cR, cG, cB);
	}	
}
function onResultError(event:ColorMunchEvent) {
	trace("Kuler error: " + event.data);
}
 
// Everything prepared, now search for 10 "banana" themes starting at 0
colormunch.searchThemes(ColorMunch.FILTER_NONE, "banana", 0, 10);