snippets

Stage resize in IE6 refresh problem

3

The problem:
On entering a flash movie in IE 6 the first time everything appears to be fine. On refreshing the page though, it completely messed up my layout.


The explanation:
A good 2 hour hunt later I have localised the problem: my elements get a position based on stage.stageWidth and stage.stageHeight but on refresh both parameters trace 0. Meaning my elements can’t be seen since they are positioned outside the stage instead of on it.


The solution:
The solution is simple really. remove Internet Explorer 6. In fact: remove your whole computer if it has IE 6 installed.

Just in case you don’t want to do that you could also add a resize listener to the stage and call that listener again right behind it. In your actual listener function write an if statement that checks if the stageWidth and/or stageHeight is bigger than 0. If it is: execute code.

    public function DocumentClass() {
        // make it call an function on resize
        stage.addEventListener(Event.RESIZE, resizeHandler);
        // call that resizeHandler again (for browsers like IE 6)
        resizeHandler(null);
    }
 
    private function resizeHandler(e:Event):void {
        // check if the Height and Width is bigger than zero and act accordingly.
        if( stage.stageHeight > 0 && stage.stageWidth  > 0 ){
                // safe zone. Add code here.
        }
    }

Comparing data in actionscript 3.0

0

The problem:
Say we need to compare an xml file containing some months to a list of all the months so we can get their corresponding monthNumber (January = 1,  February = 2, …).

First of all we will need a list of months. I decided to go for a multidimensional array with the monthNumber in it aswell:

var monthLabels:Array = new Array([1, "January"],[2, "February"],[3, "March"],
[4, "April"],[5, "May"],[6, "June"],[7, "July"],
[8, "August"],[9, "September"],[10, "October"],
[11, "November"],[12, "December"]);



Then we need another file (which can be strings a user fills in or – in my case – an xml file) to compare data with:

<xml>
<month name = "January">some text</month>
<month name = "Februari">some text 2</month>
<month name = "December">some text 3</month>
</xml>



And here is the code, it’s almost so easy that even flash-for-mobile developers can understand it (for all you mobile developers -> the explanation follows):

for(var i:int = 0; i < xml.month.@name.length(); i++) {
	for(var u:int = 0; u < monthLabels.length; u++) {
		if(xml.month.@name[i] == monthLabels[u][1]) {
			trace(monthLabels[u][0]);
		}
	}
}



The explanation:
First of all we loop through the amount of monthnames (the first for loop). That loop traced out will give us all the monthnames in our file or string (in my xml example 3, being “January”, “February” and “December”).
For each result of that first loop we loop through the monthLabels array’s length. There are 12 months so I could have used “12″ but I use length instead so you can use the code for other data aswell.

In that second loop we check if the value currently being processed by the first loop (xml.month.@name[i]) is equal to one of the values in our array. Since we have a multidimensional array we need to specify which value we want to use to compare with. The month name is on the second place so I use “1″ to identify that place (arrays are zero-based so 0 = first place, 1 = second place). If we have a match the if will succeed and we trace out the corresponding number.

This particular example will trace out:

1  // Which is the monthNumber for January
2 // Which is the monthNumber for February
12 // Which is the monthNumber for December

I hope this helps you multidimensional-and/or-comparing-data troubled kids out!

Actionscript 3.0 email validator

0

A quick email validator snippet. I know it’s not much but it sure is useful!

private function isValidEmail(email:String):Boolean {
var emailExpression:RegExp = /^[a-z][\w.-]+@\w[\w.-]+\.[\w.-]*[a-z][a-z]$/i;
return emailExpression.test(email);
}

“Use it, abuse it!” Like Arcko Drazen would say.

swfobject 2 + swffit 2

4

Brief explanation

swfobject can be used to embed flash content in a html page. I dare to even say more: it is THE way of embedding flash in a webpage, check out the documentation to find out more advantages.

swffit is a nice and easy thing to make sure everybody can view your website in full, even if that means adding scrollbars.


A small how-to from Murten Saerbi

First of all download swfobject 2 and swffit 2. Proceed by embedding your flash in html the way it is supposed to but set the width and/or height to “100%” like so:

swfobject.embedSWF("flash.swf", "divname", "100%", "100%", "9.0.0");



Add swffit 2 lines:

swffit.fit("divname",1024,768);



Don’t forget to import both scripts (add script opening and closing tags):

script type="text/javascript" src="swfobject.js"
script type="text/javascript" src="swffit.js"



And here is what most people overlook… firefox is very strict in terms of css and not setting the divsize (since swfobject doens’t include css for the div you write the flash to) will cause the flash to not be displayed. Why not? The flash that gets written in the div takes over the size of its parent which has no size set so it basically grabs 100% of nothing!

Here’s how I solved that:

html, body{ height:100%; }
body { margin:0; padding:0; overflow:hidden; }



The result

ilys events was the perfect example. Resize the browser and see it adding scrollbars once you go smaller than the swffit configuration (I chose 1024*768).

That’s it! You’re now 100% (no pun intended) set!

free ‘widget’: logo switcher/promo switcher

0

Aside from the fact that I am still alive there is also another great thing: free widget!

I made this widget to show how relatively easy it is to make dynamic flash widgets. This one is controlled by an xml where you can input:

- text
- images
- borderthickness
- bordercolor
- backgroundcolor
- switch speed (time that determines how fast it goes to the next promo)
- url (the website that opens when you click the logo)
- clickTarget (choose in what window it opens: _self, _blank, … Empty tag means _self)
- shine (choose if you want the shine or not, values are true OR false)

You can ofcourse implement hundreds of other parameters if you want, but being just a simple promo switcher 9 should be enough.

PS: if the text part is ommited the logo will slide to the middle of the widget.

Check it out:

You can check out the xml by clicking here.

DOWNLOAD INSTRUCTIONS

There is a “bin” folder inside the .rar which contains all files to be uploaded (.swf, js, images, xml) and an example of an html with swfObject and a few parameters to set (xmlpath, imagepath).

Download it here!

Skinning a combobox component in actionscript 3

5

A quick post in relation to my post about embedding fonts in actionscript 3 components: A combobox example. I have prepared a quick example that you can see below, I’m sure you guys and girls can come up with a design that suits your needs.

You can check out the code below or download the example file.

// create a new textformat and set the style of it
var myFormat : TextFormat = new TextFormat();
myFormat.font = "Cooper Std Black";
myFormat.color = 0xffffff;
myFormat.size = 13;
myFormat.indent = 4;
 
// apply the textformat and embed fonts for the selected option
first_cb.textField.setStyle("textFormat", myFormat);
first_cb.textField.setStyle( "embedFonts", true);
 
// apply the textformat and embed fonts for the dropdown textfields
first_cb.dropdown.setRendererStyle("textFormat", myFormat);
first_cb.dropdown.setRendererStyle("embedFonts", true);


Actionscript 3.0 snap to grid

2

Every actionscripter will come to a point in his/her life where the boss calls for a drag and drop application. If you’re really lucky he/she will even ask for the ability to let items snap to a grid.

The Example

Just start dragging the red thing and you will see that it snaps to the grid from the moment you enter it. If you let go of the red thing outside of the grid it will return to his base.



The code to snap

snapClip_mc.x = mouseX - mouseX%size;
snapClip_mc.y = mouseY - mouseY%size;

Only two lines of code! Just let the clip that you want to ‘snap’ position itself on the position of the mouse (mouseX, mouseY) minus the position of the mouse (mouseX, mouseY) modulo the gridsize (the size of one squareside of the grid).

So, if the side of my square in my grid was 50, the size parameter would be 50. If it was 100, my size parameter would be 100.

What is a modulo?

I am glad you asked! The modulo, according to wikipedia, is: In computing, given two numbers (either integer or real), a and n, a modulo n is the remainder after numerical division of a by n, under certain constraints.

The aftermath

Just think of the possibilities! Checkers, monopoly, chess and many more are just a snap (no pun intended) away!

And maybe even scrabble, too!

embedding font in actionscript 3.0 components

3

Another great tip by the man with the golden smile Jannes Van de Maele about embedding fonts, this time for components.

Check out this small example and quiver with joy and utter amazement!

var radioButton : RadioButton = new RadioButton();
 
var myFormat : TextFormat = new TextFormat();
myFormat.font = TextManager.HELVETICA_NEUE;
radioButton.setStyle("textFormat", myFormat);
radioButton.setStyle( "embedFonts", true );

That’s it for now, kids! More to come soon though!

Actionscript 3.0 mailto

0

This may be an easy one for all you brainiacs out there but many people have asked me how to do the “mailto” stuff in actionscript 3.0

In actionscript 2.0 we would do:

getURL("mailto:mail@hotmail.com", "_blank");

And in actionscript 3.0 it’s almost as simple:

 navigateToURL(new URLRequest("mailto:mail@hotmail.com"), "_self");

Don’t forget to import navigateToURL and URLRequest though!

import flash.net.URLRequest;
import flash.net.navigateToURL;

Actionscript 3.0 Key Listener after button-click

0

Today I found out that a Actionscript 3.0 Key Listener doesn’t work after a button-click until you click somewhere on the stage. Ofcourse I made it a quest to find out how I could easily fix this and behold!

The problem

private function someFunction():void {
	start_btn.addEventListener(MouseEvent.CLICK, clickHandler);
	start_btn.buttonMode = true;	
}
 
private function clickHandler(e:Event):void {
	removeChild(start_btn);
	stage.addEventListener(KeyboardEvent.KEY_DOWN, downHandler);
}
 
private function downHandler(e:Event):void {
	trace("heej");
}

It will not do the trace until you click the stage. So I went on a searching spree and together with my good friend Frederik “the wonderkid” Humblet found out that “stage.focus = null;” fixes it. Well, he found out, but I steal the credits by posting it for you all!


The solution

private function someFunction():void {
	start_btn.addEventListener(MouseEvent.CLICK, clickHandler);
	start_btn.buttonMode = true;	
}
 
private function clickHandler(e:Event):void {
	removeChild(start_btn);
	stage.focus = null;
	stage.addEventListener(KeyboardEvent.KEY_DOWN, downHandler);
}
 
private function downHandler(e:Event):void {
	trace("heej");
}

Until next time my dear readers!

Go to Top