Jump to content
Search Community

Salakala

Members

  • Posts

    19

  • Joined

  • Last visited

 Content Type 

Posts posted by Salakala

    It's the season (Simple snow animation in GSAP and Animate CC)

    in Banner Animation

    Posted

    Hi!

     

    This has been a recurring question for me every winter season of making banners and I have never found a good working solution.
    I have AnimateCC (Canvas)+ Greensock workflow and I need to animate some snow falling  in the background during the banner.  A simple setup with 2-3 different starting symbols for snow and a way to place them on the canvas randomly and moving them randomly from top to bottom inside a timeline. I have a sturdy knowledge how to use Gsap and timelines in banner workflows but other then that I'm pretty useless with code.  Plenty of snow tutorials available in GSAP but none in Animate CC using canvas and GSAP.  So the question is: how do you randomly duplicate a movie clip and make each movie clip follow a random path. Any hints would be apreciated. Attached is a simple banner template that shows the timeline control that I use and includes text and snow symbols.

    snowbanner.fla

    Overwrite a tween in another timeline (animate cc)

    in Banner Animation

    Posted

    35 minutes ago, ZachSaucier said:

    Hey Salakala. I recommend using .fromTo() instead if you need to do that sort of thing. Alternatively you could recreate the timeline when you restart it.

    Thank you for your anwser. Please elaborate. How would fromTo  resolve the situation.  The idea is that if I make banners then "tl2" is doing something (like scaling an image slowly in thebackground) while "tl" contains text and other animations that are mostly in sequence. In some cases whats happening in "tl" needs to affect "tl2" action (like stop the image from scaling and making it to scale to 0. 

     

    Tanks

    Overwrite a tween in another timeline (animate cc)

    in Banner Animation

    Posted

     

    (In Animate CC) I have been at this for a while but cant figure out how to restart an animation from the beginning values when I use an overwrite.

     

    A basic example. On "tl2" timeline a symbol scales slowly from  0 to 100.

    After 3 seconds "tl" timeline overwrites and scales this symbol back to 0.

    Both of these timelines are nested inside a "maintl" that runs on a endless loop.

    In this case when "maintl" restarts the "tl2" symbol is not  at 0 scale but at where it was cleared and scaled back to 0 by "tl".

    How to restart the "maintl" so that scaling starts again from 0.

     

    var maintl = gsap.timeline({repeat:-1});
    var tl = gsap.timeline({repeat:0});
    var tl2 = gsap.timeline({repeat:0});


    //tl1


    tl.to([this.ring],{duration:0.5, scale:0, ease:"none", overwrite:"auto"},"+=3");
    tl2.to([this.ring],{duration:6, scale:2.5, ease:"none"},"+=0");


    //maintl
    maintl.add(tl,0)//starts at time of 0
    .add(tl2,0)
     

     

    Thanks in advance.

     

     

     

     

     

    Google rejects banner

    in Banner Animation

    Posted

    12 hours ago, GreenSock said:

    Alright, the fine folks at Google have updated the CDN with the latest version. 🎉 For example, the main GSAP file is at: 

    https://s0.2mdn.net/ads/studio/cached_libs/gsap_3.2.4_min.js

     

    (The plugins are there too with similar file naming conventions)

     

    Those don't have any embedded references to SourceMap files either, so they shouldn't trigger that Chrome bug or the 4th party call problem (at least in theory). Google will be updating their docs soon with the new URLs. Let us know if you run into any other problems. 

     

    Happy tweening!

    Could you elaborate what might have been causing Adwords to block the CDN provided url(4th party call error).
    Perhaps this is completly unrelated but the 3.2.4 version of gsap contains a url to greensocks site. The older version that works for me does not have that url in the code (2.1.2). 

    Screen Shot 2020-03-04 at 2.59.27 PM.png

    Google rejects banner

    in Banner Animation

    Posted

    3 hours ago, ljovcheg said:

    This banner was rejected with the same error: invalid fourth party call. And of course it passed validator. 

    Used the lib link, provided by Jack.

     

     

    Hi! As I understand they (Google) just uploaded new versions of GSAP to the Google CDN. This is fine but I dont think thats where the error is. The error is probably somewhere with Adwords system or Doubleclick.   (i think in my case it was a Adwords banner).  

    Google rejects banner

    in Banner Animation

    Posted

    1 hour ago, GreenSock said:

    I'm not sure, but have you tried the updated GSAP file?

    https://s0.2mdn.net/ads/studio/cached_libs/gsap_3.1.0_min.js

     

    Looks like you're using an outdated one. 

    I have not had the chance. The next campaign that asks for GDN banners I will slip one gsap 3.1.0 version in. See if it makes a difference. Though it should not matter as the rejection was weirdly for the domain not  a specific javascript file.

     

    Google rejects banner

    in Banner Animation

    Posted

    I don't have direct discussion with Google however the media company reached out to google tech support and the answer from them was that the error has something to do with the landing page that they had entered. Media changed the landing page in adwords system but the result was the same. Then media removed the gsap and createJS links after wich the banner was accepted by the system (although it did not animate offcourse anymore, sic). I went back to gsap 2 but have not had the chance to test. Right now we sent them gif versions as the campaign is at a deadline. Other banners (ones that did not use adwords but were also done with gsap3) worked fine. No errors. Probably missing something obvious here.

     

    Template used to publish below.

      

    <!DOCTYPE html>
<!--
GOOGLE AD DISPLAY NETWORK TEMPLATE v.1 /S.K/ 03.01.2020
-->

<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="$VERSION">
<meta name="ad.size" content="width=$WT,height=$HT">    
<title>$TITLE</title>
<!-- write your code here -->
<style>
html, body{
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
}
#canvas{
	position: absolute;
	top: 0px;
	left: 0px;
	-moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	cursor: pointer;
}
/*#border{
	position: absolute;
	left: 0px;
	top: 0px;
	width: calc($WTpx - 2px);
	height: calc($HTpx - 2px);
	border: 1px solid #000000;
	pointer-events: none;
}*/
</style>    
$CENTER_STYLE
<script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/createjs_2019.11.15_min.js"></script>
<script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/gsap_3.0.1_min.js"></script>
$ANIMATE_CC_SCRIPTS
$SCRIPT_START
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
	canvas = document.getElementById("$CANVAS_ID");
	anim_container = document.getElementById("$ANIM_CONTAINER_ID");
	dom_overlay_container = document.getElementById("dom_overlay_container");
	$CREATE_LOADER
	$LOAD_MANIFEST
	$PRELOAD_ASSETS
}
$HANDLE_FILE_LOAD_START	
	$HANDLE_FILE_LOAD_BODY	
$HANDLE_FILE_LOAD_END
$HANDLE_COMPLETE_START
	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
	$CREATE_STAGE	
	//Registers the "tick" event listener.
	$START_ANIMATION	    
	//Code to support hidpi screens and responsive scaling.
	$RESP_HIDPI	
$HANDLE_COMPLETE_END
$PLAYSOUND
$SCRIPT_END
<!-- write your code here -->
</head>
<body onload="init();" style="margin:0px;">
	<div id="$ANIM_CONTAINER_ID" style="background-color:$BG; width:$WTpx; height:$HTpx">
		<canvas id="$CANVAS_ID" width="$WT" height="$HT" style="position: absolute; display: $CANVAS_DISP; background-color:$BG;"></canvas>
		<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:$WTpx; height:$HTpx; position: absolute; left: 0px; top: 0px; display: $CANVAS_DISP;">
		</div>
	</div>
    $PRELOADER_DIV
</body>
</html>

     

    Google rejects banner

    in Banner Animation

    Posted

    9 minutes ago, davi said:

    I've noticed this too. Perhaps their validation tool, HTML5 Validator, has a list of accepted CDN links and the new GSAP CDN needs to be added to the list in that tool. They need to add the new CreateJS as well. Anyone gotta connection?

    The validator actually is fine (works there, no errors).  The error ocurred when I sent the banner to the media agency and they wanted to put the campaign online. Google Ad Studio or what ever they are using for Adwords rejected the banner with the error code : "Invalid fourth party call". And shows its own CDNs domain (https://s0.2mdn.net) as the offending url. :)

     

    Google rejects banner

    in Banner Animation

    Posted

    Hi!

     

    Google keeps rejecting Animate CC banners made with greensock 3 .01. Reason of rejection is that there are external resources loaded.

    However I use the greensock and createjs from Googles own CDN.

     

    <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/createjs_2019.11.15_min.js"></script>
    <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/gsap_3.0.1_min.js"></script>

     

     

    Has anyone come across this ?

     

    Pendulum slow-down effect

    in GSAP

    Posted

    Hi!

     

    Is it possible to animate a pendulum slowing down like effect with greensock's yoyo and repeat function where each repeat cycle rotates the pendulum less and less.

    Staggering has the cycle function for this.

     

     

    Animate CC 19.1 change

    in Banner Animation

    Posted

    2 hours ago, Carl said:

    yup. in Animate 19 Advanced Layers is a feature with turns layers into movie clips. So if Advanced Layers is turned on, everything in a layer is wrapped in another Movie Clip.  This is cool because it allows you to add filters and color effects to everything in an entire layer... but uncool because it breaks your code :(

     

     

    Is the name of this movie clip that that things are wrapped in known. Can it be targeted by code?

     

     

    Animate CC 19.1 change

    in Banner Animation

    Posted

    Hi!

     

    I use Animate cc in conjunction with greensock to develope banners and animation.

    In Animate cc 19.1 there looks to be a bug or change in code that affects how nested animations work in symbols.

     

    Used to be able to do this:

    tl.to([this.sym1.sym2],1,{x:"-=500"},"+=0");

     

    Moves sym2 inside sym1 500 pixels. 

     

    Making a new animation in "19.1" this no longer works. However opening a file in "19.1" made in version "18.whatever" this still works.

     

    If possible please confirm behaviour. Or perhaps there is a better way of targeting nested symbols.

     

×
×
  • Create New...