[Tutorial][Bootanimation] Everything Bootanimation and related!

---

Making a Bootanimation

Introduction

Hello xda,
I’m not really into Android development at the moment as I’m just not familiar with anything coding or related, but while my knowledge of Android may need to grow some more I can share things that I already master a bit more. After all, this forum is a place to share knowledge so I hope I can help some people while I am enjoying my stay here on the forums.
Since most of the forum users are here to get the limits out of their phone and probably want to customize it too, it’s most likely that you want to change your bootanimation at some point. Most custom ROM’s already have a customized bootanimation integrated and there are also quite some bootanimations available in the theming section, but what if you want to make your own customized animation?

I wrote this tutorial on how to create a bootanimation for the people who want to experiment with the making of bootanimations, as well as the people that are good at making animations already but don’t really know what to do next. I will try to explain the making of a basic animation using the tools a regular pc user can get or already has, and also get a little more in depth at some points for people who are not satisfied with only the basics. The goal of this tutorial is to get even the less experienced users on their way, not to make the best animation ever. Also, I wrote how I did it, and how I would suggest doing it, but there might be better ways to do certain things described. If you know how to do it easier and/or better, please feel free to leave feedback. I know there are already some tutorials on this topic out there, this tutorial is not an attempt to beat them, more to enrich the available collection. While this tutorial was mainly written with the Samsung Galaxy 3 in mind, the main concept of creating a bootanimation is still the same. (original thread in the Galaxy 3 Theming section here: http://forum.xda-developers.com/show....php?t=1622279)

What you can expect in this tutorial:

• What software to use
• How to make a simple animation in MS Paint
• Make an image sequence
• Make the package ready to be installed on your phone
• Porting an already existing animation

Animation: What software to use?

Before we want to make our bootanimation we first want to plan out what software we are going to use. The first thing is of course the animation. Depending on what you’re after and your level of skill these are some of my recommendations:

Microsoft Paint – The Gimp – Adobe Photoshop – Adobe Flash Professional – Adobe After Effects

Microsoft Paint
Maybe it surprises you, or maybe you just didn’t think of it, but MS Paint is actually a good tool to start making your animation. Anyone with the Windows operating system has it installed by default so this is the software I’m going to use for the animation in this tutorial.

The Gimp - http://www.gimp.org/
Already a bit more advanced than MS Paint and therefore a better option if you want to make a more complicated animation and can find your way through the options the software offers. Best option if you want to go advanced but don’t want to spend any cash.

Adobe Photoshop - http://www.adobe.com/products/photoshop.html
I can barely imagine someone who has never heard of this software before. This piece of software is pretty much the standard in the image editing world, and I highly recommend using this software if you can afford to buy it.

Adobe Flash - http://www.adobe.com/products/flash.html
This software maybe is the best software to use for this matter, its interface is designed for the making of animations and if you know how to use it (which I sadly don’t) I recommend it. But again, it doesn’t come for free.

Adobe After Effects - http://www.adobe.com/products/aftereffects.html
Even though this software is mostly used for compositing effects on videos it does an awesome job on the more complicated animations and motion graphics. That’s why I’m using this software myself when making bootanimations.

This is some of the software I would recommend using. Of course there are many more alternatives as well as more advanced software out there, 3D applications for example like Blender, Maya, Cinema4D and 3Ds Max could also be useful depending on the complexity of your project. Right now I’m just going to stick with MS Paint for the sake of this tutorial.

Post 1/4

How to make a simple animation in MS Paint

Note 1: 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.

Note 2: The following tutorial is based on the proper settings for the Samsung Galaxy 3, which means that some settings have to be adapted to work on other phones

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 the deafault animation play right after the kernel has booted. On most phones You can find this animation in /system/media or in /data/local and on Samsung phones it’s most likely stored as one or more .qmg files (Samsung QImage file made using Samsung theme software). The way of storing and the location of the bootanimation varies depending on what phone you have. 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. 

 

•	Set the image properties to the proper pixels in width and pixels in height so it matches your phone's resolution. In my case the Galaxy 3 has a 240 pixel width and a 400 pixel height.
•	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 download mine, 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 scale the bootanimation down so it fits nice in the middle of the screen. In my case I change the value to 75 percent.



•	Since the pasting messed up my image properties I 'm simply repeating the first step. Reset the height and width value like you did in the first step (when necessary).



•	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.



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.



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.



•	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. Caution: Do not overwrite the bmp file!
•	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.

 

Your folder should look something like this:



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

Making the Bootanimation.zip

You’ve now probably made your animation, either in Paint following the tutorial, or in your own way.
Samsung stores their bootanimation as one or a few .qmg files as mentioned above. The file is actually an archive like a .zip, and that’s exactly what we are going to make. In order for our phone to display the animation we need to make a bootanimation.zip with inside it our ‘part1’ folder we just made. A desc.txt file on the same level as the ‘part’ folders tells the phone how to play the animation:



• It tells the phone in what resolution to play the animation, for the SG3 it is 240 400
• The following number is the frame rate in which the .png sequence has to be displayed, in this example it’s 25 frames per second. The human eye experiences everything above 25 frames per second as a fluid movement, so this is your minimum frame rate if this is the effect you’re after. Anything below 25 frames per second appears choppy to the eye (which could also be an effect you purposely want to achieve). I recommend 25 frames per second for fluid animations as more frames per second could cause lower-end phones to display the animation incorrect, because it gets too much images to process at once. For more powerful phones it doesn't matter that much.
• The next two lines are the folders that are used in the animation with the number of loops and the delay between the animations in front of it. The first folder loops 1 time and doesn’t delay, the second loops 0 (=infinite) times and doesn’t have a delay either.

We have to transform all the above pieces into a bootanimation.zip. While we could do that manually I recommend using the Boot Animation Creator made by despotovski01. Download the software from the thread and install it on your computer.
• Open the program and follow the wizard.
• Select the ‘bootanimation’ folder with your ‘part1’ folder inside and proceed to step 2 of the wizard.
• Now in this window, choose ‘edit’ while holding the first line selected and make it the correct resolution for your phone to play.
• Since our ‘tutorial animation’ is only 8 frames long I don’t want to go for the fluid animation, but rather the choppier one. In this case I’m making the animation go 10 FPS (Frames Per Second).
• When you’re ready, click ‘set’
• To actually assign the folder with images to the animation choose ‘Add a loop’
• Choose the folder from the dropdown menu (which shouldn’t be hard, because there’s only one option)
• Set the number of loops to 0, which makes it loop infinite, and leave the delay on 0. Press ‘Add’



• Click next, on the next screen press ‘Save’ and save the bootanimation as ‘bootanimation.zip’ somewhere to your computer.
• Now the bootanimation.zip is ready to be installed on your phone!

Make the package ready to be installed on your phone

If you’re going to use the bootanimation (or any future bootanimations you’ll make) for your personal use only, you can use an application like Root explorer to simply paste the bootanimation.zip in your /system/media folder. If you’re going to share the bootanimations like on the forums for example it could also be convenient to make an update.zip. An update.zip is a package with a couple of scripts and some files inside which can be flashed through Clock Work Mod Recovery and is used to get files in the internal memory of the phone, like in /system/media. CWM Recovery can be installed using ROM Manager from the market for some phones while it also is integrated in most custom kernels and can be accessed by pressing a certain key combo on most phones.

To make an update.zip you can simply download this .zip archive open it with a decent archiver, preferably WinRAR or 7Zip and navigate to /system/media. You’ll see a bootanimation.zip placeholder inside, which you can then (without extracting the archive) replace with your own bootanimation.zip! The archive you now have is ready to be placed on your SD-card and flashed through CMW Recovery. You can rename the update.zip to whatever you want.

Making a simple GIF Animation preview

Now that you’ve made your bootanimation, you’ll probably want to present it to the forums. While posting a couple frames of the animation will give an idea to users what animation they’re going to get, it is also very useful to make an animated preview of said thing. A quick google on ‘GIF maker’ will give you several options of online GIF makers that just let you select the PNG’s you just made and make them into a neat little GIF animation. While this is a fine method I would recommend everyone who owns Adobe Photoshop to do it this way:

• Open Photoshop
• Double click the workspace to ‘open’, or select ‘File’ and click ‘open’
• Navigate to the folder you stored your PNG’s in and select the first frame of your animation.
• Now check the box with ‘Sequence’ behind it and click ‘open’

• Select the frames per second you want the animation to play in. Generally you want to go with 25, but I’m going with 10 as I explained above.
• Now click ‘File’, ‘Save for Web & Devices’ or press ‘Alt+Ctrl+Shift+S’
• In the window that popped up, select GIF from the dropdown menu, change the ‘Looping options’ to ‘Forever’ and hit save.
• Upload your GIF to the public section of Dropbox, to Photobucket or any other online storage service to insert the image in a post!

Post 3/4

How to port an existing bootanimation

There’s a large amount of bootanimations available on the web, but you’ll soon discover that unless their specifically made for your phone the resolution will not be right almost all the time. That means that if you want to use or share the animation you have to port it first in order to make it work on phones with a smaller resolution. Since full fluid animations of 25 FPS or over, are over 100 frames long and most of the time it would be a real pain in the neck to scale them all down one by one. I will talk about two ways to port an animation to a smaller resolution.

The easy way
The simplest way of porting an animation would be to just adjust the resolution values in the desc.txt provided in the bootanimation.zip. While this will probably work, it’s not the most accurate way of porting an animation. Since most mid-range phones are not the fastest ones it is not only the resolution which might make a bootanimation unplayable, but it could also be a pretty hard task for lower-end devices to load such big images in an animation while booting.

The advanced and more accurate way
Editing every image individually would be a really hard task, but would result in a much more accurate and potentially better port. That’s why it is my recommendation to do it anyway, but that’s where Adobe Photoshop comes in! Adobe has made wonderful batch system that lets you process huge amounts of images with a click of the mouse. This is how that works:

• Download the ‘to be ported’ bootanimation.zip and extract it.
• Open Photoshop
• Click ‘Window’ and check ‘Actions’ if it isn’t checked already
• Click the ‘New’ icon at the bottom of the Actions panel and call the action ‘Scale down bootanimation’ in the window that pops up.
• Click record.
• Open a random frame from the animation.
• Now select ‘Image’, ‘Image Size’ or press ‘Alt+Ctrl+I’
• In the window that comes up change the width and height values to 240 x 400 pixels and click ‘OK’
• Next click ‘File’, ‘Save as’ or press ‘Ctrl+Shift+S’
• Save the image as a .png and be sure not to overwrite something as this is just the preparing of the actual resizing of hundreds of images. (It doesn’t matter where you save it, to Photoshop it only matters if you save it. The ‘save as’ settings are going to be overridden as you’ll see later)
• Once you’ve saved the file, close the image.
• Now click the rectangular ‘stop’ button at the bottom of the Actions panel and you’ve recorded the action!
• Delete the just saved image from your computer as we don’t need it anymore and it could mess up the batch process.

Your action should now look something like this:



In the next part we’re going to do the actual resizing:

• Click ‘File’, ‘Automate, ‘Batch’
• The ‘Batch’ window should pop up.
• Select ‘Scale down bootanimation’ as action from the dropdown menu.
• Choose the source to be a folder and then choose the folder with images to be resized.
• Be sure to check ‘Override Action “Open” Commands.
• Choose the destination to be a folder as well and choose a new folder to store the resized images.
• Be sure to check ‘Overide Action “Save As” Commands’ as well
• For the File Naming select the ‘4 Digit Serial Number’ + ‘Extension’ as shown in the screenshot below.



• When everything is set up like in the screenshot, hit ‘OK’ and watch the magic happen!
• Once the operation is completed your downscaled PNG’s will be waiting for you in the folder you selected.
• You can use this ‘action’ now every time you need to resize an animation to this resolution.

While some of you may want to use this method but don’t have Photoshop, I’ve found out about a simple plugin for The Gimp to do pre-scripted batch operations on lots of images just like Photoshop. It’s called David’s Batch Processor and you can install it from here: http://members.ozemail.com.au/~hodsond/dbp.html

Requesting a bootanimation

We are approaching the end of the tutorial; I hope you found it useful. There’s one thing I want to mention though. Even though I’ve tried to explain the most things about bootanimations it’s most likely that you didn’t become the best artist of all time because of this. If you want to have your own custom bootanimation, or want to port an existing one and don’t feel like you can do it yourself, feel free to PM me or leave a reply here, because I’m having fun making/tweaking/porting bootanimations and that way I’m also contributing a little to this forum.

The End

Thanks for taking the time to read this (or a part of this) tutorial and I really hope it helped some people. This is my first tutorial, so don’t hold back to tell me how to improve it (or change any grammatical issues). Since the Galaxy 3 is my only reference point for this tutorial I would greatly appreciate it if you guys tell me when something is only true for the Galaxy 3 and not for the majority of Android phones. I can not check that because this is my only phone. If you still have questions relating to bootanimations you can leave a reply or PM me.

Credits go to:
This great community and its developers
Nishant_713 who helped me out the first time I made a bootanimation.
Ava.tar for feedback and his bootanimation work on the Galaxy 3 forums
Despotovski01 for his cool bootanimation.zip maker
Samsung for the Galaxy 3
Adobe for their Creative Suite and 80% discount on CS4 for students.

Useful links:
http://forum.xda-developers.com/show....php?t=1234611 Bootanimation maker by despotovski01
http://forum.xda-developers.com/show....php?t=1096068 despotovski01's tutorial on bootanimations.
http://forum.xda-developers.com/show....php?t=1602879 Bootanimations for Galaxy 3 Index by Ava.tar
Let me know if any more links should come in this list.

Post 4/4

Copyright april 2012 © All right reserved Wiggierip

recommend a version of photoshop ... !!

Originally Posted by avilove4u

recommend a version of photoshop ... !!

I don't really know if that is very useful... See, when adobe launches a new version of Photoshop like CS6, you can barely get your hands on a previous version. If someone's planning on getting photoshop they should just get the latest . But thanks anyway

Great tut dude. Makes me wanna create my own bootanimation. Definitely gonna try it

Originally Posted by mdaamir1989

Great tut dude. Makes me wanna create my own bootanimation. Definitely gonna try it

Glad to inspire you

Thanks for tutorial