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.
The JavaScript
Select the code above and save it as peel.js (Download ).
Now edit the file with your favorite programming editor (Notepad will work too). Search for the following code line:
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.
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?
I work as a full time web designer and thought i would give this a try as it would be a quick and easy way to introduce this effect, as I am a flash-aphobic if there is such a phrase.
I have used paths as supplied, relative paths, absolute paths and placed all files in same dir. I have even tried everything directly in the root dir but the swf is not even loading. I have downloaded twice as thought a file may have become corrupt. But to no avail
Obviously it has worked for some people - just not for me.
WOW!
Thanks for the free page peel Marco. Everywhere else I looked wanted to charge, and here you are giving it away for free.
Because of that I would like to make a donation. Please contact me thru my contact form on my webpage so I can do so.
I dont know what i was thinking, I just followed the instructions to place link to js file in tag, which was the problem. If I had been half awake I would have ignored it and placed it in the BODY. So much for being a pro eh.
Love the effect, if we use it on our site I will be more than happy to make a donation.
Thank you for your reactions. These comments show that there are people out there that really like my work. That is enough motivation for me to keep on doing this. No donation is needed, thanks anyway .
Hi Marco,
I am so close to getting it all to work. I am testing it on my computer before uploading, but I seem to be having a slight problem or two. I have saved all files to a folder, redirected all links (basically removing /peel/), and edited the re-direct url. I modified two images to replace the blank ones from the zip file, added the proper code into the HEAD ( although, looking at your page source here, you seem to have it in BODY... , and it looks like a comment???). When I open my index page, I see the corner rolled with my image, but it won't roll, and the url wont redirect. So very close...any ideas?
Strange this about this script, is that it works in the HEAD and sometimes in the BODY. In Firefox it works on both, IE6 only when it's in the BODY. Putting it in the HEAD is better for performance, but sometimes it doesn't work.
Are you sure you made the proper changes to peel.js? If you see the "small.swf" (the small rolled image) and you mouse-over it, the "large.swf" should show up.
Did you also change the jaaspeel.big_path and jaaspeel.big_image in the .js file?
If it still doesn't work, try uploading it to your webserver. The .swf file tries to load the .jpg file and sometimes your localhost can see this is an "illegal operation". When it's online, it should work.
I have tried everything I can think of, including loading all the files freshly unzipped into a folder named peel, placing the in my index code, uploading, and.....nothing. Tried hard coding too, and nothing. I can get the corner to start to roll when all files are on my comp, but when I upload, nothing.
I edited my post and added a "peel_troubleshoot.zip". When you upload everything in that package in any folder, it should really work (Localhost can give permission problems). When it still doesn't work on your website, it can be your host that doesn't allow to connect the Flash with the JPG files.
Working perfect but I would like to open the link in the same window not in a new one. Is this possible and how? I looked at the java script and tried a few things but I can't get to work.
Excellent, well done and thanks for making it available FOC.
As you are giving it away, how about also making flash source available?
Alternatively, how about adding a parameter which will allow me to determine whether or not my link opens in a new window OR replaces the page I'm on.
I agree with TS, if you could make the flash source available that would be great..it would also mean we could resize the peel too.
Unless there is anopther way of resizing the peel?
hi,
i have created a page and i use peelawayad file which is in flash. i was already using two div on home page which contains flash movies. but now when i placed peelawayad flash movie on home page. it appears on bottom of both div layers. i tired my best with stylesheet. z-index and many other tricks which i know best. but still not able to sucess. can someone help me to getride of this issue. help would be appriciated. thanks
here is the current site link which has the flash movies embeded.
http://www.visionetsystems.com/test/
Source Files are as under:
http://board.flashkit.com/board/attachment.php?attachmentid=64690&d=1196368726
@TS & Jimbob:
Right now, my laptop (with source files) has crashed and will return next week. When I have it back, I'll release the source code and you can play around with it.
@shahid hussain:
You're right, I had this problem too and wasn't able to fix it. Did you try putting the "peel code" (peel.js" in the section of your website?
I'm sorry, but I really don't have any clue. Please come back if you found the solution!
Actually I don't need the source now...to reduce the size of the peel without distorting you just need to keep the correct ratio between the large.jpg and the .swf file.
shahid hussain - I had similar problems with other flash on the page and this is the reason why I reduced the peel size so there is no overlap.
@TS & Jimbob:
Right now, my laptop (with source files) has crashed and will return next week. When I have it back, I'll release the source code and you can play around with it.
Thanks Marco, that will be great, look forward to your releasing flash source.
hi,
i have created a page and i use peelawayad file which is in flash. i was already using two div on home page which contains flash movies. but now when i placed peelawayad flash movie on home page. it appears on bottom of both div layers. i tired my best with stylesheet. z-index and many other tricks which i know best. but still not able to sucess. can someone help me to getride of this issue. help would be appriciated. thanks
here is the current site link which has the flash movies embeded.
http://www.visionetsystems.com/test/
Here is the Source Code i have been used in the website
Congrats Marco,
The troubleshooter was the magic bullet. I downloaded both zip files and tried both...no luck on the original, but the troubleshooter worked like a charm. Now I just need to figure out how to modify my JPGs so I can replace yours with mine.
it works great except when i change the .js you supplied to make the link open in the same page, i also get the transparent fold when i hover. iv tried all the tricks mentioned here and cant work it out.
any help would be great
Thanks again
Many thanks for making flash source (large.fla) available.
Modifying large.fla and peel.js to cater for target frame for any ad is a simple step. However, it seems the act of loading the source into Flash CS3 Pro and re-publishing it (as flash 8, actionscript2) upsets the masking routines such that reflection of the ad is lost during the peel. The masking to give the relfection is beyond my flash skill level at present, Should anyone else with a more detailed understanding of such flash techniques be interested I'd be happy to colaborate?
@ TS - you're right. I believe the mess up is happening when the .swf is published to a newer version.
Okay, I don't think this has been said yet so here we go...since something is messing up when people are updating the .fla and .swf to make it open in the same window, I think this is what can fix it...
Marco:
In the Large.fla you provided, on frame 44 in the Action Layer there's this code:
bt.onRelease = function ()
{
getURL(_root.ad_url, "_blank";
};
I think all you have to do is change "_blank" to "_top" , and then republish the .swf
Is there any way to donate money for all this effort, Marco? Even sending you a gift card or something...man...I'm very appreciative of this resource. Please let me know.
That's ("_blank" to "_self" what I did with the updated version you can find in the comments. I don't know why it's "invisible" now. Do you have it working correct? If so, please contact me and send me the correct file and I can post it here again.
Like I said before, there's no need for a donation. Reactions like you give are enough "donation" for me! Just keep on checking on this website or subribe to the feed for new articles will do it for me .
I downloaded the source.zip again, and checked the large.fla again...frame 44, Action Layer still says "_blank". Not sure which file you are referring to...?
I can change the Action Script in the large.fla for you, send it over to you, and then you could republish it via your version of Flash Pro. I think that would fix the problem, since it seems to be an issue when the large.swf is republished in a newer version of Flash Pro...thoughts?
No, I was referring to this large.swf that I placed in the comments above.
That one works with the "_self" thingie, but for unknown reason the peel is transparent. If you can make it working (without transparent peel), that would be enough donation for me .
Yeah, I'm sure about the donation, I don't even have a PayPal account (yet ).
If you have the script on www.example1.com and wish to include it on www.example2.com then do this:
1* open peel.js and change peel/small.swf to www.exaple1.com/peel/small.swf (change 4)
2* upload a crossdomain.xml to your peel folder.
3* Call the java and your Done
First off, thank you very much for the script and flash source, this is an excellent resource.
Has anyone found a fix for the problem TS reports with lost reflection?
I just tried this in Flash 8 and get the same result.
When I open large.fla in Flash 8 and Test Movie, the peel reflection is lost. Get the same results in CS3. At first I thought it was a CS3 issue, but I get the same results in Flash 8.
Marco, what version of Flash are you using to build/publish the original?
, and it looks like a comment???). When I open my index page, I see the corner rolled with my image, but it won't roll, and the url wont redirect. So very close...any ideas? 
