Peeling a webpage is very fun to do and it'll draw attention from your users. You can use to it place advertations, or draw attention to a hot article on your own website. Here I'll explain how to create such an effect on your website. It uses Flash and JavaScript, and is really easy to install. A live demo for the peeling effect can seen when you fully read this article.

I received this package from the admin of musicincontrol.nl, a great dutch music website.

If you read this, you should be able to see the peeling live and working in the top-right corner of this page. When you mouse-over the image, it'll expand revealing more information.

To achieve this, simply execute the following steps to embed a peeling corner on your website.

Now edit the file with your favorite programming editor (Notepad will work too). Search for the following code line:

jaaspeel.ad_url = escape('http://www.marcofolio.net/');

Change the value between the quotes (in this example it is "http://www.marcofolio.net/") to the webpage you want your corner to re-direct too, when people click on it. Save your peel.js file.

The images

As you can see in the JavaScript code, this effect uses two images.

small.jpg A 100x100 px image, used when the peeling effect is inactive.

large.jpg A 650x650 px image, will be shown when a user mouse-overs the peel.

In this example, I'm using this small.jpg and this large.jpg. Create your own images that will be shown in the peel.

The Flash

This project uses Flash to create the actual effect. To download the Flash files, look below and download the attached source files.

Upload files

Now you're all set to upload the files to your web server. Upload the following files:

peel.js

small.jpg

small.swf

large.jpg

large.swf

to the following directory:

http://YOURDOMAIN.COM/peel/

Installing on your site

Now add the following line to your webpage. Make sure your source (src) direction is correct.

<script src="peel/peel.js" type="text/javascript"></script>

Well, that's about it. Refresh your page and you should have a nice peeling corner that you can update by just changing the images "small.jpg" and "large.jpg". If it doesn't work, you probably didn't set the paths correct. Please check and make sure it's the right path. Additionally, you can change all the parameters in peel.jpg, beginning with "jaaspeel." (Readme file included).

I'm not the one who created the code and I don't know who did. Please contact me if you know / are the programmer of this code.

Attached files:

Download Peel Package

Troubleshoot

Due to some of the comments, I created a package that should work when you upload it. You can view how it should look like in the example/demo page.

Attached files:

Download Peel Troubleshoot Package

Flash Source

I'm not going to modify the code anymore. If you want to have a go, download the Flash source files and play around.

Attached files:

Download Peel Flash Source Files

Where are you going to use the peeling package for?

UPDATE: No target="_blank" peel

As many have requested in the comments, they want to change the FLA to make the target="_blank" dissapear. As I said before, I can't do this, since the FLA was not mine.

Erwin found a solution for this problem: WebPicasso has a free peel away ad in the form of a WordPress plugin. With some modifications you can make it work "stand-alone" and that one doesn't have the target="_blank" addition. Enjoy!

In Scene 1, frame 44, I changed the actionScript, line 10, from "getURL(_root.ad_url, "_blank");" to "getURL(_root.ad_url, "_self");"

In the library, in the "Movies" folder, "mv_sprite10", I created Layer 5, and turned Layer 1 into a guide layer.

In the library, in the "Movies" folder, "mv_sprite4", I created Layer 4, and turned Layer 1 into a guide layer.

On Scene 1, I added a layer called "New Layer". This is the layer that needs work. The shape tween is not exactly aligned with the other layer tweens.

Please contact me (use the contact page) if you managed to fully fix the file and make the target=_blank work.

Update

If you're using more Flash files on the page, you might encounter a problem with the peel showing under your Flash files. Steven kindly provided the following fix. Simply leave the peel banner "as is" and edit the code around the other Flash files you're using in the following:

This (we)blog brings you information about (web)design, blogging tips, (programming) tutorials and much, much more. I can't describe Marcofolio.net in words: Just look around and be amazed. Many (new) visitors have a habit to stick around, just because of the variety of articles.

Have fun reading this blog and don't forget to subscribe to the feed to keep updated on the latest articles.