Here is another function that can be added to my ColourUtil class. This one gets a specified number of colour steps between two blended colours.
I thought it would be much harder to achieve than it is, luckily the AS3 Color class has the static method interpolateColor which calculates a single colour at a specified position using a ratio value.
The function below is a simplified version of the function found at AS3 Adventure. This blog post also has a much better explanation of the interpolateColor method, and a great demo of the function.
{
var arr = [],
i:uint,
ratio:Number;
arr.push(colour1);
for (i = 1; i < steps; i++)
{
ratio = i / steps;
arr.push(Color.interpolateColor(colour1,colour2,ratio));
}
arr.push(colour2);
return arr;
}
18 NOV
The other day I was playing around with Mozilla’s Popcorn Maker and I had the idea of using HTML/JS/CSS to create transformable divs using transform handles and a bounding box. I did a quick search for any existing examples of HTML transform handles but i couldn’t find anything so I decided to give it a go myself. Below is a demo of what I came up with. It might not be the best solution but it works pretty well. I even implemented rotation but I had some issues with the scaling when the element was rotated. The demo has the rotation disabled but you can get the source by view the source of the frame. All JS, and CSS is in the one HTML file. Enabling the rotation is as simple as removing display none from the rotation handles CSS style.
The main reason I wanted to create transformable DIVs is for the next version of my Module Builder. I had experimented with transforming HTML via the AIR app but I think doing it directly in the HTML page.
17 NOV
A collection of cool video, motion graphics and interface design, mostly if not all from Vimeo…
13 NOV
The following is a function that takes two hex colours – a top colour and a bottom colour – and blends them using the Colour Dodge blend mode as found in Illustrator of Photoshop. This is handy for dynamically generating colour variants based on the blend mode. Instead of blending two display objects it simply returns a new hex value using the algorithm of the blend mode.
Read More…
12 NOV
If you have come accross the issue of sounds not looping seamlessly in a Flash project then try the following.
Simply offset the start of the sound by 80 milliseconds:
var sound:Sound = new Sound();
sound.load(new URLRequest('sound.mp3'));
channel = sound.play(80);
11 NOV
For an interactive drawing project I worked on recently I needed to provide the ability for users to email their artwork directly from the app without the need to save any images to a server. I pieced together a solution from various blogs and websites and I decided to provide the full source here.
The function below takes an encoded bitmapdata and an email address and sends them to the PHP script further down in this post. The bytearray passed in must be encoded as a JPG – you can use any of the available encoders such as CoreLib, Faster JPG Encoder, or the Alchemy Encoder.
08 SEP
Update 20-9-1012: As Kimonoki pointed out in the comments, this can actually be done in one line. There is no need to store the $time variable as the second parameter for date() is optional and defaults to time(). I have updated the snippet below.
I am posting this for reference for myself as I find it super handy but always forget. This snippet when added to your PHP page will display the current year which is really handy for copyright statements in page footers. After using this you will never forget to update the date again!
<p>© <?php echo date("Y"); ?></p>
22 AUG
Here is a little code snipped I thought I’d post for future reference and may help someone else out.
I was using the HTMLLoader class in Adobe AIR to load content and I came across an error where my Javascript was calling console.log(). In the AIR HTMLLoader environment this function does not exist so I had to come up with a way for it to stop throwing errors.
The solution I came up with was to create the console object and add the log function. That way I could trace out any log info or do anything else with it if I need to. So here is the snipped to add console.log to the HTMLLoader.
var ldr:HTMLLoader = new HTMLLoader();
ldr.load(new URLRequest('path/to/html/file.html'));
ldr.addEventListener(Event.COMPLETE, onLoaded);
addChild(ldr);
/* when load is complete, do the magic */
function onLoaded(e:Event):void
{
/* Create console object on the window */
ldr.window.console = {};
/* add the log function to the console object, this function could do anything with the log data but here I am just tracing it */
ldr.window.console.log = function(msg){trace(msg)};
}
Easy.
13 JUL
A collection of cool video, motion graphics and interface design, mostly if not all from Vimeo…
02 JUN
In the never ending quest to get better blob tracking on my touch screen I decided to add more cameras. A few months ago I added a second camera but they didn’t quite cover the whole screen – there was about an inch gap in the centre of the screen. I didn’t want to use wider lenses because of the distortion so I decided to add two more camera to bring the total to 4, with each camera tracking a quarter of the screen.
I was trying to think of a good way to mount the cameras so that they were evenly spaced and I came up with the idea of using a piece of wood with a routed cavity to sit each camera in. The problem with this was that the wood would have to sit above the backlight of the LCD and so it would block some light. Then I remembered I had a spare piece of 10mm acrylic from my old 19″ FTIR touch screen. So instead of using wood I cut and routed the piece of acrylic so that the cameras had transparent mounting plates.
Here are some photos of my process…
Left: Acrylic measured so that the lense of each camera is perfectly spaced; Right: Testing routing the acrylic – I had to use the slowest speed and keep moving so the router bit didn’t gum up with melted plastic. Super messy!
