This site requires JavaScript, please enable it in your browser!
Greenfoot back
Twitter Twitter.hover
Laurence
Laurence wrote ...

2016/8/16

How to resize animated gifs?

Laurence Laurence

2016/8/16

#
I've been wondering on how to resize animated gifs permanently, if anyone could help with this issue I'd be most thankful. If this is any use, this is the code I am using to provide the gif itself - public class TormentorPortrait extends Actor { GifImage gif = new GifImage("Portrait.gif"); /** * Act - do whatever the TormentorPortrait wants to do. This method is called whenever * the 'Act' or 'Run' button gets pressed in the environment. */ public void act() { setImage(gif.getCurrentImage()); }
danpost danpost

2016/8/16

#
Laurence wrote...
I've been wondering on how to resize animated gifs permanently < Code Omitted >
You can scale the images of the GifImage object within the constructor of the TormentorPortrait class:
?
1
2
3
4
5
6
7
8
9
10
public TormentorPortrait()
{
    int scalePercent = 50;
    for (GreenfootImage image : gif.getImages())
    {
        int wide = image.getWidth()*scalePercent/100;
        int high = image.getHeight()*scalePercent/100;
        image.scale(wide, high);
    }
}
Laurence Laurence

2016/8/16

#
Ah, thank you!
Laurence Laurence

2016/8/16

#
danpost wrote...
Laurence wrote...
I've been wondering on how to resize animated gifs permanently < Code Omitted >
You can scale the images of the GifImage object within the constructor of the TormentorPortrait class:
?
1
2
3
4
5
6
7
8
9
10
public TormentorPortrait()
{
    int scalePercent = 50;
    for (GreenfootImage image : gif.getImages())
    {
        int wide = image.getWidth()*scalePercent/100;
        int high = image.getHeight()*scalePercent/100;
        image.scale(wide, high);
    }
}
int scalePercent = 50; for (GreenfootImage image : gif.getImages()) { int wide = image.getWidth()*scalePercent/100; int high = image.getHeight()*scalePercent/100; What does int scalePercent = 50; and scalePercent/100; do differently from one-another?
danpost danpost

2016/8/16

#
Laurence wrote...
What does int scalePercent = 50; and scalePercent/100; do differently from one-another?
Basically, one, the scalePercent, is the numerator and the other, the 100, is the denominator. Combined, they represent a fraction which is used to adjust the size of the images. In this particular example, the value of scalePercent, 50, divided by 100, which is 50%, or 1/2, is the adjustment factor in the size of the images. You can adjust the value of scalePercent to suite your needs.
Laurence Laurence

2016/8/16

#
I understand now, thank you for clarifying, can I ask another question in the same thread that still links to this code but branches off to something different?
danpost danpost

2016/8/16

#
Laurence wrote...
I understand now, thank you for clarifying, can I ask another question in the same thread that still links to this code but branches off to something different?
If you have to ask -- that is, you are not sure -- then you should probably just ask the question anyway. It should not be an issue if it relates to the same code.
Laurence Laurence

2016/8/16

#
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
public class TormentorPortrait extends Actor
{
    GifImage gif = new GifImage("Portrait.gif");
    boolean mouseOver = false;
    /**
     * Act - do whatever the TormentorPortrait wants to do. This method is called whenever
     * the 'Act' or 'Run' button gets pressed in the environment.
     */
    public void act()
    {
    {
        MouseInfo mouse = Greenfoot.getMouseInfo(); 
       if (!mouseOver && Greenfoot.mouseMoved(this)) 
        { 
            setImage(gif.getCurrentImage()); 
            Greenfoot.playSound("Select.wav");
            mouseOver = true; 
         } 
       if (mouseOver && Greenfoot.mouseMoved(null) && ! Greenfoot.mouseMoved(this)) 
         { 
             setImage("Start.png"); 
             mouseOver = false; 
         }
       if (Greenfoot.mouseClicked(this)) 
        { 
          Greenfoot.playSound("Lock.wav"); 
        } 
          
    }  
    }   
     public TormentorPortrait()
    {
    int scalePercent = 25;
    for (GreenfootImage image : gif.getImages())
    {
        int wide = image.getWidth()*scalePercent/100;
        int high = image.getHeight()*scalePercent/100;
        image.scale(wide, high);
    }
    }
     
}
This is the code so far for the portrait, the intent is when you hover the mouse over it the animation plays and when it isn't it returns to a still-frame image. This does not happen which is strange because all it does is switch to Frame 2 rather than playing the entire animation despite the mouse being over it.
danpost danpost

2016/8/16

#
A condition for line 15, which sets a gif image to the actor, is that the mouse must have been moved. This is not quite what you want (if the mouse is over the image but does not move, then the image will not change). The only condition you want for setting a gif image is that the mouse be over the actor. Use the two if blocks starting at lines 13 and 19 to only determine the value of mouseOver; then, add a new if, using the now current value of mouseOver to determine how to set the image of the actor.
danpost danpost

2016/8/17

#
Line 12 declares and assigns a value to a variable called 'mouse' which is not used later in the method (remove line 12). Another way to code the act method is shown here:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
private GreenfootSound selectSound = new GreenfootSound("Select.wav");
 
public void act()
{
    if (mouseOver)
    {
        if (Greenfoot.mouseMoved(null) && !Greenfoot.mouseMoved(this))
        {
            mouseOver = false;
            selectSound.stop();
            setImage("Start.png");
        }
    }
    else if (Greenfoot.mouseMoved(this))
    {
        mouseOver = true;
        selectSound.play();
    }
    if (mouseOver) setImage(gif.getCurrentImage());
    if (Greenfoot.mouseClicked(this)) Greenfoot.playSound("Lock.wav"); 
}
This should also fix your sound issue (which probably sounded like a wreck). If you want the sound to repeat when finished if the mouse is still hovering on the actor, you can replace lines 14 through the end with this:
?
1
2
3
4
5
6
7
8
    else if (Greenfoot.mouseMoved(this)) mouseOver = true;
    if (mouseOver)
    {
        setImage(gif.getCurrentImage());
        selectSound.play();
    }
    if (Greenfoot.mouseClicked(this)) Greenfoot.playSound("Lock.wav");
}
Laurence Laurence

2016/8/17

#
Thank you for your help, I appreciate it so much! On the other hand, I didn't seem to have any audio issues with the current broken code I had presented which was relatively weird.
danpost danpost

2016/8/17

#
Laurence wrote...
I didn't seem to have any audio issues with the current broken code I had presented which was relatively weird.
Did you try moving the mouse over the actor a bit? That is when the problem will show itself.
Laurence Laurence

2016/8/18

#
Everything's working as expected but since the gif-resizing method uses a percentage code, how can I get the same resolution to input upon the still image? The gif is scaled down to 25% of its original size and it looks kinda sloppy with the still image being huge.
danpost danpost

2016/8/19

#
Laurence wrote...
since the gif-resizing method uses a percentage code, how can I get the same resolution to input upon the still image? The gif is scaled down to 25% of its original size and it looks kinda sloppy with the still image being huge.
Just create a GreenfootImage field to hold a 'startImage' object and scale it the same way within the same TormentorPortrait constructor:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// add field
private GreenfootImage startImage = new GreenfootImage("Start.png");
 
// the revised constructor
public TormentorPortrait()
{
    int scalePercent = 25;
    // scale gif images
    for (GreenfootImage image : gif.getImages())
    {
        int wide = image.getWidth()*scalePercent/100;
        int high = image.getHeight()*scalePercent/100;
        image.scale(wide, high);
    }
    // scale start image
    int wide = startImage.getWidth()*scalePercent/100;
    int high = startImage.getHeight()*scalePercent/100;
    startImage.scale(wide, high);
    // set initial image to a scaled one
    setImage(startImage);
}
 
// then change line 11 in my last code post above to
setImage(startImage);
Laurence Laurence

2016/8/19

#
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
     public TormentorPortrait()
    {
    int scalePercent = 25;
    for (GreenfootImage image : gif.getImages())
    {
        int wide = image.getWidth()*scalePercent/100;
        int high = image.getHeight()*scalePercent/100;
        image.scale(wide, high);
    }
    int wide = startImage.getWidth()*scalePercent/100;
    int high = startImage.getHeight()*scalePercent/100;
    startImage.scale(wide, high);
    setImage(startImage);
}
}
With the code now like this, it works relatively well except one small issue. Despite the still-image being the exact size as the animation considering it's the first frame of it, it is still larger than the animation's size despite both being at a 25 percent scale. Nevermind, using Photoshop to create gifs changes the size of the overall animation for some reason.
You need to login to post a reply.