Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

fripi

Members
  • Posts

    33
  • Joined

  • Last visited

About fripi

  • Birthday 03/27/1978

Contact Methods

Profile Information

  • Gender
    Male

fripi's Achievements

Newbie

Newbie (1/14)

10

Reputation

  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
×