Home > Articles > Home & Office Computing

  • Print
  • + Share This
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

  • 01yellow_circle.jpg 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.

  • 02yellow_circle.jpg Click the Click to open the sample link.

    The content_creation.html file opens, displaying a blank Stage.

  • 03yellow_circle.jpg Click the Next Step link to create content (Step 2 of 5).
  • 04yellow_circle.jpg Select the Rounded Rectangle Tool on the Tools panel.
  • 05yellow_circle.jpg Draw a rounded rectangle in the center of the Stage.
  • 06yellow_circle.jpg 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.

  • 07yellow_circle.jpg Click the Next Step link to add text (Step 3 of 5).
  • 08yellow_circle.jpg Click the Text Tool on the Tools panel.
  • 09yellow_circle.jpg Click in the center of the rectangle and type Hello World.
  • 10yellow_circle.jpg Click the Close button in the Text editor.
  • 11yellow_circle.jpg 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.

  • 12yellow_circle.jpg Click the Next Step link to import graphics (Step 4 of 5).
  • 13yellow_circle.jpg 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.

  • 14yellow_circle.jpg 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.

  • 15yellow_circle.jpg Click the Next Step link to organize elements (Step 5 of 5).
  • 16yellow_circle.jpg 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.

  • 17yellow_circle.jpg Click the File menu, click Save As, navigate to a folder, create a folder, enter a name for the composition, and then click Save.
  • 18yellow_circle.jpg To open a finished version of the lesson, click the Click to open the finished sample link.

  • + Share This
  • 🔖 Save To Your Account