fripi

But the latest version of createjs doesn't work well with that version of adobe animate canvas, I don't see errors in my console with my version the speed is right and amount of rectangles to, in your adapted version it doesn't seem to take in account my setinterval/clearinterval ? just trying to understand what's happening and to optimise my noobie code. But all in all it seems to work : http://www.sharpness.be/demo/202002_supernova/

Indeed seems to work just by adding init() at the bottom, great! I already called createjs in my codepen, strange how it reacts in yours, way to many objects compared to mine, I got max 48 green rectangles and in yours it seems endless

So I did something in canvas very simple to start just putted a rectangle, duplicated that in a circle ans animate the scale of each But I try to figure out how to put it in codepen, I linked to createjs and tweenmax, then I copied the index.html body in "html" and all the index.js in "js" but it doesn't seem to be enough : https://codepen.io/fripi/pen/gOpMJxr Archive.zip

Hi Zach, I produce banners usually in DOM or with Animate using exclusively GSAP, as I started using it since the beginning in flash years ago. But a friend asked me that, as he want's that kind of animation in background of his site (wordpress I think) and so it must be responsive for desktop and mobile, but as I never do websites, and never did such kind of animation... I was curious about performance, so I'll try in canvas (tru Animate) but then I can't do a codepen ? Thanks for your answer and the link to your article, will read it tomorrow!

Hi everyone, I need to make a responsive "tunnel" animation, based on primitive forms. Visually it's pretty simple but I admit don't know where to start, I'm no JS master at all. I have a video that shows exactly what I try to do : https://youtu.be/ClsdqojQ4hM Has anyone an idea, a simple code to achieve that? Thanks

Great, thanks Carl, indeed much easier than what I had ?

Hi, first of all sorry there will not be a codepen as it's specific to Animate CC. I'm not very experienced in canvas coding and particle effects... so I found some code and tried to adapt it to work in A.CC, you'll find the project attached. Now my questions are : how get rid of the trail, as it draws a new circle every time and doesn't delete the old one, I don't get how to do it in the code. wouldn't it be easier with a TweenMax for each particle to move around, and remove this draw update that is used now? But how to do it? again i'm lost in this code ? Thank you stars.fla

Why don't you just add all this in the template? At the same time you can add some borders, to do so go after the div "dom_overlay_container" and add: <div id="b1"></div><div id="b2"></div><div id="b3"></div><div id="b4"></div> <a href="javascript:window.open(window.clickTag,'_blank');void(0);" ><div id="bgexit"></div></a> And in the header add some styles: <style> #animation_container{ position: relative; } #b1{ position: absolute; width: 100%; height: 1px; top:0px; left:0px; background-color: #000;} #b2{ position: absolute; width: 100%; height: 1px; bottom:0px; left:0px; background-color: #000;} #b3{ position: absolute; width: 1px; height: 100%; top:0px; left:0px; background-color: #000;} #b4{ position: absolute; width: 1px; height: 100%; top:0px; right:0px; background-color: #000;} #bgexit{ position: absolute; background-color: rgba(255,255,255,0); cursor: pointer; height: 100%; left: 0px; top: 0px; width: 100%; } </style>

Hi, I would love to use Carl's solution in a banner, but pixi js isn't a DoubleClick hosted JavaScript librarie, so is it still possible without pixi? I really don't know much of canvas

As Somnamblst said it is very vendor specific, some vendors needs 2 banner files for expandables so for them usually you won't be able to control the animation, they maybe give you some options when uploading and configuring the ad. Others like to have it all in 1 with different divs so there you could just animate the divs with gsap but you'll need to implement some API functions for the metrics...

ok I found how, I stop it in 2 steps, first I stop emitting particles after 13s but the loop continues to run so that the existing particles can vannish then I stop the loop after 15s: var start = null; function renderSmoke(timestamp) { if (!start) start = timestamp; var progress = timestamp - start; //console.log(progress); var len = parts.length; ctx.clearRect(0, 0, canvas.width, canvas.height); while (len--) { if (parts[len].y < 0 || parts[len].lifeTime > maxLifeTime) { parts.splice(len, 1); } else { parts[len].update(); ctx.save(); var offsetX = -parts[len].size/2, offsetY = -parts[len].size/2; ctx.translate(parts[len].x-offsetX, parts[len].y-offsetY); ctx.rotate(parts[len].angle / 180 * Math.PI); ctx.globalAlpha = parts[len].alpha; ctx.drawImage(smokeImage, offsetX,offsetY, parts[len].size, parts[len].size); ctx.restore(); } } if (progress < 13000 || !progress ) { spawn(); } if (progress < 15000 || !progress ) { requestAnimationFrame(renderSmoke); } else{ TweenMax.to(canvas,1,{autoAlpha:0}) } } So in the code I added/changed this : var start = null; if (!start) start = timestamp; var progress = timestamp - start; if (progress < 13000 || !progress ) { spawn(); } if (progress < 15000 || !progress ) { requestAnimationFrame(renderSmoke); } else { TweenMax.to(canvas,1,{autoAlpha:0}) } Is there a better way?

Hi, Thank you, I finally used this code: https://codepen.io/MIML/pen/iBKyC but as I don't really understand the JS code used for the canvas I'm stuck on the loop, how can I stop it after 15s?

I'll try to understand this code, but canvas is so hard

Hi everyone, most of the time I create banners with simple DOM elements and GSAP, but a clients wants to use an old 2014 banner I did in AS2, so I could do it from scratch in DOM but I tought it would be a nice exercice to try out Animate CC. I already followed this great guide from Cory and learned some things regarding global vars, functions... it's impressive what comes out of Animate. But I'm stuck on a smoke effect function: import flash.display.BitmapData; var currentBitmap:String = "smoke_black.png"; function doTrail(container:MovieClip, targetX:Number, targetY:Number, type:String):Void{ //attach bitmap from the library with the linked name "adobe_flash" var myBmp:BitmapData = BitmapData.loadBitmap(currentBitmap); //create the "main_holder" movieclip that will hold our bitmap var _particle = container.createEmptyMovieClip("main_holder"+container.getNextHighestDepth(), container.getNextHighestDepth()); //create an "internal_holder" movieclip inside "main_holder" that we'll use to center the bitmap data var internal_holder:MovieClip = _particle.createEmptyMovieClip("internal_holder", _particle.getNextHighestDepth()); //set "internal_holder" x and y position based on bitmap size internal_holder._x = -myBmp.width/2; internal_holder._y = -myBmp.height/2; //finally, attach the bitmapData "myBmp" to the movieclip "internal_holder" internal_holder.attachBitmap(myBmp, internal_holder.getNextHighestDepth()); //set the particle's x & y position based on the target x & y. Offset the particle by a few pixels _particle._x = targetX + random(4)-8; _particle._y = targetY + random(4)-8; //randomly rotate the particle 360 degrees _particle._rotation = random(360); //give the particle a random scale, between 50% and 100% var randomScale = random(20); _particle._xscale = randomScale; _particle._yscale = randomScale; //give each particle its own speed _particle.speed = random(3)+1; //make it move _particle.onEnterFrame = function (){ this._xscale += 2+this.speed; this._yscale += 2+this.speed; this._y -= this.speed; this._alpha -= this.speed; //check if particle is invisible, and remove it if(this._alpha <= 0){ delete this.onEnterFrame; removeMovieClip(this); } } } This function is called from another point in the timeline by this: _root.onEnterFrame = function():Void{ doTrail(container, 0, 0, currentBitmap); } So I think the onEnterFrame could be replaced by an interval or something like createjs.Ticker.addEventListener("tick", doTrail); And some elementys like _x can easely be replaced by removing the underscore but it's more the logic of attaching a bitmap that I can't find how to do. It was a very basic code in AS2 so I hope that some of the genius present in this community can help me out with it. Thank you

Hi, I make many banners that needs to go on flashtalking, and it's pretty simple, to the end of your body code call their API : <script src="http://cdn.flashtalking.com/frameworks/js/api/2/9/html5API.js"></script> Then you should indicate what your banner container div is, in my example "container" is the ID of my englobing div <script type="text/javascript"> // If true, start function. If false, listen for INIT. var myFT = new FT, container = FT.query("#adcontainer"); myFT.applyClickTag(container, 1); </script> So their system knows that when you click on "container" it must behave as a clickTag. Next to your html file you also need their "manifest.js" which indicates the size of the ad, the main html file, the number of clicktags and if some browsers should be excluded (the backup jpg will be shown on those), for example: FT.manifest({ "filename":"index.html", "width":300, "height":250, "clickTagCount":1, "hideBrowsers":["ie8"] }); So you can remove your <a href> tag and the meta isn't needed

very impressive, I really need to learn canvas, never tried and only creating DOM banners Thanks for your help

Thanks for your advice, I'll look into your examples I'm also waiting for an answer if I may or not use video in this campaign

Yes sorry wel the idea is to write something big on the wall, like "ROCK STAR" or "THE BEST" with some fancy tv show animation it's all about light effects, glitters, flashes...

Dear community, once again a client came with a real challenge, he wants to animate a kind of "led wall" in the background of an animation (see attached screenshot). I have really no clue on how this could be done, if you have an idea please shoot Thanks

Ok so my final version, just to sum up, is to replace this TweenMax.killAll(); with var tll = TimelineLite.exportRoot(); TweenLite.to(tll, 1, {timeScale:0, onComplete:function(){ tll.kill() }}); works great thanks all

If I am already using TimelineMax in my work, does it change anything if I call TimelineLite.exportRoot(); or is it then better to continue with TimelineMax.exportRoot(); to avoid loading another timeline method? Also Diaco do I need to kill it if I use the exportRoot method or is it only usefull if I use the first method Carl explained?

Great thanks for all your answers, I've still a lot to learn about GSAP, there are so many possibilities! I didn't know the exportRoot and never tried timeScale what a productive day

Hi, I'm looking for a way to smoothly kill all tweens after the standard 15s animations. For example I have an ad in which I made an horizontal paralax animation of the background in 5 layers. After 15s I need to stop it but killAll is brutal, is there another way, to ease all tweens down smoothly in 1s for example? var tweenBg5 = TweenMax.to(bg5,speed*6,{css:{left:-1200},repeatDelay:0,useFrames:false,repeat:-1,ease:Linear.easeNone}); var tweenBg4 = TweenMax.to(bg4,speed*6,{css:{left:-1200},repeatDelay:0,useFrames:false,repeat:-1,ease:Linear.easeNone}); var tweenBg3 = TweenMax.to(bg3,speed*2,{css:{left:-1200},repeatDelay:0,useFrames:false,repeat:-1,ease:Linear.easeNone}); var tweenBg2 = TweenMax.to(bg2,speed,{css:{left:-1200},repeatDelay:0,useFrames:false,repeat:-1,ease:Linear.easeNone}); var tweenBg1 = TweenMax.to(bg1,speed/2,{css:{left:-1200},repeatDelay:0,useFrames:false,repeat:-1,ease:Linear.easeNone}); TweenMax.delayedCall(15, timelineDone); function timelineDone(){ animOver = true; TweenMax.killAll(); } Here's an example of an ad in which I would like to apply it: http://www.sharpness.be/demo/201604_keyplan/20160401_KTB_keyplan_v1_600x500_NL/

omg... that's really THE thing I hadn't tested, thanks a lot! so I wasn't completelly wrong in my code, even if it's not fantastic

Hi, I'm working on a banner and it would be nice to update a textfield in it I used the TextPlugin with a simple syntax: .set(cta, {text:"Découvrez granini<br>orange"}) But it doesn't work, so I tried in codepen and there it works! So that's why I'm not linking a codepen in this post, because I can make it work on codepen, but not in my local file, can someone look at the html attached and check if you see something, I'm turning nuts here and just can't see why it work on codepen and not in my banner. Thank you granini_breakfast_300x600_FR.zip