Skip to main content
Participant
March 7, 2022
Question

interactivity in animated GIF files

  • March 7, 2022
  • 3 replies
  • 905 views

I would like to add more interactivity to some of my animated GIF files created in Photoshop.  Is there a way to add action buttons to individual frames (e.g., start over, pause/hold)? Would this be possible with JPEG sequences (if not with Animated GIFs)? Thanks!

 

--Arjun

This topic has been closed for replies.

3 replies

Participating Frequently
March 8, 2022

Thank you all for your very thoughtful responses.  I have actually overseen a solution that was at my fingertips but I did realize that Joomla had made improvements in this area without having to create a separate Joomla article for PDFs.  I am glad that now that I am past this part, I can improve other areas of the site and cut down on unnecessary content.   Best wishes,

--Arjun

Legend
March 8, 2022

To clarify, perhaps, the reason people are suggesting other things: Animated GIF is a simple collection of pictures. There is no place inside it to put interactivity or links, just like they can't have sound. So you'd really be looking for some other thing that can play pictures (which could be GIF or other things), and give you the interactive stuff. If this is for a regular web site, this could work. If you want it, for example, in Facebook, it won't work because they just take the original GIF and play it.

Participating Frequently
March 8, 2022

Thanks, @Test Screen Name .  Yes, animated GIFs could be used for a series of related images (multi-page documents, images of objects with multiple views, etc.).  For the most, I can set the timing for each frame and most GIFs will be just fine.  I have no intention of bringing them into social media but I can add a link to these pages in--for example--FB. and let viewers follow the link to the site and view the images there.  What I would be interested is in image formats with addd interactivity so they can be viewed on the website but withing the architecture of the Joomla CMS.  PDFs offer that, but I am trying to minimize the need to navigate around just for another article in Joomla.  Thanks! -- Arjun   

Myra Ferguson
Community Expert
Community Expert
March 7, 2022

You could convert the Animated GIF into a video from within Photoshop by converting it to a video timeline and rendering the video:

Save and export video and animations

Participant
March 8, 2022

Thank you, Myra.

 

Yes, your suggestion would be ideal for animations, but I would like to find a solution to use a single image file containing a handful images of historical/archival documents where time (0.1 sec, 2 sec, 15 sec, etc.) is not a factor if the end-user can click or hover over (not an option in handheld devices) a page while reading it.  The video will not work here, as it may stop over a fuzzy transition or tween.  It has to be a frame with an unambiguous image.  Unfortunely, the timeline feature in Photoshop does not offer that for each frame, so I am looking at other image formats such as jpeg sequences or APNGs and see what they offer. Animated GIFs may be a dead-end street for my purposes, but thanks for the suggestion again! --Arjun

Participating Frequently
March 8, 2022

There are a number of ways to make a slideshow of images that autoplays in a web browser. What you make depends on what you want it to do and what tool you want to use to make it. Here are a few options that might help:

Photoshop (because that's this forum)

  • Animated GIF - plays but the format does not support interactivity to pause & stop
  • Video - a single image file where multiple frames of an image increase the onscreen duration based on the frames per second (fps)

Animate

  • HTML - set up an Animate document with images in individual frames. You can make the images buttons or movieclips (it's a type of symbol--it doesn't have to actually be a video) with actions to stop or play. Your output can be HTML
  • OAM - do the same as above but publish your file as an OAM package that you can use elsewhere

InDesign

  • HTML5 - set up an InDesign layout and export it with the in5 plugin to generate the code for you
    • Use in5's Image Sequence with auto play and tap to play/pause
    • Use in5's Slideshow Interactive Widget with auto play and tap to play/pause
    • Place an Animate OAM file

 


Thank you, Myra (and Derek).

Since I am using Joomla, each article allows integrating images and I am trying to minimize the need for navigation between multiple images associated with one original document.  So, a three page letter would have three images, but a GIF could combine all those into one but keeps playing.  Can the browser (Firefox, Googlem IE) be used to allow viewers to hold the frame from moving forward until the key or button is released in the browser? 

So, here is the link to the essay: https://toledosattic.org/exhibits/biography/101-exhibit-themes/biography/94-taess-dunbar

and here is the link to the GIF I have now: https://toledosattic.org/images/essays/dunbar/4-21-93allpp2.gif The frame is set for 15 seconds but some may need to hold it while trying to plow through the handwritten text (we have no transcription).  I could use three separate HTML pages that is how the site used to have it in 1997, but I would like to minimize navigation.  I did notice the exporting a powerpoint file as GIF will crate a larger image (despite the smaller file size), but I am open to switching to WebP and AVIF, if the siolution exists for those file formats.

Thanks! -- Arjun