Animated Gif with large base image & small animated part.

Hello guys
I'm not really sure how to explain that, due to my limited English comprehansion. I will try with images.
I can easily create animated gif out of multiple layers, given each layer is identical, with small changes accuring over time.
But I yet to figure out an animated gif, that uses one large image for the base, and only small part of it is animated.
I always get the animated part working, without the large base applying across all the frames. All it does, is flashes once
the frame is reached and then moves on to being transparent, showing only the small animated part.
For example, this is a GIF made with Galaxy S4, of my friend playing with his phone, imported into PS CS6. On the Galaxy,
after I record the GIF, I can use my finder to touch, mask and freez parts I don't want to move, and leave only small, animated bit.
When I import it to PS, it shows one layer with full image, and bunch of frames with the animation part only.
http://i.imgur.com/UAiopQA.jpg
http://i.imgur.com/7XOGGV6.jpg
Problem is, once the image is open with PS, I'm not able to export it to keep it working in the same manner. Given the Samsung's
gifs are 8 to 10mb, it's hard to edit it, to make it more size friendly.
The gif clearly works the way I describe, so there is a setting or method I don't know about.
If PS is not best tool for editing GIF, what other apps would you recommand I use for it?
Thank you for the taking the time to read
best regards
Monica

This has been an ongoing issue for me since I switched from Powerpoint to Keynote. Most of the animated gifs with transparent backgrounds that I used with Powerpoint are no longer transparent in Keynote. You may want to search for those earlier threads on this topic...
To summarize: I've had to open up my animated gifs in After Effects and use the Color Key effect to restore transparency, with mixed success.
Good luck!

Similar Messages

Animated GIF with Flex

Hi all,
I designed a animated GIF image by Photoshop. And now, I want to add it into my web application. I referenced from
http://www.bytearray.org/?p=95
http://iamjosh.wordpress.com/2009/02/03/animated-gifs-in-flex/
Have I must to download the AS3 GIF Player Class to use my animated gif with flex ?? Has Flex 3.0 support animated gif that I not need download that libriary ?
Thanks !

Anybody help !!

Animated gif with transparent background

When I import in Keynote an animated gif with transparent background. The background becomes white. I did the following tests:
If I extract a single image from the animated gif and import it in keynote the background is actually transparent but it becomes white when I import the whole gif.
I also checked with other applications (NeoOffice) and the animated gif does come out with a transparent background.
Do I do something wrong in Keynote ?

This has been an ongoing issue for me since I switched from Powerpoint to Keynote. Most of the animated gifs with transparent backgrounds that I used with Powerpoint are no longer transparent in Keynote. You may want to search for those earlier threads on this topic...
To summarize: I've had to open up my animated gifs in After Effects and use the Color Key effect to restore transparency, with mixed success.
Good luck!

Can someone help me with a very basic guide to animated gif with elements 11?

Hi
I bought Adobe elements 11 and have been trying to do a very basic animated gif with it.I came acroos some instructions about layering,etc but still cannot get it to work. All I want to do is add two of my school photos together so that one suddenly vanishes and the one appears.I am planning to put this on my blog.
The animation I want is the day time picture of teh school magically vanish and the night time picture appear.Can it be done with elements11(I wouldn't mind if someone can even do it for me so that I could deconstruct it later!).I have attached the two photos.Please remember ,my knowledge of phtoshop is abysmal and very very basic.My apologies for that.hence I might be need to be told like a 10-year old!
Please help as I need this fast! Karen.

It’s not possible to fade between gif images but you could sandwich two layers with a black fill layer between them as I have done in this example.
Then use the menu:
File >> Save For Web
Choose gif as the file type, select animate, and set your timing in seconds with continuous loop if required.
Then Save.
PS the images are different sizes so I had to re-size the daylight image to make it the same as the night image.
Click to view

Using animated gifs with transparent background.

Hi guys,
Keynotes 6.2.
I have been onto apple support with this problem.
I add a transparent animated gif to my project.
It show as a movie correctly in the presentation but when exported as quicktime or HTML the movies fail.
We eventually found out that quicktime does not support animated gifs. ( support.apple.com/kb/ht3775 )
So I exported the animation onto a folder with all the frames separately and brought them into final cut pro.
I then followed these tutorials on how to export with transparent background. ( http://provideocoalition.com/mspencer/video/fcp-x-and-alpha-channels and http://www.larryjordan.biz/fcp-export-transparency ).
I now have a quicktime movie that if I bring back into Final Cut Pro it has a transparent background.
However when I bring into keynotes it still has a black background. (presumably keynotes does not recognise the Apple Prores 444).
Any ideas how I can achieve what I need. ?
I am using a program called crazytalk animator and can output with transparent background. Animated Gif or a series of image stills BMP, JPEG, TGA or PNG.
Cheers
SteveW

This has been an ongoing issue for me since I switched from Powerpoint to Keynote. Most of the animated gifs with transparent backgrounds that I used with Powerpoint are no longer transparent in Keynote. You may want to search for those earlier threads on this topic...
To summarize: I've had to open up my animated gifs in After Effects and use the Color Key effect to restore transparency, with mixed success.
Good luck!

Playing animated GIFs with NetBeans

Well for our Computer Science class we have to make a game.
For our title screen we wanted an animated GIF to play.
I made the animated GIF with Gimp and I am using the NetBeans IDE (I am using the GUI Builder)
I have tried using the image as a JLabel but it didn't work.
I just need it to play the GIF.
Thanks.

Ok sorry I should have posted some code.
Also I got it to work. But I now have a new question.
How do you loop the animation?
Is it possible to layer a JButton on top of the GIF?
And also is it possible to make this part of the code relative?
Like can you make it where it looks through the entire file without a specific path.
AndroidGIF.setIcon(new ImageIcon("C:\\Users\\***********\\Desktop\\android2.gif"));Here is the rest of my code.
import javax.swing.*;
class GIFTest extends JFrame
    JLabel AndroidGIF = new JLabel();
    public GIFTest()
        setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
        AndroidGIF.setIcon(new ImageIcon("C:\\Users\\********\\Desktop\\android2.gif"));
        GroupLayout layout = new GroupLayout(getContentPane());
        getContentPane().setLayout(layout);
        layout.setHorizontalGroup(
            layout.createParallelGroup(GroupLayout.Alignment.LEADING)
            .addGroup(layout.createSequentialGroup()
                .addGap(27, 27, 27)
                .addComponent(AndroidGIF)
                .addContainerGap(41, Short.MAX_VALUE))
        layout.setVerticalGroup(
            layout.createParallelGroup(GroupLayout.Alignment.LEADING)
            .addGroup(layout.createSequentialGroup()
                .addGap(32, 32, 32)
                .addComponent(AndroidGIF)
                .addContainerGap(46, Short.MAX_VALUE))
        pack();
         public static void main(String args[])
            new GIFTest().setVisible(true);
}Note that I bleeped out the name of the computer due to privacy.

Animated gif only saving an image

I have created an animated gif. 20 frames in the animation docker at the bottom of screen.
http://imgh.us/PS_screen2.jpg and http://imgh.us/PS_screen1.jpg the last image is what the outcome is. Only a gif images 21kb big. I have no idea what has gone wrong. Even when I play the animation in both the PS screen as well as in the save to web screen - it shows the frames being highlited in the animated frame docker=t but DOES NOT actaullay animate.PLEASE someonw help as all the forums just say save as gif in web whch is what I have done about 20 times now but still get one gif image at the end.

Can anyone assist in this frustrating problem I am having. I have read so many google assists and theay all say the same thing.But when following thos instructions, All I still get is an image and not an animated gif.

Is it possible to create an animated GIF with transparency in AME?

I have Adobe Media Encoder CS5.5 with Windows 7. Is it possible to save a video (I saved it as uncompressed AVI from After Effects) as an animated GIF with transparency in it (eg. black=transparent)?
I also have VirtualDub 1.9.11 but don't see a transparency option in that.
It's for the web where I'd like the normal web background to show in the black (ie. should be transparent) parts of the GIF.

Thanks. But if I wanted to keep using it it costs about £600 to buy. Would Adobe Photoshop Elements 11 be able to do this too (also, seeing as there is an animated gif creation option in AME and used to be in AE, couldn't they just add a checkbox etc. for AME/and AE for doing transparent gifs in those if they don't support it? Since transparency is a standard feature of .GIF is seems strange to allow GIF creation but not allow transparency)?

Creating a animated gif with transitions..

Hello all,
I am creating a animated gif with a set number of pics. They will change every couple of seconds transitioning from dark to light very quickly until you see each pic, from picture to picture..
Kind of like something you would see in flicker....
I have not used flash in awhile, so was wondering how to go about this..
Is this a pretty easy thing to do in flash (not to time intensive)?
Is there a particular tool for this?
SInce there is no movement here is this something that I can also create in Dreamweaver?
I would like to place this on a web page I am working on, and I am thinking I could just place it where it needs to go in Fireworks before i bring it into dreamweaver...
Thanks in advance!

You can create an animated gif using Flash, but it will be much simpler in Photoshop or Fireworks. See this technote:
http://kb2.adobe.com/cps/155/tn_15568.html for the Fireworks solution.

Animated gif layered above background image

I have a static background image which is displayed in a JPanel. I need to display animated gifs at certain positions on the base image. For every new frame of the animation, the paint method is called whcih attempts to load the entire base image + all the new animated images which is extremely slow!. It also means the animated gif keeps on getting loaded, and seldom gets beyond the first frame.
Im sure many people have had to do something like this. Is the solution to draw the gifs on the glasspane (or use layered panes), and to have a seperate paint method? or is their a simple approach like setting a special clip area.

thanks for the help...
The size of the background image is approx 400*400 pixels (gif or jpg), and the icons are 25*25, and have between 1 and 6 frames.
Here comes the code... I havent finished with the mediatracker stuff, but youll get the idea Im sure.
public void paint(Graphics g) {
    MediaTracker tracker = new MediaTracker(this);
    tracker.addImage(image,0);
    try {tracker.waitForID(0);}
    catch (InterruptedException e){}
    g.drawImage(image, 0, 0, this); //draw background image (approx 400*400 pixels)
    int ICON_ID = -1;
    Image img;
    //draw all the icons...
    //all icons have between 1 and 6 frames. 25*25 pixels.
    for (int i = 0; i < icon_IDs.size(); i++) {
      try {
        ICON_ID = new Integer(icon_IDs.elementAt(i).toString()).intValue();
        Point p = dm.getIconPosition(ICON_ID);
        if (isAlarm(ICON_ID)) {        //ITS AN ALARM - use animated gif
          img = getAlarmImage(ICON_ID);
        else                          //NORMAL ICON - no animation
          img = DataDefinition.getImageIcon(dm.getIconType(ICON_ID)).getImage();
        tracker.addImage(img,0);
        try {tracker.waitForID(0);}
        catch (InterruptedException e){}
        int width = DataDefinition.getSize(dm.getIconType(ICON_ID)).width;
        int height = DataDefinition.getSize(dm.getIconType(ICON_ID)).height;
        g.setClip(p.x, p.y, p.x+width, p.y+height);
        g.drawImage(img, p.x, p.y, p.x+width, p.y+height, 0,0,img.getWidth(this),img.getHeight(this),this);
      catch (SQLException sqle) {
        System.out.println("Could not find position of icon : " + ICON_ID);
}

Animated gifs appear to have image bleedthrough in Internet Explorer 9

I have been using Photoshop on a Mac for several years to make animated gif files for our company website and for our customers as well and have never had a problem until recently. On some Windows computers, these files are now appearing with ghost images bleeding through from one frame to another. I have made sure that all layers that are not needed in a particular frame are turned off and I have tried various ways of saving the gif out of Photoshop but have had no luck. I did discover if I turned the option for transparency off in the Save for Web and Devices box the image bleed issue would go away, but then white lines appeared in my gifs instead. After doing some research it appears the image bleed problem is happening in the Internet Explorer 9 browser, but does not happen in any other browser I have tested - Safari, Firefox on Mac and Firefox on Windows. Has anyone run across this issue and found any way to resolve it? It's hard to explain to my customers that their files are fine when what they see on their screens is not. Thanks!

Joel,
You are doing nothing wrong and it is not a Photoshop issue, but a Microsoft one from what I understand after researching this earlier this year. If you were to check you would NOT have this problem in Firefox on a Windows computer, only IE. I believe it started with version 8, but can't swear to that, but I know for sure it was in IE 9. At any rate the way to "fix" it is to change the Compatibility View Mode in IE. Depending on how this view is set you may see any number of issues including the lines that you descrbe. I've included a screen shot showing where to change this. (The small icon next to the address bar.) On my computer when the icon is blue it displays incorrectly, when it is gray things look as they should. Or you can use Firefox and avoid the problem all together. We even had issues where it made our web content reflow around the graphics incorrectly if we didn't have this set correctly. What's bad about it is that it's hard to explain to your customer why their stuff looks wrong and Microsoft has known about this issue for quite a while and hasn't fixed it.
Glad you posted on here so I could post back a fix. I usually do when I find a solution, but it took us several months to come up with what was happening and I'd forgotten to post back.

Animated GIF with hover?

Here is an animated GIF where you can stop and start it when you hover over it. I know how to make them in PSD but not sure how to do it with the hovering (scroll down to see it on page below):
http://www.sbnation.com/2014/1/16/5304078/breaking-madden-49ers-vs-seahawks-beeftank
If this something I can do in Muse? Requires coding or is it a PSD function? I use PSD CS4.
Thanks.

Hello,
This setup is possible in Muse. Please follow the steps below :
1) First save a copy of your GIF as Jpeg image image (with just first frame of your JIF)
2) Now place a Blank Composition Widget and keep only one Trigger and target in it (Delete the rest).
3) Now place your GIF in Target and in Trigger, use the Fill option at top and fill the Tirgger container with the JPEG image.
4) Select Trigger again and using the states option, you would need to delete the Fill image from Rollover, Mousedown and Active state.
5) Place the Trigger on top of Target container and from Widget flyout opion, use the settings as shown in the image below :
A long process but should help you achieve what the effect.
Regards,
Sachin

Adding animated gif to a still image, how do I do this?

I used to know how to do it, but I've forgotten.
Example: The person who told me how to do it had taken an animated gif (butterfly) and placed it on her breast in a still photo of herself. I know that she used Image Ready and as I recall, she created the same number of frames of the still image as the animated butterfly and then she somehow merged the two together. Can someone help, is there a tutorial somewhere? I'm using 7.0 by the way.
Thanks,
Ray
P.S. I also remember that it had something to do with linking the layers so that you just needed to place the first frame in the sequence and link all the other layers to it, but I'm totally lost now!

I don't believe that PS 7.0 supports animation, 'least I don't know how to use this function if it does. That is why I remember using Image Ready to do it. In Image Ready you can use any animated gif file to do what I want, I just can't remember how I did it. I do remember that I had to take my background image and duplicate it to get the same number of frames as the animated gif file, but I don't remember how I merged the two together. It had something to do with placing the first frame of the animated gif where I wanted it on my background and then using the link tool in the layer box to link them together, that way I didn't have to place each individual frame of the animation on to the background and avoid an alignment nightmare. I sure wish I would've taken notes!
Thank you for your suggestions.
Ray

How to create an animated gif with CS4?

Trying to create an animated gif from 8 images using FW CS4. Can't find "how to" via online FW help. Have done it before with version 8 -- followed the in-house Help db but CS4 doesn't have in-house db. I found a tutorial: http://www.entheosweb.com/website_design/animated_gifs.asp, but talks about opening Frames panel (Windows > Frames) and I can't even find the Frames panel in CS4!
Just trying to create simple animated gif as temporary portfolio. Would also like to click on a different link for each image as it rotates if that's possible but main thing is just to create the gif.
Thanks so much in advance!

For the first part of your question
File > Open, then at the bottom of the dialog Tick the open to Open As Animation.
Then browse/select multiple images, then Open.
This will automatically add each image to a State (Window > State, previously called Frames).
Then adjust the Frame Rate of each State. The default is 7th/100 (a sec). You should see the number 7 to the right of each State. Double click to adjust as desired. 100 = 1 second, 200 = 2 seconds and so on.
Once the animation is configured, go File > Save As > Animated Gif.
h

Control Animated Gif with ImageAnimator Class

Here is something I just found that some of you may like. You can use the
ImageAnimator Class to run Animated Gifs in vb.net.
Public Class Form9
Private animatedImage As Bitmap = Image.FromFile("C:\bitmaps\animated gifs\hopping rabbit 2 - animated.gif")
Private Sub Form9_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Button1.Text = "Start"
Me.BackColor = Color.Teal
End Sub
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
If Button1.Text = "Stop" Then
ImageAnimator.StopAnimate(animatedImage, New EventHandler(AddressOf Me.OnFrameChanged))
Button1.Text = "Start"
Else
'Begin the animation.
ImageAnimator.Animate(animatedImage, New EventHandler(AddressOf Me.OnFrameChanged))
Button1.Text = "Stop"
End If
End Sub
Private Sub Form9_Paint(sender As Object, e As PaintEventArgs) Handles Me.Paint
'Get the next frame ready for rendering.
ImageAnimator.UpdateFrames()
'Draw the next frame in the animation.
e.Graphics.DrawImage(Me.animatedImage, New Point(0, 0))
End Sub
Private Sub OnFrameChanged(ByVal o As Object, ByVal e As EventArgs)
'Force a call to the Paint event handler.
Me.Invalidate()
End Sub
End Class

Hey Tom,
Yes the ImageAnimator is a handy class for showing animated Gif images. I looked at it when making the Playback panel on my Gif Creator program. I could not use it though because, i would of had to create the Gif image before i could play it back
and being my images are all single images i was stuck using a Timer to show each one.
I wish there was a way to use a list of single images with this class. It would have been much less work. 8)
If you say it can`t be done then i`ll try it
Yeah, I see that it is not enough for your Gif Creator.
I just did not know about it and was using the gif strip to manually make a list of all the gif frames and showing individually with a timer. This class does it and a couple other things much easier.

Animated Gif with large base image & small animated part.

Similar Messages

Maybe you are looking for