This chapter is from the book
This chapter is from the book
This chapter is from the book
Taking the Create Lesson
With the Create lesson, you’ll learn how to quickly draw and work with assets in Edge Animate. An asset is any artwork or element, such as shapes, images, buttons, and fonts, you have created or imported into your composition. In this lesson, you start from a sample file, and then use it to work create and work with elements. You’ll create a rounded rectangle, add text, add graphics from the Library panel, and organize elements in the Elements panel.
Take the Create Lesson
From the Welcome screen under Getting Started or the Lessons panel, click the Create lesson tile to start it.The Welcome screen closes, Edge Animate creates a new Untitled project, and the Lessons panel displays the start of the lesson.
Click the Click to open the sample link.The content_creation.html file opens, displaying a blank Stage.
Click the Next Step link to create content (Step 2 of 5).
Select the Rounded Rectangle Tool on the Tools panel.
Draw a rounded rectangle in the center of the Stage.
In the Properties panel, click on the link between W and H, and then set the size of W to 220 and H to 130.
Click the Next Step link to add text (Step 3 of 5).
Click the Text Tool on the Tools panel.
Click in the center of the rectangle and type Hello World.
Click the Close button in the Text editor.
Select the text, and then drag to center the text in the shape.As you drag towards the center, Smart Guides (horizontal and vertical) appear to indicate the center.
Click the Next Step link to import graphics (Step 4 of 5).
Drag the background.jpg icon from the Library pane onto the Stage and place it at 0,0 (the upper-left corner of the Stage). As you drag, the position appears on the Stage.The background image covers all the other elements on the Stage.
In the Elements panel, drag the background.jpg <div> element below the RoundRect <div> element. As you drag a black bar appears indicating the new location.The background image moves to the back of the Stage.
Click the Next Step link to organize elements (Step 5 of 5).
In the Elements panel, drag the Text <div> element onto the RoundRect <div> element. As you drag on top, the destination element changes to gray.The Text element is now associated with the Rounded Rectangle element.
The lesson is complete.
Click the File menu, click Save As, navigate to a folder, create a folder, enter a name for the composition, and then click Save.
To open a finished version of the lesson, click the Click to open the finished sample link.
)
)
)
)