Jump to content
GreenSock

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

Creating a character Animation and controlling in html5

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

First of all "GREENSOCK ROCKS !!!"

 

I want to make character animation just like flash, in HTML5. I don't know from where i can start with this. :geek::ugeek:

 

Following are my options

1) Making a continuous film strip and somehow controlling the shifting the background of a div to make an animation.

2) Making an animation in an encoder or something (haven't thought of) and converting into an html5.

 

Also i want to control the animation with slider and want to synch it with an audio.

 

I know GREENSOCK can make it easier, but don't know how?? :mrgreen:

 

Link to comment
Share on other sites

Hi,

 

Yep an image sprite could be an option. Create a timeline to change the sprite and control that timeline's, progress, timescale and many other tricks GSAP has to offer. You can take advantage of labels and callbacks in order to sync it with audio.

 

Jamie set up this great example of working with image sprites, it can help you to work with that type of elements:

 

See the Pen aJcGl?editors=001 by jamiejefferson (@jamiejefferson) on CodePen

 

Also you could take a look at this video Carl made, it shows how to work with timelines, labels and callbacks:

 

http://www.greensock.com/sequence-video/

 

Rodrigo.

Link to comment
Share on other sites

Thanx Rodrigo,

 

I had gone through the example which Jamie has made. It was really helpful.

 

But I have one more problem, since I am basically from FLASH background and making an animation is much more easier in FLASH. But to make sprite of all possible animation frames as PNGs will take whole lot of effort. Let me know if there is any tool to convert an animation into an image sequence to reduce my effort and i can focus more on controlling the sprite rather than making animation frames.

 

 

Thanx Again.

Link to comment
Share on other sites

You're welcome.

 

Mhh, I've never been too much of a graphic designer, I tend to focus more on code so I don't know of any tool that could do that. What I do know is that some 3D rendering software do that for you. I don't know if you're looking for 2D or 3D animation.

 

Making a quick look in google, found this:

 

http://www.bit-101.com/blog/?p=2939

 

And turns that Flash CS6 has it's own sprite sheet generator, if you have that version you can use it, here's an official Adobe document:

 

http://www.adobe.com/devnet/flash/articles/using-sprite-sheet-generator.html

 

Also I understand that Photoshop has an animation tool and with some scripting you can turn that into a sprite, but again, since design is not my thing you'll have to look into that by yourself, or perhaps another user could give you some light in that regard.

 

Rodrigo.

Link to comment
Share on other sites

Thanx brother for the help,

 

I have achieved the character animation. But the assets for the animation i.e. pngs sequence or animation sprite are very heavy compared to the original SWF file with same animation.

 

Any idea how it can be made robust for loading the assets.

Link to comment
Share on other sites

Hi,

 

For compressing a little the images you can try some of the options in this article:

 

http://www.creativebloq.com/design/image-compression-tools-1132865

 

I usually go with Tiny PNG (if image quality is not a priority) or smush.it (if image quality has to be preserved).

 

As for preloading. If you're using jQuery or any other library, use the ajax methods of that library. If you want to go agnostic about it use David DeSandro's Images Loaded is a great resource:

 

http://imagesloaded.desandro.com/

 

Rodrigo.

Link to comment
Share on other sites

Here are some online image sprite generators:

 

http://wearekiss.com/spritepad

http://www.spritecow.com/

http://spritegen.website-performance.org/

http://csssprites.com/

 

Also using the Save for Web option in Photoshop can help in creating small file sizes based on the quality and options defined... you can also run batch commands

 

:)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×