Adobe Animate Sprite Guide


#1

Hello and welcome to this Sprite making guide in Adobe Animate (/Flash) .

Here you should be able to find all the information required to make your very own sprite. If you need any further help please feel free to leave a reply at the bottom of the thread.

Take a look at some of the best work here: SuperMechs Sandbox

Topics:

The Setup (Elcent)

Firstly you will need to acquire a copy of Adobe Animate (older versions are called Adobe Flash??)
If you are unsure how to get it give it a quick google.

If you wish to have a look at other peoples work and perhaps make remixes of them please feel free to down load the files from the Sandbox Thread. LINK HERE However these aren’t needed to make your own from scratch.

Once you have opened Adobe Flash you will want to create a new AIR for Desktop file with the rough size of 550x400 pixels. This size doesn’t matter too much but allows you space to create your drawing nicely.

Line Defaults (KilliN)

HEX Color: #000000
Alpha: 30%
Height: 0.10

image

Stuff to add:
Auto Snap
Over Drawing Lines to keep them horizontal/vertical

Colouring (Zarkares)

Stuff to add:
The common colours used
Removing tiny bits of lines to help with colouring

Gradients (KilliN)

Physical: FFDD00 - FF5500
Explosive: FF0000 - 550000
Electric: 00DDFF - 0055FF

Explosive can have some variants like FF5500 - FF0000.

Those are just the patterns, always keep in mind you can choose any color you want.

Perspective (Zarkares)

Library Feature (Xzyckon)

What
The library is where all of the symbols, movie clips and other assets are stored within the fla file.

How
To use the library you need to convert something into a symbol. This is very straight forward; highlight the sprite you want to convert in it’s entirety, right click and select “Convert to Symbol…”, you can alternatively press the F8 key to achieve this. After that a window should pop up like this…

Convert to Symbol

You want to make sure it is set to ‘Graphic’, this will allow you to edit the sprite after it has been converted. Once that’s out of the way enter a desired name for your asset and hit ‘OK’.

You will notice that your asset is now selected with a cyan hitbox that you can only manipulate as if you were using the Free Transform Tool. This is because the line work and fills are now stored within the new symbol you have created. You can drag and drop symbols into the scene as you wish, to edit the line work and such of the sprite itself simply right click on the symbol in the library and then click ‘Edit’.

Why
Generally speaking, the reason why you want to use the library is to organise your assets. If you just use the scene canvas to make and store your sprites you will soon find out that it becomes a memory hog, slowing the program down until it becomes unusable or maybe even unstable.

Tips from my Experience so far (Xzyckon)
  • Prune unnecessary nodes; as you make the line work for your assets you will start to notice nodes being left where they are not needed. This is because when two lines intersect each other they create a new node where the two meet. However if you decide to later on move or delete that intersection with the selection tool that node will still be there. This usually results in nodes seemingly being created out of thin air where they are not needed as you change the line work of your sprite.

  • Update: What I explained above is for straight lines, for curved line work specifically that’s when things get complicated since you can’t just simply delete an unnecessary node without messing up the curvature; For this I would recommend not to directly use the line work from the original sprites to incorporate into your remixes, instead I would suggest tracing over them. This because of the amount of errors that are present within the fla files, which are very apparent and unfix-able for the curved line work on these sprites. This could be because of the dev team making mistakes or it could be an artifact or corruption made during the process of converting the swf files from the apk into fla files in the first place, of which one of these reasons it is I don’t know.


  • Delete Artifacts and Node Clusters; Yes, the SM Team has made a plethora of mistakes in their sprites over the years. Many of these are unnoticeable with only the biggest of examples being visible to the game. If you plan on using their material to make remixes give the sprite a check first to see if any of these artifacts pop up. I would advise special care when using the newer ones added upon the release of SM: Reloaded.



If your line work looks like this, you’ve gone too far.

  • Make sure that your line work is set to the SM standard that KilliN has posted above across the sprite in it’s entirety. You may not know this but some of the original sprites have some lines with differing thicknesses or colours as some weird sort of artifact so if you are using those to make a remix make sure to highlight all of the line work after you are done and set it all to the default specs. You can easily tell if a sprite has this problem by double clicking on the line work. If all of the line work that is connected is of the same spec then it will all be highlighted.

Selection
Fill and Stroke

Notice the Stroke Value isn’t defined.


  • Because of how anal I am with designing my sprites, I have actually had to employ stratagy into my process. This in particular involves holding off on smaller details and slowly adding them as the overall outline becomes more and more finalised instead of adding everything at once. This becomes very apparent when dealing with detail lines that intersect curves. You will notice on certain bases that these areas do not have any detail lines, this is because I may want to experiment on that area in the future; the Mamut’s teeth/filter feeding mouth part is a particular example of this.

Mamut_Mouth

Tips from my Experience so far (Zarkares)

When I make 3d objects, I always make sure the lines are parallel to each other in order for perspective to work. You can do this by turning the Snap to Object tool on.

About me

When I was about six, my grandpa taught me how to draw a box and he pointed out which line should be parallel to which to make the object realistic. As I grew up, I loved drawing and took some art classes, I still take them now at school but I HATE painting. I got into Supermechs Sprites in 2014-2016. I started out TERRIBLE, I basically cut out objects and put everything together to try to make it look like something, but if you look closely…sigh. Then I improved as time went by, sometimes I scratch my head and get mad at the sprite I make and basically trash it.

Also remember, when making sprites, try to imagine it first then draw and look for perspective error. The most important thing is, don’t rush, no one is forcing you.

Contributions made by @Elcent @Zarkares @KilliN @Xzyckon


Other spriters are welcome to add to this post. Spam and Off Topic will have their writing permissions removed.


This guide is still very much in development.


SuperMechs Sandbox
Fan art question
:sparkles: Nominations for The Helpers of this Forum :sparkles:
Can you teach me?
#5

#10

To keep this thread clean reply’s will be deleted once answered and if needs be the post above will be update with the information that was asked.


SuperMechs Sandbox
#11

@XDiego I’ve added some perspective errors that you’ve made and how to fix them


#13

So is it ok if we post out own types of drawings? I see @Winz_Kay did it at the bottom. So, if you have any questions for it, we can just post it? Because I don’t use the Adobe Animate thing or whatever. I use Google Drawings.


#14

perfectly fine to post vector images here and ask questions however im not sure google drawings uses vectors. if it does go ahead. if it doesnt please start a new thread and we may still be able to help you :slight_smile:


#15

where can i find weapon sprites? i made custom legs but i want to make custom weapons


#16

The file contains the latest Sprites Library, i will delete soon so save in your pc.

https://mega.nz/#!hKADXYyZ!xdlUjAf2b6V18OFJlv9QMBsOW2oq89_RojKI6UVUcz0

If you need anything else, let us know.


#17

it wont let me get the sprites… i keep on clicking the file and it wont work


#18

working for me, try a different browser


#19

hey one question do you have to pay for this if i cant


#20

Animate is from adobe who charge for everything sadly :frowning:


#21

well to bad i will just have to use have to use google draw because i cant download and pay for stuff online :disappointed_relieved:


#22

The files are in Flash format, what program are you using to edit?


#23

Windows paint… i copy and paste the sprites and merge them


#24

This guide is for flash images. Have a look at the sandbox thread. At the top of the thread there should be the files that you can use.


#25

In this case you can use this link:

https://drive.google.com/file/d/0B4rcc6aXlKCLR2k5dTBETjBZQ1U/view

You will get a large .png file with sprites, you can crop and edit the images you want.


#26

If I was you I’d migrate to GIMP where transparency is supported. Using MS Paint will not get you very far.


#27

This sounds interesting this is to do some type of drawing of the mechs or something like that no?


#28

Yep :slight_smile: Have a look through here: SuperMechs Sandbox