Chromeless

If you happen to browse design sites, you are bound to see many javascript pop-up windows that display a page in a smaller, less buttoned version of your browser. A modification of the pop-up window is the Chromeless window. Unlike a regular pop-up where you still see the browser window's title bar, a Chromeless window takes out all of the extraneous details that your OS/browser leaves on, and it gives you more freedom to customize the appearance of your window.

The only glaring problem with this cool effect is that you have to use Internet Explorer. Users with Netscape or Mozilla browsers are out of luck. With that said, click the button in the following Flash animation for an example of the Chromeless window:

[ click here....well, "click here" there above you! ]

Before I proceed any further, the Chromeless window is a feature that has evolved and changed over its existence. This code is not my creation, but the variation I am using is by Mariano Klein featured on chromeless.org. The code used in the Flash file and HTML is also the exact version from Mariano Klein's examples.

Creating the Chromeless Window:

1. Create a new document in Flash MX 2004.
    
2. Once the document has been created, draw a small rectangle on the stage. Select your rectangle, press F8, select the option for Button, and press OK.

[ select Button and press OK ]
 

3. With your rectangle converted into a button, make sure your button is selected and look at your Properties panel. Let's give the button an instance name. In the area marked < Instance Name >, enter the word chromeless:

[ give the button the Instance name "chromeless" ]
 

4. With that done, select the first frame in the timeline of your animation. Press F9 to display the Actions panel. Copy and paste the following code:

chromeless.onPress = function() { getURL("javascript:myChromeless.openChromeless()"); }

[ copy and paste the following code in your Actions panel ]
 

5. Now, save your animation and go to File | Publish. If you go to the folder where your animation is, you will see 3 files from this animation: the fla, the swf, the htm.
    
6. Our work in Flash is pretty much done. Exit Flash...for good!
    
7. There are a few files that you will need to finish your effect. Download and extract the files from the following link into the SAME folder as that of your Flash animation.

Download Files

In case you are wondering, the files you downloaded and extracted are the images and the all-important JavaScript file that makes this effect possible!

8. Now, open Flash's HTML file in a program like Notepad, DreamWeaver, FrontPage, etc. Whichever! Find the </head> tags, and after them, copy and paste the following code:

<script type="text/javascript" src="ByKlein_chromeless2.0.js"></script> <script type="text/javascript" > function createChromeless() { ///////////////////////////////////////////// //This are the attributes you can customize// ///////////////////////////////////////////// var B = "http://www.kirupa.com/newdesign/tutlist.htm"; // URL var Y = "Example by Kirupa"; // title var K = "c_title.gif"; // titlebarImage var L = 23; // titlebarHeight var E = "Arial"; // titleFont var I = 10; // titleSize var N = "#5596AE"; // titleColor var C = false; // scrollbars var h = 500; // width (w) var r = 400; // height (h) var o = true; // centered var m = 0; // xPos var e = 0; // yPos var l = "#5596AE"; // borderColor var e_= 5; // borderSize var s = "minimize.gif"; // minimizeBottom var s_= "close.gif"; // closeBottom myChromeless = new ChromelessWindow(B,Y,K,L,E,I,N,C,h,r,o,m,e,l,e_,s,s_); } createChromeless() </script>

[ copy and paste the following code after the </head> tags ]

9. Save and preview this page in your browser. If everything worked well, you should be able to see a portion of the navigation from this site's main page.

Customizing
Now, let's learn to customize this animation. I am sure you are not too keen in displaying the this site's title and color scheme in your implementation of this tutorial! The brunt of your customizing occur in the HTML file. It would only make sense to start there:

/////////////////////////////////////////////
//This are the attributes you can customize//
/////////////////////////////////////////////
var B = "http://www.kirupa.com/newdesign/tutlist.htm"; // URL
var Y = "Example by Kirupa"; // title
var K = "c_title.gif"; // titlebarImage
var L = 23; // titlebarHeight
var E = "Arial"; // titleFont
var I = 10; // titleSize
var N = "#5596AE"; // titleColor
var C = false; // scrollbars
var h = 500; // width (w)
var r = 400; // height (h)
var o = true; // centered
var m = 0; // xPos
var e = 0; // yPos
var l = "#5596AE"; // borderColor
var e_= 5; // borderSize
var s = "minimize.gif"; // minimizeBottom
var s_= "close.gif"; // closeBottom

The above code is actually a section from the HTML that you copied and pasted. All aspects of your new window that can be customized are displayed in the orange color above.

Most of the information is self-explanatory, and Mariano did a good job of commenting the code to help you out. If there is anything you need to change, you simply replace the existing values with your new value. Pretty self-explanatory really!

Warnings

While this effect is really cool, there are a few issues you have to be aware of: This feature only works on Internet Explorer versions 5.5 and up running Microsoft Windows. Netscape and Mozilla versions will not display this effect. I have heard that this effect works well in Firebird though.   If you go back to your Flash animation and publish the animation, any changes you made to your HTML file will be lost. You will have to copy and modify the effect again. It's best to create a copy of your HTML file and rename it as something else so that Flash won't have the tendency to overwrite what you have already done.   From a usability point of view, Chromeless windows are bad. You should try to have a non-Chromeless or regular windowed option for your visitors to choose from.