[Galaxy 3 Themes and Apps] GuestK0091:
How to make a simple animation in MS Paint

Note: The following step by step tutorial is based on a Dutch Windows system; certain menu entries might not be well translated and are shown in Dutch in the screenshots.

The Base

This is the part where the animating happens. Make your animation using the software that you own and are comfortable with. The goal is to make a sequence of images in the .png format which the phone can read and display while the phone boots thus displaying the animation. If you have never changed anything to your phone before, you see a nice little Samsung logo animation after the kernel has booted. You can find this animation in /system/media and it’s called bootani.qmg (Samsung QImage file made using Samsung theme software). This package is basically the same package we’re going to make ourselves but with a different extension. Now that you know roughly what we want to create we will move on.

We will start the process by launching Paint.

•	Simply type ‘paint’ in the field on the start menu when you are on Windows 7 or Vista or access it from the ‘All Programs’ tab.
•	When in Paint, look for the entry ‘Properties’ under ‘File’ in paint.

[IMG]http://dl.dropbox.com/u/56762733/Bootanimations/Tutorial/Screenshots/1.jpg[/IMG] [IMG]http://dl.dropbox.com/u/56762733/Bootanimations/Tutorial/Screenshots/2.jpg[/IMG]

•	Set the image properties to 240 pixels in width and 400 pixels in height, this is the resolution of our Samsung Galaxy 3.
•	First pick the paint bucket tool from the tool menu and fill the background with black.
•	Next search for the Android logo on Google Images, find a .png file or [URL="http://dl.dropbox.com/u/56762733/Bootanimations/Tutorial/Assets/android_logo.png"]download mine[/URL], copy it and paste it in the paint window.
The reason that I’m looking for a PNG file is that it holds an alpha channel so that the background is transparent (Paint transforms it to black when pasted directly from the clipboard).
•	Without de-selecting the just pasted image right click it and choose the option called something along the lines of ‘Scale’ or ‘Transform’
•	Then set the horizontal and vertical value to 75 percent.

[IMG]http://dl.dropbox.com/u/56762733/Bootanimations/Tutorial/Screenshots/3.jpg[/IMG]

•	Since the pasting messed up the image properties simply repeat the first step. Set the height and width value to 240 x 400.

[IMG]http://dl.dropbox.com/u/56762733/Bootanimations/Tutorial/Screenshots/4.jpg[/IMG]

•	Now make a little progress bar in the middle of our Android logo which we are then going to animate.
•	First choose the rectangular shape tool with rounded corners.
•	Next change the line thickness to the thickest, the contour to solid color and the fill to none.
•	Draw the shape on top of the logo.

[IMG]http://dl.dropbox.com/u/56762733/Bootanimations/Tutorial/Screenshots/5.jpg[/IMG]

Now the base of our animation is ready.
•	Save it as a .bmp on your computer and name it ‘bootanimation_base.bmp’

The Animating

We are now going to prepare our folders for the animation. An Android bootanimation generally consists out of two parts:

•	One that could be described as the intro. (part0)

•	And one that is in a loop until the system boots up. (part1)

We find this ‘intro animation’ commonly placed in the ‘part0’ folder as a set of images. In the ‘part1’ folder we put the animation that we want to loop for the rest of the time.

You can hold on to this standard, but you can also make your own architecture. For the sake of this tutorial I will drop the ‘intro’ part and go straight to the looping animation. In this case we only need the part1 folder.

•	Make a folder called ‘bootanimation’ like I did in the above screenshot.
•	Inside the bootanimation folder create the ‘part1’ folder which will hold our animation. We don’t need the ‘part0’ folder in this tutorial as I mentioned above.

We are now ready to make our first frame.
•	Select the brush tool, set the line to the thickest again and leave the color black.
•	Then with the brush carefully draw a little on the right of the progress bar and with a little space in between the rest of the bar. This way you're making a little green bit in a black bar.

[IMG]http://dl.dropbox.com/u/56762733/Bootanimations/Tutorial/Screenshots/7.jpg[/IMG]

This is our first frame! We are going to repeat the next step a couple of times down the road so pay attention:
•	Now choose ‘Save as’ from the file menu.
•	Save you’re frame as a .png file in the ‘part1’ folder and name it ‘01.png’ Caution: Do not overwrite the bmp file by choosing ‘save’, choose ‘save as’ only!
You can probably see where this is going.
•	Once you’ve saved your file open your ‘bootanimation_base.bmp’
•	Draw a little more on the left and a little less on the right side shifting the green bit in comparison to 01.png.

[IMG]http://dl.dropbox.com/u/56762733/Bootanimations/Tutorial/Screenshots/8.jpg[/IMG]

•	Now choose ‘Save as’ again from the file menu.
•	Save you’re frame as a .png file in the ‘part1’ folder and name it ‘02.png’
•	Repeat this process of editing the bmp and saving it as a PNG until the green bit is shifted all the way to the right, and you have a couple of frames in your ‘part1’ folder. [I]Caution: Do not overwrite the bmp file![/I]
•	Once your frame looks like the following picture open the bmp one more time;
•	Fill up the entire bar with black and save it as a png changing the number so it follows up the last png you saved.

[IMG]http://dl.dropbox.com/u/56762733/Bootanimations/Tutorial/Screenshots/09.png[/IMG] [IMG]http://dl.dropbox.com/u/56762733/Bootanimations/Tutorial/Screenshots/10.png[/IMG]

Your folder should look something like this:

[IMG]http://dl.dropbox.com/u/56762733/Bootanimations/Tutorial/Screenshots/11.jpg[/IMG]

And that’s going to be your animation!

Making a PNG Sequence in After Effects

Note: If you followed the MS Paint tutorial and if you don’t own After Effects in general you can skip this part.

While Adobe After Effects is mainly seen as a video effects and motion graphics compositor, it is not only capable of exporting video, but also image sequences! Say you have made your animation in After Effects, you can simply let After Effects export each frame as a .png file to your desired location.

If you’re making a typical bootanimation with intro:

•	Set the workspace to the intro of the animation, in the screenshot the intro takes 3 seconds.

•	Choose ‘Composition’, ‘Add to Render Queue’.

​

•	Switch to the Render Queue

•	Change the ‘Lossless’ settings to PNG Sequence and ‘Output to’ your ‘part0’ folder.

•	Click ‘Render’

​

•	For the ‘part1’, change your work area to the second part of the animation.

•	Add it to the Render Queue and change the settings like you did for the first part.

•	Output to the ‘part1’ folder and click ‘Render’

You now have the animation rendered out in a two part PNG sequence!

Post 2/4​