Sliding flash ad over html content

[rhamej]

You know those annoying flash ads that you see sliding over the html content with the close button? Well, I was asked to make one. Personally I hate em, :sigh: but I have seen threads on here asking how to do it, so I thought I post up a quick example. It uses the swfObject. Tested in IE6, IE7, FF 1.5+, Opera9.0 and NetScape. Nothing really ground breaking but thought someone might be interested =)

Preview here <-- (http://2210media.com/uploads/slide_ad.html)

Source attached.

[phorte]

neato. Yeah hate those type of ads too, but it could for a thumbnail gallery, having the full size pic popup in that.

[gonzolo]

those are evil i hope they die a horrible horrible death!
allthough i will use it ;)

[rhamej]

neato. Yeah hate those type of ads too, but it could for a thumbnail gallery, having the full size pic popup in that.
That kinda a cool idea! =) hmmmm, gears are starting to turn in my head now :P

[Pasquale]

Good god that is horrendous and annoying. GREAT WORK :D

[rhamej]

:lol:

[hybrid101]

:lol:that's awesome, yet so horrible! i can't believe you were forced to make that
good job:thumb:

[rhamej]

:lol:that's awesome, yet so horrible! i can't believe you were forced to make that
good job:thumb:
Omg, I hope yall don't think that was what I made for the client? :lol: Thats just a very basic sample to show how it works. The one I made for the client I can't show due to contract reasons and so on =)

[somnamblst]

Can you make it "retreat/disappear" into a fixed ad on the same page the way Pointroll ads do?

[rhamej]

What I did was the exact same thing they are doing. They just have some extra javascript to resize the divs when the add shrinks.
Check out http://www.mustardlab.com/developer/flash/objectresize/

[Esseti]

Im having problems under Opera. When I click it the hand cursor stays, and I have to move it far away from the browser, or change pages for the hand to dissapear.

[rhamej]

Thats opera for ya.

[somnamblst]

What I did was the exact same thing they are doing. They just have some extra javascript to resize the divs when the add shrinks.
Check out http://www.mustardlab.com/developer/flash/objectresize/

Thanks, I am going to get into that link in depth tomorrow.

How would you go about giving the user the option of replaying after close? Say they had 2nd thoughts after they closed the sliding div?

[Jasninder]

i am using opera...no problem for me

[somnamblst]

Nothing I have changed has changed the direction or position.

[rhamej]

Nothing I have changed has changed the direction or position.
And you changed what?

[somnamblst]

Nevermind I got it




Stage.scaleMode = "noScale";
Stage.align = "LT";
slideOut._x = 10;
slideOut._y = -slideOut._height;
function slideIt() {
this.onEnterFrame = function() {
slideOut._y += (10-slideOut._y)/5;
if (slideOut._y>9.5) {
delete this.onEnterFrame;
trace('slid');
}
};
}
slideIt();
slideOut.close_btn.onRelease = function() {
getURL('javascript:hideDiv();');
};




Say you wanted to have the sliding ad be a part of a "leave behind" visual component. How would you go about giving the user the option to replay the slide?

Like this?

<a href="#" onclick="slideOut('flashcontent'); return false;" >Replay</a>

[vinayvasu]

Thanks! I have been searching for this...:cool:

[log]

What I did was the exact same thing they are doing. They just have some extra javascript to resize the divs when the add shrinks.
Check out http://www.mustardlab.com/developer/flash/objectresize/


thanks.. for link.
I had need this method.

[tornado]

People! this is the Greatest Forum on the GLOOOOOOOOBE :beam:
Thank you for this sweet post ;)

[Ianrc2000]

You know those annoying flash ads
Preview here <-- (http://2210media.com/uploads/slide_ad.html)

Source attached.

Many thanks for your script it works great for me.

Ian:s:

[thats all folks]

rhamej,

Thank you sooooooooooooo much!

[atodd66]

rhamej,

How could I use this for an "expanding" button? I want to create a menu with 6 to 8 buttons that expand or stretch when you roll over them. I want the buttons to be able to expand over the html. The space I have to work with is 640X150 but the buttons need to expand past that. The problem I have now is that the flash covers the html around it. I just set the swf to wmode transparent and am using layers in html. Visually it's great but there are some html buttons right above the menu that you can't even click on. Any help would be great! Thanks!

Andrew

[atodd66]

rhamej,

Ok forget the expanding button. Could this ad be modified to expand instead of slide when you rollover that could have buttons inside it? You would always see the ad, it would just be smaller until you rolled over it. Please help if you can!:worried:

[syragon]

great post... and for those who use opera... all i have to say is you are "speshul"

[nubreed]

nice tut thanks

[alex298]

Hello,

Excellent example!

This would be wonderful if somebody can use AS3 to do the same effect, or use AS3 to re-write the codes.

Best regards

[jaykimdotnet]

there ain't much to change for as3. Since getURL is no longer valid, just use this code to reference the JavaScript hideDiv


function gotoPage(event:MouseEvent):void
{
ExternalInterface.call("hideDiv");
var targetURL:URLRequest = new URLRequest("javascript:hideDiv();");
navigateToURL(targetURL);
}

closeAd.addEventListener(MouseEvent.CLICK, gotoPage);

[jaykimdotnet]

I'm just wondering how you keep the absolute positioning precise when you have a centered website. Should I use a script that determines the size of the browser window and adjusts the position of the flash content accordingly? If so can someone else write it? I'm lazy.

[raspjam]

i want to do 2 things different:

1)slide it vertically. I managed to do it. But i want to make the movie clip slide to the center of my web, and it just stays at top. This is the code i used:

Stage.scaleMode = "noScale";
Stage.align = "LT";
slideOut._x = 10;
slideOut._y = -slideOut._width;
function slideIt() {
this.onEnterFrame = function() {
slideOut._y+= (10-slideOut._y)/5;
if (slideOut._y>9.5) {
delete this.onEnterFrame;
trace('slid');
}
};
}
slideIt();
slideOut.close_btn.onRelease = function() {
getURL('javascript:hideDiv();');
};


2) put a rollover efect in the close button, so it changes color. As it is a movieclip, i animated it to do the effect. And named the frames "on" and "off" (for rollover and rollout). I tried to add this lines to the code, with no success:

slideOut.close_btn.onRollOver = function() {
gotoAndPlay("on");

As i'm a newbie, i have no idea of what i'm doing.

};

[raspjam]

never mind. i achieved it by doing for:

1) i open the movie clip and move the graphic down, so it will create a white space above it.

2) i changed the movie clip close button for a button.

Now i'm trying to close it with a smooth fade out. I don't like how getURL('javascript:hideDiv();'); close it. Any ideas?