Search the Community
Showing results for tags 'canvas'.
Found 100 results
-
Hi! As discussed in this forum before Flash is dead and I have to switch to HTML5 banners. I have tried different solutions and now planing to use Flash CC html5 canvas animation until I learn how to make perfect hand coded and animated banners with Greensock. As for the background I have previously used Greensock (I think it was the same) library but after years passed without banner work I didn't use it and now in this summer I just started again with regular tween and timeline. But now my biggest problem with the change is not the file size or how to animate. I am in trouble of adding ClickTAG to the banners. I want to add it in Flash as actionscript layer but as I understand html5 canvas is using JS so I can not use old as klicktag code. What I have now is > this.button_1.addEventListener("click", fl_ClickToGoToWebPage); function fl_ClickToGoToWebPage() { window.open("ClickTag", "_blank"); } + a button in stage with instance name button_1 - but sadly this doesn't work. I know that I could add <a> link around the canvas in html but it means I have to make a new one every time when I publish again. So when you are in a rush and make some small correction in banner it can be easily forgotten. Any help much appreciated!
-
I'm currently building an animated banner using Canvas. I've got coloured SVG dot graphics set as Image() objects on my canvas. I've been animating the dots on the canvas along x,y paths and I'd like the dots to fade out by the end of their animations... I can't seem to figure out how to animate opacity values in canvas using TweenLite... In fact, I'm not even sure how to animate opacity on the dots at all, even through plain JavaScript.. I haven't been able to find any answers on Google.. Does anyone here know how to achieve this desired effect? (preferably using TweenLite) For context sake, here is a small snippet of the code I'm currently working with: function drawDot() { ctx.drawImage(orDt, orDtObj.x, orDtObj.y); //draw an orange dot in the canvas } function reAnimateDot() //set dot back to it's origin { orDtObj.x = xDotOgn; orDtObj.y = yDotOgn; animateDot(); } function animateDot() { var angle = Math.random()*(Math.PI*2); console.log('>> the angle : '+angle) var radius = 100; //find the end point for our dot var xEnd = orDtObj.x + radius * Math.cos( angle ); var yEnd = orDtObj.y + radius * Math.sin( angle ) ; orDtObj.xEnd = xEnd; orDtObj.yEnd = yEnd; //reDrawUnit is a function that redraws everything during animation (refresh/frame-rate function) TweenLite.to(orDtObj, 2, {x:orDtObj.xEnd, y:orDtObj.yEnd, autoAlpha:0, ease:Quad.easeOut, onUpdate:reDrawUnit, onComplete:reAnimateDot}); }
-
Hi, I have a project where I need to remake a large number of old Flash files in a touch friendly format, by building them with canvas, javascript and so on. I was hoping to figure out how to use the Flash to html5 canvas approach to do this, and make use of GSAP as well. At the moment I am still testing things out, and I am finding that tweens done in my Flash file with createjs work predictably, but those done with gsap are less reliable. Some tweens work reliably (eg rotate) others (eg scale) have no effect. Also, sometimes the entire file breaks down for no obvious reason (at least to me...). Do you think this is because I have set it up wrong, or is there just a basic incompatibility between gsap and Flash to canvas? If it is something I have set up wrong, are there any examples I could take a look at of using Flash to html5 canvas along with gsap? Thanks. ps I realise this is an as3 forum, is there anywhere more appropriate to post this?
-
Hello everyone, Im trying to generate particles in HTML5 canvas and then fade them in or out with random delay and animation duration time. Ultimately creating the effect of stars appears in the sky. So far i've been able to generate the particles with rgba() colour but was unable to animate the alpha value. In the Codepen provided if you change line 18 from _this.alpha = 0; to _this.alpha = 1; you will see that the particles are actually being drawn on the canvas. Im not sure if i can modify directly an rgba value of a canvas shape with TweenMax or i need another approach. My animate function looks like that: function animate(){ for(var i = 0; i < bubbles.length; i++){ var current = bubbles[i]; var newAlpha = i * 0.1 % 1; // TweenMax.to(current, 1, { color: 'rgba('+ current.color + ', '+ newAlpha +')', delay: 0.5, onComplete: function(){ console.log('Completed!'); } }); } loop(); } and i have the loop function to redraw the canvas on every frame: function loop(){ for (var i = 0; i < bubbles.length; i++) { bubbles[i].draw(ctx); } requestAnimationFrame(loop); } Im not sure if im doing the requestAnimationPart properly as well. CodePen: http://codepen.io/MomchilGorchev/pen/mJBBvE Any advice will be much appreciated! Thanks!
-
Hello again! What would you think is the best way to animate a huge circle with GSAP? I've tried : Changing the width/height of a div with border radius (small to big) Changing the scale of a div with border radius (big scaled down to small and then scaled back up) Changing the width/height of a svg circle For example, http://plnkr.co/edit/vgmRe65FmzmzpcpHR7KM in full screen. But the animation is not really smooth on Firefox. I was wondering if my only option is to use a canvas element. Any ideas? Thanks
-
How can I create a randomly road with GSAP? My idea is that a car moves for him in a canvas element (With Phaser Framework) When the car is off the road I want this stalling. Sorry for my bad english Regards, Nicholls
-
What are the main advantages to using canvas rather than moving around divs?
-
Hi, I am working on a project, in which I am trying to move 12 SWF files simontaneously with the help of (TweenMax.allTo). but when I try this in browser, many frames are skipping during movement. size of each SWF is 2500X2400 px and I'm using 4 MB jpg image in SWF as backfround. Code : TweenMax.allTo([CONTAINER_1, CONTAINER_2], groundFriction, { x:xPos, y:yPos} ); Both the containers are containing 6 SWF files. xPos and yPos is calculating dynamically on keyboard key down event, and I am using ENTER_FRAME to move the canvas. If someone knows how to deal with it, please help me. Thanks in advance.
-
Up to this point I have animated everything as a DOM element, but I always want to push the performance of my game more and more, so I have started to look closer at canvas. I am curious about what kind of performance gain I can expect from animating a cached javascript element vs an element on a canvas. Any resources, insights, or experiences on this topic would be greatly appreciated.
-
Hey all, Wanted to get a quick check on a theory. I have a canvas animation running, which displays a series of about 50 nodes, and has "webs threads" running between the nodes. It all has the feel of synapses in a brain and looks super cool. It's done as canvas animation because using something like d3 caused performance problems. I would rather not move to something like Easl, as all of the canvas code has already been written. I would have to translate it all to "stage". But, I would like the "nodes" to be DOM elements, so that I can more easily control content within them. I have been using absolute positioned divs, and updating their positions in the animation loop to match the canvas nodes with TweenLite.to(). This works beautifully with a few nodes on screen, but dogs down if I zoom out to see all 50 nodes at once. I guess it's to be expected. My question is: Is this an insane thing to do with TweenLite? Or is it pretty okay to let it constantly update position in an animation loop 30FPS. Or is there another technique I can use with TweenLite to get all 50 nodes to perform better? Sorry i cannot go into more detail about the project, but I think I've given enough to describe the basics. Thanks!
-
Hi, I understand how to do an animation within the DOM but I would like to see a basic example of animation within html5 canvas. Can anyone send me a basic example? Even if it's just to see a black box going from left to right. Many thanks.
-
Well, I just wanted to give back a little bit to this great community. I've combined two pieces of code to obtain very easy pixel level collision detection. It may not be "perfect" but it seems fairly accurate. Another post on the forum reference jQuery-Collision plugin, which is really efficient at providing fast rectangular detection. It of course, suffers when your images do not resemble boxes. I found this great little piece of code that does pixel level collision detection on canvas objects. Combining the two gives us a nice two layered approach to first determine if objects bounding boxes collide, then get nit-picky about the pixels. So, include both files above, drop a canvas layered below your jQuery objects with the same width & height as your stage and do the following in your game loop/update function: var breakable = player.collision( ".asteroid" ); // jquery-collision if(breakable!==null&&breakable!==undefined&&breakable.length!==0){ // first test bounding box // draw player and enemy on underlying ctx canvas context2D ctx.drawImage(player.get(0), player.position().left, player.position().top); var roid = $(".asteroid"); ctx.drawImage(roid.get(0), roid.position().left, roid.position().top); // get imageData from just the areas we need to check var imgD1 =ctx.getImageData(int(player.position().left), int(player.position().top), int(player.width()), int(player.height())); var imgD2 =ctx.getImageData(roid.position().left,roid.position().top,roid.width(), roid.height()); // now test pixel collisions if(isPixelCollision(imgD1 , player.position().left,player.position().top, imgD2, roid.position().left, roid.position().top, false )){ collide(hitTests[i].id); } ClearCanvas(); // ctx.clearRect(), so we don't leave images behind } I took this from my code, but I think the idea is pretty clear. Combining existing code gives us a pretty decent collision detection. Also, I have found that using the layered canvas allows me to draw some nice effects behind my jQuery objects while still using DOM elements to create a game. I've found that some mobile devices have trouble with straight canvas games so I think this allows me to "turn off" certain effects fairly easy. Hopefully this helps someone while creating a demo / proof-of-concept without spending a ton of time on things like collision detection. At some point, I'll get this in a nice blog post. Cheers, Andrew
- 4 replies
-
- 1
-
-
- collision-detection
- pixel-perfect
- (and 2 more)
-
How to animate a sprite images in canvas using GSAP as in this tutorial is shown?
-
I am trying to create and html5 ad unit using images, canvas and GSAP…I am having a problem seeing it up and loading thin the images…I am trying not to pull in many libraries. Any help would be appreciated. Thanks
-
Hi i have a question maybe it's simple but maybe not I would like animate a color of canvas shape but i don't understand how in my draw ctx i have this line ctx.fillStyle = colorLogo; colorLogo it's my variable var colorLogo = "rgb(65, 190, 238)"; but with css in tweeMax i don't understand how i have to proceed can you help me ? i have to create a function animate ? Thanks
-
Hello, I was wondering if it's possible to 3D-Rotate KineticJS objects (shapes). With Tweenmax. If you happen to have some examples please let me know. Thanks.
-
This is an example that I tailored that uses GSAP to imitate exploding objects. It uses multiple canvases on one element but without the need to re-draw them. I understand this might not be the best solution for large objects but it works nicely with small objects and it is easy to integrate. Please feel free to post your own solutions because honestly I think there is somewhat lack of content in the wild about canvas/DOM explosions... example here: http://cdpn.io/FpiJw (codepen) PS: Feel free to fork and change the explode code (please share here if you do). PS1: Make sure you use the SlowMo easing...
- 2 replies
-
- 4
-
-
- explode animation
- particles
- (and 1 more)
-
Hello, EDIT: I'm looking for 3D Planes in 3D space, like Flash's native 3D planes and like CSS3 3D transforms. Hard planes rotating & moving in X Y Z. I'm looking for some advice on how I may achieve a 3D Image Flip effect using GSAP JS, in the Canvas. The "cards" will be Bitmaps with transparent areas (PNGs) I intend to re-create this: http://www.westfieldbrochure.com That's a small presentation I crated using GSAP JS but in that case I used CS3 3D transforms. I would like to try it in Canvas now. But I have no idea how to start. If you guys could give me some advice I would be really grateful. Thanks in advance AB
-
Is it possible to use the Draggable util class with Canvas, specifically EaselJS? I'm creating a dial that can you can spin using throwprops. I wasnt able to use Draggable so I've recycled the dial AS3 example from here http://www.greensock.com/throwprops/ It works ok, but its a bit glitchy compared with the Draggable CSS example. I've created a Fiddle with the two versions, http://plnkr.co/edit/eKVhZL5ulUWqj5pgP9BA?p=preview Is the something wrong with the math on my Canvas version perhaps? Any tips would be appreciated.
-
I'm brand new to javascript animation. Can I use this library to tween the drawing of lines (lineTo) on the canvas element? Is there another library out there better suited for that or should I just use plain javascript and requestAnimationFrame ?
-
1. unfortunately I see a whole lot of small snippets of code on codepen, but i need to build a full website that i can animate with greensock just like i used to w/ flash but in all of the books i have, csstricks.com is awesome but it doesnt show how to build in conjunction with GSAP. 2. also the other frustration is.. should I build in canvas or use the css dom?... css is smoother canvas has performance issues tho kinetic helps that What information am i missing or not considering. I'm sure its my learning style. I see Kinetic looks good but besides an experiment here or there, id like to how its used in a full website. 3. id also be interested in sharing this info on others once i learn how to properly structure, Thanks for reading.
-
Hi, i recently tried to combine greensock with createjs/easeljs. I made this: chicken = new createjs.Bitmap('images/chicken.png'); TweenMax.set(chicken, {css:{transformOrigin:"50% 50%"}}); canvas.addChild(chicken); I know that transformOrigin is a css property method, but can i use it for object in canvas? If 'CAN', how do i do it?
-
Hi everyone, I'm new here so thanks in advance for any communal help I receive. I have a canvas element I'm rotating onMouseMove. Here's the example: http://mikewatt.info/dev/html5_tests/wheel/wheel.html My problem is that 'shortRotation' is not working. Right now I'm using simply 'rotation' because it's working and illustrates the problem area I'm having. If you click the mouse down and drag over the horizontal middle of the circle on the right hemisphere, you'll see the wheel jump 360 degrees to come back to where your mouse is. That's where I need 'shortRotation' but it's not working. Anybody know why? Thanks in advance, mikebikeboy
-
Hello, I love GreenSock, it's a phenomenal product. I am a Flash Developer migrating to HTML, Canvas, CSS, and Javascript web designing. The Javascript versions are excellent. The one challenge I am having is trying to make the CSS 3D Transformations work. I looked at the demos of how powerful these transformations can be at: http://www.greensock.com/transitions/ http://www.greensock.com/css3/ and the "CssPlugin" section of your documentation at: http://api.greensock.com/js/ But, unfortunately I see a whole lot of small snippets of code (i.e. the trailer for a really awesome movie that I can't wait to see), but I would really like to see the whole html page with the css and javascript included (i.e. the whole "unrated, director's cut with alternate endings and commentary.") After searching through the GreenSock forums I found this link that the great Carl Schooff posted some downloadable examples of CSS Transformations: http://forums.greensock.com/topic/6230-how-to-tween-css3-transform-properties/ What I'm trying to say, is I would really appreciate it, if it were a little easier to figure out how to use these powerful tools to the most. Thanks, for viewing & best wishes, J -
Hello, I've been working with the Javascript version of GreenSock v 12, EaselJs, and the Canvas element. I know that the Actionscript version of Greensock has a CircluarPath2D or something something like that, but I've searched Google and the Greensock forums and cannot find a way of actual animate the drawing of a shape like in Flash. I've seen tons of examples on "Transforming" shapes, and the drawing of shapes and then put them on the screen, but not any actual on-screen animated drawing of a shape/bezier. I also, looked into svg, but did not see an option there. Is it possible to do this without using masks? If so, please provide a very simple example or send me a link to how to do this Thanks for viewing, any help will be greatly appreciated.
