Skip to main content
clevermill.com
clevermill.com
Inspiring
April 12, 2018
Answered

How? Use an animated Gif in Animate CC HTML5 CANVAS, WITHOUT making frames from it

  • April 12, 2018
  • 2 replies
  • 8782 views

I'm making an HTML5 Canvas document with Animate CC.  I want to use an animated gif "as is".  When I import the gif, it makes frames from the sequence and creates the sequence of images (now pngs) in the library.  When publishing, instead of referencing the original gif, it uses the png sequence.   Where is the option to just use the gif?  This is simple html afterall, isn't it?   A simple src="images/myanimatedgif.gif" should do in the output code.

This topic has been closed for replies.
Correct answer Colin Holgate

If the GIF is on top of other things you could use an image component, and have that point to the gif file. Once the component is in the timeline you can still animate it, but it will be sat on top of anything else that is not a component.

2 replies

Colin Holgate
Colin HolgateCorrect answer
Inspiring
April 12, 2018

If the GIF is on top of other things you could use an image component, and have that point to the gif file. Once the component is in the timeline you can still animate it, but it will be sat on top of anything else that is not a component.

B
benbazar
New Participant
November 5, 2018

I have tried this method, however it doesn't display the animated gif... Even though it's sourcing the gif in the images folder.

B
benbazar
New Participant
November 6, 2018

Ignore, I was sourcing the gif in the images folder... However that's where it needs to export to.

Once I sourced from an assets folder... it exports to the images folder just fine.

Thanks for your components answer. Helped a lot.

clevermill.com
clevermill.comAuthor
Inspiring
April 12, 2018

An unreliable quirky workaround is to NOT import the gif.    I have an animated gif called "rabbit.gif".   Instead of importing that gif to the stage, import a jpg to the stage with the same name: "rabbit.jpg".  After publishing, open the html file in an editor and find/replace "rabbit.jpg" and change the ".jpg" to ".gif".  Make sure your "rabbit.gif" is in the images folder.    Then delete your "rabbit.jpg" file from the images folder.

You'll find this works.  You can tween it too.  What you'll find quirky is when you refresh the page.  I can't get it to restart the animated gif.  I've tried tweaking the code a bit, but I'm just a light coder dude and haven't solved it. 

I believe the hangup is Animate is trying to synchronize timing of the different elements.  And doesn't think to restart the gif.    I've tried having the gif start on frame 2.. and also dropping it on the last frame.  That didn't work.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices