Anime walk onto website

Wondering how to accomplish a certain animation task? Ask here.

Moderators: Víctor Paredes, Belgarath, slowtiger

Post Reply
Rhain
Posts: 2
Joined: Fri Aug 27, 2010 10:48 pm

Anime walk onto website

Post by Rhain »

I love the little Scottish character (the green guy) who swings onto Anime Studio's website. Is there a tutorial anywhere that shows how this can be done? :)

Thanks for reading :) and answering of course.

Rhain
User avatar
Víctor Paredes
Site Admin
Posts: 5646
Joined: Wed Jan 26, 2005 12:18 am
Location: Barcelona/Chile
Contact:

Post by Víctor Paredes »

I think Vern is the more indicated to guide you with that character.
Anyway, if you make all the tutorials which come with the software you should be able to make something like that :wink:
Image Image Image Image
Moho Product Manager

www.mohoanimation.com
Rigged animation supervisor in My father's dragon - Lead Moho artist in Wolfwalkers - Cartoon Saloon - My personal Youtube Channel
User avatar
heyvern
Posts: 7035
Joined: Fri Sep 02, 2005 4:49 am

Post by heyvern »

What are you interested in learning? Putting a character in a web site like on the Smith Micro site?

Smith Micro is using http://www.liveonpage.com/ which appears to be a Flash based solution to embed video/animation in web page along with some other features for promotional purposes. There are other ways to achieve this type of thing using Javascript and the DOM. Do a search on Google. There may be some other free stuff out there you could use without needing to learn JS and DOM manipulation.

As far as the character and animation goes... well like Selgin says, read the documentation and practice practice practice. ;)

-----------------

p.s. The green dude was originally created by me for the videos I did for AS 7 (sans the kilt). Smith Micro added the mouth switch for lip sync, added the kilt and hat and did the animation they use on their site. When I saw that I almost fell off my chair laughing! I must have watched it like ten times in a row. It was so strange seeing that guy talking and hopping around in a kilt.

I thought I must have either blacked out and done that animation and didn''t remember or it became real like Pinocchio. It was like it came to life on its own. ;)

-vern
Johnny
Posts: 47
Joined: Tue Aug 28, 2007 8:15 pm
Location: Omaha, NE
Contact:

Post by Johnny »

Actually, we just did this at work with a real person. Can't give the website but I can tell you what we did.

1. Produce your Video / Animation with your background being a chroma color that you can key out later. Because you're doing animation, you're super lucky you know all the colors you're going to use on your main subject. Your color key should not be included anywhere on your subject or they'll turn into swiss cheese when you key out the color.

The bright purple #ff00f0 is a pretty good choice for most setups, depending on your color palette.

2. Bring your footage into Adobe After Effects (sorry, it's pricey, but you can't beat the flexibility and power of After Effects!!) and apply a chroma key filter to your animation with your background color. The background should be knocked out, revealing the background of your composition.

3. The important step! Use After Effect to export your video as an flv with an embedded alpha channel.

4. You should now have an FLV with an alpha.

5. Load up Flash, create a new file with matching size from your video.

6. Drop in an FLV player component.

7. Connect the FLV player component to your alpha channel enabled FLV file.

8. Publish your .swf (and .html if you want to get the easy embedding code) and you're good to go!

9. You can just embed the .swf file with object code and use CSS for positioning - we went with absolute positioning to get it exactly where we wanted it.

Hope this helps!
Rhain
Posts: 2
Joined: Fri Aug 27, 2010 10:48 pm

Thank you

Post by Rhain »

Hey Guys -- thanks for responding it is much appreciated!
Post Reply