Master the art of web banner ad creation with Adobe Animate

Master the art of web banner ad creation with Adobe Animate

Table of Contents:

1. Introduction
2. Creating a New Document in Adobe Animate
3. Importing an Illustrator Document
4. Creating a Motion Tween Animation
5. Saving a Motion Tween Animation as a Custom Preset
6. Adding a Blend Mode to the Shape
7. Animating the Text
8. Adding a Button Action
9. Testing the Web Banner Animation
10. Conclusion

Introduction In this tutorial, we will learn how to apply motion preset animation to a web banner ad using Adobe Animate. We will explore the process of creating a motion tween animation, saving it as a custom preset, animating text, adding a blend mode to the shape, and adding a button action to the web ad. By the end of this tutorial, you will be able to create engaging and dynamic web banner animations.

Creating a New Document in Adobe Animate To start, we need to create a new document for our web banner in Adobe Animate. We will choose the format preset for ads and select a large rectangle size of 336 x 280. The frame rate will be set to 30, and we will ensure that the platform type is set to HTML5 canvas. Once we have these settings in place, we can proceed to create the document.

Importing an Illustrator Document Instead of designing the web ad in Adobe Animate, we will import an Illustrator document that we have already prepared. The Illustrator document contains the elements of the web ad, such as text, a button, and shapes, placed on separate layers. To import the Illustrator document, we will go to File > Import > Import to Stage and locate the file called "Web_add.ai." We will select all layers, ensure objects are placed at the original position, and convert layers to animate layers. Once we have made these selections, we can import the document.

Creating a Motion Tween Animation Now that we have imported the Illustrator document, we can focus on animating the elements of the web ad. We will start by creating a motion tween animation for a small rectangle shape. To do this, we will right-click on the layer containing the shape and choose "Create Motion Tween." Then, we will add keyframes at specific frame marks and use the free transform tool to animate the shape's position. By setting keyframes at the beginning and end of the animation, we can create a smooth motion tween effect.

Saving a Motion Tween Animation as a Custom Preset We have the option to save our motion tween animation as a custom preset in Adobe Animate. By doing so, we can easily apply the same animation to other elements in our web ad or future projects. To save a motion tween animation as a custom preset, we need to click on the layer, choose "Save Selection as Preset," and give it a name. This will save the animation in the motion presets custom presets folder. We can then apply the preset to any other element in our project by selecting the element and clicking on the saved preset.

Adding a Blend Mode to the Shape To enhance the visual impact of our animation, we can add a blend mode to the shape in Adobe Animate. This allows us to control how the shape interacts with the other elements in the web ad. By selecting the shape, going to the properties panel, and choosing a blend mode, such as "multiply," we can achieve interesting visual effects and make the animation more engaging.

Animating the Text Now that we have animated the shape, we can move on to animating the text in our web ad. We will focus on two text pieces: "It's time to put more money in your pocket" and "Switch and save up to 30% on home and auto insurance." We will animate the text by adding keyframes, adjusting the opacity, and applying classic tween animation. This will create a fade-in and fade-out effect for the text, making it visually appealing and captivating for viewers.

Adding a Button Action In order to make our web ad interactive, we will add a button action to the "Get a Quote" button. By converting the button into a symbol and giving it an instance name, we can then add an action to trigger a specific event when the button is clicked. In this case, we will set the button action to go to a web page, such as adobe.com. We will utilize the Actions window in Adobe Animate to write the necessary code to implement the button action.

Testing the Web Banner Animation Before finalizing our web banner animation, it is crucial to test it in a web browser to ensure that all the animations and interactions work as intended. Adobe Animate provides a "Test Movie" feature that allows us to preview the animation in action. By clicking the "Test Movie" button, the animation will be processed and launched in a web browser. We can then observe how the animation appears and check if all the interactive elements function properly.

Conclusion In summary, this tutorial has covered the steps involved in applying motion preset animation to a web banner ad using Adobe Animate. We have learned how to create a new document, import an Illustrator document, create motion tween animations, save them as custom presets, add blend modes to shapes, animate text, add button actions, and test the web banner animation. By implementing these techniques, you can create attention-grabbing and engaging web banner ads that effectively communicate your message to the audience.