Adobe Edge Animate CC provides drawing tools so that you can create shapes on the Stage, which then become elements that you can animate and add actions to. The same is true for importing images and writing text.

Importing images into Edge Animate

You can import images into your Edge Animate project from the menu bar; click File→Import. A navigation window opens, prompting you to select an image. Navigate to where you saved your image, then select the image, and finally choose Open from the navigation window.

Adobe Edge Animate CC supports drag and drop. Instead of clicking through the File menu, you can drag an image from your desktop directly onto the Stage.

When you have an image in your composition, several new options appear in the Properties panel, as shown in this figure.


Writing text

Adding text to your Edge Animate project is a matter of a few clicks and typing. And the best part is that the text you type is considered selectable type while it’s viewed in a browser.

Edge Animate will not convert your text into an image for the final output — which means search engines can parse your text and index it for search results. Ultimately, using text in Edge Animate helps — or at least doesn’t hurt — your website’s SEO (search engine optimization).

Adobe Edge Animate CC is considered SEO-friendly; it places text in the JavaScript file as text, not as an image of text. Therefore, search engines can find any text that you type into Edge Animate and use in the final animation placed on your site.

To insert text into your Edge Animate composition, click the Text tool, which is located directly under the main menu bar in the top-left corner (see this figure).


With the Text tool selected, click and drag over the Stage. You see a thin, blue rectangle appear as you click and drag. When you release the left mouse button, you also see a gray text box with a blinking cursor (as shown here).