The Mountain Of Lightbulbs » Tutorials

Flash Tracer For Firefox 3.5

Raz — Thu, 22 Oct 2009 03:22:01 +0000

I just installed Flash Tracer on the newest version of Firefox (currently 3.5.3), and I wanted to shed some light on the steps you will need to take to get it working.

The first think you will notice is that Alessandro Crugnola, the talented creator of this add-on, no longer continues it’s development, so if you visit it’s page on the Mozilla Add-ons website (https://addons.mozilla.org/en-US/firefox/addon/3469), it does not give you the option to install it, instead telling you: “This add-on is for older versions of Firefox”. You can still install it by loading the add-ons .xpi file though, which is located on its home page http://www.sephiroth.it/firefox/flashtracer/ (The link is here if your feeling lazy).

Next you will need to tell Firefox that you are comfortable using out of date add-ons. Open a new browser window or tab, and type about:config into the address bar as shown below.

After promising Mozilla that you will be careful, you will see a list of the Firefox configuration details. Right click anywhere on this page and create a new Boolean.

Give your new Boolean the following name: extensions.checkCompatability.

And finally, set it’s value to false.

Restart Firefox and your add-on should now load correctly.
Click > Tools > Flash Tracer to open the Flash Log and you should see something like this:

If you don’t see the text inside it, you might have to configure Flash Tracer to read the correct file. You can do this by opening the preferences panel, (click the small wrench icon in the bottom right hand corner of the window) and browsing to the correct location. If you have Flash Player 9 forwards, It’s probably in one of these locations:

Osx: {user}\Library\Preferences\Macromedia\Flash Player\Logs\flashlog.txt
Windows XP: C:\Documents and Settings\{user}\Application Data\Macromedia\Flash Player\Logs\flashlog.txt.
Windows Vista: C:\Users\{user}\AppData\Roaming\Macromedia\Flash Player\Logs\flashlog.txt

If you can’t find the file at the any of the above locations, or it’s not picking up trace statements when you know it should be, I’d suggest reading through this fantastic post by Mark Walters on correctly setting up Flash Player’s error reporting.

Random Short Story
A year or so back I was playing a Flash game on NewGrounds and hadn’t shut down the Mac Console (which was still reading through the error log), and I noticed the following message: “need to implement score saving still, sorry!!”.
It’s since been fixed, but I thought it was hilarious at the time, and as such I’ve tried to make a point of leaving funny messages hidden inside anything I’m not being paid to create. I thoroughly encourage you to do the same!

trace(" Hope This Helps! :] ");

XML Directory Lists (With Php)

Raz — Thu, 15 Oct 2009 11:15:21 +0000

Here is a snippet of php code that when run, will produce an XML markup of the images contained within a directory.
This is great is you are building a flash sideshow or similar and want to remove the dependency that comes with hand coding XML files.

I added a bunch of comments, feel free to let me know if anything needs explaining in greater detail.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

And here is an example output. I’ll post up a demo using this xml markup in a future post.

1
2
3
4
5
6
7

version="1.0" encoding="UTF-8"?>
>
>>
>>
>>
>>
>

Here’s a link to download the file, hope it helps!

Simple Flash Countdowns And Timers

Raz — Mon, 27 Jul 2009 07:32:18 +0000

I get asked for help doing different variations of Countdowns and Timers all the time, hopefully this post will shed some light on things.

I’ll try cover and explain the four variations I get asked about the most but between them you should be able to create any of the other variations with ease.

1) Simple Countdown In Seconds

1
2
3
4
5
6
7
8
9

var countDownTime:Number = 10;
var startTimeUTC:Number = new Date().getTime() / 1000;
addEventListener(Event.ENTER_FRAME, updateTimer);
function updateTimer (e:Event) :void
{
var secondsUTC:Number = new Date().getTime() / 1000;
var timeRemaining:Number =
((startTimeUTC + countDownTime) - secondsUTC);
}

Pretty simple code, all we are doing is setting a start time and comparing the current time to it when the update function runs.
Note: The above snippet doesn’t actually do anything with the counter or perform any task when the counter reaches zero. I’m rather just showing how to calculate time, implementation of the code is up to you!

Here is a sample output:

Lets take a closer look at the code now.

Line 2 defines startTimeUTC, which is populated by creating a new Date() object.
Note: The Date() object defaults to the current date and time when instantiated without any parameters, so we can immediately call it’s getTime() method and store the result.
We should now have a funny looking number like: 1248677922937, which is actually a UTC representation of the present time in milliseconds. On this occasion however, we just need the seconds, so we would divide that number by 1000, (1 second is 1000 milliseconds).
Now every time the update function runs, we simply replicate this action to create a new Date(), and compare it to the Date() we stored in startTimeUTC.

2) Simple Count Up In Seconds

Measuring time expired is really just the above backwards.

1
2
3
4
5
6
7
8

var startTimeUTC:Number = new Date().getTime();
this.addEventListener(Event.ENTER_FRAME, traceOutput);
function traceOutput (e:Event) :void
{
var newTimeUTC:Number = new Date().getTime();
var timeExpired:Number =
(Math.floor(newTimeUTC - startTimeUTC) / 1000);
}

Example:

3) Countdown To Date

This variation builds on the first and second countdown examples but brings more to the sandbox to play with, lets jump straight into the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var futureTimeUTC:Number = new Date(2010, 0).getTime();
this.addEventListener(Event.ENTER_FRAME, updateCounter);
function updateCounter (e:Event) :void
{
var newTimeUTC:Number = new Date().getTime();
var timeRemainingUTC:Number =
futureTimeUTC - newTimeUTC;
var clockSecondsPast:Number =
Math.floor((timeRemainingUTC / 1000) % 60);
var clockMinutesPast:Number =
Math.floor((timeRemainingUTC / 60000) % 60);
var clockHoursPast:Number =
Math.floor((timeRemainingUTC / 3600000) % 24);
var clockDaysPast:Number =
Math.floor((timeRemainingUTC / 86400000));
}

This time we have manually set the Date() to January 1st, 2010 (The first month is 0, not 1). The time will default to 00:00am since it was not set, but this is what we want, new years!!

Once we have calculated timeRemaining in the update function, we can parse the information we need from it. Remember it is currently a UTC format number, so think of it as the number of milliseconds, with that in mind it isn’t hard to find what we need.
Note: The % operator is modulus, it returns the remainder of a number.

Seconds = (UTC Value / 1000 Milliseconds) Mod 60
Minutes = (UTC Value / (1000 * 60 Seconds)) Mod 60
Hours = (UTC Value / (1000 * 60 * 60 Minutes)) Mod 24
Days = (UTC Value / (1000 * 60 * 60 * 24 Hours))

If you didn’t catch it, we are just dividing by the amount of Milliseconds in each. Here is an example:

4) Counter From Past Date

The last variation is really just the previous example backwards, for when you need to count forward from a date in the past.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var startTimeUTC:Number =
new Date(2009, 06, 26).getTime();
this.addEventListener(Event.ENTER_FRAME, updateCounter);
function updateCounter (e:Event) :void
{
var newTimeUTC:Number = new Date().getTime();
var timeExpiredUTC:Number =
newTimeUTC - startTimeUTC;
var clockSecondsExpired:Number =
Math.floor((timeExpiredUTC / 1000) % 60);
var clockMinutesExpired:Number =
Math.floor((timeExpiredUTC / 60000) % 60);
var clockHoursExpired:Number =
Math.floor((timeExpiredUTC / 3600000) % 24);
var clockDaysExpired:Number =
Math.floor((timeExpiredUTC / 86400000));
}

And an example to match:

Flash As3 Event.MOUSE_LEAVE Not Firing.

Raz — Sun, 08 Mar 2009 08:58:33 +0000

Really quick post this time. Wanted to share some recent found knowledge that i wish i had known twenty minutes prior to testing functionality in an RIA earlier on tonight.

1	stage.addEventListener(Event.MOUSE_LEAVE, exitHandler);

This will not work in the Flash IDE! The embedded player just never fires the event.
The only work around i could find is to publish the swf and view it in a browser.

As3 CData Binding

Raz — Wed, 04 Mar 2009 09:15:13 +0000

I just manged to get some code working that has had me banging my head against the wall for the last couple of hours.
The goal was simple, send XHTML markup to PHP. Horray says me, should be fairly straight forward!
I’ll just pop a > tag around the nodes that store the markup so the tags will not be parsed.
Then i set off about my usual workflow, and soon enough, i have some actionscript which should be both reading and writing to my .xml file.

Everything looks great, time to test it out!

Problem!

1
2
3
4
5
6
7
8
9
10

// Wraps a single content node with required tags.
// Note tag = "Name" & contents = "Raz Peel"
function stringToNode (tag:String, contents:String):XML
{
return new XML (
<{tag}>
+"+{contents}+"]]>"+
{tag}>
);
}

My first element comes out as such.

Obviously this is not working at all as it should, i take it my XML isn’t formatted correctly.
Back into code I rewrite my function to the follows:

1
2
3
4
5

return new XML (
<{tag}>
[CDATA[ {contents} ]]>
{tag}
);

This result was better, but still very much incorrect.

The contents variable was being parsed as a string rather than a variable.
I jumped back into the code to try something else.

1
2
3
4
5

return new XML (
<{tag}>
{"}{contents}{"]]>"}
{tag}>
);

This must work right? Apparantly not, result was:

This is the point where i consulted the Adobe LiveDocs
and then our Essential ActionScript 3.0 book.
Colin, unfortunatley, confirmed that i wasn’t doing anything wrong, weird! Ten minutes on google found me on Jesse Warden’s blog reading this post.
As such i changed my code to this:

1
2
3
4
5
6
7
8

function cdata(theURL:String):XML
{
return new XML (" + theURL + "]]>");
}

return new XML (
<{tag}>{cdata(contents)}{tag}>
);

Result?

Yay, success!!!
I’ve no idea if this is suppose to work like this or not, but it does.
Thanks for sharing Jesse!

Simple Rotating Images (As3)

Raz — Sun, 15 Feb 2009 00:31:40 +0000

In the last week of talking in various channels, at least a few people have asked for help with the code to dynamically rotate several images in a loop.

I’ll show you two different ways you can do this, both leading to the same result. You can look at the method i would use, (which includes the use of Tweener, and another way using Flash’s built in tween system.

If you want to follow along using my method, i have a pre-prepared file that you can start with at this link.
The images used in this tutorial are not my own, rather by one of my favorite digital artists Greg Martin.

1) My way, using Tweener.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// import Tweener
import caurina.transitions.Tweener;

// imageNum will hold the current image we are viewing,
// imgArray will store a list of all the images in use
var imageNum:int = 0;
var imgArray:Array = new Array();

/* create a for loop construct to iterate through all the display objects on the stage
the code that loops takes each display object and stores it in our imgArray,
and then changes the alpha value of each one to zero so nothing is visible on screen */
for (var i:int = 0; < this.numChildren; i++) {
imgArray.push (this.getChildAt(i));
imgArray[i].alpha = 0;
}

// create a function called tweenImg. You can then call this function whenever we want the image to change
function tweenImg () :void {
var secondNum:int = 0; //define a variable to hold the index of the next image to be shown

//tell Tweener to create a new tween which will wait 1.5 seconds and then set the alpha property of the current image to 0.
Tweener.addTween(imgArray[imageNum], {delay: 2, alpha: 0, time: 1, transition:"easeOutCubic"});

//check if the current image is the last one in the list. If so, reset the index to 0, otherwise increase the index by 1.
//tells the next image to fade in
imageNum >= imgArray.length - 1 ? imageNum = 0 : secondNum = ++imageNum;
Tweener.addTween(imgArray[secondNum], {delay:2, alpha: 1, time: 1, transition:"easeOutCubic", onComplete:tweenImg});
}

// start the loop cycle by fading in the first image and calling the tweenImg function when it’s finished.
Tweener.addTween(imgArray[0], {alpha: 1, time: 1, onComplete:tweenImg});

That’s all! You now have a series of images that all fade in and then out continuously. Finished files are available at this link.

2) The other way, using the bulit in tweening engine.

I wrote the alternative way of achieving the same result using flash’s own inferior tweening system.
I’m not going to post it here though, instead you’ll find the complete working files for this method, along with the one previously discussed at this link.

Good luck!