I was listening to the radio this morning and they are saying that this is the biggest return on a product launch. Customers everywhere are trying to get their money back as playing the Nintendo 3DS is making them feel ill. It apparently works by sending different images to each eye to create the impression of depth, which seems to cause the headaches, dizziness and sickness.

Gamers complain 3D Nintendo leaves them feeling ill

You think they might have worked this out when testing!

Anyway – it’s been a really interesting challenge so far. My basic approach has been to create a simple grid structure which is carried over three layouts – a desktop version, a tablet version and a mobile version.

I’ve been creating a wireframe for each version for every key page layout. This means that I am constantly considering each layout, how it needs to be flexible, as well as any limits and alterations I have to make to each version as well each previous version to ensure that the site will work irrelevant of the device it’s being viewed on.

Once all our page wireframes have been created our next step will be to look at the visual variations on look and feel – basically simplifying the CSS for smaller screen widths to reduce loading times. Then the next challenge will be to actual build the pages and develop the CSS. I’m sure we’ll have a lot of tweaking to do but it will be interesting to see how the site develops.

In my own experience I will quite often try to find FAQs to get a quick answer rather than having to read a lot of information on a page, but is there a way we can design layout and content to ensure that a user can quickly find the information they’ll need?

I guess for me at the moment I’m not convinced we can preempt when someone will decide to look for a specific answer to a question, and as long as the FAQs really are questions that a customer will ask then I’m still for them.

Anyway – I did find this article that has a few FAQ best practices.

Custom post types

In the past I’ve found it a little hard to manage different types of content when you are limited to only pages or posts. Now you can make your own custom post types. Excellent.

Menu management

Previously I’d found a plug-in that helped organise the menu items, but the new menu management feature means you can change the order and destination of the links, as well as manage all the sub pages.

Well, there’s a whole bunch of other stuff you can find out about here: WordPress 3.0: The 5 Most Important New Features

Monster-Munch

Cute sock monsters and stuff by @NickyGibson.

My Paper Crane

Handmade plush….um….toys? But what would you do with them?

And me….

Well, I’ve only made the sock monkey toy for my nephew, but these things have inspired me to make more useless adorable things…and maybe even get out my sewing machine…

More adorable things

Rebecca Danger
Sushi or Death – Knitted Sushi

Since then I’ve been recommended a few others, here’s what I think of them all anyway.

Delicious

I found Delicious to incredibly irritating to use – the tags might make it flexible, but you can’t put anything in to folders, or keep sections separated. It’s also far too blue so becomes a really tedious site to look at after a while.

It’s good at

• Tagging your links with topics so they are easy to find

It’s bad at

• Showing screenshots -  appear to be some on the home page, but none of the links I’ve added seem to have them
• Exploring new things – I find the whole tag structure quite awkward personally
• Being interesting – every time I’m on the site that blue makes me want to kill myself

Best for

• Argh……..driving you mad with the same blue over and over again!!!!

Digg

I’ve been using Digg for a long time – I found it to be quite a friendly, nice site to use. Seems to be a good community, and it’s easy to search categories to find something you are interested in.

It’s good at

• Adding blog posts and tutorials
• Telling you how popular the link is
• Find interesting articles – Digg feels quite like a news hub – it shows you latest headlines and has good main category sections.

It’s bad at

• Organising and finding your links – everything is just in chronological order

Best for

• Finding and adding interesting news articles and blog posts

StumbleUpon

StumbleUpon I quite like – it’s especially easy to add sites you like, but the content other users have added seems to be a lot more juvenile compared the the articles and blog posts in Digg.

It’s good at

• The StumbleUpon tool bar – Its excellent at just quickly adding a site you like, or even one you don’t – you don’t even have to leave the site you are on
• As well as that you can just view random websites with the ‘Stumble!’ button
• Lets you know if you are the first person to add something, and shows you how popular a link is

It’s bad at

• Part of the problem with the ‘StumbleUpon!’ button is that a lot of people add a lot of rubbish, so you can see an awful lot of rubbish, as well as ‘work unsafe’ stuff before you see something good

Best for

• Finding and adding interesting, cool and weird sites and images

So…

StumbleUpon and Digg are both sites I like, with nice features, but Delicious? I really think I might just be biased against that blue.

Anyway, to be honest I’m not massively interested in the social aspect of the bookmarking sites. I like having somewhere where I can keep the things I want to remember, so I think I’m going to stick to the handy Xmarks plugin so I can view my favourite bookmarked sites on any computer, then continue to add interesting posts and things I like to Digg.

Get Adobe Air

Features

It’s quite a simple little application – here’s a some of the things you can do with it.

Start your countdown

Use the settings panel to name your event and set the date and time. You can specify it up to 15 minute intervals.

Counting down

Watch your timer count down to your event. It will countdown up to milliseconds. You can reset the timer to begin again, minimise it to the taskbar, view the mini countdown version, or just close it.

The mini view

This mini view of the countdown allows you to keep your countdown open without taking up too much of your desktop space.

Download the Adobe Air application package

Get Adobe Air

This article runs through a few things I had to learn in AS3 to create it.

Getting Adobe Air working

First thing I needed to do was ensure that Adobe Air was installed and that everything working.

• Install Adobe Air
• Ensure Flash is updated, and install all the available updates. For Flash CS4 they are here.
• Get the Adobe AIR SDK. Once downloaded this needs to be copied into the AIK folder in the Flash program folder – i.e. C:\Program Files\Adobe\Adobe  Flash  CS4\AIK.

Phew! Now creating the application…

First step was to get an accurate countdown mechanism. I found this Countdown example which was a good starting point to create a Countdown class in AS3. The basic idea is that it takes the current date and the specified event date then works out the difference.

Creating the event date input

I used Flash UI components for the drop down menus, but controlled their content using my Countdown class. To style the UI combo box component you can edit it in the FLA file, but to change the font you need create a TextFormat variable, then apply it to the component.

var comboFont : TextFormat = new TextFormat ();
comboFont.font = "Calvert MT Light";
comboFont.color = 0x333333;
comboFont.size = 12;
eventDayCombo.textField.setStyle ("embedFonts", true);
eventDayCombo.textField.setStyle ("textFormat", comboFont);
eventDayCombo.dropdown.setRendererStyle ("embedFonts", true);
eventDayCombo.dropdown.setRendererStyle ("textFormat", comboFont);

I then added data to the combo box. It is important to add this data dynamically to ensure that the Countdown is always up to date.

eventDayCombo.addItem ({label: dayStr, data: day})

Reading, saving and using XML data

Check if the data exists

Every time the application opens it checks to see if the user has already set an event date. The first thing it does is specify the name of the file, then where this file should be located. In my Countdown example the application creates an XML file called CountdownPrefs in the user’s My Documents folder.

var prefs:String = "CountdownPrefs.xml";
var prefsFile:File = File.documentsDirectory.resolvePath (prefs);

To check if a file exists on the system you can use prefsFile.exists; this will give a true or false result.

if (prefsFile.exists){

AS3 uses file streams to manipulate data; this makes the process much simpler than in AS2. It opens a file stream and reads the data. When it has completed reading the data the event listener calls the function processXMLData.

readStream = new FileStream ();
readStream.addEventListener (Event.COMPLETE, processXMLData);
readStream.openAsync (prefsFile, FileMode.READ);
}

Processing the data

So, to process the XML data I just use the function to specify the data then close the file stream. Now I can set my event date from the data in the XML file.

function processXMLData (event : Event) : void {
var prefsXML: XML = XML (readStream.readUTFBytes (readStream.bytesAvailable));
readStream.close ();
TITLE = prefsXML.child ("title");
YEAR = prefsXML.child ("year");
MONTH = prefsXML.child ("month");
DAY = prefsXML.child ("day");
HOUR = prefsXML.child ("hour");
MINUTE = prefsXML.child ("minute");
startCountdown ();
}

Saving new data

When the user sets their event date in the application it creates an XML file. First I defined what the content of the XML should be.

var dateStr:String = "<?xml version=\"1.0\" encoding=\"utf-8\"?><countdown><title>" + TITLE + "</title><year>" + YEAR + "</year><month>" + MONTH + "</month><day>" + DAY + "</day><hour>" + HOUR + "</hour><minute>" + MINUTE + "</minute></countdown>";

It then opens a file stream and writes the data to the location specified previously using the string variable to construct the XML content.

var newStream:FileStream = new FileStream();
newStream = new FileStream();
newStream.open(prefsFile, FileMode.WRITE);
newStream.writeUTFBytes(dateStr);
newStream.close();

Delete the data

To reset the countdown application all you need to do is simply delete the XML file then I called my reset function to restart the application.

if (prefsFile.exists){
prefsFile.deleteFile ();
resetCountdown ();
}

Using the Timer Class

So my Countdown function returns an object with the years, months, days, hours, minutes, seconds and milliseconds, then to update my countdown display I need to repeat the call every millisecond.   I can use the Timer class to repeat the function call and get the updated countdown object.

timerObject:Timer = new Timer (delay, repeatCount );
timerObject.addEventListener (TimerEvent.TIMER, updateCountdown);
timerObject.start ();

The finishing touches

Creating a custom chrome

To make the application visually nicer I added my own chrome to it with minimise and close buttons, here is how: http://www.adobe.com/devnet/air/flash/articles/custom_chrome_app.html

Creating an application icon

This is very simple. All you need to do is create little image files in the sizes: 128×128, 48×48,32×32, 16×16 then on the publish settings you can add the icon images.

Publishing the application

All you have to do then is publish the application and it’s ready to go. Look out for my next post if you want to download the application and try it out.

Set up the movie clip as a button

To make sure that your movie clip will act like a button you need to set the buttonMode and also set the movie clip to have a hand cursor.

bttn.buttonMode = true;
bttn.useHandCursor = true;

Ensure that you won’t interact with the child movie clips

When you rollover a movie clip in AS3, then the mouse cursor will recognise child clips within your button movie clip. To ensure that this doesn’t happen you can set the mouseChildren to false.

bttn.mouseChildren = false;

Making the button do stuff

Create a event listeners to call a function when the you interact with the movie clip.

bttn.addEventListener (MouseEvent.MOUSE_DOWN, doStuff);
bttn.addEventListener (MouseEvent.MOUSE_OVER, overBttn);
bttn.addEventListener (MouseEvent.MOUSE_OUT, outBttn);

Using mouse events

Here is a sample of how you use the mouse events. This function will trace the movie clip that you have clicked on.
function doStuff (evt : MouseEvent) : void
{
trace(evt.target)
}