Or Continue to Thread: [THEME][HOW TO]Animated Backgr…
Find Your Device:
23rd May 2014, 02:59 PM   |  #1  
erikalin's Avatar
OP Recognized Contributor
Flag Boston - Southern NH ish
Thanks Meter: 2,628
 
947 posts
Join Date:Joined: Sep 2012
Donate to Me
More
How-to make your own custom animated backgrounds from slices cropped from video ...
So your end results are things like these:



Or like turning this (left) into this (right)



Also, my flashables to apply in VenomTweaks are all here.
This tutorial uses the ViperOne M8 ROM but the process described here for turning a video into a folder of images for animation is universal.

This tutorial is made for the users of ViperOne ROM because Team Venom has a pretty awesome built-in theme engine that everybody should be using and enjoying. Here is one way you can do that! The overall process is universal for anything you want to do involving video to custom animation (i.e. boot animations), but I made this tutorial for ViperOne ROM users. "Giving back" because I love that ROM too. I am not a Team Venom member, just a satisfied user.

One Key Prerequisite – You need to already be set up to decompile and build (recompile) apk files and make a few specific, simple edits to XML files. There are many guides about this and several options. In this tutorial I will use APKTOOL and VIRTUOUS TEN STUDIO. If you cannot decompile and recompile an app then this guide is not YET for you. Figure that out first, then come back! It's good to know how to do this for a TON of reasons if you're just getting started with Android and wanting to learn some more. Search "how to decompile" or "how to use apktool" and pick a guide. I am not offering to help with that part. Come back here when you're set up though.

I also made a Video Walk-through for this tutorial:
http://vimeo.com/erikalin/animated


Have these things (all free & good):
Quote:

1. Computer setup for decompiling and recompiling apk files (i.e. apktool)
2. Something for editing XML files (i.e. Virtuous Ten Studio)
3. Something to batch rename and resize images (i.e. FastStone Photo Resizer)
4. Something to extract zip files (i.e. 7-zip or Winrar)
5. A short animation or video or loop to work with.
6. Download animationtemplate.apk here: http://www.androidfilehost.com/?fid=23501681358537298

Overall Directions:
Quote:

1. Find or create a short video about 5 seconds in length.
2. Turn that video into a series of jpeg image files.
3. Choose 100 images for the animation.
4. Resize images to be 116 width by 200 height jpeg format, and rename images anim#
5. Decompile animationtemplate.apk.
6. Drop those 100 images into the decompiled drawable-hdpi folder
7. Edit strings.xml for correct theme name and author
8. Edit AndroidManifest.XML package name
9. Build and sign the apk
10. Rename the apk to the name of your animation
11. Test it!
12. Create an animated gif preview for you own records and for sharing on XDA
13. Share it!


Detailed Directions (see video demo also)

1. Find or create a short video about 5 seconds in length.

Be sure to download only what is legally offered for free and public use by the party authorized to give such rights. It's fun to grab a quick video of a kid or pet if you have any. If you find such a thing on youtube, a safe download site to use is this: http://www.clipconverter.cc/ . You're going to have to resize and crop out a vertical slide (the aspect ratio of your phone's display), so keep that in mind. You can accomplish the ratio by adding canvas to the top of bottom as well. I often end up "zooming in" on a piece of the video by cropping the images. Trial and error.

2. Turn that video into a series of jpeg image files.

You can do that here: http://image.online-convert.com/convert-to-jpg
You’ll get a zip file from that conversion. Extract it. Name the extracted folder rawimages.

3. Choose 100 images for the animation.

Create a new folder and name it chosenimages. It doesn’t matter how many jpeg files are in that rawimages folder right now, you need to narrow it down to 100 for your animation. If your video was a good resolution, you can take skip every other jpg file and they’ll still work for your animation at this resolution. Just narrow it down to 100, however you want. Remember that the animation is a loop, so try to “end” the animation in a way that naturally looks good when it starts back at the beginning. When you’re done you have the 100 images you want to use in your chosenimages folder.
Optional info: Don’t consider this paragraph on your first try, but you can use any number of images in your animation. Longer animation means more images. For your first animation, just use 100 images because it’s already setup for that. If you get into this and want to make longer or shorter animation loops, you’ll need to use a different number of images. That just requires editing this file: res/drawable/bg_anim.XML. Open it and the edits will be obvious. If you add more jpg image files into your folder and do not also list them here, they will be ignored.

4. Resize images to be 116 width by 200 height jpg format, and rename images anim#

This is the step that can take some time. You’ll do this in a batch. The names are such that the first image will be named anim0 and the last image will be named anim99.
I use FastStone Photo Resizer for this. Create a folder and name it drawable-hdpi. You have your chosenimages folder with your chosen 100 images in it. They need to end up being 116 X 200 px in size. Your aspect ratio won’t be correct at this point, so you will need to crop as well as resize. Do whatever it takes to get your images to 116 X 200. You’ll have to play around a bit with the resize and crop and canvas settings based on your specific image set. It can take a few extra steps to get from your chosen images to the properly named and sized drawable-hdpi folder images you’ll be using in final form.

In the process, rename images to anim# and start at “0”. Make sure they are jpg not png format.

This step is done when your 100 images are resized and properly named, in your drawable-hdpi working folder.

5. Decompile animationtemplate.apk.

6. Drop those 100 images into the decompiled drawable-hdpi folder in apktool directory

7. Edit strings.xml for your new theme name and author

Inside res/values/strings.xml make two edits:
Code:
    <string name="theme_name">YourAnimationTitle</string>
    <string name="theme_author">YourName</string>

8. Edit AndroidManifest.XML package name

Make one edit:
Code:
package="venom.background.anim.newanimationnamehere">

9. Build and Sign the apk

10. Rename the apk to the name of your animation

11. Test it!

Install on your phone as a normal app, then apply through Venom Tweaks. Don't share things until you've tested.

12. Create an animated gif preview for you own records and for sharing on XDA

Screen record like 5-10 seconds of the pulldown with the animation running. Use a built-in screen record or “Rec.” on the Market.

Upload the screen record video file directly to https://imgflip.com/gifgenerator and choose start and end points, and a small size for the gif output. You can also put text onto the image so you can include the name of your animation. For sharing on xda, upload that animated gif somewhere. I use http://imgur.com/
.
13. Share it!

Be sure to include the following three things in your post: One jpg image from your hdpi folder as a static preview, your apk file, and the animated gif preview. Share it on the Official ViperOne Theme thread, where they invite user contributions and can upload the good ones to Venom Hub for everyone to enjoy.


I hope to see some nice stuff get shared from your creative minds!
Last edited by erikalin; 16th July 2014 at 09:07 PM.
The Following 14 Users Say Thank You to erikalin For This Useful Post: [ View ]