Animating Adobe Firefly Content with Adobe Animate

You can download the image source files for this article from here

An Introduction to Adobe Firefly

Earlier this year, Adobe unveiled its set of generative AI tools via https://firefly.adobe.com/. These services are similar to other generative image AIs such as Midjourney or Dalle-2 and are exposed through a web-based interface with a well-thought-out UI. Eventually, Adobe plans to integrate these procedures into existing software such as Photoshop, Premiere Pro, Express, and more.

Originally as a waitlist that one would need to sign up for… Firefly is now open to anyone for use with an Adobe ID.

Image 1: Adobe Firely  

Firefly is the new family of creative generative AI models coming to Adobe products, focusing initially on image and text effect generation. Firefly will offer new ways to ideate, create, and communicate while significantly improving creative workflows. Firefly is the natural extension of the technology Adobe has produced over the past 40 years, driven by the belief that people should be empowered to bring their ideas into the world precisely as they imagine them. -- Adobe

A few of the things that make Adobe Firefly different from similar generative AI services are the immediate approach to moving beyond prompt-based image generation to procedures such as prompt-driven text effects and vector recolorization… the fact that the Firefly model is based upon Adobe Stock content instead of general web content… and Adobe’s commitment to the Content Authenticity Initiative.

As of early June 2023, the following procedures are available through Adobe Firefly:

•  Text to Image: Generate images from a detailed text description.
• Generative Fill: Use a brush to remove objects, or paint in new ones from text descriptions.
• Text Effects: Apply styles or textures to text with a text prompt.
• Generative Recolor: Generate color variations of your vector artwork from a detailed text description.

In addition to this, the public Adobe Photoshop beta also has deep integration with Firefly through the generative fill and other procedures exposed through time-tested Photoshop workflows.

Generating Images with Text Prompts

Let’s have a look at how the prompt-based image generation in Adobe Firefly works. From the Firefly start page, choose the option to generate content using Text to Image and type in the following prompt:

cute black kitten mask with glowing green eyes on a neutral pastel background

On the image generation screen, select None as the content type. You should see similar results as the screenshot pictures below.

Image 2: Cute black kitten with green eyes

Firefly generates a set of four variations based on the given text prompt. You can direct the AI to adjust certain aspects of the images that are generated by tweaking the prompt, specifying certain styles via the user interface, and making choices around aspect ratio and other aspects.

Using Generative Fill

We can enter the generative fill interface directly following the creation of our image assets by hovering over the chosen variant and clicking the Generative Fill option.

Image 3: Generative fill output

The generative fill UI contains tools for inserting and removing content from an existing image with the direction of text prompts as well. In the example below, we are brushing over the kitten’s forehead and specifying that we would like the AI to generate a crown in that place via a text prompt:

Image 4: Generating a crown using a text prompt

Clicking the Generate button will create a set of variants - similar to when we first created the image. At this point, we can choose the variant we like best and click the Download button to download the image to our local machine for further manipulation.

Image 5: Image generated with a crown added

See the file Firefly Inpaint 20230531190125.png to view the resultant image generated by Firefly with the crown added. You can download the files from here.

Preparing for Animation with Photoshop

Before bringing the generated kitten image into Animate, we’ll want to optionally remove the background using Photoshop. With the new contextual toolbar – Adobe makes this very simple. Simply open the generated image file in Photoshop and with the single available layer selected, choose Remove Background from the contextual toolbar that appears beneath the image.

Image 6: Removing background in Photoshop

The background is removed via a layer mask that you can then use to refine the portions of your image that have been hidden through the normal procedure of brushing black or white across the mask to hide or reveal content.

See the file Kitten.png to view the image with the background removed by Photoshop.

To export your image without the background, choose File… Export… Export As… from the application menu - and select to export a transparent .png file to a location of your local machine that you’ll remember.

Animate Document Setup

We’ve prepared a new Animate document using the resulting .png file as a base. The stage measures 1024x1024 and has been given an appropriate background color. The FPS (frames per second) value is set to 30 – making every 30 frames in the timeline defines 1 second of motion. The kitten image has been added to the single layer in this document and is present on the stage:

See the file KittenStarter.fla from here to if you’d like to follow along in the next section.

Producing Motion from Generative Images with Adobe Animate

While Adobe Animate does not have any direct interaction with Firefly procedures yet – it has exhibited Adobe Sensei capabilities for a number of years now through automated lip-sync workflows that make use of the Sensei AI to match visemes with language sounds (phonemes) across the timeline for automated frame assignments. Since we are dealing with a kitten image and not a speaking character – we will not be using this technology for this article.

 1. Instead, we’ll be using another new animation workflow available in Animate through the Asset Warp tool and the creation of Warped Objects. Select the Asset Warp tool from the toolbar. This tool allows us to transform images into Warped Objects and to place and manipulate pins to create a warp mesh.

2. In the Properties panel, ensure in the Tool Properties tab that Creates Bones is toggled off within the Warp Options section. This will ensure we create pins and not bones as would be needed for a full rig.

Image 7: Properties Panel

 3. Using the Asset Warp tool, click the tip of the kitten’s right ear to establish a pin and transform the image to a Warped Object. An overlay mesh is displayed across the object – indicating the form and complexity of the newly created warped object.

Image 8: Warped Object

4. Add additional pins across the image to establish a set of control pins. I recommend moving clockwise around the kitten’s face and have placed a total of 8 pins in locations where I may want to control the mesh.

Image 8: Kitten face clock-wise

 5. Now, look at the timeline and note that we currently have a single keyframe at frame 1. It is good practice to establish your Warped Object and its associated pins first, before creating additional keyframes… but changes can be propagated across frames if necessary. Select frame 30 and insert a new keyframe from the menu above the timeline to duplicate the keyframe at frame 1. You’ll then have 2 identical keyframes in the timeline with a span of frames between them.

6. Add a third keyframe at frame 15. This is the frame in which we will manipulate the Warped Object. The keyframes at frames 1 and 30 will remain as they are.

7. Using the Asset Warp toll once again, click and drag the various pins at frame 15 to distort the mesh and change the underlying image in subtle ways. I pull the ears closer together and move the chin down and adjust the crown and cheeks very slightly. 

8. We’ll now establish animation between these three keyframes with a Classic Tween. In the timeline, select a series of frames across both frames spans so they are highlighted in blue. From the men above the timeline, choose to Create classic tween.

9. The frame spans take on a violet color which indicates a set of Classic Tweens have been established. The arrows across each tween indicate there are no technical errors. Scrub the blue playhead across the timeline to view the animation you’ve created from our Firefly content. 

Your Adobe Firefly content is now fully animated!

Refining Warped Object Motion

If desired, you can refine the motion by inserting easing effects such as a Cubic Ease In Out across your tweens by selecting the frames of a tween and looking at the Frame tab in the Properties panel. In the Tweening section, simply click the Effect button to view your easing presets and double-click the one you wish to apply.

See the file KittenComplete.fla to view the finished animation.

Sharing Your Work

It’s easy to share your animated Firefly creation through the menu at the upper right of the screen in Animate. Simply click the Quick Share and publish icon to begin.

Choose the Publish option… and then Animated GIF (.gif) – and click the Publish button to generate the file.

You will be able to locate the published .gif file in the same folder as your .fla document.

See the file Kitten.gif to view the generated animated GIF.

Author Bio

Joseph is a Teaching Assistant Professor, Instructor of Technology, University of Colorado Boulder / Adobe Education Leader / Partner by Design

Joseph Labrecque is a creative developer, designer, and educator with nearly two decades of experience creating expressive web, desktop, and mobile solutions. He joined the University of Colorado Boulder College of Media, Communication, and Information as faculty with the Department of Advertising, Public Relations, and Media Design in Autumn 2019. His teaching focuses on creative software, digital workflows, user interaction, and design principles and concepts. Before joining the faculty at CU Boulder, he was associated with the University of Denver as adjunct faculty and as a senior interactive software engineer, user interface developer, and digital media designer.

Labrecque has authored a number of books and video course publications on design and development technologies, tools, and concepts through publishers which include LinkedIn Learning (Lynda.com), Peachpit Press, and Adobe. He has spoken at large design and technology conferences such as Adobe MAX and for a variety of smaller creative communities. He is also the founder of Fractured Vision Media, LLC; a digital media production studio and distribution vehicle for a variety of creative works.

Joseph is an Adobe Education Leader and member of Adobe Partners by Design. He holds a bachelor’s degree in communication from Worcester State University and a master’s degree in digital media studies from the University of Denver.

Author of the book: Mastering Adobe Animate 2023