Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by fripi

  1. Great, thanks Carl, indeed much easier than what I had ?
  2. 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
  3. 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>
  4. 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
  5. 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...
  6. 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?
  7. 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?
  8. I'll try to understand this code, but canvas is so hard
  9. 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
  10. 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
  11. fripi

    Led wall

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

    Led wall

    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
  13. fripi

    Led wall

    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...
  14. 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
  15. 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
  16. 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?
  17. 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
  18. 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/
  19. 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
  20. 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
  21. That's what I thought :-/ My PNG are saved with https://tinypng.com/ I think it's a mix of 8 and 24, it's very usefull for banners. I only got the problem on PC with Windows 10, non retina display tested with those browsers: firefox 37.0.2 chrome 48.0.2564.109 edge 25.10586.0.0 On the mac I've no problem but it's a retina mbp 15" I removed the force3D: true or false
  22. Just to inform those who are interested: Doubleclick is working on a new asset to create some paralax effect that follows the mouse position in the page, and not only in the banner. But it's still in beta and if you want to play with it as soon as they are ready you need the studio certification.
  23. Sorry to dig up some old posts but I'm getting this pixelated problem on scaled pictures but only on PC So I tested it on Apple (firefox, chrome, safari) and PC (firefox, chrome, edge) http://www.sharpness.be/demo/201602_keytrade/KTB_keypack201602_300x250_FR/ I made screenshots to illustrate the problem, the Apple version is a little crispier in reality but had to scale it down due to the retina screenshot, but you can see the problem on the PC version, the borders of those png files are very ugly. What I tried adding and didn't changed anything: to the elements: z: 0.1, rotationZ:"0.01deg", force3D: true to the parent container: css:{perspective:600} to the elements: force3D: false to the elements: transformPerspective:1000
  24. Hi, the title says a lot already, a client wants to move an element in the banner in function with the mouse position in the page, not only when the cursor hovers the banner. In horizontal formats it just follow the X-axis and in vertical formats the Y-axis. I found some codepens and adapted one that uses easelJS but as soon as we go out of the iframe region it isn't followed anymore, is there a possibility to track it as long as the cursor stays in the browser? http://codepen.io/anon/pen/eJrJGy