Archive for March, 2008

Flex Builder and SWFObject 2.0

Friday, March 28th, 2008

Thought this might be of some use to some.

I’m working on an as project in Flex Builder, into which I needed to pass variables from SWFObject. Whilst it’s easy enough to overwrite the generated html in the bin folder, it is a bit of a pain, cos that way you lose the debugging/tracing etc.
So, what I discovered is that there is a file called index.template.html in the html-template folder, which is used to generate the html page. Replace this file with a slightly modified SWFObject template, chuck swfobject.js into your html-template folder (and probably the bin folder for good measure) and Bob’s your uncle :)

[update] The previous template was based on the static embed – this meant you couldn’t actually add params!
Dynamic SWFObject template

Experiment #15 Gradients + Trig = weird bouncy rainbow things!

Thursday, March 20th, 2008

Having some fun with my new gradient class and making sure it all works at the same time (added some bug fixes to the code base). This one I set up a loop that adds a bunch of random colours and alphas to the arrays, then chucked some trig functions at the drawing API, using the values pulled from the class using argb. Refresh the page to get a new set of random colours.

experiment #15 – gradients + trig

Download Latest Colour Package.

Experiment #14:CapStyling and Quad bezier drawing, Gradient class update

Thursday, March 20th, 2008

Not much of a change for this one – I’ve just added the ability to specify the caps style for the drawing of the BezierChains. Also, I added a new drawing mode that splits the curve into 2 quadratic beziers and draws them out using curveTo. This is loads faster than drawing a bunch of little lines, but does mean you don’t get to make nice gradiented colours. I had a look at the lineGradientStyle property, but it doesn’t follow the curve of the line. Maybe there’s a way to split up the gradient style and make it work? Will have to have a look at that one. You’ll also notice that the quad bezier doesn’t exactly follow the correct path, but that’s the price you pay for speed!

experiment #14 – caps/quad

The second thing is an update to the Gradient class from my colour package. Before it was a little bit lame, but now it rocks! The set up is the same as before, but now it allows much greater control of the elements, and you can actually get some useful readings from it.

The following methods are available:
validateRGB: checks that a specifed rgb value is within range, return t/f
step: increments/decrements the currentColourRatio value by amount
setColour: sets a colour at the specified index in the colours array
clone: returns a copy of the Gradient class

There are all of the parameters of a gradient (have a look at beginGradientFill in the Graphics class docs) that can be accessed as properties and some extra ones:
currentColourRatio: this is an integer (0 – 255) that represents a position in the gradient – this is equivalent to a possible value in the ratios array in the gradient fill.
rgb: the colour at the current colour ratio position(ccr), if you set this, it will either change one of the colours in the colour array (if the ccr is equal to a value in the ratios array) or add a new value at the ccr.
argb: as above, but takes/returns an object {alpha:Number, colour:int} and allows getting/setting of the alpha value

There’s a little more work to do – it’d be nice to be able to adjust the ratios and alpha values already in the array and delete values, so that’s on the cards for the next update.

Get it here.

Experiment #13 – Did someone say Animated Rainbow Gradients?

Friday, March 14th, 2008

Another use of the BezierChain class, this time using some Colour manipulation classes.

experiment #13 – rainbow

You can download the Colour classes I’ve used. There are 5 included in the package:
ColourSpace: allows conversion between RGB and HSV colour spaces and access to all of the colour components. conversion is done automatically or can be called as a method ie
cs.rgb = 0xff0000;
trace(cs.hue);
cs.hue = [250, 0.3, 0.4];
trace(cs.rgb);

newHSV = cs.RGBtoHSV(0xff0000);
newRGB = cs.HSVtoRGB([250, 0.3, 0.4]);

Rainbow, which allows you to set up a rainbow and cycle through the colours.

Gradient, which is a wrapper for the various parameters for a gradient fill.

ColourWrapper, which is a wrapper class for ColourSpace, Rainbow and Gradient classes.

Finally there is IColourWrapper, which is the interface shared by the colour classes.

These classes are by no means final, so use at your own risk :) Will post updates if I make fixes and give me a shout if you need help using them!