In this article I am going to discuss how you can use transparent PNGs in IE6 while also satisfying normal browsers; such as FIREFOX. Till recently it wasn't possible to use transparency on the web. Internet Explorer 6 lacks the ability to display these file types. Until IE7 becomes the standard web browser, designers still have to find a way help out these dying breed of internet users. So here we go.

In your CSS file you're going to create two classes. One class which is normal and the second which is prefixed with the title *html ( This prefix calls for IE6 bowers) which is followed by a space and the class name; (example: *html .classname). You may notice that the background color tag has a forward slash in between the word. This is on purpose and not by mistake. This bit of code will be bypassed by IE. Lastly you need to create a 1px by 1px clear gif that will be read in as the foreground image. Then in the filter tag, indicate where your PNG is located.

Take note that the height and the width of the div needs to be the exact height and width of the PNG otherwise the image will become distorted. Also this bit of code dose not work as a repeating background for PNG's, weird stuff happens.

.tree{ background-image:url(images/tree.png); background-repeat:no-repeat; width:50px; height:100px; position:absolute; left:-55px; z-index:500; } *html .tree{ back\ground-color: transparent; background-image: url(image/clear.gif); filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="image/tree.png", sizingMethod="scale"); width:50px; height:100px; position:absolute; }

With the amount of web browsers out there today it's difficult to create one CSS document that works correctly in every browser. The truth is that if your layout is complex it's not possible to make one document without having to call out individual browser types. So, I will list here a few individual browser call tags in CSS.

Browser detection for IE 4 and Netscape 4
<style type="text/css">@import "styles.css";</style> Browser detection for IE 7 IE6 and others
.context_bar_form_field { height: 15px; /*(all browsers)*/ #height: 15px; /*(IE 7)*/ _height: 21px; /*(IE 6 and older)*/ } Browser detection for IE 6
*html #DivName{ IE 6 } Browser detection for FireFox 2.0 and newer
div>thedivsname { Firefox CSS Hack } #DivName, x:-moz-any-link { Firefox 2.0 here} # DivName, x:-moz-any-link, x:default { Firefox 3.0 and newer} This next CSS tag for Firefox includes several extra values not available in any other browser. *::-moz-selection {...} Check them out here: developer.mozilla.org

Stop! Don't reach for that magic wand tool. The magic wand tool isn't very effective for complex shapes. There is an easier way to select a background from a complex shape. It's time to simply your life by using the "color range" tool. Select a layer and then choose from the menu.

Select - Color Range -

Then click on the background of your image in the pop up menu. The area you want to extract will be white and the areas you want to keep will be dark. Adjust the fuzziness to get the proper edging.

I recently I found a way to select an individual layer inside a grouping in Photoshop CS2 without having to search the layers palette to select it. It's very easy and a HUGE help. This enables you to click on the image and it jumps to the appropriate section.

First, inside Photoshop CS2 press "V" button to select the selection tool.

Then right below, the file/edit/image/layer menu options you will see three check boxes. The middle is grayed out. Put a checkmark in the first checkbox, which will make the second checkbox active. Then uncheck the middle check box.

Then uncheck the first check box which you first selected.

All done! Now to click on any layers within any layer set or any grouping, by just "Ctrl & click" on the image and it will jump to the appropriate layer. This is a tool I guaranteed you'll use.

When I started working for Sony Online Entertainment they had me do a homework assignment to get hired. The test was to pull in an XML data feed that displays in a multi-column sorting data grid that also included graphic charts in ascending or descending order. The two columns that needed to be related to each other had to be sorted in a very particular order. Check out the working example with the code included - here. If you have any questions, contact me here. ------ Example:------- for (var i:Number=0; i< arr.length; i++) { if ( array[i][1] == "Guild Leader"){bx1++ } else if ( array[i][1] == "Officer"){bx2++} else if ( array[i][1] == "Officer Alt"){bx3++ } else if ( array[i][1] == "Main Raid Force"){bx4++ } else if ( array[i][1] == "Raid Force"){bx5++ } else if ( array[i][1] == "Twinks"){bx6++ } else if ( array[i][1] == "Recruit"){bx7++ } else if ( array[i][1]== "Inactive"){bx8++ } else {} } arr2.push({Names:"Guild Leader", Numbers: bx1}); arr2.push({Names:"Officer", Numbers: bx2}); arr2.push({Names:"Officer Alt", Numbers: bx3}); arr2.push({Names:"Main Raid Force", Numbers: bx4}); arr2.push({Names:"Raid Force", Numbers: bx5}); arr2.push({Names:"Twinks", Numbers: bx6}); arr2.push({Names:"Recruit", Numbers: bx7}); arr2.push({Names:"Inactive", Numbers: bx8}); -----------

Curious how to prevent image pixilation on a bitmap during a rotation or animation sequence? There is a fairly easy way in ActionScript 2.0 to achieve this. Us a built in function under the bitmap class called - "forceSmothing". By default its set to false. ------ Example:------- _root.circle.dial.graphic.forceSmoothing = true; -----------

A problem arose for me while working on a recent Flash project. I needed to pass a variable from a child SWF to its parent SWF. Not the same as two SWF sitting in the same HTML window passing variable through a Local Connection. The solution I was able to find was passing variables through an "object.prototype". Now this object tag was called on the main root timeline of the parent SWF. The child SWF I buried the variable in a MovieClip until I needed it defined. So it looked like this ------ Parent------- object.prototype.MYNEWVAR = SETTINGNEWVAR; -------Child-------- Button1.onRelease = function(){ object.prototype.SETTINGNEWVAR = "passing this text over"; } ----------- That's it!

I was one of the attendees from Colin's "ActionsScript 3.0 - From the Ground Up Tour" the conference coved a vast area of object oriented programming in Flex. But surprising did not cover as much of the new ActionScript keywords I was looking to hear. I was hoping to hear more about how ActionScript evolved from 2.0 to 3.0. I was eager to hear about how development of ActionScript has improved. He did cover some new materials in which relates to classes in external AS files and new import methods from separate media types. His main focus was converting beginners of ActionScript to a strong background in object oriented programming with an emphasis on setting "access-control modifiers"(public items VS private items). I did gain quite a bit of knowledge from his technique, but on the other hand wish it gave a little more of overhead in the actual flash environment. One of the most useful pieces of information bestowed was his overview of graphical application display. It gave a designer (like myself) a chance to understand how flash renders the parent child relationship in the user interface of flash, including the new addition of a sprite. Overall I enjoyed the conference, but it was way to much linear focus on building an application and not enough new information on Flash's ActionScript 3.0.

Learning XML in Flash and trying to create Nodes for a designer can be come one of those things that drives you crazy. So I will keep this as simple as possible. I will give you a couple of different example of creating nodes. To start of, below is an image of how nodes are laid out.

Directly below is the written expression in XML of the picture above.

<a> <b> <c></c> <c2></c2> </b> <d> <e></e> <e2></e2> </d> </a>

Think of an XML structure like a family tree. The "root node" being the monarchy of your family tree. Everything the family wants to do have to be passed through the top. (A) being your Root node. Walking down the structure (b) and (d) are the "firstchild" of the "root", now also consider that (b) and (d) are also siblings to one another. And looking down one more level (c) and (c2) are "firstchild.fistchild" to the root as well as "nextsiblings" to each other. This logic is the same for (e) and (e2). Understanding where you are from the top will help eliminate confusion. Here are two example of how you can walk down the structure in flash.

// -- this will allow you to walk down through a // -- XML by calling out the Childnodes names. import mx.xpath.XPathAPI; if(bSuccess) { _root.fullsize.title1 = XPathAPI.selectSingleNode (xmlVal.firstChild, "/one/two/three").firstChild.nodeValue; XPathAPI.selectSingleNode(xmlVal.firstChild, "/one/two/almostfour").firstChild.nodeValue, }

Or you can use this method

input = xmlVal.childNodes[0].childNodes[0]. childNodes[1].firstChild.nodeValue;

Setting up an XML document is fairly basic. Use the code below and rename your function and your directory structure.

//---------- The line below becomes useful when your URL's base path is unable to be //---------- found. It set your base path based on where the flash is located. //---------- var flash_root = this._url.slice(0, this._url.lastIndexOf("/")); var xmlVal:XML = new XML(); xmlVal.ignoreWhite = true; xmlVal.load(flash_root + "/datafiles/gallery.xml"); xmlVal.onLoad = function(bSuccess:Boolean):Void { if(bSuccess) { //---------- place all your onload functions here trace("Button document failed to load or parse."); } else { trace("Button document failed to load or parse."); } };

More and more, today's actionScript animation is necessary due to either keeping file size low or creating a site that's truly interactive. I have been going through several tutorials and finally found an Undocumented Class that Flash MX 2004 built into actionScript. It's called Tween/Easing Classes.

What it does is allow you to set the beginning and end X or Y positioning of a movie clip and set the amount of time you want to do this in. The most interesting features about easing class are that it has several features such as bounce effect, elastic effect, and ease in and ease out effects. This code seems to work most accurately at 25 frames per second and is fairly straight forward. To use this code place it on the main timeline in the first key frame and switch out the movie clips names.

myButton_btn.onRelease = function() {tweenBall(mx.transitions.easing .Bounce.easeOut); }; function tweenBall(easeType) { var begin = 20; var end = 380; var time = 20; var mc = ball_mc; ballTween = new mx.transitions.Tween mc, "_x", easeType, begin, end, time); }

The code below allows you to change out the types of tween you can use by replacing the words after mx.transitions. with one of the choices below.
Bounce.easeOut, Bounce.easeIn, Bounce.easeInOut, Back.easeOut, Back.easeIn, Back.easeInOut, Strong.easeOut, Strong.easeIn, Stong.easeInOut, Elastic.easeOut, Elastic.easeIn, Elastic.easeInOut, Regular.easeOut, Regular.easeIn, Regular.easeInOut, None.easeNone,

In some of the interactive websites you see now days, you will notice a thing called "reaction scrolling". It is a unique tool that has evolved in the last few years. It allows the designer to import an image into Flash which is longer than the stages dimensions. Based on mouse movement and positioning on the X or Y coordinates you can create the illusion of 3D environment. Allowing the user to feel like he can look left and right of the screen and not confined to one visual space. Using this technique with the proper zoom in and out can become very interesting.

Now I search several tutorials and found that most reaction scrolling is fairly complex, and has a lot of unnecessary attributes. So I took on the task of creating one myself.

To get this work you need to:

• Create a movie clip.
• Inside that movie clip paste in your background and covert it to a movie clip.
• Give it the instance name of ?menubox?
• Go to frame 3 and press F5
• Create an actions layer.
• First frame create a STOP( ) action.
• On that same layer go to frame 3 and press F6.
• In the actions window paste this code

mouseY = _ymouse; menuY = menubox._y; var menunumber if(menubox.hitTest(_root._xmouse, _root.ymouse)){ menunumber = true; } if(!menubox.hitTest(_root._xmouse, _root.ymouse)){ menunumber = false; } if (menunumber == true){ if (mouseY > 230) { diff = (mouseY-230)/12; } if (mouseY < 160) { diff = (160-mouseY)/12; } if (mouseY <= 190 && menuY <=0){ setProperty("menubox", _y, menuY+diff); } if (mouseY >= 190 && menuY >= -330){ setProperty("menubox", _y, menuY-diff); } if (menubox._y >=0) { menubox._y =0; } else if (menubox._y <= -330){ menubox._y = -330; } gotoAndPlay(2); };