Anime walk onto website

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

Moderators: Fahim, Distinct Sun, Víctor Paredes, erey, Belgarath, slowtiger

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

Anime walk onto website

Post by Rhain » Fri Aug 27, 2010 11:10 pm

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.

User avatar
Víctor Paredes
Posts: 4960
Joined: Wed Jan 26, 2005 12:18 am
Location: Ireland/Chile

Post by Víctor Paredes » Fri Aug 27, 2010 11:46 pm

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:
Víctor Paredes
Former Moho Product Manager
Rigger and animator in Cartoon Saloon - 'Wolfwalkers' & 'My father's dragon'
My Youtube Channel - My webinars
User avatar
Posts: 6964
Joined: Fri Sep 02, 2005 4:49 am

Post by heyvern » Sat Aug 28, 2010 7:08 am

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

Smith Micro is using 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. ;)

Posts: 41
Joined: Tue Aug 28, 2007 8:15 pm
Location: Omaha, NE

Post by Johnny » Mon Aug 30, 2010 9:06 pm

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!
Posts: 2
Joined: Fri Aug 27, 2010 10:48 pm

Thank you

Post by Rhain » Tue Aug 31, 2010 11:20 pm

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