Elaine is bored now.

WordPress 3.0 – How exciting!

18 May 2010 No Comments

by eviltwinin code, Design, thoughts

Well, apparently WordPress 3.0 should be released in the next few weeks. For someone who is firstly a designer, then after that a pretty sub standard developer it’s great news. It offers new opportunities to make better CMS driven websites with quite a few of it’s excellent new features.

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

My first Adobe Air Application

28 Jan 2010 No Comments

by eviltwinin code, Design, flash, tutorial Tags: actionscript, adobe air, flash

To help improve my AS3 skills I thought a good starting project would be to challenge myself to create an Adobe Air desktop application, and after working on a Christmas countdown, I decided it would be rather nice to make a Countdown timer.

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.

Creating Buttons with ActionScript 3.0

07 Dec 2009 No Comments

by eviltwinin code, flash, tutorial Tags: actionscript, as3, buttons, flash

This is a quick guide on how to create and set up a button in AS3.

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)
}

Dipping my toes into Flash CS4 and AS3

26 Jun 2009 No Comments

by eviltwinin code, flash

Well, I downloaded the Flash CS4 trial and have been experimenting with it for a day or so.

Overall I’m positive about what I’ll be able to do with the AS3, but a little disappointed in Flash CS4. I’ve never been that excited about the fancy new features in it, although I’m sure I will end up finding them useful. What my problem is, is that there was a few things about the interface and set up that I’d hope they would have improved.

The main one is the colour palette. You still can’t save swatches or custom colours. How annoying! It is also irritating that the ‘Free Transform’ and ‘Gradient Transform’ tools are together – it does get frustrating having to click between them when you are doing a lot of resizing and colour shading.

I have struggled a little today with AS3, but I think a good sit down reading ‘Learning ActionScript 3.0′ will probably let me understand better how it’s structured, then it will be a lot easier to make the transition from AS2 – I’m already am quite fond of the event listener.

ActionScript Naming Conventions

04 Jun 2009 2 Comments

by eviltwinin code, flash

Well, in the midst of the Flash interactive feature I’ve been working on, I decided it really was about time I set myself a naming convention to follow when writing Actionscript code. I’ve always been a bit haphazard about how I name things, which in the long run will make it difficult for someone else to understand or to re-use. I also need to remember to use descriptive names for things. This will make it much easier for someone else reading the code to understand what each thing is or what it is doing.

Anyway, this is probably a work in progress, but at least I’ve gotten started!

Read more here: Abobe ActionScript 2.0 Best Practices – Naming Conventions

So, here it is:

Classes

• Start with Uppercase
• Concatenate words, using mixed cases

class MyClass

Functions & Objects

• Start with lowercase
• Concatenate words, using mixed cases

function myFunction

Movie Clips

• Prefix with ‘mc’
• After prefix start with Uppercase
• Concatenate words, using mixed cases

mcMyMovieClip

Constants

• All uppercase
• Separate words should contain underscores

MY_CONSTANT

Number variables

• Prefix with ‘num’
• After prefix start with Uppercase
• Concatenate words, using mixed cases

numMyNumber

String variables

• Prefix with ‘str’
• After prefix start with Uppercase
• Concatenate words, using mixed cases

strMyString

Arrays

• Prefix with ‘arr’
• After prefix start with Uppercase
• Concatenate words, using mixed cases

arrMyArray

Boolean expressions

• Prefix with ‘is’
• After prefix start with Uppercase
• Concatenate words, using mixed cases

isThisOn

WordPress e-Commerce Plugin

21 Feb 2009 3 Comments

by eviltwinin code, Design

I was browsing my RSS feed and found this new site IconDock – which uses a WordPress e-Commerce plugin to sell stock icons online. It integrates with PayPal, Google Checkout and a few others. I googled it to find out some opinions on it, and found a few other blog posts about it:

• Blogsessive – Online Shops with WordPress & WP e-Commerce Plugin
• Specky Boy – 10 Powerful Shopping/Ecommerce Plugin Solutions For WordPress
• Stuff by Sarah – WP e-Commerce, WordPress Plugin

Basic opinion seems to be that it is easy to install and set up, but if you want to customise it, you run into problems with unorganised code, and not very good support documentation. Well, it may have it’s issues, but could still be a handy little plugin.

Discovering something new – Inno Setup

14 Jan 2009 No Comments

by eviltwinin code

A few months back while creating a screensaver file I discovered this program called Inno Setup. This is an excellent (and free) program that allows you to create install files for Windows programs.

Now, I’m sure it’s has a massive scope for distributing applications, but my uses for it are a lot more basic for the moment. So, aside from executing a program (such as a screensaver installer), you can add icons, files, and create folders in the start menu, among many other things that I have absolutely no understanding off. The code format is also pretty easy to understand for a beginner:

Starting off

Inno Setup uses “Directory Constants”, these are in curly brackets and are things like:

{app} – The application directory that the user creates when the program is installed
{win} – The WINDOWS folder
{src} – The folder where your Setup files are located
{group} – Path to the start menu folder

So, first of all add the below to your ISS file.
[_ISTool]
EnableISX=false

Adding some files

These could be a URL link file, icons, or any other files you would like to include in the installer. When you are compiling the install file these source files should be in the root folder, and when the installer is run it will output the files into program files folder in the destination folder you define.


[Files]
Source: your_application.exe; DestDir: {app}\your_destination_folder;