PDA

View Full Version : [Tutorial] Black and White Style Fakemon, Animated!


Magicsaur
May 3rd, 2011, 12:44 PM
http://i1184.photobucket.com/albums/z337/magicsaur/fakemonSprites/th_sprossilFRONT.gifhttp://i1184.photobucket.com/albums/z337/magicsaur/fakemonSprites/dolphlettFRONT.gif
A Pokemon Black and White Sprite Animation Tutorial
For Fakemon!

Do not use or claim the above sprites. They are © me.
I wrote this tutorial a few days ago, because I didn't see anything like this anywhere. I hope it's okay to post in this section, and I hope it helps someone! C:

With this tutorial I'm going to present a way of making animated B/W fakemon sprites that look official!


You will need:
- GIMP http://www.gimp.org/ (Photoshop works too!)
- Flash CSX


You will need GIMP for its .gif saving features, and open as layers feature. Some version of Flash is needed to actually build the animation itself. I use CS4. If you don't have Flash, you can use a trial version, available here: https://www.adobe.com/cfusion/tdrc/index.cfm?product=flash&loc=en


To begin, we first need to make a static, motionless sprite in the Black/White art style. Here are my steps.

http://i1184.photobucket.com/albums/z337/magicsaur/BW%20ANIMATION%20TUT/sketch.pnghttp://i1184.photobucket.com/albums/z337/magicsaur/lines.pnghttp://i1184.photobucket.com/albums/z337/magicsaur/flatColor.pnghttp://i1184.photobucket.com/albums/z337/magicsaur/shade1.pnghttp://i1184.photobucket.com/albums/z337/magicsaur/shade2.pnghttp://i1184.photobucket.com/albums/z337/magicsaur/th_hilights.pnghttp://i1184.photobucket.com/albums/z337/magicsaur/staticfinal.png

Now that we have a final sprite, rip it apart into parts that will be animated.

http://i1184.photobucket.com/albums/z337/magicsaur/dolphlettParts.png

Save each piece as an individual png file, cropping them so there's as little blank space as possible. They must all be transparent.

Now to Flash! Create a 96x96px Flash file. That's the size it'll be when you export the animation frames. Hopefully you saved all your parts in one folder, because now you need to import them to the Flash library.

http://i1184.photobucket.com/albums/z337/magicsaur/iMPORTLIB.png


Now drag each piece onto the stage, and make sure it's on its own layer. Pay attention to layer order!

http://i1184.photobucket.com/albums/z337/magicsaur/library.png


Now move all the parts around on the stage, until it is positioned exactly as it was on the original static sprite.

http://i1184.photobucket.com/albums/z337/magicsaur/stage.png?t=1304370335

Now you're ready to animate! I insert new keyframes and rotate parts as I see fit, in order to animate, and I animate at 24fps. Use your imagination! When you're done, your timeline will look something like this, if your animation is pretty complex.

http://i1184.photobucket.com/albums/z337/magicsaur/timeline.png

Once pleased with your results, export all your frames of animation to a folder somewhere. To do that, go to File > Export > Export Movie. A window will appear. Make sure you save as type PNG sequence, so it stays transparent. Make sure you have no dithering, that the resolution is the same as the original sprite, and that smooth is off. Include Full Document Size, as well, or it won't turn out right.

Once you've done that, open up GIMP again. Create a new picture, and delete the first layer. Go to File>Open As Layers, and navigate to the folder where you exported the frames of your animation to, selecting all the frames. After it loads, Save As .gif and check the appropriate options- save as animation and make sure that frame replace is on.

If you have done everything correctly, you will have made your first B/W style fakemon, animated!

If you have any questions/need clarifications, please ask. And please, please show me if you make anything! <3

TheAngryPidove
May 3rd, 2011, 02:06 PM
Wow! Really useful, thanks. I always could make mediocre sprites (still need to post them, waiting till I get four) but could never seem to animate. Wonderful sprites!

keshavkd
May 4th, 2011, 07:43 AM
YOU ARE A HIGHLY TALENTED PERSON MAN!!!

Logiedan
May 4th, 2011, 09:04 PM
Great tutorial, i've never considered Flash to be a choice to animate Pokémon sprites in the B/W style.

Stickied the thread, just for awhile.

countryemo
May 4th, 2011, 09:15 PM
Hey well I might as well comment, instead on keeping thoughts in my head.

First off, I wont comment on the fakemon xD. The blue looks cool though.

The blue one is extremly choppy. and maybe you can do a tutorial of flash too? video might help more, but text+pics is fine.

Great job. whatever happend to the bw shadow tut?

Rossay
May 4th, 2011, 10:46 PM
Fantastic tutorial. You could possibly expand on how to do the rotations etc for people who have never used FlashCSX before.

I'm glad you pointed out that people should use the 'Replace' method. A lot of the current animated GIFs of Black & White Pokemon which are going about, have segments of the sprites missing when you actually open them up (due to compression). This is okay for display on a website etc, but a lot of game creation software don't have support for these compressed GIFs so when they are drawn with holes in them.

For people who don't want to use GIMP, older versions of Game Maker (I recommend V7) can import a series of bitmaps or PNGs and save them as a GIF as well. And then if you wish to edit the properties of the GIF, use Microsoft GIF Animator (which can set the time between frames and looping).

Hi-Techneon
May 5th, 2011, 02:50 AM
I've to agree with countryemo, the blue one does look extremely choppy.
As for the tutorial, it's pretty good, it explains everything and actually works :D
I'm sure this'll help alot of people (like me).

Magicsaur
May 21st, 2011, 10:45 AM
Thank you!
I agree Rossay, it should go into more detail, so I'll work on that when I have time. I have some more sprites in progress using this method so I'll put them up here eventually as more examples. I hope my tutorial helped someone!

tnguye3
May 26th, 2011, 01:35 PM
Woah!
Great tutorial, I always wanted to animate sprites, so Imma try this out.
Thanks for this! ^_^

NTA
May 29th, 2011, 04:37 PM
Thanks, I'm really tempted to start creating fakemon :D

MonsterMMORPG
July 17th, 2011, 01:53 PM
wow simply amazing animated images

Draganera
July 19th, 2011, 05:21 PM
Wow, thanks for this tutorial. :3
I already knew how to make animations, but I was such a n00b and made every frame out of scratch(In MSPaint. Animated with Gimp), this way you describe in this Tutorial is very helpful! ^^

FreakReborn
July 20th, 2011, 05:00 PM
black and white style ??? are you kidding meh ?? this is way better then anything on black and white.

Logiedan
July 20th, 2011, 09:57 PM
Decided to edit the rules a bit.



Thread Revival
If you have new content you wish to post in an existing thread of yours that is older than 30 days, you may revive that thread.
Tutorial threads are an exception to this rule.



Tutorial threads are allowed to be revived, but keep in mind the quality of your posts. No spam, generic comments, etc.

ThisIsNotJared
July 25th, 2011, 06:12 PM
Thanks for the tutorial man, your sprites are excellent and your animations look way better than any official Black and White sprites! I can only imagine what kind of hacks can come out of this for Gen V!

Pr4da
July 29th, 2011, 09:48 AM
Thank you for this tutorial .

bartyboy6
January 30th, 2013, 07:10 AM
Thanks for the tutorial, mate.
although the gif moves very slowly, is there a way to fix that?

WinterKirby
January 30th, 2013, 07:25 AM
I'm not seeing it; the images are gone. Can you mirror it?

Cosmotone8
January 30th, 2013, 03:39 PM
Um, none of the images are showing up for me either. Maybe something with the hosting site happened???

Logiedan
January 31st, 2013, 03:21 PM
This tutorial was really well done, sadly the images have been taken down somehow. The creator of the tutorial has not been online since June 18th, 2011 12:00 PM so I assume there won't be any updates anytime soon.

Closed.