Turning a Flex Actionscript project into a Flex AIR project

AS3, Flash, Coding, Flex Builder 3, AIR, actionscript, Flex 1 Comment »

You'd think it'd be simple right???

Maybe just go to the menu and select "Make my lovely actionscript only project into an AIR app?" Yeah? NO!

After much searching and querying of FlashBrighton mailing lists (well actually only one query, the answer coming from Toby Ashley - Thanks Toby!) we found a solution...
Read the rest of this entry »

Yahoo AS3 APIs Rock!

AS3, Flash, Coding, CS3, inspiration, experiments, Flex Builder 2, yahoo, api, weather No Comments »

Yeah, I know the world and his dog probably know about these already, but I just discovered them ok?!

They pretty much rock!

Get 'em here

The one I was interested in (watch this space) was the weather API. I downloaded the package, fired up Flex Builder, stuck in a Weather Service instance, some event listeners and told it to get me some weather. Which it did! The whole process took me all of 3 minutes. That's how it should be :)

Here's the class I used (the code I used is for Brighton, UK, btw):

package
{
import flash.display.Sprite;
import com.yahoo.webapis.weather.*;
import com.yahoo.webapis.weather.events.*;

public class WeatherTest extends Sprite
{
private var _weatherService:WeatherService;

public function WeatherTest()
{
super();

_weatherService = new WeatherService();
_weatherService.addEventListener(WeatherResultEvent.WEATHER_LOADED, onWeatherLoaded);
_weatherService.addEventListener(WeatherErrorEvent.INVALID_LOCATION, onInvalidLocation);
_weatherService.addEventListener(WeatherErrorEvent.XML_LOADING, onWeatherXMLError);

//get all the weather!
_weatherService.getWeather("UKXX0215", Units.ENGLISH_UNITS);
}

private function onWeatherLoaded(event:WeatherResultEvent):void
{
trace(event.data)
}

private function onInvalidLocation(event:WeatherErrorEvent):void
{
trace(event.data);
}

private function onWeatherXMLError(event:WeatherErrorEvent):void
{
trace(event.data);
}
}
}

Simple huh?

There's also APIs for Answers, Maps, Search, Upcoming. They're all well documented and logically laid out. Now get out there and start mashing up those feeds!

Embedding fonts in Flex Builder 2 Actionscript projects

AS3, Flash, Coding, CS3, Flex Builder 2 No Comments »

After spending about 2 hours searching around the 'net for a way to do this, all I could find were tips for embedding fonts in FB3, which is should be easy enough:

[Embed(source="/Library/Fonts/Arial", fontFamily="foo", mimeType="application/x-font")] public var bar:String;

This is because one of the things that has been added to FB3 (as far as I can tell) is a font manager system. However, I did run across a load of pages with bugs in this method (and you can only use truetype fonts) and it doesn't help me with FB2.

Eventually I found a page that suggested that I could use fonts embedded in a swf. Embedding fonts from SWF files The relevant Embed tags for actionscript projects are about 3/4 the way down. This works in both FB2 and 3.

Essentially all you do is to drop a text field onto the stage, format it as normal and then publish. In FB put something like this (it doesn't actually matter where - the embedded font is available throughout your app):

[Embed(source="/assets/swf/arialFontAsset.swf", fontName="Arial")]
var arialPlain:String;
[Embed(source="/assets/swf/arialFontAsset.swf", fontName="ArialBold" fontWeight="bold")]
var arialBold:String;

and Bob's your embedded font uncle!

AS2 Sliders

Flash, Coding, as2 No Comments »

There comes a time in every man's life when he has to build sliders, alternatively, he can search the web and pluck them off some helpful bloggers site.

They come in 4 flavours:
SliderBase, which is just that - it has no functionality of its own, but provides the business of grabbing a thumb and sliding it around.

ValueSlider extends SliderBase and adds the ability to have lo and hi values on the slider, get and set the value of the slider and to add a target and properties to be changed whenever the slider is moved. Also adds snap and useFloat functionality.

InertiaSlider extends ValueSlider. This adds inertia to the slider so you can grab and throw it. You can set the friction and bounce (how it reacts at the end of the slider) there is also a 'loop' property that makes the slider jump to the other end of the track if it reaches the end. This is useful if you want to use the slider for 360 rotations.

Lastly, ScrollBar extends InertiaSlider. This adds the ability to scroll either text fields or movieclips and have a resizable thumb.

I'm not going to argue that these are the best sliders ever, but they do work :) They have a few quirks, one being that the slider should be set up horizontally then rotated if you want vertical sliding. They're also pretty fussy about how you have your clips setup.

I could make them better, but they're as2 and I really can't be bothered. Anyway, I hope someone gets some use out of 'em.

Download AS2 Sliders

casting boolean values from XML

AS3, Flash, Coding, CS3 1 Comment »

This one is kind of logical when you think about it, but it tripped me up for a bit.
When loading Boolean values from XML, you'd think you could do this to get the value:

var myBoolean:Boolean = myXML..myBoolean;

or even explicitly cast like this:

var myBoolean:Boolean = Boolean(myXML..myBoolean);

but this will give you an erroneous reading. What you need to do is:

var myBoolean:Boolean = Boolean(String(myXML..myBoolean));

What is going on here??
Well, when Actionscript does the cast in the first 2 examples, it actually just checks whether the node exists. So if the node exists, you will get true, if it doesn't you'll get false. By casting to a String first it means that the cast to Boolean is forced to evaluate the node value, giving you what you expect.

[update] After some further testing, after seeing the comment below, it seems that all 3 versions give you true, no matter what. In fact, (as far as I can tell) it is impossible to correctly cast a Boolean value held in an XML node as true/false to a Boolean variable correctly.

The solution is to either use a '0' or '1' and cast first to a number:

var myBoolean:Boolean = Number(myXML..myBoolean);

or to do a check like:

if (myXML..myBoolean == "true") myBoolean = true
else myBoolean = false;

Repeat: I must not blog at 1am

Flex Builder and SWFObject 2.0

AS3, Flash, Coding, CS3, swfobject 2 Comments »

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!

AS3, Flash, Coding, CS3, experiments No Comments »

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

AS3, Flash, Coding, CS3, experiments No Comments »

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?

AS3, Flash, Coding, CS3, experiments No Comments »

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!

Experiments #6 - #12

AS3, Flash, Coding, CS3, inspiration, experiments No Comments »

So, after a lengthy spell with no experiments, I have 7 of the little blighters to share with you! All variations on a theme, which is based on my new BezierChain class, which allows multiple Bezier segments to be stitched together with smoothing between the joins. All of these experiments use 2 segments, but experiment #8 has them all stuck together - would've been nicer to have a single long chain I know, but I wanted to try loads of different stuff out instead :)

I've started using Flex Builder to do my as3 coding, and haven't got round to figuring out how to make it look nice in a swf, so here are links to html pages with the files:

experiment #6 - wings
experiment #7 - spider
experiment #8 - strings
experiment #9 - worms
experiment #10 - fat worms
experiment #11 - fat worms reversed
experiment #12 - tridecapus

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Login