AS3 / JS Constrain a value in one line

Here is a little snippet to constrain a value in a single line. It works by using two nested inline conditionals. The ‘else’ part of the first conditional is another conditional. It may not be the best approach but it works and is much easier and faster to write than two if-else statements.

In English it looks like this:
value = is value greater than max ? set to max, otherwise is value less than min ? set to min, otherwise leave it as is;

1
2
3
4
5
// for js - remove the type declarations (:Number)
var minValue:Number = 0;
var maxValue:Number = 100;

value = value > maxValue ? maxValue : (value < minValue ? minValue : value);

AS3 Getting colours blended between two other colours

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function getColoursBetween(colour1:uint, colour2:uint, steps:int):Array
{
    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;
}

JS Transform Handles

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.

Inspiring Inspiration #9

A collection of cool video, motion graphics and interface design, mostly if not all from Vimeo…

READ MORE

AS3 Hex Colour Dodge blending utility

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

AS3 Easy gapless sound looping solution

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:

1
2
3
4
5
var channel:SoundChannel = new SoundChannel();
var sound:Sound = new Sound();

sound.load(new URLRequest('sound.mp3'));
channel = sound.play(80);