I am looking to create a animation movie, but instead of using Flash I am using HTML5 canvas.
In flash professional, there was a great timeline which allowed to create animations very easily. There were separate timelines for separate movieclips.
Is there any framework/library for working in a timeline like environment in HTML5 canvas?
If not, what is the best way to create animation movies in HTML5 canvas?
Adobe have created a timeline based tool for DOM elements, but sadly it doesn't use the canvas element. It will use html that contains a canvas element though.
Its certainly work a look:
Adobe edge animate
If you come from a Flash background, you should check out Grant Skinner’s EaselJS.
EaselJS: http://www.createjs.com/#!/EaselJS
It’s a canvas drawing library that gets its flavor from the Flash API—you get the stage and displayObjects you’re used to. But it uses javascript and canvas to drive and display your animations.
If you have exsiting Flash assets, you can use his Zoe tool to convert your .swf into spritesheets that canvas can display. I think I read somewhere that Grant Skinner and Adobe collaborated to make Zoe very accurate and stable—but don’t quote me on that!
I guess in theory you could:
Do your future development in the fantastic Flash environment
Use Zoe to convert the .swf into spritesheets
Use a true canvas drawing library like EaselJS or KineticJS to control the sprites. (these libraries love spritesheets!)
Related
I have a html5 to flash related question. Because flash to html5 is so common, it is hard to search for. So I want to ask this question directly now:
Is there a way to use flash to call or embed a html5 game inside the swf?
background: I have a 2d html5 game, which I want to bring to some gaming portals. There are still many portals, which just add flash games to their sides.
That made me thinking about a walk around to bring my game to this portals as swf in some way. But is it worth thinking about it? I have no clue where to start >.<'
Is it possible?
I am developing a 2D game using Adobe Flash Pro CS 6 and ActionScript3. I am having some trouble in developing some effects e. g. bomb blast, particle effects etc. I want to know, whether I can use After Effects for those and then use them the game. Please suggest me.
There's no problem of using any graphics data from any program in Flash as long as flash can support the file format.
In case of After Effects graphics, you'll probably have to export them as a PNG file sequence, so they'll most probably be pretty large in file size.
To import:
You can either make a movie clip and just import the first image of a sequence with CRTL/CMD + R and Flash with be "smart" enough to suggest to load the other files of that sequence.
If you want, you can load them during run-time, add them to the array/vector, create a Bitmap object and change it's bitmapData property on enter frame/timer to animate it.
If you are decided on using the actual After Effects graphics rather than emulating them using an Actionscript 3 particle effect, I'd actually recommend exporting them as video on an alpha channel and then converting that to flv and then hosting them individually and streaming them in via Netstream and placing them on the proper layer via an addchild. If bandwidth isn't a huge concern here, this would be a good method for achieving this effect.
Here is some documentation on Netstream. http://help.adobe.com/en_US/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7d4e.html
If this seems like it might achieve the desired result, I can explain further if needed.
I'm building an HTML5 game based on a drag and drop but i'd like to make the object moving automatically, since i'm not using canvas, is there any alternative i can use to the kinetic.js ?
A good alternative to canvas is RaphaelJS.
This library allows you to define objects and animate them on the screen.
It has many features that are useful in game building:
automatic animation of CSS attributes.
built in drag-drop.
mouse and touch (!) event handling.
built in hit-testing.
compatible with older browsers (yes, talking about you internet explorer!)
change elements -- move, rotate, scale
advanced position tracking (transforms)
a proven track record
and if you're artistic, you can use adobe Illustrator art in your game.
you could use JQuery draggable and droppable with some animation to make it automatic ( or use CSS transition)
What I need to do is create a simple preview of a minecraft "dude" with the correct texture applied.
I'm not concerned with complex animations (yet) or detailed lighting (yet) but I'd like to make it using canvas and not rely on WebGL(not really that widely supported yet).
What technologies would you recommend for this set of limitations?
Ah, also, I don't need to edit or save the skin or whatever, just a simple display.
THREE.js is a popular javascript 3D library, it supports both canvas and WebGL
I'm new to html5 and have been playing around with the canvas. I'm wondering when the canvas would really be necessary/useful? i.e. when is it meant to be used?
If i need to do simple animation, like move tags around, do i really need a canvas or is it better/easier to just use jquery/js?
With help of canvas you can create 2D graphic applications, animations, simple transformation of images (like rotating them), GUI etc. Some examples:
Asteroids game
jigsaw puzzle
About GUI, unfortunately I can't load a site, no idea why... it was called iWidgets.com, the only thing I've found is a screenshot. You can see blue pipeline there, they bound elements. It was done with help of canvas; while moving elements, pipelines also were redrawing; when you change active element all its connections changes color to yellow (so you see dependencies). Nice project, I hope it is not accessible just for a while...
Good article about how to use it is here
From "An insight into the HTML5 Canvas Element":
The canvas element is interesting and
worthy of focus because it enables,
for the first time, direct drawing of
graphics within a browser without the
use for an external plugin like Flash
or Java. The beauty of canvas is that
it’s controlled entirely via simple
JavaScript code, meaning it builds on
the powerful functionality JavaScript
already provides and doesn’t require a
crazy learning curve to use.
Choosing to experiment with canvas
over other new elements was simply
down to it’s functionality as a
graphics platform, which inherently
makes it a potentially interesting and
rich platform to play with. It was
decided that pushing the flexible
canvas element would produce the most
interesting results that we can use in
the application.
Another deciding factor for choosing
canvas was to test the animation
capabilities and the possibility of it
being a potential Flash replacement.
Now Flash obviously has features that
canvas could never emulate, however
it’s an exciting concept nonetheless
to see exactly what could be achieved
with canvas that would normally be
done by reaching for Flash.
read that article to get more useful information
PS. If your animation is about tags moving (like parts of your page), then canvas does not fit. Canvas is for graphic rendering. So in that case you will use jquery or other JS libraries.
Here's the best practices for deciding when to use CSS3 Transitions / Animations or Canvas. Keep in mind that if you're using jQuery, under the covers they will be using CSS3 transitions or animations when possible.
CSS3 Translations / Animations - use these if you're animating DOM element styles, such as position and size
Canvas animations - use canvas animations if you're animating something more complex, like if you're creating an online game or building a physics simulator. If you're animating 3-d models, you'll definitely want to use canvas so that you can leverage WebGL
Canvas gives you access to the pixel level of the graphics. If you wanted to do a checkerboard transition you could do that with a script in canvas but not in jquery.
For a few examples of what is possible (already been done) see http://www.netzgesta.de/transm/