Graphics Reference
In-Depth Information
On the stage of a theatrical production as well as in real life, the actors play a cru-
cial role and contribute significantly to the success or failure of a choreographed
performance. An animation or motion design is no different. The overall impres-
sion of an animation largely depends on the quality and expressiveness of the in-
dividual visual elements. Pixelated graphics and inconsistent color compositions
can disappoint the viewer, even in the most elaborate animations and effects.
Before we turn to actual animation and interaction, we will first focus on the top-
ic of designing an animation. In the following pages, you will learn what types
of elements are used in Edge Animate and how to set them. When creating a
new Edge Animate project, you must choose from two different starting points.
You can choose to start from scratch with a blank document and then create
elements using the paint tools, or you can import external graphics and images.
In the design phase, Edge Animate writes code as HTML, CSS, and JavaScript in
the relevant files, so you can also start with an existing HTML document. Edge
Animate uses WebKit to render the Stage and all its visual elements, ensuring an
accurate depiction of all elements.
Let us have a closer look at the two different starting methods before we
zoom in on the Property panel for modifying various object properties.
3.1 Starting From Scratch (Blank Document)
In most cases, you will be starting with a blank document to fill in an entire
web page or a portion of an existing website with animations. In both cases,
the composition size is usually clear from the get-go. If you want to start with an
empty Stage, select Create New on the Getting Started panel.
