Member Avatar for Reliable

Does anyone know to make those FLash ads that go across the whole screen and then end up in their destination at the end of the ad? I see them sometimes on and Yahoo.com. If someone could do a tutorial on that i would appreciate it.

  • 2 Contributors
  • 4 Replies
  • 91 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Reliable

Dani AI

Generated

As clarified, the effect you describe is a "fly-in" or "floating/docking" rich-media creative: an overlay animates across the page and then "lands" in a normal ad slot. 's links on embedding are a useful start; here is a focused, modern approach and the key caveats that older Flash tutorials often miss.

A practical workflow (HTML5-first, but the same idea applied to legacy SWFs):

  1. Place an overlay element (fixed) that contains the animated creative.
  2. Compute the destination slot geometry with getBoundingClientRect().
  3. Animate the overlay to translate/scale into that rect using GPU-accelerated transforms (translate3d / scale) or a tweening library.
  4. On animation end, hide the overlay and reveal or load the in-slot creative (ensure ad-server click-tracking macros remain intact).

Example (very small, straight JS + CSS transform pattern):

var o = document.getElementById('overlay');
var t = document.getElementById('adSlot');
var r = t.getBoundingClientRect(), orr = o.getBoundingClientRect();
var tx = r.left - orr.left, ty = r.top - orr.top;
var sx = r.width / orr.width, sy = r.height / orr.height;
o.style.transition = 'transform 0.8s cubic-bezier(.22,.61,.36,1)';
o.style.transformOrigin = '0 0';
o.style.transform = 'translate3d(' + tx + 'px,' + ty + 'px,0) scale(' + sx + ',' + sy + ')';
o.addEventListener('transitionend', function(){ o.style.display = 'none'; t.classList.remove('hidden'); });

Troubleshooting and rules of thumb:

  • Use transforms (not top/left) for smooth motion. See Element.getBoundingClientRect() and CSS transform docs for details.
  • Respect z-index and pointer-events; ensure the close/skip control is obvious and keyboard-accessible.
  • Ad servers often require click macros and have rules about takeovers; coordinate with the ad network so tracking and creative URLs survive the swap.
  • Flash is deprecated (end-of-life in 2020); prefer HTML5/Canvas/SVG or libraries like GSAP for complex motion.

References: MDN getBoundingClientRect (https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect), CSS transform (https://developer.mozilla.org/en-US/docs/Web/CSS/transform), and Adobe Flash end-of-life (https://www.adobe.com/products/flashplayer/end-of-life.html).

Recommended Answers

All 4 Replies

Member Avatar for Reliable

http://kb2.adobe.com/cps/142/tn_14201.html

I've made movies with transparent background already. I'm speaking of the ads that go across the entire page or at least a large portion of it and then in an obvious spot designated for the Flash movie. Thanks for trying to help , though.

Member Avatar for Reliable

http://www.kirupa.com/developer/flash5/dhtmlflash.htm

Yep, that look a lot like what i am talking about. Only thing is I have also seen where it will end in an obvious Flash Ad container. it will go to place on that same page that it should obviously end in. So how do they pull that off? Thanks again for the very helpful link though.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.