Archive for the ‘Tutorial’ Category

HowTo: Improve your workflow with Snippets, comments and ‘dormant’ variables

Sunday, January 25th, 2009

I use FlexBuilder. I used to use FDT but the code-completion, hover-over links and - most importantly - ability to compile from MXML that FlexBuilder offers eventually tempted me away. Still, there’s one thing about FDT I miss: it wrote A LOT of code for me. Nothing complicated, stuff like getters & setters that are tedious and time consuming. It was great that FDT could take that off my hands.

These days, with FlexBuilder, I don’t have that any longer. Which isn’t great but I’ve managed to concoct a  workaround using ‘Snippets’, comments and ‘dormant’ variables, which has sped things up for me and which could do the same for you.

Let me explain…

(more…)

HowTo: Embed fonts in a FlexBuilder AS3 project

Thursday, January 8th, 2009

A subject particularly far away from my heart; I have always loathed font embedding, because there are so many ways of doing it and they don’t always work and when they do it feels like some weird voodoo that could inexplicably disappear at any moment is part of it! Which is why I’m very grateful to have recently been shown a method of achieving this by Unwrong’s marvellous Flash Developer Jonathon Pace. Jon’s method is simple, relatively error-free and seems to work for all font types - the ones I’ve tried thus far, at least - which was always the biggest bugbear for me; it sometimes felt like you had to know a different embedding method for each different font type!

So, using Jon’s method what you have to do is:

  1. Create a fonts swc;
  2. Ensure your compiler includes every font in your swc; and
  3. That’s it! Use your embedded fonts

(more…)

HowTo: Create hexidecimal grayscale integers

Wednesday, November 19th, 2008

This turns out to be outrageously simple. If you wanna create a grayscale somewhere between pure black and pure white all you need is this could-not-be-simpler equation:

var num:int = 1; // any int from 0 to 255
var grayscale:int = num * 65793;

All you need to ensure is that the value of ‘num’ is an integer from 0 (for pure black) to 255 (for pure white) and that’s it!

HowTo: Build a multi-language dynamic Flex application

Monday, November 3rd, 2008

One of the projects I worked upon over the summer was destined for the South-American market and therefore needed to display in both Spanish and Portuguese. It was a microsite built in Flex and needed the capacity to alternate between these two languages at any given time. From the user’s perspective, a single button click should be sufficient to translate the entire site’s text from one language to another instantly. Looking around the web I couldn’t find any answers so I sat down and worked out a solution myself.

Here’s a sample app using English and my second language Swedish:

(more…)

HowTo: Force Flex to apply width & height with CSS (and PureMVC)

Sunday, October 12th, 2008

I love the tools I work with but if I’m being honest, some things just don’t measure up. CSS in Flex for instance: it doesn’t do half the things a genuine CSS implementation should do. Thanks go to Tom Kennett for bringing to our attention this great blogpost about just how far short of the mark Flex’s CSS support falls.

One of the most irritating aspects is the fact that the ‘width’, ‘height’, ‘percentWidth’ and percentHeight’ properties of UIComponent - which is the base class for all visual components - are exactly that: properties, not styles. That means they can’t go into the CSS, they have to be added to the mxml tags themselves:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
  xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:VBox width="100%">
    <mx:HBox id="header" width="100%" height="80" />
    <mx:HBox id="content" width="100%" height="100%" />
    <mx:HBox id="footer" width="100%" height="50" />
  </mx:VBox>
</mx:Application>

Even in an unrealistically small file like this, the ‘width’ and ‘height’ attributes make it difficult to read. When working with actual, lengthy .mxml files, a bit of simple editing can become like hacking through the jungle. I’m not really into that so I thought I’d sit down today and see if I could concoct a workaround that would allow me to put the ‘width’ and ‘height’ declarations in the CSS instead.

(more…)