Elaine is bored now.

Collaboration

23 Nov 2010 No Comments

by eviltwinin flash Tags: adverts, banner, flash

I’d already seen some billboards around advertising that T-Mobile and Orange are now using each others signals…..then I saw these neato tandem ads on Yahoo…

Countdown Timer

25 Mar 2010 3 Comments

by eviltwinin Design, flash Tags: application, countdown, flash

Well, here is my Countdown Timer. It is an Adobe Air desktop application that you can use to count down time until an event. You’ll need to make sure you have Adobe Air installed first, then all you have to do is download the Countdown zip file, extract application file then run it on your computer.

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

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

Nice banner from Auto Trader

05 Sep 2009 1 Comment

by eviltwinin ads, Design, flash Tags: adverts, banner, flash

I was just doing some browsing on IMDB this afternoon and saw this banner. I don’t normally even want to click on interactive banners, but was rather intrigued…

Frame 1 – Draw a car you’d like to sell

Frame 1 – My wonderful drawing

Yes – my car actually does look like that – isn’t it lovely. Erm…

Frame 2 – Cheeky robot

Hard to believe this was actually my fourth or fifth attempt at drawing a decent looking car. He actually had a few different cheeky messages. He even fell over laughing once.

Frame 3 – Are you done?

Cute little jumping up and down animation on the Drive button. I liked the call to action on this too, made me want to click on it.

Frame 4 – Interact a wee bit more

I dislike when interactive banners want you to something, but it does actually seem connected to the rest of the banner. This is a nice way to make you feel like drawing the car actually had a point.

Frame 5 – Aw, he’s actually going to drive it away

So off he goes in to the distance, and I get taken to the landing page: http://www.autotrader.co.uk/CARS/selling/selling_a_car.jsp?platform=DFA

Well, cute little banner that I liked. Fun to use, nice touches…and maybe when I am selling my car I’ll even go to Auto Trader.