Here are some of my example animated gifs created using Adobe Animate – the successor to Flash.
Whether you pronounce it ‘JIF’ or ‘GIF’ ( I’m in camp GIF, with a ‘G’ by the way!) the humble .gif format has been around for decades. It’s simple, fun and universal. Gifs are great, and you can use Adobe Animate to create them.
For the sake of show and tell, I wanted to share some of my smaller animated projects. A batch of animated Gifs I made using Adobe Animate CC and its predecessor Adobe Flash.
I have already shared other types of example projects created using Adobe Animate. Such as what you can make using Adobe Animate ( formerly Flash ).
Adobe Animate, or when it was called ‘Flash’, was the 2D animation software of choice in its heyday. I’ve used Adobe Animate for making web components, animations, small games, and various other forms of multimedia before it lost its popularity. Adobe Animate still has plenty to offer in my professional opinion. From creating 2D animations to very simple games, videos, and general multi-media in the form of HTML5.
Another benefit of Adobe Animate – it comes as part of the Adobe Creative Suite ( Creative Cloud ). So if you are already a license holder, this is another tool in your arsenal.
A distinction that I like in the way Adobe Animates works for motion graphics, is its granular approach to frame-by-frame animation.
It adheres more closely to traditional methods of frame-by-frame animation.
Example Gifs created in Adobe Animate – My Animations
My example animated gifs created in Adobe Animate.
My history with Adobe Animate
After studying for an HND in Graphic Design, I decided to embark on another course that built upon my knowledge of working with Adobe Animate – Multi-media design and digital animation.
I still use Adobe Animate for ‘small-scale’ animation projects from time to time, as it is well-suited to creating frame-by-frame animations and small-scale projects.
But, it is no longer my default motion tool for making multi-media applications and animations.
Example GIFS created in Adobe Animate – Shorthand overview of the process
To create the example animated GIFs (or gif) as shown in this post, I did the following:
- Mocked up some very rough ideas on paper to help brainstorm and visualise my ideas.
- Created the vector illustrations in Adobe Illustrator.
- Imported the Illustrator artwork into Adobe Animate.
- Created the animations through a mix of frame-by-frame animation and ‘tweens’.
- Exported the GIFs from Adobe Animate – ready to be distributed.
In the paragraphs below, I go to more exact detail of what of what I did in each paragraph.
Drawing the artwork in Adobe Illustrator
I didn’t illustrate the artwork in Adobe Animate. These examples shown in this post were created in Adobe Illustrator first and then imported into the project library in Adobe Animate.
In the early stages, I created the drawings the way I wanted. I then drew them in such a way that parts of the illustrations could be pieced together and broken apart according to how I wanted the animations to work.
Why not just do it all in Adobe Animate?
Because I find it easier to illustrate and draw in Adobe Illustrator using my Wacom Tablet. Adobe Illustrator is made for drawing.
I can do some basic drawing in Animate, but Illustrator is a lot more capable as far as I’m concerned for drawing, and fortunately, these 2 applications are good bedfellows now they are part of the Adobe Creative Suite. This has not always been the case.
I have written a bit more here, on the merits of drawing with Wacom Tablet, and why I used Adobe Illustrator when drawing on a computer.
Example GIFs created in Adobe Animated | The ‘importing’ stage
Adobe Illustrator enabled me to have greater control of how I wanted the artwork to look. Gradient shading on the artwork, bold highlights, crisp lines etc.
Once I had created the initial illustrations, I then exported these from Adobe Illustrator – some pieces of artwork were direct imports from either single or multiple artboards.
I then got animating the artwork.
Creating the animations on the main root timeline
Importing complete, assets ready.
This is a similar process I have been using since I was taught how to use Adobe Flash ( Now Animate ) back in 2007. Although the process has changed to some degree and I have streamlined it substantially, the essence of this is more or less the same.
Before using Adobe Animate, I used it to draw it all in Animate – Formerly Flash.
Working on one animation at a time, I pull the components of individual drawings onto the main stage. The white background. I then commence the process of creating animations via a combination of tweens, keyframes, and incorporating simple effects.
When creating the . GIF animations, I try to stay conscious of their intents and purposes. To be used on websites as loops and to be multi-purpose.
I then ‘Exported’ the gifs from Adobe Animate, doing a certain amount of testing and measuring, and tweaking as and when needed.
Caveats – don’t bury in sub animations
Note to self and a lesson to the reader.
Don’t insert the animations into animations. Eg, from the main timeline.
And don’t create an animated clip inside another animated Movie Clip.
These don’t tend to work correctly when exporting from Adobe Animate in most cases.
A strong USP ( Unique Selling Point ) for Adobe Animate
The ability to create frame-by-frame animation is one of the best and most unique selling points when it comes to using Adobe Animate. For me, this is also incidental, as Animate, which was formerly “Flash”, comes as part of the Abobe Creative Suite. No need for extra or new licenses for 2D animation.
Thank you for taking the time to read my post on example gifs created in Adobe Animate and taking the time to watch my animations. Animate, in my opinion, was and still is a great little program for creating animated gifs or 2D animation in general. If you know how to use it.
If you would like any help in creating animated gifs be it for a website or something else, then please do get in touch.
Other topics around example animated gifs created using Adobe Animate
You may also find these subjects interesting around using Adobe Animate.
Other websites
– My brochure and portfolio website & services – jimmsdesign
External Project Website ( takes you away from this website )
Part of my project samples – Example gifs created using Adobe Animate – Copyright Jimmsdesgn