webdevRefinery Forum: Animated gif -> sheet? - webdevRefinery Forum

Jump to content

  • 2 Pages +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

Rate Topic: -----

User is offline TheEmpty 

  • I say words in sequences.
  • Group: Members
  • Posts: 5154
  • Joined: 02-October 10
  • Expertise:HTML,CSS,PHP,Java,Javascript,Python,Ruby on Rails,SQL

Posted 19 April 2012 - 12:26 PM (#1)

Animated gif -> sheet?


So I have a gif,
Spoiler


and I want to convert it to a sheet of frames so I can use it in a Java application and animate/blit it there. Is there any software to do this automatically?
Reserved.
0


User is offline Qasim 

  • Group: Members
  • Posts: 520
  • Joined: 25-October 10
  • LocationOntario, Canada
  • Expertise:HTML,CSS,PHP,Java,Javascript,Graphics

Posted 19 April 2012 - 12:28 PM (#2)

Photoshop can split it into individual files but I don't know of software that makes sheets.
Qasim Iqbal
[HTML] [CSS] [JS] [PHP] [JAVA]
[ANDROID DEVELOPER] [CHROME WEB STORE DEVELOPER]
[WEBSITE] [FACEBOOK] [FORRST]
0


User is offline iCyan 

  • Group: Members
  • Posts: 204
  • Joined: 15-May 11
  • Expertise:HTML,CSS,Graphics,Flash

Posted 19 April 2012 - 03:18 PM (#3)

Here's the process:
- Open .gif file in photoshop
- Install this script
- go to File -> Scripts -> Sprite Sheet Exporter

Enjoy ;)
iCyan Allias
1


User is offline callumacrae 

  • {{ post.author }}
  • Group: Members
  • Posts: 2862
  • Joined: 20-January 11
  • LocationWarwickshire, England
  • Expertise:HTML,CSS,PHP,Javascript,Node.js,SQL

Posted 19 April 2012 - 03:21 PM (#4)

I find the best way to be to take screenshots of each frame. It'll take a couple hours to get all of them, and you need to get the timing exactly right.

Last time, I outsourced it.
Front-end developer and writer
Twitter | GitHub | phpBB Contributor and Website Team Member | lynxphp
0


User is offline TheEmpty 

  • I say words in sequences.
  • Group: Members
  • Posts: 5154
  • Joined: 02-October 10
  • Expertise:HTML,CSS,PHP,Java,Javascript,Python,Ruby on Rails,SQL

Posted 19 April 2012 - 04:36 PM (#5)

View Postcallumacrae, on 19 April 2012 - 03:21 PM, said:

I find the best way to be to take screenshots of each frame. It'll take a couple hours to get all of them, and you need to get the timing exactly right.

Last time, I outsourced it.

Why isn't this in comic sans?
Reserved.
0


User is offline Sole_Wolf 

  • Group: Members
  • Posts: 303
  • Joined: 24-March 10
  • Expertise:HTML,PHP,Java,SQL

Posted 19 April 2012 - 09:12 PM (#6)

So you are trying to get the individual frames all into one giant picture right?

How much space would you want in between each frame in pixels?

I think that I could do this for you.
--Sole_Wolf
0


User is offline TheEmpty 

  • I say words in sequences.
  • Group: Members
  • Posts: 5154
  • Joined: 02-October 10
  • Expertise:HTML,CSS,PHP,Java,Javascript,Python,Ruby on Rails,SQL

Posted 19 April 2012 - 09:32 PM (#7)

View PostSole_Wolf, on 19 April 2012 - 09:12 PM, said:

So you are trying to get the individual frames all into one giant picture right?

How much space would you want in between each frame in pixels?

I think that I could do this for you.

0px, going to be blitted onto the screen (selectively cropped by the application with the crop constantly moving, thus animating it).
Reserved.
0


User is offline TheMaster 

  • *-c0de master-*
  • Group: Members
  • Posts: 748
  • Joined: 24-May 10
  • LocationAustralia
  • Expertise:HTML,CSS,PHP,Java

Posted 19 April 2012 - 09:52 PM (#8)

You could try this:

http://gif-explode.com/
0


User is offline TheEmpty 

  • I say words in sequences.
  • Group: Members
  • Posts: 5154
  • Joined: 02-October 10
  • Expertise:HTML,CSS,PHP,Java,Javascript,Python,Ruby on Rails,SQL

Posted 19 April 2012 - 10:01 PM (#9)

View PostTheMaster, on 19 April 2012 - 09:52 PM, said:

You could try this:

http://gif-explode.com/

It made all !0 frames red o.O Photoshop can do that as well, curious if I can find an AppleScript or the likes to combine all the images into a singular image.
Reserved.
0


User is offline Sole_Wolf 

  • Group: Members
  • Posts: 303
  • Joined: 24-March 10
  • Expertise:HTML,PHP,Java,SQL

Posted 19 April 2012 - 10:25 PM (#10)

Is this kind of what you wanted?

http://i.imgur.com/WrfRJ.png

I made that with some pretty unorthodox methods using Keynote and Preview :D
--Sole_Wolf
0


User is offline ianonavy 

  • Group: Members
  • Posts: 685
  • Joined: 14-April 10
  • Expertise:HTML,CSS,Java,Javascript,Python

Posted 20 April 2012 - 12:29 AM (#11)

View PostThatRailsGuy, on 19 April 2012 - 04:36 PM, said:

Why isn't this in comic sans?

I want to +1 you without it counting toward your reputation. xD
reputation += 1 if post.is_helpful else 0
0


User is offline callumacrae 

  • {{ post.author }}
  • Group: Members
  • Posts: 2862
  • Joined: 20-January 11
  • LocationWarwickshire, England
  • Expertise:HTML,CSS,PHP,Javascript,Node.js,SQL

Posted 20 April 2012 - 02:03 AM (#12)

View PostThatRailsGuy, on 19 April 2012 - 04:36 PM, said:

Why isn't this in comic sans?

I'm being serious here!
Front-end developer and writer
Twitter | GitHub | phpBB Contributor and Website Team Member | lynxphp
0


User is offline Renegade 

  • 418 I'm a teapot
  • Group: Members
  • Posts: 748
  • Joined: 08-March 10
  • Expertise:HTML,CSS,PHP,Javascript,Node.js,SQL,Graphics

Posted 20 April 2012 - 05:23 AM (#13)

How about combining something like this to split up the gif into it's separate frames and then stitch them together. That should be pretty easy!
http://adriancooney.ieGithubTwitterDribbbleForrst
We all die. The goal isn't to live forever. The goal is to create something that will.

Array(16).join({}-{}) + " Batman!";
0


User is offline Cyril 

  • Group: Members
  • Posts: 2544
  • Joined: 03-August 10
  • Expertise:HTML,CSS,PHP,Javascript,Graphics

Posted 20 April 2012 - 05:36 AM (#14)

Photoshop splits each frame into a layer, so I guess you could then create a Photoshop script that takes each layer and shifts it to the right? Just look into the scripting docs (inside the photoshop directory)

website :: github :: twitter :: dribbble :: forrst
html, css, php, javascript, graphics
0


User is offline iCyan 

  • Group: Members
  • Posts: 204
  • Joined: 15-May 11
  • Expertise:HTML,CSS,Graphics,Flash

Posted 20 April 2012 - 06:05 AM (#15)

Hey. Hey guys. Guys. Hey. Yea. That script I posted up there does just that. Photoshop automatically splits .GIF files into layers and that script will make a 0px spaced sprite sheet for you. http://d.pr/i/PCZV
iCyan Allias
2


User is offline NeilHanlon 

  • Group: Members
  • Posts: 884
  • Joined: 08-July 10
  • LocationRowley, Massachusetts
  • Expertise:HTML,CSS,PHP,Java,Graphics

Posted 20 April 2012 - 06:58 AM (#16)

View PostiCyan, on 20 April 2012 - 06:05 AM, said:

Hey. Hey guys. Guys. Hey. Yea. That script I posted up there does just that. Photoshop automatically splits .GIF files into layers and that script will make a 0px spaced sprite sheet for you. http://d.pr/i/PCZV


I love how everyone always skips over the right answer. xD
Thanks,
兄ニール

Website | Blog | @NeilHanlon | About.Me | Facebook | LinkedIn
0


User is offline TheEmpty 

  • I say words in sequences.
  • Group: Members
  • Posts: 5154
  • Joined: 02-October 10
  • Expertise:HTML,CSS,PHP,Java,Javascript,Python,Ruby on Rails,SQL

Posted 20 April 2012 - 08:07 AM (#17)

View PostNeilHanlon, on 20 April 2012 - 06:58 AM, said:

I love how everyone always skips over the right answer. xD

lol, because I read it on my iPod and forgot to try it XD I'll have to load it and see if I can set it to 4x3 so there is no whitespace.

View Postcallumacrae, on 20 April 2012 - 02:03 AM, said:

I'm being serious here!

You know you could have loaded it into photoshop and not needed to take screen shots? All the frames are inside of the image. If you don't have photoshop, GIMP probably would have done the same.
Reserved.
0


User is offline callumacrae 

  • {{ post.author }}
  • Group: Members
  • Posts: 2862
  • Joined: 20-January 11
  • LocationWarwickshire, England
  • Expertise:HTML,CSS,PHP,Javascript,Node.js,SQL

Posted 20 April 2012 - 09:23 AM (#18)

View PostThatRailsGuy, on 20 April 2012 - 08:07 AM, said:

You know you could have loaded it into photoshop and not needed to take screen shots? All the frames are inside of the image. If you don't have photoshop, GIMP probably would have done the same.

...I wasn't being serious >_<
Front-end developer and writer
Twitter | GitHub | phpBB Contributor and Website Team Member | lynxphp
0


User is offline TheEmpty 

  • I say words in sequences.
  • Group: Members
  • Posts: 5154
  • Joined: 02-October 10
  • Expertise:HTML,CSS,PHP,Java,Javascript,Python,Ruby on Rails,SQL

Posted 20 April 2012 - 11:48 AM (#19)

(do note that this is not the best code, just having a bit of fun because someone asked if I could do this)

Image:
Spoiler


package com.reliablerabbit.nyancat;

import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.net.URL;
import javax.imageio.ImageIO;

/**
 * Display a NyanCat in your GUI application!
 * @author Mohammad El-Abid
 * @category Fun
 */
public class NyanCat implements Runnable {
	/**
	 * Resource location for NyanCat image
	 */
	private final String IMAGE_LOCATION = "/spriteSheet.png";
	/**
	 * Pixel count of each individual frames width
	 */
	public final static int FRAME_WIDTH = 400;
	/**
	 * Pixel count of each individual frames height
	 */
	public final static int FRAME_HEIGHT = 400;
	/**
	 * Number of frames in the image
	 */
	private final int FRAME_COUNT = 12;
	/**
	 * X-position of where the NyanCat should be displayed
	 */
	private int imageX = 0;
	/**
	 * Y-position of where the NyanCat should be displayed
	 */
	private int imageY = 0;
	/**
	 * The sprite image
	 */
	private BufferedImage image = null;
	/**
	 * Current frame
	 */
	private int frame = 0;
	/**
	 * Position of the frames
	 */
	private int[][] clips = new int[FRAME_COUNT][2];
	/**
	 * The graphic device to draw on
	 */
	private Graphics g;
	
	public NyanCat() {
		loadImage();
	}
	
	/**
	 * Load the image and calculate the frame indexes
	 */
	private void loadImage() {
		try {
			URL file = NyanCat.class.getResource(IMAGE_LOCATION);
			if(file == null) throw new java.io.FileNotFoundException("Unable to load NyanCat from: " + IMAGE_LOCATION);
			image = ImageIO.read(file);
			
			for(int i = 0; clips.length > i; i++) {
				clips[i][0] = (FRAME_WIDTH * i) % image.getWidth();
				clips[i][1] = (FRAME_HEIGHT * i) % image.getHeight();
			}
		} catch (IOException e) {
			System.err.println("Unable to load NyanCat image");
			e.printStackTrace();
		}
	}

	/**
	 * As long as the image is loaded and we can sleep (to control FPS), display the NyanCat!
	 */
	@Override
	public void run() {
		if(image == null) return;
		
		while(true) {
			BufferedImage clip = image.getSubimage(clips[frame][0], clips[frame][1], FRAME_WIDTH, FRAME_HEIGHT);
			g.drawImage(clip, imageX, imageY, FRAME_WIDTH/3, FRAME_HEIGHT/3, null);
			frame = (frame + 1) % FRAME_COUNT;
			try {
				Thread.sleep(100);
			} catch (InterruptedException e) {
				e.printStackTrace();
				return;
			}
		}
	}

	/**
	 * @param x is the new X cord for where the NyanCat should be displayed
	 */
	public void setX(int x) {
		this.imageX = x;
	}
	
	/**
	 * @param y is the new Y cord for where the NyanCat should be displayed
	 */
	public void setY(int y) {
		this.imageY = y;
	}
	
	/**
	 * Used to set the graphics component to draw on. Either your JFrame or a separate component dedicated to NyanCat.
	 * @param g the graphics component to draw on.
	 */
	public void setGraphics(Graphics g) {
		this.g = g;
	}
}


NyanCat nc = new NyanCat();
nc.setGraphics(frame.getGraphics());
nc.setX(650);
nc.setY(25);
new Thread(nc).start();

Reserved.
0


User is offline NeilHanlon 

  • Group: Members
  • Posts: 884
  • Joined: 08-July 10
  • LocationRowley, Massachusetts
  • Expertise:HTML,CSS,PHP,Java,Graphics

Posted 20 April 2012 - 12:32 PM (#20)

I'm totally putting this as an easter egg in the rsps client update I'm going to release soon.
Thanks,
兄ニール

Website | Blog | @NeilHanlon | About.Me | Facebook | LinkedIn
0


Share this topic:


  • 2 Pages +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

4 User(s) are reading this topic
0 members, 4 guests, 0 anonymous users


Enter your sign in name and password


Sign in options
  Or sign in with these services