code by mariano klein
If you happen to browse design sites, you are
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:
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
code used in the Flash file and HTML is also the exact
version from Mariano Klein's examples.
Creating the Chromeless Window:
Create a new document in Flash MX 2004.
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.
Button and press OK ]
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" ]
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:
[ copy and
paste the following code in your Actions panel ]
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.
Our work in Flash is pretty much done. Exit Flash...for
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.
In case you are wondering, the files you
downloaded and extracted are the images and the
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:
[ copy and
paste the following code after the </head> tags ]
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.
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 =
var Y = "Example by Kirupa";
var K = "c_title.gif";
var L = 23;
var E = "Arial";
var I = 10;
var N = "#5596AE";
var C = false;
var h = 500;
// width (w)
var r = 400;
// height (h)
var o = true;
var m = 0;
var e = 0;
var l = "#5596AE";
var e_= 5;
var s = "minimize.gif";
var s_= "close.gif";
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
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!
|While this effect is
really cool, there are a few issues you have to be
- 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.
Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!
THE KIRUPA NEWSLETTER
Get cool tips, tricks, selfies, and more...personally hand-delivered to your inbox!
( View past issues for an idea of what you've been missing out on all this time! )