How to make your own Android ROM – Part 3: Boot Animation

Look at any of the Android forums whether it’s Xda Developers (www.xda-developers.com) or the equally fanatical FreakTab.com aimed at mini PCs and you’ll find a kind of reverence is reserved for those who can develop a custom ROM. Flashing your Android device with CyanogenMod will get you geek status among your non-technical mates but even those who know what an SDK is will be impressed if you can bake your own ROMs.

So far in this masterclass series we’ve looked at how to create a working Linux environment within a Windows computer system through a virtual machine using the free VMware Player 5.0.2 software. We’ve also shown you how to take a compatible ROM and pull it apart using the free Java/Python app Android Kitchen. In part 2 of this masterclass we looked at the concept of odex and deodexed apps and ROMs and finally at how to give the ROM root access and install a Superuser-style root access manager.

In this class we’re taking a slight detour to look at one of the more glamorous parts of creating your own ROM and that’s adding your own custom bootup screen animation. While there are plenty of boot animations on the web you can mod yourself nothing says master geek more than creating your own boot animation from scratch.

Make a splash

The boot animation is the video-like display you see when you first turn on your smartphone or tablet. They can be made as simple or as complicated as you like but whether you make yours a single image or a video-quality animation like CyanogenMod the process is still the same. And it’s reasonably simple to do. At the most basic level all you need is an image editor (anything from Windows Paint to Photoshop will work) a text editor and some creativity.

How it works

An Android boot animation is a pretty simple affair: all it is is a ZIP file that contains a series of JPEG images in specific subfolders which the device ROM loads and displays as described by the text-based descriptor file.
While clever animations like the CyanogenMod splash may look like a video playing they’re just a series of discrete images being played at a set resolution and frame rate. All of this information comes from the descriptor file.

Build a descriptor file

The descriptor file is the ‘desc.txt’ file in the root of the ‘bootanimation.zip’ file and its structure is fairly basic. The first line contains three numbers: the horizontal resolution in pixels the vertical resolution in pixels and the image display frame rate in frames per second (fps). Let’s say you’re creating a boot animation for a smartphone. In that case you’d set it up to display in portrait mode in which case your first line would be something like this:

480 800 10

This means a 480 x 800-pixel frame size displayed at 10fps.
After that the following lines describe the various animation sections and how they’re displayed in sequence. While the frame rate is fixed by this first line you can split your animation into sections and display each one differently – you can choose the number of times each section is played or repeated before the next section begins you can set the delay in seconds before repeating or moving onto a new section and you can set the subfolder location for the pics of that section.
There doesn’t appear to be a limit on the number of animation sections you can have although you don’t want it to go on for two hours either. For example the code to display three sections of animation could look like this:

p 1 0 part0

p 2 3 part1

p 0 0 part2

Decoding those lines the first says play (p) once (1) with zero delay afterwards (0) the images in subfolder (part0). The second line says play (p) twice (2) with a three-second (3) delay after the images in subfolder (part1). And finally the third line says play (p) repeat infinitely (0) with zero delay afterwards (0) the images in subfolder (part2).
The images in those subfolders need to be numerically sequenced; for example ‘image001.jpg’ ‘image002.jpg’ ‘image003.jpg’ and so on. Make sure you include those leading zeros otherwise you’ll get strange things like ‘image10.png’ being played before ‘image2.png’. That’s because the system is designed to logically think ’1′ comes before ’2′ even if it’s meant to be ’10′. The last thing is to make sure you leave an empty line at the end of the file.
How you create those images is entirely up to you. The simple slow way is to create and save the images one by one. The alternative is to extract them from a video using a video-to-image extraction app. The command line audio/video transcoding app FFmpeg can do this (check out the ‘Convert videos to images’ section at the bottom of this page for details).
While it won’t necessarily work for capturing frames from videos one tip we do recommend if you’re creating animations from scratch is to follow the square frame size used by CyanogenMod. We like this option because you don’t need full-screen resolution for an animation to look good and using a square frame will allow you to still achieve a high-resolution look without needing to update more screen pixels than necessary. That cuts down on the CPU time required ensuring your device spends most of its time loading the ROM which is really what you want anyway. The only other thing that we think helps is if you’re making an animation from scratch start with a black background – it just looks better.

Why multiple sections?

If you’ve never seen the CyanogenMod 10 splash animation take a look at it over at tinyurl.com/cdmlnnn. It’s a really clever simple design but how does it work? You can actually download this one from tinyurl.com/ma996tj and using 7-Zip (7-zip.org) decompress it and take a look. The CyanogenMod team has created numerous animation versions in that one file ranging in frame size from 240 x 240 up to 720 x 720 pixels in both vertical and horizontal aspect. Look in one of the folders grab the specific ‘bootanimation.zip’ file and expand it. We grabbed the ‘vertical720bootanimation.zip’ file and inside you’ll find the ‘desc.txt’ descriptor file and two folders: ‘part0′ and ‘part1′. The ‘desc.txt’ file looks like this:

720 720 24

p 1 0 part0

p 0 0 part1

In this case it’s a 720 x 720-pixel image set played at 24fps. The first part0 plays once and immediately launches into the second part1 which it plays indefinitely until the device desktop appears. Why multiple sections? Look at the YouTube clip of the boot animation and you can see there are two distinct parts: the fade-in at the beginning and the repeated spinning loop.
All of these images are in those folders but rather than just looking at them individually you can preview the whole ‘bootanimation.zip’ file with a specially developed app called Boot Animation Factory (see ‘Using Boot Animation Factory’ section towards the bottom of this article). This Windows app will preview the ZIP file showing the frames and the actual image numbers and locations. You can also adjust the frame rate and watch the whole thing in slow-motion to see how it’s created. It’ll also build a finished ZIP file from your completed animation folders and ‘desc.txt’ file. Boot Animation Factory can be downloaded for free over at db.tt/cYSGtjn1.
The trick with any good animation loop is that the last frame in the sequence has to meet up with first. That way it looks like a never-ending video loop despite being made from a finite number of frames. For example look at the three frames we’ve taken from the CyanogenMod boot animation below – we’ve included the first (048) and the last two (070 071) from the part1 section folder. ‘CM10_071′ steps nicely back into ‘CM10_048′ so that as the animation loops you can’t tell where it begins or ends.

Playback speed

When creating your own boot animation one of the first things to think about is how many images you’ll need. Remember it’s just a splash display to give you something to look at while your phone is booting up so you don’t really want 1080p images displaying at 30fps otherwise the phone is spending more CPU time playing an HD-grade animation slowing down the bootup process. Also older phones have less reserves of CPU power available to play animation so you need to consider these things when working out how complex to make your animation.
Since the frame rate in the first line sets the playback speed it’s also the number of images you’ll need for each second of play. So clearly creating a 10fps animation takes a lot less work than a 20fps one.
But how high a frame rate for a boot animation is too high? In the end it’s not necessarily how high the frame rate is but how many pixels your phone has to display each second since that’s what the CPU is effectively doing; for example a 1080 x 1920-pixel animation at 5fps equals the same number of pixels as a 480 x 800-pixel animation at 27fps. Obviously your device has to have a screen size that can display the whole animation frame but overall you want to err on the side of simplicity. This is one case where it’s good to think less is more.

Compress the file

The last step to making a functioning animation file is to compress the ‘desc.txt’ file and image subfolders into a ZIP folder. You can use 7-Zip for this but most importantly remember to use the ‘store’ option only. You don’t actually want to compress anything otherwise the ROM won’t be able to open and retrieve the files. When you’re done load it into Boot Animation Factory to test that it works as you expect.

Add your animation to the ROM

Depending on your device this can be complicated. Android Kitchen has an option for adding custom boot animations into your ROM. Go to the ‘Main Menu’ in the Kitchen select ’00′ for legacy options and then ’27′ (add custom boot animation functionality). This will enable the ROM to look at the ‘datalocal’ subfolder. Next copy the ‘bootanimation.zip’ file into that subfolder which should be located in ‘WORKING_<date>_<day>’ folder and that’s it. The rest will be done when you build the ROM.
However Samsung uses a proprietary animation system that works differently. If you’re working from a stock Samsung ROM (we’re using a Galaxy S3 ROM in this masterclass) here’s what you do.

1. Check the ‘systembin’ subfolder in your ‘WORKING’ ROM folder and look for the files ‘samsungani’ and ‘bootanimation’.
2. Download ‘bootanimation4u.zip’ from the bottom of the first post at tinyurl.com/ncjhcwl. Unzip it and inside the ‘systembin’ subfolder of that ZIP file you’ll find replacement ‘samsungani’ and ‘bootanimation’ files. Back up the originals of these files from the ‘WORKING’ folder and copy these replacements over the top.
3. Grab your newly minted ‘bootanimation.zip’ and copy it into the ‘systemmedia’ subfolder.
4. Build your ROM.

If you look in the ‘systemmedia’ subfolder in your ‘WORKING’ folder Samsung stock ROMs use a proprietary boot animation format for most things. The fix we’re using here allows Android-standard ‘bootanimation.zip’ files to also be used again.
We tested this technique with our Samsung Galaxy S3 phone flashing a custom ROM built from a Samsung stock release with modded ‘bootanimation.zip’ support and it worked the first time. If you want to go back to the genuine boot animation just replace the ‘samsungani’ and ‘bootanimation’ files you added with the originals you backed up in step 2 above.

The first and last two images in CM10′s boot animation – the last frame loops back to the first for seamless playback.

WARNING!

Creating your own customised ROM isn’t difficult to do with Android Kitchen but if you muck it up it can brick your phone in extreme cases. We’ve tried this method with no problem on our Galaxy S3 smartphone; however we’re providing this information for educational purposes only. It comes with no warranty or support if you try this and brick your phone. Note too that flashing your phone with a custom ROM will certainly void the warranty so do this at your own risk.

Using Boot Animation Factory

Step 1:

Grab the app from db.tt/cYSGtjn1 install it and run it. On the main window click the ‘Preview a boot animation’ button.

Step 2:

Click the ‘Choose boot animation’ button and load in the ‘bootanimation.zip’ file you want to check. The ‘Preview boot animation’ button at the bottom of the window will go live once a compatible animation ZIP is loaded.

Step 3:

Click that button and the animation should appear in its own control window where you can set the frame speed and note the image locations.

Convert videos to images with FFmpeg

FFmpeg is a wonderful do-all audio/video transcoding tool and it can also be used to extract images from video. Grab the latest Win32/static version from tinyurl.com/lrcvz7k and in the bin folder you’ll find the ‘ffmpeg.exe’ command line executable. Start by opening up Windows Explorer and launching a Command Prompt within that ‘bin’ subfolder (hold down the Shift key right-click in the ‘bin’ subfolder area and select ‘Open command window here’ from the context menu.) Next use the following command line:
Ffmpeg -i "c:pathtofilevideo.file" -r 1 -s 480x480 -f image2 "c:pathtoimage-=.jpg"

Here’s what that does:

-r 1 tells FFmpeg to capture one frame per second of video.
-s 480x480 tells it to create 480 x 480-pixel images from each of the captured frames.
-f image2 tells FFmpeg to create images from each captured frame.
image-=.jpg tells it we want images stored numerically with three-digit numbers created in JPEG format.
Replace pathtofile paths with the appropriate paths for your files.
It’s important that you include the full path to your video input file and the location where you want the images stored. If the file path includes any spaces you must surround the whole path with double quote marks; for example: ffmpeg -i "c:new pathvideonext.avi" . If you don’t it won’t work. Also the save location folder path must exist already – FFmpeg won’t create the folder for you and will simply fail.

The other important thing is that the frame size you select will also set the aspect ratio. For example 480 x 480 pixels will produce square frames that will probably look a bit ‘tall’. In this case 480 x 270 or 720 x 406 would be a better option if you’re using a 16:9 aspect ratio video. For 4:3 aspect video you’d use something like 480 x 360 or 720 x 540. Just divide the horizontal resolution you want by 1.7778 to get the correct vertical resolution for 16:9 video and by 1.333 for a 4:3 video.

               FFmpeg can extract frames from your videos and save them as numbered images.

                                  The results from the FFmpeg command run on a video clip.

See Also:

How to make your own Android ROM – Part 3
How to make your own Android ROM – Part 4 : Adding custom scripts

How to make your own Android ROM – Part 1