Web Dizajner

October 31, 2017

For flexible scalable GSAP banners can work this code:

<script>
	function makeResponsive(isResp, respDim, isScale, scaleType) {
	var lastW, lastH, lastS=1;
	window.addEventListener('resize', resizeStage);
	resizeStage();
	function resizeStage() {

	// custom maximum dimensions
	var w = 450, h = 450;

	var iw = window.innerWidth, ih=window.innerHeight;
	var pRatio = window.devicePixelRatio \|\| 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
	if(isResp) {
	if((respDim=='width'&&lastW==iw) \|\| (respDim=='height'&&lastH==ih)) {
	sRatio = lastS;
	}
	else if(!isScale) {
	if(iw<w \|\| ih<h)
	sRatio = Math.min(xRatio, yRatio);
	}
	else if(scaleType==1) {
	sRatio = Math.min(xRatio, yRatio);
	}
	else if(scaleType==2) {
	sRatio = Math.max(xRatio, yRatio);
	}
	}

	// custom wrapper div e.g. stage
	stage.style.transformOrigin = '0 0';
	stage.style.transform = 'scale(' + (pRatiosRatio) + ',' + (pRatiosRatio) + ')';
	}
	}
	makeResponsive(true,'both',false,2);
	</script>

October 30, 2017

Maybe you can used it through actions panel on <div id='dom_overlay_container'></div>

Just paste this code in actions panel:

var div = document.getElementById('dom_overlay_container');

div.innerHTML += 'My Animated Text';

October 23, 2017

What is the best solution for flexible scalable GSAP banners?

October 22, 2017

As far as I understand...

... on example 1:1 vertical portrait in Edge Animate:

Size: 300x300

Min-width: 300

Max-width: 450

Responsive Scaling: Width

Images: HD retina support (all images are in double size) - enough for normal quality for 450x450

or

Size: 450x450

Min-width: 300

Max-width: 450

Responsive Scaling: Width

Images: HD retina support (all images are in double size) - enough for best quality for 450x450

1:1 vertical portait will be scalable from min 300x300 to max 450x450 depend of available space for banner on site.

October 21, 2017

IAB NEW STANDARD AD UNIT PORTFOLIO. No more Pop Up Ads, Floating Ads, Auto Expand Ads, Hover Expand Ads, Rich Media ads... No more standard sizes like 300x250, 300x600, 160x600, 120x600, 970x250, 728x90... Suggested 15 sec without loop, 10 file request, 50 kb zipped library...

October 12, 2017

Has Anyone tried Saola Animate - Vietnamese reincarnation of Edge Animate? I found this application today, I have downloaded and installed trial and I am trying this product now. It seems to me very familiar with Edge Animate.

June 23, 2017

I need clone of Edge Animate with TweenMax library

June 11, 2017

<!DOCTYPE html>
<html>
	<head>
		<!-- WEBORAMA SCREENAD META DATA (don't edit/remove) -->
		<!-- SCRVERSION: screenad_interface_1.0.3 -->
		<!-- SCRFORMAT: layer -->
		<!-- SCRWIDTH: 300 -->
		<!-- SCRHEIGHT: 600 -->
		<!-- TEMPLATENAME: Persgroep Parool VK HPTO -->
		<!-- TEMPLATEDATE: 2016-11-03 -->

		<script type="text/javascript" src="https://media.adrcdn.com/scripts/screenad_interface_1.0.3_scrambled.js"></script>
		<script src="https://media.adrcdn.com/scripts/jquery.min.js"></script>
		<script src="https://media.adrcdn.com/scripts/external/tweenlite/1.19.0/TweenMax.min.js"></script>
		<script type="text/javascript">
	    // <--		Do not edit this.				--> //
	    var element = 'halfpage';
	  </script>
	  <script type="text/javascript" src="template.js"></script>
		<script type="text/javascript">
			// <--		Edit the functions below.		--> //

			// This function is called when this element is done loading.
			function onReady() {
				// Do things.
			}
			// This function is called when all elements are ready.
			function onSync() {
				// Start your synced content.
			}

		</script>
		<style type="text/css">
			body {
				margin: 0px;
				padding: 0px;
				overflow: hidden;
			}
			.full {
				width: 300px;
				height: 600px;
				position: absolute;
				left: 0px;
				top: 0px;
			}
		</style>
	</head>
	<body>
		<div id="content" class="full">
			<div id="background" class="full" style="background: #EBEBEB;"></div>
		</div>
		<div id="weborama_click" class="full" style="cursor: pointer;" onclick="screenad.click();"></div>
	</body>
</html>

June 11, 2017

Use their hosted libraries https://support.weborama.nl/hc/en-us/articles/210438526-CDN-hosted-Libraries

June 11, 2017

Where is the problem? Download templates https://adrime.box.com/shared/static/xfevis0ckftkw43gkiuk6sl7i4hdm5hh.zip

I suggest changing two lines in template (adding https:) for better preview

from

to

May 27, 2017

... and when you are creating complex 300x600 HiDPI retina ready banners, you will finish with 20 x 600x1200 images?

May 21, 2017

Great news!!! In new prerelease of new release Animate CC - EASE TYPE.

May 6, 2017

In most case I need hi-quality double-sized images with dimensions with even numbers, divisible by two. In that case I cant use automated process.

April 27, 2017

Remove Edge fonts

April 27, 2017

would someone be kind checking the code ?

Where is the problematic banner?

April 2, 2017

this.exit.on("click", function() {

ExitApi.exit();

});

for button with e.g. instance name exit

and include

<script type="text/javascript" src="https://tpc.googlesyndication.com/pagead/gadgets/html5/api/exitapi.js"></script>

March 27, 2017

Hi all =) ,

Someone can tell me how i can repeat all my animation just one time (with TweenMax) ?

Thank you guys

... and if you want to elements disappear before repeating you can add next code on timeline before animations of disappearing:

mytl.call(function() {if (!mytl.loop) mytl.loop = 1; if (mytl.loop++ == 2) mytl.pause()});

March 19, 2017

One clean pure HTML/CSS/JS(GSAP) banner ad prepared for GDN.

March 18, 2017

Great, thanks. Sorry for easy question, I am not a js specialist , but I am learning.

March 18, 2017

Is is possible to use one tween (from, to, fromTo) or set for more elements:

example:

tl.from(element1, element2, element3, 1, {}); or

tl.to(element1, element2, element3, 1, {}); or

tl.fromTo(element1, element2, element3, 1, {}); or

tl.set(element1, element2, element3, 1, {});

I am particulary interested for SET, when I must SET at once many elements.

Example, on start 10 elements are hidden and then at some time they all are visible at once and then again at some time some of them are hidden at once.

March 16, 2017

Yep, I tried, it seem that we must include easeljs, tweenjs and preloadjs.

March 16, 2017

We wanted to keep it short and focused on just getting GSAP running in Animate so the intended audience is definitely people that have some experience with GSAP and Animate separately. Any changes you would suggest?

One question - When we use only GSAP in Animate CC do we need entire CreateJS library. Can we use just easeljs, preloadjs or tweenjs? Which of that library is required. I mean just for example simple inpage banners without movie, sound, polite loading...

March 14, 2017

I think is all clear, sorry I dont have a time to write manual, but best approach will be:

1. Export, edit and import back default template or just open prepared FLA like those from first link.

2. Import bitmap and vector images or create vector images and create movie clips with instance names which are ID for GSAP.

3 Code animation. You can combine (Buttons and other things) because CreateJS library must be included.

4. Publish.

March 13, 2017

Mouse Over and Mouse Out, not Mouse Down

March 12, 2017

Maybe you can start with those HTML5 banner ads templates and this simple Animate CC + GSAP banner

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Web Dizajner