I was recently needing to do some gradient fills for use on some buttons, but I was getting frustrated having to tab two separate colours and then do the gradient fill using these - by manually filling in the two colour values into the gradientfill. Most often your second gradient colour would simply be a darker or lighter version of a particular colour, so I thought that I would write a function that will return a version of a particular colour, slightly darkened or lightened. This has turned out to be a very useful piece of code and I’ve ended up using it in a number of places, even when you don’t need a gradient. Sometimes, just to keep with the aesthetics of a site, you need variations of a colour, and you might even want to randomize those variations, but keep within a colour theme. As always, there are probably ways to do this differently using transforms or something like that, but I like the simplicity of this result, as well as the fact that you end up with a proper uint value.

The result can be seen in the following flash file. Click on the stage to refresh it. When the display draws itself, the colour on the left is a random colour and the colour on the right is a graded version of the one on the left. I’ve included the source of this file in the download below also.

This is the function that I’ve come up with, you can download the class and example file here: ColorUtils

package com.rigardkruger.utils
{
 
	/**
	* 
	* 
	* @author Rigard Kruger
	*/
	public class ColorUtils
	{
 
		public static const LIGHTEN:String = "lighten";
		public static const DARKEN:String = "darken";
 
		public static function getGradedColor(color:uint, percent:int, type:String) : uint
		{
			var r:int = color >> 16;
			var g:int = color >> 8 & 0xff;
			var b:int = color & 0xff;
 
			var gradedValue:uint = 0xff / 100 * percent;
 
			switch (type)
			{
				case ColorUtils.LIGHTEN:
					r = ((r + gradedValue) <= 0xff) ? r + gradedValue : 0xff;
					g = ((g + gradedValue) <= 0xff) ? g + gradedValue : 0xff;
					b = ((b + gradedValue) <= 0xff) ? b + gradedValue : 0xff;
					break;
				case ColorUtils.DARKEN:
					r = ((r - gradedValue) >= 0x00) ? r - gradedValue : 0x00;
					g = ((g - gradedValue) >= 0x00) ? g - gradedValue : 0x00;
					b = ((b - gradedValue) >= 0x00) ? b - gradedValue : 0x00;
					break;
			}
 
			var gradedColor:uint = r << 16 | g << 8 | b;
 
			return gradedColor;
		}
 
 
	}
 
}

Squares are really cool. I mean that - I really like squares. I think that you can do some pretty incredible and creative things with squares. It’s probably because they are so basic that they can be used in such many ways.

Anyhow, if you are like me and you are a fan of the really beautiful things that squares are, or are part of, then you should hook up this book: Squares, checks, and grids. It showcases some very interesting uses of squares and I think it can really get those creative juices flowing. So yes, whatever…blahblahblah… what can we do with squares, right?

Well I was over at this site the other day: Lumina Live and oh yes!! They have made an incredible and beautiful site, with a fundamental aesthetic placed on squares/pixels/whatever. I loved the way the background changed all the time and the way that looked, so I thought I’d do something similar. But the tricky part will be to find nice themes of colour. Random colours are likely to look a little funny. That’s where Adobe’s kuler comes in to play. They have an api that you can access and it returns a bunch of themes from their user submitted database. I connected to this api and now we have the following:

Click to Read Further…

The previous post had a pretty lame example, so here is something a little bit more sensible. As a company, we often want to display work or presentations to people that aren’t with us, ie. they are abroad or somewhere currently inaccessible. The answer: Flash Media Server. In this example, I’ve given the users the ability to join a unique session and they can then control a slideshow (in both directions - presenter to presentee and vice-versa). This is a simple example, but I think if you added in audio/video capability - not much more work, as well as the ability for the “admin” to toggle user interface features of the “client”, then you have a pretty nice and powerful live online presentation tool.

Click to Read Further…

The last few weeks have been pretty intense at work. We’ve just sent off a big project, but I think it will be a winner, so that’s great. Besides being incredibly busy on this though, I’ve been doing a little bit of research into the whole multi-user scenario that flash has to offer. There seems to be a few things out there, but at the end of the day it looks like the best choice is between Adobe’s own Flash Media Server and the open-source alternative Red5. It looks like both will give you a pretty comprehensive package when it comes to your needs as far as multi-user interactivity goes, and any kind of live streaming capabilities you need, like live video and audio, for example.

Red5

Flash Media Server

Considering that Adobe’s Flash Media Server will set you back $4.500, I think its probably nice to have the completely free open-source alternative. This option is a little bit tricky, especially considering that Red5 is Java based which might be a little bit of a scare off for actionscripters. Over at Red5-An open source flash server they do mention that there will soon be support for serverside actionscript, however, so I wouldn’t imagine there to be too much debating going on anymore. I’ve briefly checked out Red5 and it looks like a pretty good deal all in all. As for the Flash Media Server, well I’ve given it a good go on my local machine, but without much luck (perhaps a Vista issue), I went over to Influxis and signed up for their experimental package and after doing a bit of reading on how to get the FMS going (Learning Flash Media Server 3), I got cracking on this. Below is a barebones example of it in action. There are no checks to see who is on or what is happening or dealing with errors, so if it doesn’t work - that’s why. But the idea is simple: one user drags the dot on this screen - another sees it being dragged on their screen. Open up two windows - maybe FF and IE and go to the same page on both and you will see it work. In the future, the dot will be other things, believe it…as well as text chatting and such nice things….

[Edit: removed lame example. See this post for a better demonstration]

Last night I posted on Google’s newly released Google Maps API for Flash. I’ve taken it a little further today, by adding a few features that one might want to see in a proper application. It’s still very basic, but I am just trying to highlight some of the things offered by the API. You’ll see that I’ve replaced the regular user interface with one of my own, and included the ability to toggle markers on the map. There is also the option to pan to particular, predefined destinations. From this simple implementation, it’s quite easy to see how this can become useful in a real application.

Click to Read Further…

Google recently released their map api for Flash. This is very cool, as you can now have the map inside a fully functioning flash application, but the nicest thing here is that you have all kinds of added functionality, like adding your own layer that maps itself to the physical terrain. And on this layer you can put any kind of displayobject you like.

Here is an example where it centers on the cable car house at the top of Table Mountain (Cape Town), just behind where I live. Its completely elementary at this stage, but you can see that I added in my own little pulsating dot there, which is a sprite. Obviously what that means is you can have any kind of sprite in its place. A lot of possibilities here.

Here is the link to the Google Map for Flash home: http://code.google.com/apis/maps/documentation/flash/

Click to Read Further…

So I’ve seen effects like this around a little bit recently and decided to give it a bit of a shot myself. Haven’t done any research or anything of that kind about what really goes on in proper video interference, but I think what’s going on here looks pretty good/realistic to me. I was also just trying to push the bitmapdata class a bit and see how much manipulation it can take without freaking out the computer too much, and it seems like it handled quite a lot without much trouble.

In this file, I’ve got 4 timers running here, each doing different things. One of the timers draws the video data (from your webcam) to a bitmapdata class. Another manipulates that data - ie. it randomises the colour channels by applying a colortransform to the original bitmapdata object, after that it adds a bit of a random sized blur and then it randomly applies a difference blendmode by comparing the manipulated data to the original data. Another one then sets up a bunch of bitmaps each having a one pixel high bitmapdata copied from the manipulated data as well as using some trig functions to move them left and right. Finally there is another timer which takes all of that, draws it to a new bitmapdata object, adds a final random blur and then draws it all to the screen.

I’ve also added some static in there - which happens in the manipulation stage, but for a little while I had it happening in the last stage, so that the whole screen fills with static. Probably a bit more realistic, but I didn’t like that look of that too much, so I’ve decided to keep it in the manipulation stage.

Click to Read Further…

We’ve been working on an interesting website, where I was asked to make a frosted glass effect similar to that of the Vista Aero window borders. Here is an example of it - its pretty nifty. Click on the stage to refresh the display, if needed.

Click to Read Further…

Actionscript’s BitmapData class can be quite a lot of fun. I’ve recently been playing around with it again and came up with this. Here is a link to the SWF - click on the stage to get the thing going, then give it a few seconds and it gets quite interesting.