Right, I know a lot of you are waiting for me to post this after seeing my videos, social media posts and preview gifs!
Many of you will likely have seen the awesome new Android Wear boot animation as leaked in the LG G Watch system dump. Well now I have successfully made versions for other devices as well!
Initially I made one for the MotoACTV smartwatch (http://forum.xda-developers.com/showthread.php?p=53150797) because it also has a small display and the frames in the system dump are obviously very low resolution for the small screen of the LG G Watch and so are not suitable for phones and tablets. The MotoACTV has an even smaller display and downsizing is not an issue for quality.
However, I have managed to get around this problem. I traced and vectorised each frame to produce a set of scalable SVGs from which I was able to create the high-res png frames needed to make boot animations to suit different devices. There is no limit to the resolution now obviously because I have vector copies of each frame so support for any device is possible. I have also thoroughly optimised the final frames to bring down their file size as much as possible (losslessly) which ensures they run really smoothly (this makes a big difference on high res devices!).
For the MotoACTV I had to change the loop format too because Android pre 4.1 doesn't support the new "c loops" which are required to get the same behaviour as on the LG G Watch (MotoACTV is Gingerbread). On these new ones I had to use a different desc.txt structure to Android Wear for compatibility purposes but have used the c loops and so this actually loops exactly as it would on Android Wear.
It is possible to make animations for devices with earlier than 4.1 too but I will have to change the way it loops slightly. There are also a few devices (like the MotoACTV) which prefer jpgs rather than pngs. I can quickly produce jpg versions if required too. I am willing to take requests for devices people would like an animation for and will try and do them in order of demand but I make no promises on how long the turn around will be.
Below if a video of it running on my Nexus 4 (note: animations are quite a bit smoother than this now and the small amounts of weird jitter were caused by YouTube's video editor) you can also see a preview in post #4:
https://www.youtube.com/watch?v=3jior6pwamg
Update (9/6/14): New v2 versions are up! These are even smaller in file size (read: better performance) and contain some fixes plus two new resolutions!. See post #45 for more details on the update. We now have Android 4.1+ bootanimations which support most common device resolutions: 800x480, 960x640 1280x720, 1280x768, 1280x800, 1920x1080, 1920x1200, 2560x1440 and 2560x1600.
Note: as @vedantgp thankfully reminded me you cannot use these standard type Android boot animations on Touchwiz ROMs because Samsung uses their own proprietary format. There are mods to remedy this though, although I have not tested them. See here: http://www.xda-developers.com/android/add-custom-boot-animation-to-any-samsung-rom/
Instructions
Firstly this will almost always need root. Secondly, these are not flashable zips and you cannot flash these in recovery! This is what you do:
Picking The Correct Animation For Your Device
If you know your device resolution and you see it there then great - grab it move onto adding it to your device. If you don't know the resolution a quick Google of should let you know. You should bare in mind that the actual frames are square so the boot animations are supported based on their smallest dimension (lowest pixel count). This means that whether you have a landscape device (10" tablet) or portrait (most 7" and below) it does not make a difference, the one for your resolution will be fine.
If you find there is no zip matching your device resolution then fear not - you are not out of luck! If you have a different resolution than any listed you can pick the one with largest width (the smallest dimension) that is less than yours (or the same if it exists) and it will work just fine. The only difference is that it will not fill the complete width of your screen. For example: if you somehow had a 1340x950 device then you'd use 1280x800 one as 800px is the closest available smaller resolution of the shortest dimension (width) to your device. You would then just have a 150px gap (75 each side) between the furthest reach of the animation and the edge of your display which would not look too bad as the background is black and most of the screen width is still used. Hope that makes sense. You cannot use one with a resolution greater than your device or it will be cut off.
Manual Method
Download the attachment with the boot animation suited to your device. Rename the zip to bootanimation.zip and push to either /data/local or /system/media making sure the file permissions are set to 644. This process can be done with a file manager or using ADB. If opting for a file manager I do not suggest you use ES File Explorer has it lacks the required permissions options. CM File manager, Root Explorer or Solid Explorer (my favourite) all will work well. If pushing to /data/local the animation will not be wiped when updating your ROM but will be lost with a data wipe / factory reset. For system/media the apposite is true. /system/media is the default location for the boot animation so if using that I suggest you backup your existing one first. My recommendation though is that you use /data/local.
Below is an example of what the permissions should look like for those having difficulty. This is an example from Solid Explorer but others should be similar!
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
New: for those who find written instructions hard to follow Alexander Ruiz has made a great video of these manual instructions on YouTube: https://www.youtube.com/watch?v=tJ-XyZLGCBc
Simple Method
As helpfully pointed out by @bradhoschar you can actually preview and install boot animations with ROM Toolbox! You can grab the free version here and the pro version here. This might be easier for some users!
Future Plans
I intend to create a flashable zip with Aroma installer at some point in the future so you can flash easily to many different devices with options for different Android versions, device resolution and preferred installation. I will need to make it for a few different device specifications first before this becomes worthwhile.
Disclaimer
As per usual, while this almost certainly not going to cause any damage to your device, if it makes it your phone explode, causes hair loss, summons the dead or tears the universe apart, I am not responsible!
Enjoy!
(and please consider checking out my new Android blog: www.littlegreendude.com - thanks!)
Great bootanimation. Rocking this on my N713
Amazing job !!!! .. Thanks one more time
Very soon I shall be renaming all the zips by resolution instead of some by device (it is clearer and neater as several devices are suited to each zip) and adding support the following resolutions: 1080p (1920x1080), 1280x800, 800x480 and 2560x1600 in addition to the current 1920x1200, 1280*768 and 720p (1280x768). I feel this should cover most devices for now. All of these will be for Android 4.1+. I shall later add some zips for lower Android versions for older devices and once I have done that I shall then also combine them into a single AROMA Installer for ease.
Also here is a preview gif so you can see clearly what it looks like (updated preview - no longer huge, fixed colour issues and increased gif speed/framerate):
IgnorCZ said:
Amazing job !!!! .. Thanks one more time
Click to expand...
Click to collapse
haha, no problem! Thanks for showing your appreciation, means a lot!
Anyway to get these to work on Samsung Devices?
lewy95 said:
Anyway to get these to work on Samsung Devices?
Click to expand...
Click to collapse
No, they use proprietary files.
wollac11 said:
Right, I know a lot of you are waiting for me to post this after seeing my videos, social media posts and preview gifs!
Many of you will likely have seen the awesome new Android Wear boot animation as leaked in the LG G Watch system dump. Well now I have successfully made versions for other devices as well!
Initially I made one for the MotoACTV smartwatch (http://forum.xda-developers.com/showthread.php?p=53150797) because it also has a small display and the frames in the system dump are obviously very low resolution for the small screen of the LG G Watch and so are not suitable for phones and tablets. The MotoACTV has an even smaller display and downsizing is not an issue for quality.
However, I have managed to get around this problem. I traced and vectorised each frame to produce a set of scalable SVGs from which I was able to create the high res png frames needed to make boot animations to suit different devices. There is no limit to the resolution now obviously because I have vector copies of each frame so support for any device is possible. I have also thoroughly optimised the final frames to bring down their file size as much as possible (losslessly) which ensures they run really smoothly (this makes a big difference on high res devices!).
For the MotoACTV I had to change the loop format too because Android pre 4.1 doesn't support the new "c loops" which are required to get the same behaviour as on the LG G Watch (MotoACTV is Gingerbread). On these new ones I had to use a different desc.txt structure to Android Wear for compatibility purposes but have used the c loops and so this actually loops exactly as it would on Android Wear.
I have attached zips designed for the Nexus 4 and Nexus 7 (2013). The Nexus 4 one should work on any Android 4.1 (or higher) device with a resolution of 1280x768 and the Nexus 7 one on any 4.1+ device with a resolution of 1920x1200. I have 1080p and 720p versions in the works too so I'll add those shortly (to support devices such a the Nexus 5, recent Samsung Galaxy phones, Moto G etc). (now done!)
It is possible to make animations for devices with earlier than 4.1 too but I will have to change the way it loops slightly. There are also a few devices (like the MotoACTV) which prefer jpgs rather than pngs. I can quickly produce jpg versions if required too. I am willing to take requests for devices people would like an animation for and will try and do them in order of demand but I make no promises on how long the turn around will be.
Below if a video of it running on my Nexus 4 (note: animations are quite a bit smoother than this now and the small amounts of weird jitter were caused by YouTube's video editor) you can also see a preview in post #4:
https://www.youtube.com/watch?v=3jior6pwamg
Edit: added multiple new resolutions, renamed Nexus 4 and 7 to their resolution for consistency. We now have Android 4.1+ bootanimations which support most common devices: 800x480, 1280x720, 1280x768, 1280x800, 1920x1080, 1920x1200 and 2560x1600. The actual frames are square so are supported based on their smallest dimension meaning whether you have a landscape device (10" tablet) or portrait (most 7" and below) it does not make a difference, the one for your resolution will be fine. Also if you have a different resolution then pick the one with largest width less than yours (or the same if it exists) and it will work just not 100% fill the width. E.g. is you somehow had a 1340x950 device you'd use 1280x800. Hope that makes sense. You cannot use one larger than your device or it will be cut off.
Smaller devices tend to be older so unless I get a request otherwise I will not do lower than 800x480 in the 4.1 format.
Instructions
Download the attachment with the boot animation suited to your device. Rename the zip to bootanimation.zip and push to either /data/local or /system/media making sure the file permissions are set to 644. This process can be done with a file manager (needs root) or using adb (will work without root if pushing to /data/local). If pushing to data/local the animation will not be wiped when updating your rom but will be lost with a data wipe / factory reset. For system/media the apposite is true. /system/media is the default location for the boot animation so if using that I suggest you backup your existing one first.
I intend to create a flashable zip with Aroma installer at some point in the future so you can flash easily to many different devices with options for different Android versions, device resolution and preferred installation. I will need to make it for a few different device specifications first before this becomes worthwhile.
As per usual, while this almost certainly not going to cause any damage to your device, if it makes it your phone explode, causes hair loss, summons the dead or tears the universe apart, I am not responsible!
Enjoy!
Click to expand...
Click to collapse
Bit of a noob here. Which one would I use on my N5??? Gonna try to do it! Looks so good!!
Sent from my Nexus 5 using XDA Free mobile app
johnnyfr03 said:
Bit of a noob here. Which one would I use on my N5??? Gonna try to do it! Looks so good!!
Sent from my Nexus 5 using XDA Free mobile app
Click to expand...
Click to collapse
1080p-bootanimation.zip
vedantgp said:
No, they use proprietary files.
Click to expand...
Click to collapse
Good point, I forgot about that! It will only work on custom ROMs or GPE editions of most Samsung's.
wollac11 said:
Good point, I forgot about that! It will only work on custom ROMs or GPE editions of most Samsung's.
Click to expand...
Click to collapse
Not even GPE. GPE is Touchwiz based, and uses TW files
That's just awesome. Thank you. What impresses me even more, is the OP. Very professional and well structured.
right bootanimation?
On my nexus 5 I'm getting a gray "android" bootanimation instead the one is shown in the post below... I downloaded and installed the 1080p.bootanimation.zip, copyed to system/media/ renamed to boot animation.zip and restated the device ... What did I wrong?
leoashley said:
On my nexus 5 I'm getting a gray "android" bootanimation instead the one is shown in the post below... I downloaded and installed the 1080p.bootanimation.zip, copyed to system/media/ renamed to boot animation.zip and restated the device ... What did I wrong?
Click to expand...
Click to collapse
Probably a permissions error. Did you do it with a file explorer? If so you'll need to make sure you set the permissions to 644 or it won't be able to read it. Also make sure the name is "bootanimation.zip" with no spaces.
Etihad said:
That's just awesome. Thank you. What impresses me even more, is the OP. Very professional and well structured.
Click to expand...
Click to collapse
Thank you! Glad you like it!
vedantgp said:
Not even GPE. GPE is Touchwiz based, and uses TW files
Click to expand...
Click to collapse
lewy95 said:
Anyway to get these to work on Samsung Devices?
Click to expand...
Click to collapse
Samsung uses proprietary bootanimations but there are mods out there to make TouchWiz ROMs use the standard Android bootanimation format. These should (I haven't tested) allow you to use this animation. See here where they link to two of such mods and explain with more detail: http://www.xda-developers.com/android/add-custom-boot-animation-to-any-samsung-rom/
wollac11 said:
Samsung uses proprietary bootanimations but there are mods out there to make TouchWiz ROMs use the standard Android bootanimation format. These should (I haven't tested) allow you to use this animation. See here where they link to two of such mods and explain with more detail: http://www.xda-developers.com/android/add-custom-boot-animation-to-any-samsung-rom/
Click to expand...
Click to collapse
Cheers. I'll try that out now
wollac11 said:
Samsung uses proprietary bootanimations but there are mods out there to make TouchWiz ROMs use the standard Android bootanimation format. These should (I haven't tested) allow you to use this animation. See here where they link to two of such mods and explain with more detail: http://www.xda-developers.com/android/add-custom-boot-animation-to-any-samsung-rom/
Click to expand...
Click to collapse
lewy95 said:
Cheers. I'll try that out now
Click to expand...
Click to collapse
It flashed the enabler with no worries. Though trying to install the boot animation failed.
lewy95 said:
It flashed the enabler with no worries. Though trying to install the boot animation failed.
Click to expand...
Click to collapse
Did you place the bootanimation.zip in the correct place (unless the mod says otherwise /data/local or /system/media with the correct name ("bootanimation.zip") and permissions set to 644? Note also that you cannot flash the bootanimation from recovery - not sure if that's what you tried to do? You just push it in place without extracting it or flashing (after renaming).
wollac11 said:
Did you place the bootanimation.zip in the correct place (unless the mod says otherwise /data/local or /system/media with the correct name ("bootanimation.zip") and permissions set to 644? Note also that you cannot flash the bootanimation from recovery - not sure if that's what you tried to do? You just push it in place without extracting it or flashing (after renaming).
Click to expand...
Click to collapse
Tried both, none work :/
Related
I am sorry if this is a noobish question or there is an easy answer, but I was looking at customizing my phone a bit and I saw the part about making your own splash screens (which is awesome), but I was wondering how to make custom boot animations - what tools I would need, type of files, etc. I thought there would have been a thread somewhere in the Themes & Apps section but I could not find it, and doing Google search leads me to just people posting their own custom animations.
Is there a thread someone can direct me to that has this sort of information? Any help would be appreciated - thanks!
Bump - does anybody know? Also, the boot noise for the BAMF Sense 3.0 RC3 does not work, another reason why I want a new one, ha.
Have you opened one of the bootanimation.zips? What file types are in there?
Sent from my ADR6400L using Tapatalk
A PNG image and a series of JPG images that make the animation, but I was wondering if there was a program that took an animation to make it into a series of JPGs, or if there were certain requirements/specifics in terms of how to make a boot animation.
+1 on this whole post, I attemted last night to make my first animation, and if it is just the tedious task of re-saving the same picture over and over again with just minor changes on each one to create the animation, than ok, so be it.
It just seems that with some of the very cool animations there are, for example the boot animation to the new BAMF 3.0 has moving clouds in the background, that seems like it would be pretty hard to do manually moving the clouds a little bit for each frame.
It would seem pretty obvious to anyone that extracted the bootanimation.zip how the animation works, just more speaking on the creation of each of those frames.
Would be nice if someone with experience with this chimed on and offered some help.
Thank's in advance.
Does seem pretty tedious manually moving and saving them as you said but I'm guessing that's what they do.
Probably wouldn't take that long if you had everything on layers in photoshop and you could just move layers themselves.
Alternatively, if you already have a video, I'm sure there's a way to convert that to a series of png's as well.
Ok I'm on the phone so giving a tutorial is out of the question. All you really need is patience and a goal.
First download Gimp for editing. Forget PhotoShop all together unless your rich.
Download the following scripts or plugins.
Background overlay
Save all layers
GAP (video editor for Gimp)
Google the hell out of what you want. Chances are someone allready has done what you want.
Read, read, read (time to not be lazy, what ever your doing you can find some direction at least with some good internet research)
Google "editing Android boot animations".
Create images (JPG or PNG) in the same aspect ratio of 480x800.
JPG images will be significantly smaller in file size
PNG images will have a much better quality
Sent from my thunderstick
Use GAP to convert an existing video to images frame for frame.
Very useful if you find a good video.
Sent from my thunderstick
I actually do have Photoshop, do you know how I can use that instead of Gimp/GAP? Also, I am sort of confused at how you take an existing video and turn it into something you can use as a boot animation... I found this link (http://www.machackpc.com/how-to-changecreate-your-boot-animation-for-droid/) but I am sort of confused by it and wish I could find someplace with simpler instructions.
I just use others. I used the Call of Android animation and the mw2 style on my incredible, and I just edited the files to use the same ones on my thunderbolt.
Message delivered via my BAMF Thunderbolt
Ok, did a little research last night and today and tried a bunch of different programs for converting animations to a series of .png files and finally settled on one. I tried some free one's some trials and this is probably the best one I found so far.
Xilisoft Ultimate video converter. I was able to load an .avi, (or many other supported formats.) Program made it very easy using the "clip" feature to select out a section of the video I wanted, then converted that "clip" to a series of .png files. I was able to easily select the length of times between the extracted images "less time will obviously give you a smoother animation but require more pictures", also I could manually input the size of the outputted files (to match our phone's resolution).
I have only played with it a little bit but so far seems to be pretty good.
Also I have one other program I have been playing with to help with this. Jasc animation studio, which works with paint shop pro, has a pretty cool feature, which lets you copy into the clipboard all of your extracted image .png's, then "paste" them into animation studio as a new animation, you can then watch them from there, or load any indivual frame into paint shop pro. You can also save the clips as an animated gif. Very easy to make changes to individual frames and see the result's without having to flash to your phone.
Hope this helps.
Wow! Awesome, thanks, this is perfect and in great detail - what about sound? If the video has sound, will I try hope it gets synced with the series of .png images? And what else would I need for the bootanimation.zip folder? Will I need a .txt like when I change the splash screens?
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 our 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.
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:
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
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: 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.
Code:
• 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.
Code:
• 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
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 bootani.qmg 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, which in our case 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 our phone to display the animation incorrect, because it gets too much images to process at once.
• 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 240 in width and 400 in height.
• 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 is integrated in most custom kernels and can be accessed by pressing both of the volume buttons and the menu button while turning on the phone.
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 our phones the resolution will be to big 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 are over 100 frames long 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 our phone is not the fastest one it is not only the resolution which might make a bootanimation unplayable, but it could also be a pretty hard task for our lower-end device 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). If you still have questions 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
Despotovski01 for his cool little 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/showthread.php?t=1234611 Bootanimation maker by despotovski01
http://forum.xda-developers.com/showthread.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
Good Work!
BTW You should have posted this in the "Android Themes Section" so that everyone else can see it and there were some questions about bootanimation posted there.
Good Luck!
Thank you for this comprehensive guide. Its awesome!
Cheers
Sent from my GT-i9003 powered by Stable and Smooth CleanKpu rom
ak700 said:
Good Work!
BTW You should have posted this in the "Android Themes Section" so that everyone else can see it and there were some questions about bootanimation posted there.
Good Luck!
Click to expand...
Click to collapse
Thanks , yeah I didn't really know where to start it... Most of it is specifically written for our phone. Like the way the bootanimation is stored and the resolution for example.
Brilliant work! I'll post a link to your thread in the bootanimation index. You deserve many thanks!
wow! finally a tutorial that I can understand
Awesome tutorial! Thank you!
Good research and great work
Oh finall an in-depth tutorial.......i had already made my bootanimation and dint have any idea what to do next....lol....
Thanks for the tut!!
This is really one of the most detailed but still very comprehensive Tutorial about bootanimations I've seen yet! Big probs for that!
There is an aspect in editing bootanimations and I've been thinking about it for months, but still don't have a solution:
What I want to do is editing a bios-bootanimation to fit perfectly to my device and ROM.
This is an example how a bios animation looks like (not the one I would use as base):
Android Bios Bootanimation[/CENTER]
Preview
I only have to change a few parts within the parts to make it fit to my configuration.
Is that possible in a relative fast way? Something like appending changes to several pictures in a batch operation or anything like that? That would be enough for me. But I didn't find any tool I could use that way.
Hope you can help me out!
t-rip said:
This is really one of the most detailed but still very comprehensive Tutorial about bootanimations I've seen yet! Big probs for that!
There is an aspect in editing bootanimations and I've been thinking about it for months, but still don't have a solution:
What I want to do is editing a bios-bootanimation to fit perfectly to my device and ROM.
This is an example how a bios animation looks like (not the one I would use as base)
I only have to change a few parts within the parts to make it fit to my configuration.
Is that possible in a relative fast way? Something like appending changes to several pictures in a batch operation or anything like that? That would be enough for me. But I didn't find any tool I could use that way.
Hope you can help me out!
Click to expand...
Click to collapse
Well, batch operations can be recorded in Photoshop and then applied pretty easiy like I wrote in the tutorial, the Gimp has this plugin called "David's Batch Processor" that I found after some research:
http://members.ozemail.com.au/~hodsond/dbp.html
It does some basic batch operations as well. If this will help you out is highly depending on what effect you want to achieve. If you actually want to change the animation it's going to be A LOT harder... Let me know if you found this useful
Any requests for a bootanimation to be ported or to be made?
Please let me know, I have fun porting/making them
as the adobe after effects require a 64 bit windows os., am having 32 bit os...can i able to use it for creating my own boot animation
austin266 said:
as the adobe after effects require a 64 bit windows os., am having 32 bit os...can i able to use it for creating my own boot animation
Click to expand...
Click to collapse
Well.. I used and still use After Effects CS4, both on a 32bit and now on a 64bit system. Unfortunately After Effect stopped supporting 32bit systems since CS5 came out, so unless you can get your hands on After Effects CS4 you're not going to be able to run it on a 32bit system . If you're really planning on getting AE I would recommend getting a 64bit Winodws copy. What are your system specifications?
@wiggerip if you are bored, maybe port the cm9 official boot animation to g3. It looks really great
Cheers
Sent from my GT-i9003 powered by Stable and Smooth CyanogenMod 9!
bscraze said:
@wiggerip if you are bored, maybe port the cm9 official boot animation to g3. It looks really great
Cheers
Sent from my GT-i9003 powered by Stable and Smooth CyanogenMod 9!
Click to expand...
Click to collapse
I believe thats already done by SerkSerk: http://forum.xda-developers.com/showthread.php?t=1513419&highlight=bootanimation
Anything else ?
@wiggerip
hi mate
thanks for the reply
my system requrements
2gb ram
ububtu 11.10 32 bit 0s
2.00 ghz dual core processor
5yrs old laptop
270 rom
Ok so I was switching out my boot animations and found one that I liked. However, I also wanted to switch out the animation that plays when my phone is shutdown/restarted. I noticed the file SPC_Downanimation.zip. Logic told me that this was the file I needed to modify. That logic happened to be accurate. However, every bootanimation that I've loaded as the down animation displays at a resolution completely different than it does when it is the opening boot animation. The downanimation only takes up the top left quarter of the screen. It also does not loop. Does anyone know the difference between these two types of animations? And how can I get my downanimation.zip to format correctly to the screen's resolution?
Concordium said:
Ok so I was switching out my boot animations and found one that I liked. However, I also wanted to switch out the animation that plays when my phone is shutdown/restarted. I noticed the file SPC_Downanimation.zip. Logic told me that this was the file I needed to modify. That logic happened to be accurate. However, every bootanimation that I've loaded as the down animation displays at a resolution completely different than it does when it is the opening boot animation. The downanimation only takes up the top left quarter of the screen. It also does not loop. Does anyone know the difference between these two types of animations? And how can I get my downanimation.zip to format correctly to the screen's resolution?
Click to expand...
Click to collapse
The downanimation.zip you are wanting to add should have a desc.txt file inside of it. Open it in a text editor and make the top line of text look like this for the proper resolution.
720 1280 20
The way it plays is dictated by the rest of the text. The downanimation file I looked at from my phone looked like this on the other line:
p 1 1 android
That's a lot different than most bootanimations I have seen... My guess is you'll have to hack up what you want to add to make it match, or be really close, to what was already there. Good luck!
ducky1131 said:
The downanimation.zip you are wanting to add should have a desc.txt file inside of it. Open it in a text editor and make the top line of text look like this for the proper resolution.
720 1280 20
The way it plays is dictated by the rest of the text. The downanimation file I looked at from my phone looked like this on the other line:
p 1 1 android
That's a lot different than most bootanimations I have seen... My guess is you'll have to hack up what you want to add to make it match, or be really close, to what was already there. Good luck!
Click to expand...
Click to collapse
Is that for the stock downanimation screen or within a custom ROM? I am running Viper on mine right now so the downanimation is different. I think you're right though. Now that I think about it. When I originally sifted through the desc.txt files of the various bootanimations I wanted I was only looking at the resolution. I wasn't looking at anything else. All of them had 720 1280 20 in them so I figured they would play correctly.
The other thing I didn't understand was that I could take the exact same bootanimation, name it SPC_bootanimation.zip, and it would play just fine (proper resolution and FPS). But if I simply changed the file name to SPC_downanimation.zip it would completely screw up. Logic, at least to me, would state that the desc.txt parameters for animation functionality would be the same within both animation types regardless of whether they are at startup or shutdown. The only difference, again within my logic and understanding, would be the file name that is called upon from the shutdown routine. That is the part that really baffles me. *shrug*
Concordium said:
Is that for the stock downanimation screen or within a custom ROM? I am running Viper on mine right now so the downanimation is different. I think you're right though. Now that I think about it. When I originally sifted through the desc.txt files of the various bootanimations I wanted I was only looking at the resolution. I wasn't looking at anything else. All of them had 720 1280 20 in them so I figured they would play correctly.
The other thing I didn't understand was that I could take the exact same bootanimation, name it SPC_bootanimation.zip, and it would play just fine (proper resolution and FPS). But if I simply changed the file name to SPC_downanimation.zip it would completely screw up. Logic, at least to me, would state that the desc.txt parameters for animation functionality would be the same within both animation types regardless of whether they are at startup or shutdown. The only difference, again within my logic and understanding, would be the file name that is called upon from the shutdown routine. That is the part that really baffles me. *shrug*
Click to expand...
Click to collapse
I think there is a limitation on the file size of downanimations, but I don't know what that number is... If you do happen to get some to work, please post them. Good luck!
ducky1131 said:
I think there is a limitation on the file size of downanimations, but I don't know what that number is... If you do happen to get some to work, please post them. Good luck!
Click to expand...
Click to collapse
I definitely will. Thanks for the help.
Sent from my EVO using XDA
First thread, Yay!
I wanted to share with you a Theme for TWRP based on my new image from deviant art called Impact.
I am giving a lot of credit to JWhetstone02 as I mainly started from his theme and slowly but surely replaced as many icons as I could and changed the layout of some items.
If I could get some feedback, I would love to continue making these for every new image I come out with.
Instructions:
Open the TWRP folder and create a new folder called "theme" without quotes
rename the downloaded Impact-ui.zip to "ui.zip" and copy it to the theme folder
Restart into TWRP 2.4.1.0 and go to "Advanced>Reload Theme"
Enjoy!
Please notify me of anything wrong, I have only tested this on my DNA
I have also found the easiest way for me to test this every time I made a change was make a new ui.zip in my root folder and execute
"adb push C:\root\ui.zip /data/media/TWRP/theme/ui.zip"
Impact Alpha Theme is linked below, here are some mirrors:
Mirror 1:
http://d-h.st/cBx
Mirror 2:
https://www.dropbox.com/s/ksrn6z8z0rjf75r/Impact-ui.zip
Added all the icons in the image:
http://i.imgur.com/vwLAnHV.jpg
Impact 1080p wallpaper:
http://i.imgur.com/QcHvC4c.jpg
impact theme on htc explorer
boushidosan said:
First thread, Yay!
I wanted to share with you a Theme for TWRP based on my new image from deviant art called Impact.
I am giving a lot of credit to JWhetstone02 as I mainly started from his theme and slowly but surely replaced as many icons as I could and changed the layout of some items.
If I could get some feedback, I would love to continue making these for every new image I come out with.
Instructions:
Open the TWRP folder and create a new folder called "theme" without quotes
rename the downloaded Impact-ui.zip to "ui.zip" and copy it to the theme folder
Restart into TWRP 2.4.1.0 and go to "Advanced>Reload Theme"
Enjoy!
Please notify me of anything wrong, I have only tested this on my DNA
I have also found the easiest way for me to test this every time I made a change was make a new ui.zip in my root folder and execute
"adb push C:\root\ui.zip /data/media/TWRP/theme/ui.zip"
Impact Alpha Theme is linked below, here are some mirrors:
Mirror 1:
http://d-h.st/cBx
Mirror 2:
https://www.dropbox.com/s/ksrn6z8z0rjf75r/Impact-ui.zip
Added all the icons in the image:
http://i.imgur.com/vwLAnHV.jpg
Impact 1080p wallpaper:
http://i.imgur.com/QcHvC4c.jpg
Click to expand...
Click to collapse
hi... this theme not working on explorer. device hangs after twrp logo. no icons appear...just the wallpaper appears.
twrp 2.3.3.0
vaib said:
hi... this theme not working on explorer. device hangs after twrp logo. no icons appear...just the wallpaper appears.
twrp 2.3.3.0
Click to expand...
Click to collapse
These themes are resized for devices (HTC DNA) that have a screen resolution of 1080 x 1920
Your device, HTC Explorer only has a screen resolution of 320 x 480
This theme will not fit your device. hence why you only see the wallpaper, well probably part of it
JWhetstone02 said:
These themes are resized for devices (HTC DNA) that have a screen resolution of 1080 x 1920
Your device, HTC Explorer only has a screen resolution of 320 x 480
This theme will not fit your device. hence why you only see the wallpaper, well probably part of it
Click to expand...
Click to collapse
ok... the theme however seems to be awsome. wish I could resize it for explorer but I don't have proper resources for that.
I am sorry that I don't have a theme formatted for your resolution, I'm sure I could cook something up for that resolution if more people were interested.
Theming this isnt hard but to get everything right requires going through that 4000 line xml document :S
I wish more people would tell me if this looks good on their DNA lol
Looks nice mate. Thank you, I appreciate it
keep up the good work! It's not that bad once you get with it
If you get the time and can be bothered, would you consider making the same one but having the buttons all about double the size and with no planet template behind them all. Theme is gorgeous it would just be nice to mix it up some days
uppon2 said:
If you get the time and can be bothered, would you consider making the same one but having the buttons all about double the size and with no planet template behind them all. Theme is gorgeous it would just be nice to mix it up some days
Click to expand...
Click to collapse
Yes I'll upload some sample screenshots to see exactly what you mean to make it easier
Part of making a great rom lies in personalizing it with a great startup animation. When it comes to Samsung however, things can get a bit tricky as samsung likes to deviate from the norm by using their own unique boot animation format. Thus, instead of the standard "bootanimation.zip", which contains the whole startup animation and whatever image or loop you would like to have appear at the end until the device boots up, with Samsung things get split up into 2 separate files. These files are called "bootsamsung.qmg"(the start of the animation) and "bootsamsungloop.qmg"(the end of the animation that repeats until startup or whatever still image at the end that you'd like to land on). Recently I tried to make one such animation and managed to get it right on the first try, but since making animations for Samsung devices seems to be somewhat of an elusive topic on the net I decided to make an easy to understand tutorial.
So, here we go then. Let's get started, but first let's make sure we have the required things.
REQUIREMENTS:
- Samsung Theme Designer: http://developer.samsung.com/bada-themes/tools-sdks/Samsung-Theme-Designer-2-0-4
- Photoshop(or another image editing program)
- A ROOTED DEVICE
- A Root Explorer App(like "ES File Explorer", "Root Browser", etc.)
- An awareness of the target device's screen resolution size in pixels.(ie. 480x800, 1440x2560, etc.)
Alright, now here are the steps to making a Samsung boot animation.
NOTE: For the purposes of this tutorial we're just going to keep things simple by only working with 3 images that will alternate repeatedly, but you can always do more images to create a more elaborate animation if you want.
NOTE 2: If you already have your own images from a bootanimation.zip, then you can just skip steps 1 and 2.)
STEPS:
1) Create Your Images In Photoshop - Just start by creating a new image in Photoshop. The image dimensions must be the same as your device's screen resolution. Mine is 480x800, so that's what I made. Now do whatever you like with the images. I just made 3 images for mine with the title of the rom and just used the fill tool in Photoshop to add different colors to the text and the background. Then I saved the image in PNG format and used the fill tool to change the colors again and then saved that file too under a different name. I did this 3 times and ended up with 3 different images of different colors and put them in a folder on my computer. I just named the folder "boot", but you can call it whatever you want.
2) Create The Full Animation - For this part you're going to want to turn those 3 images you made into about 30 images by duplicating them so that the image doesn't flash by too fast in the animation. Just open the "boot" folder where you saved the images and right click on the name of the first one and select copy. Then paste it 9 times so you end up with 10 duplicate images. Now do the same thing for the other 2 images to make a total of 30 images(10 of each) in this folder. Now go to the first set of images and name them whatever you want, but name them in sequence using this format here. Start with "yourimagename_000.png", then "yourimagename_001.png" on up through "yourimagename_009.png". Then go to the second set of identical images and start naming those starting where you left off with "yourimagename_010.png" and so on and do the same for the third set. You should end on "yourimagename_029.png" with 30 images.
Next make another folder. I called this folder "loop" just to keep things organized. Afterwards, copy the previous 30 images from the "boot" folder into the "loop" folder, so that you now have a total of 60 images in 2 folders, with the same 30 images in each. Then, go into the "loop" folder and start renaming the images in there in sequence. Make sure to start from where you left off in the previous folder so that you end up with "yourimagename_030.png" through "yourimagename_059.png" in there. These will be the images that loop at the end until the phone boots up.
3) Set Up Your Animation Project - Open Samsung Theme Designer and under "Create New Theme" select "Feature(NonTouch) Phone". Then under "Select Model" just click on the one near the bottom that has the word "Spring" in it. Then under "Select Showcase" just click on "Default" and just type any name you want to call your project in the "Name" box. You might want to then just make sure to save it to the same folder location where you have your image folders stored just to make things easy and after all that, then just click on "Ok".
4) Define The Animation Parameters - Once you have your project loaded, just ignore the preview that you see in the window(as it's irrelevant ALWAYS) and click on the "View" tab at the top of the theme designer and click on "Tree View Window" just to make sure that you can see that menu in the left pane. Then near the top of the tree view under "Idle Component" click once on "Idle Background" to pull that menu up on the right. Now, in the "Idle Background" window, click on where it says "fixed" under "Background Type" and change it to "animated". Then change "Frames" to "30", because that's how many images we have in our first folder, and change the "Duration" to "50"(usually between 30-450 is best) and make sure "Repeat" is set to "False" for this one.
5) Building The First Animation - After you have everything set, then let's start by building the first part of your animation. To do this you need to go back to your "boot" folder where you stored your first 30 images and select them all. Now drag and drop them all into the "Animation Object Window" pane at the bottom of theme designer to fill the 30 empty frames with your images. Then click the "Save" button at the top left of the theme designer to save your work before finalizing your project. Now click on the "Home" tab. Then in the top right of theme designer click on "Export Theme" and export the theme to your same project folder. The project name doesn't matter. It takes a few seconds to export too, but once it does just click "Ok" and then on "Yes" to open the folder where you saved the file. Then rename the "yourprojectname.smt" file in that folder to "yourprojectname.smt.zip" and open the zip file. Extract ONLY the "IdleBgAnimObj.qmg" to your project folder and rename it to "bootsamsung.qmg". BOOM! You're done with the first part of your animation.
6) Building The Second Animation - Now to make the second part. The second animation is the part that loops at the end and is pretty easy as it's basically the same process as the first part with only a couple of changes. First thing you want to do is click "Save As" at the top left of the theme designer and change the name of this new animation to something else. Then, you want to click on one of the images in the "Animation Window" at the bottom and just keep hitting delete until they're all gone. Now, since we made the images in our "boot" and "loop" folders exactly the same images, then we can just once again set the "Frame" to "30" and the "Duration" to "50". The only difference this time actually is that we want to set "Repeat" to "True" so it loops. Then open your "loop" folder and drag the next 30 images and drop them in the "Animation Object Window" like you did with the first 30 above and export. Once you extract the "IdleBgAnimObj.qmg" file this time, however, you will be renaming this one to "bootsamsungloop.qmg". After that you are done creating your animation files!
7) Copying The Files & Fixing Permissions - Now that you've created your animation you will want to test it to make sure it looks right and that everything works. Plug your device into your computer and navigate to your device storage in a new window. Then, from your original project folder window, drag and drop the "bootsamsung.qmg" and "bootsamsungloop.qmg" files over to anywhere you want on your devices sdcard. Next, open your root explorer app on your device and navigate to the place where you copied the files. Select both and either move or copy them to the "System/Media/" folder. BE SURE TO BACKUP THE ORIGINAL FILES TO ANOTHER FOLDER ON YOUR DEVICE FIRST though, just for safe keeping, as this will overwrite the originals. Then, once you've moved the files, you want to make sure they have the right permissions. To do this touch and hold on each of the files and click on either "Permissions" or "Properties", whatever it says in your app, and look for the permissions. The only permissions you want to have checked for each is both "Read" and "Write" for "Owner" and only just "Read" for both "Group" and "Others". So the abbreviated version should read "rw-r--r--".
8) Testing Your Animation - After that you're all done. The only thing you have to do now is just reboot and see if it looks the way you want. If the animation is too fast or slow, then you just need to go back and adjust the "Duration" setting in each of your projects and do steps 5 through 7 again. If you're doing a more elaborate animation where each frame is different and the finished product doesn't look right then you may just need to go back and rework some of your images. Other than that, if you've followed these steps correctly, you should now have successfully made your very first Samsung boot animation. Congrats! You can now add it to your own custom rom or just use it on your own device.
I hope this helps some of you by the way. Feel free to respond to this thread if you have any questions or comments regarding the Samsung QMG boot animation creation process. Thank you!
----
HERE ARE SOME SAMPLE ANIMATIONS THAT I'VE MADE USING THESE STEPS:
HONOR 8 Boot Animations
https://forum.xda-developers.com/showthread.php?p=70645944
"ASCENSION" Boot Animation
http://forum.xda-developers.com/showthread.php?p=70324907
"ASH vs EVIL DEAD" ANIMATION(w/ Sound):
http://forum.xda-developers.com/android/themes/boot-animation-ash-vs-evil-dead-sound-t3307025
"TWILIGHT ZONE" ANIMATION(w/ Sound):
http://forum.xda-developers.com/showthread.php?p=64538922
"DOS STYLE" ANIMATION(For Galaxy Core Prime).
http://forum.xda-developers.com/showthread.php?p=64186973
HERE'S THE SIMPLE ANIMATION THAT I MADE WHILE CREATING THIS TUTORIAL TOO.
http://forum.xda-developers.com/showpost.php?p=64093741
Please be sure to hit the "Thanks" or Donate button below if this helped you out!
I've tried this multiple times and am still not able to boot after swapping the files, changing the permissions and rebooting the device. I've also tried multiple settings in the duration ranging from zero to 30 (which happens also to be the amount of frames in my image sequence). the only alteration I've made from this guide (which I believe to be irrelevant) is the naming of the pings, in which I just left them named 001, 002 so forth without any prefix. Oh also I have left the closing boot in place (figured I'd change it after I get the first one working), that wouldn't be a big deal would it (The beginning and ending boot animation being different)? Oh btw, I have also tried with loop on and/or off, neither booted for me. Am I missing something? The images were in 480x800 resolution as per the device. I feel like I really should have had it right the first time. This is the guide I was following originally http://forum.xda-developers.com/gal...animations-t2217795/post39844577#post39844577 (obviously with the specs changed for my device), which is similar to this guide just not as detailed or in depth maybe, but I've followed the steps and I just can't seem to be able to duplicate the results. Maybe I could upload the images or my boot that I created or something for you to look at but I dunno if that would even help or what that would accomplish.
---------- Post added at 04:59 AM ---------- Previous post was at 04:57 AM ----------
Koognod said:
I've tried this multiple times and am still not able to boot after swapping the files, changing the permissions and rebooting the device. I've also tried multiple settings in the duration ranging from zero to 30 (which happens also to be the amount of frames in my image sequence). the only alteration I've made from this guide (which I believe to be irrelevant) is the naming of the pings, in which I just left them named 001, 002 so forth without any prefix. Oh also I have left the closing boot in place (figured I'd change it after I get the first one working), that wouldn't be a big deal would it (The beginning and ending boot animation being different)? Oh btw, I have also tried with loop on and/or off, neither booted for me. Am I missing something? The images were in 480x800 resolution as per the device. I feel like I really should have had it right the first time. This is the guide I was following originally http://forum.xda-developers.com/gal...animations-t2217795/post39844577#post39844577 (obviously with the specs changed for my device), which is similar to this guide just not as detailed or in depth maybe, but I've followed the steps and I just can't seem to be able to duplicate the results. Maybe I could upload the images or my boot that I created or something for you to look at but I dunno if that would even help or what that would accomplish.
Click to expand...
Click to collapse
Also found this page regarding framerate description http://forum.xda-developers.com/showthread.php?t=2189934 Still no help to me though, unfortunately...
Koognod said:
I've tried this multiple times and am still not able to boot after swapping the files, changing the permissions and rebooting the device. I've also tried multiple settings in the duration ranging from zero to 30 (which happens also to be the amount of frames in my image sequence). the only alteration I've made from this guide (which I believe to be irrelevant) is the naming of the pings, in which I just left them named 001, 002 so forth without any prefix. Oh also I have left the closing boot in place (figured I'd change it after I get the first one working), that wouldn't be a big deal would it (The beginning and ending boot animation being different)? Oh btw, I have also tried with loop on and/or off, neither booted for me. Am I missing something? The images were in 480x800 resolution as per the device. I feel like I really should have had it right the first time.
Click to expand...
Click to collapse
If you set the duration to 0 you will see nothing. It should be at least 20 or 30 probably, but I'm not sure how elaborate your animation is or how often you want it to change. If you look at my animation everytime it changes color that's 50 duration x 10 frames. The duration by the way is in milliseconds. You're right about the image names though. The title doesn't really matter as long as alphabetically & numerically it falls in the right order. Maybe try starting at "000" though. Also, are your images in PNG format? Again too, make sure that the number of frames matches the number of images in each of your animations as well.
I realize that now, I only had it set to zero the very first time I tried to render (have tried at least 4 times since then starting at 1 and most recently at 30). I will try next extending the duration to 80 maybe. Oh also i have gone back to look at the files and I did start with 000 although I believe this to be necessary only so you can drag and drop the images into the software and have them still be in order.
Sent from my OG 420 using Tapatalk
Koognod said:
I realize that now, I only had it set to zero the very first time I tried to render (have tried at least 4 times since then starting at 1 and most recently at 30). I will try next extending the duration to 80 maybe. Oh also i have gone back to look at the files and I did start with 000 although I believe this to be necessary only so you can drag and drop the images into the software and have them still be in order.
Click to expand...
Click to collapse
Yeah, name doesn't really matter just the sequence. The duration will probably always do better higher than 30 I think too unless you have a very low number of frames. How many frames do you have for each animation btw?
Sent from my SM-G360T1 using Tapatalk
4 for some 2 for the rest. Theres only 30 frames in all
Sent from my OG 420 using Tapatalk
---------- Post added at 06:02 AM ---------- Previous post was at 05:54 AM ----------
So 80 didn't work, still bootlooped =(
Sent from my OG 420 using Tapatalk
Koognod said:
4 for some 2 for the rest. Theres only 30 frames in all.
Click to expand...
Click to collapse
So, you have about 15 frames for bootsamsung.qmg and 15 for bootsamsungloop.qmg then maybe? Are you duplicating some of the images like I mentioned above or is each one different? Do you want it to loop at the end or just hang on a final image? You can go as high as 5,000 duration if you just have one or two images that you want to hang on in the bootsamsungloop.qmg, but I found that that doesn't work as well as just duplicating some of the images and providing a lower duration(ie. frame rate). Also, if you have a significantly low amount of frames and/or duration too, it may be that it's happening but it's just flickering by too fast.
Sent from my SM-G360T1 using Tapatalk
bogarty said:
So, you have about 15 frames for bootsamsung.qmg and 15 for bootsamsungloop.qmg then maybe? Are you duplicating some of the images like I mentioned above or is each one different? Do you want it to loop at the end or just hang on a final image? You can go as high as 5,000 duration if you just have one or two images that you want to hang on in the bootsamsungloop.qmg, but I found that that doesn't work as well as just duplicating some of the images and providing a lower duration(ie. frame rate). Also, if you have a significantly low amount of frames and/or duration too, it may be that it's happening but it's just flickering by too fast.
Sent from my SM-G360T1 using Tapatalk
Click to expand...
Click to collapse
No sorry, I only have made one folder so far because I was only focusing on getting the beginning animation working. so 30 frames for the total sequence. Also, if it were flickering by to fast my device would still be able to boot all the way, I could imagine, which has not been the case.
Koognod said:
No sorry, I only have made one folder so far because I was only focusing on getting the beginning animation working. so 30 frames for the total sequence. Also, if it were flickering by to fast my device would still be able to boot all the way, I could imagine, which has not been the case.
Click to expand...
Click to collapse
It's true it would just kick to the standard samsungbootloop.qmg after your animation if you only did the first part and only replaced the bootsamsung.qmg. I would say first though maybe, just put back the originals to make sure it still boots fine, then try making it work. Also, remember that the more complicated your animation is, the more complicated this process will be. Make sure your permissions still say that they're "rw-r--r--". Make sure that resolution is right and everything else is too, etc. Did you download the newest theme manager too? The link I provided should be fine. Also, if there's any steps you skipped because maybe you already did some stuff, maybe try starting from the beginning(except the image creation of course), but once you get it working right I think it's pretty easy to make more from here on out. Maybe try the animation emulator in theme manager too on the home tab. It won't show you the whole display, which is normal, but it will show you the rate of change between frames and whether or not it seems to be working.
Sent from my SM-G360T1 using Tapatalk
It plays in the emulator. Also I have been restoring system from saved recovery in order to replace my custom animation in between flashes. My permissions have been set proper as well. Resolution too it says 480x800. It really confused me as well that my animation not working caused my phone to bootloop but as I've said I really can't find a step I'm missing.
Sent from my 000 using Tapatalk
Koognod said:
It plays in the emulator. Also I have been restoring system from saved recovery in order to replace my custom animation in between flashes. My permissions have been set proper as well. Resolution too it says 480x800. It really confused me as well that my animation not working caused my phone to bootloop but as I've said I really can't find a step I'm missing.
Click to expand...
Click to collapse
Yeah it should be working if you followed those steps. We have the same device after all. The only thing I could say is maybe try making a super simple one first and get that working, then slowly build on it with more images as you go along. I rebuilt these files while I was making this tutorial to make sure I didn't miss anything and it still works fine. Also, you don't have to reflash the whole rom everytime to go back. Just copy back the originals. That's why I definitely always prefer copying over moving myself, as that way you always have the originals somewhere on your device.
Oh snap, finally saw a glimpse of it!!
Sent from my 000 using Tapatalk
---------- Post added at 07:36 AM ---------- Previous post was at 07:36 AM ----------
Think I might have maybe figured out the issue.
Sent from my 000 using Tapatalk
---------- Post added at 07:45 AM ---------- Previous post was at 07:36 AM ----------
I believe the culprit was maybe the fact I hadn't picked the same device in samsung theme manager you recommended. I had read previously it didn't matter. Once I tried again following your guide more thoroughly I got it to boot.
Sent from my 000 using Tapatalk
---------- Post added at 08:02 AM ---------- Previous post was at 07:45 AM ----------
Thank you again, sorry about giving you such a hard time. Especially since your tutorial is on point.
Sent from my OG 420 using Tapatalk
Koognod said:
Oh snap, finally saw a glimpse of it!!
Think I might have maybe figured out the issue. I believe the culprit was maybe the fact I hadn't picked the same device in samsung theme manager you recommended. I had read previously it didn't matter. Once I tried again following your guide more thoroughly I got it to boot. Thank you again, sorry about giving you such a hard time. Especially since your tutorial is on point.
Click to expand...
Click to collapse
I'm so glad to help!
REQUIREMENTS:
- Samsung Theme Designer:[/B] http://developer.samsung.com/bada-themes/tools-sdks/Samsung-Theme-Designer-2-0-4
- Photoshop
Click to expand...
Click to collapse
Could this also be accomplished with Gimp photo editor?
---------- Post added at 07:57 PM ---------- Previous post was at 07:56 PM ----------
also can they be made to 60 frames instead? for smoothness purpose
drago10029 said:
Could this also be accomplished with Gimp photo editor?
also can they be made to 60 frames instead? for smoothness purpose
Click to expand...
Click to collapse
Not sure what Gimp photo editor is, but probably not as the QMG format is pretty exclusive to Samsung. Why wouldn't you want to use the theme designer?
You can use as many frames as you want though. My last animation had about 200 frames. It just depends on how much you want the animation to change. The example I gave in this tutorial was just a simple one to make it extra easy to learn. You can do up to 500 duration btw to make the frame last longer, but if it's still not long enough, then you just have to duplicate some frames.
bogarty said:
Not sure what Gimp photo editor is, but probably not as the QMG format is pretty exclusive to Samsung. Why wouldn't you want to use the theme designer?
You can use as many frames as you want though. My last animation had about 200 frames. It just depends on how much you want the animation to change. The example I gave in this tutorial was just a simple one to make it extra easy to learn. You can do up to 500 duration btw to make the frame last longer, but if it's still not long enough, then you just have to duplicate some frames.
Click to expand...
Click to collapse
I meant can I use GIMP instead of photoshop? it's a open source free photo editor. Photoshop is like a lot of money that some people don't have
drago10029 said:
I meant can I use GIMP instead of photoshop? it's a open source free photo editor. Photoshop is like a lot of money that some people don't have
Click to expand...
Click to collapse
Oh shoot...haha! Sorry. To me the term "Photoshop" is a specifically universal term for just making decent images. It won't matter where you make your animation, but it will matter for your Core Prime that they are exactly 480x800 resolution. They should probably be PNG format too if you can produce that. Also, obviously, the names of each frame must be numbered properly.
bogarty said:
Oh shoot...haha! Sorry. To me the term "Photoshop" is a specifically universal term for just making decent images. It won't matter where you make your animation, but it will matter for your Core Prime that they are exactly 480x800 resolution. They should probably be PNG format too if you can produce that. Also, obviously, the names of each frame must be numbered properly.
Click to expand...
Click to collapse
cool thanks, and is there anyway to make a bootanimation run 60 fps instead of 30?
drago10029 said:
cool thanks, and is there anyway to make a bootanimation run 60 fps instead of 30?
Click to expand...
Click to collapse
Well, 30 was just the number of frames I used total for each animation in the example. Not the frames per second. If you had 60 frames per second for a 2 minute boot animation, then you'd have to make 7,200 images, so you don't want that. It doesn't do that anyway though. The animation is more like a gif than a video, where each frame lasts awhile. The speed is altered in "duration" too, but I believe it's in milliseconds, which isn't very fast. That's why you might have to duplicate some frames to allow for enough time so that each image can be seen.
For instance, in my DOS animation(linked in the OP), I used about 185 frames(which was 36 images duplicated) for the first animation, but only 20 frames(which was only 4 images duplicated) for the second animation(ie. the looping part at the end). In other words, I had to be duplicate each image 5 times and put the each animation at a duration of 450, so that it would last long enough to appear at the proper speed, as I don't think the duration goes higher than 500ms. There's an emulator in theme designer where you can preview your animation too, but unfortunately it doesn't seem to show the true speed, so you may have to just make the animation a few times and test it out each time until it displays at the speed you want. Anyhow, I hope this helps.
How's it going, so I've started playing with creating custom boot animations on my SCH-I545 running on OF1.
Instead of using a photo shop program I've used a video to jpg converter to create image files from some anime vids then built them into qmg on Samsung Theme Designer.
I've also have successfully created sound clips to go with the bootup. I use a free online ogg converter. I've had full success with this process.
Its just a matter of tweaking the fps/duration to get "my desired" play out length. Once I get this down I'd like to share my animations. Could you direct me to the best thread to post them to.