Graphics Reference
In-Depth Information
3.3.1 Animating in Edge Animate
In Edge Animate, you simply open the HTML document with the Open dialog
box. The page is displayed directly on the Stage, and the Elements panel on
the right shows the document's entire DOM structure. You can select elements
on the Stage and then animate them on the Timeline like any Edge Animate
project.
Figure 3.8
Edge Animate can open an existing
HTML document for further editing
without any additional steps
The final result can either be saved as usual or published in an optimized
version (see chapter 6). Editing the HTML file in Edge Animate generates the
necessary Edge Animate files in the same folder as the HTML document and
links them to the header of the HTML document. In addition, CSS classes are
also applied to all elements for animation. The entire animation logic is stored in
external JavaScript files and applied to the document during runtime.
.
CSS Equivalent
The CSS properties being changed
here are: left, top, transform, width,
height and opacity. Here is one
example of changing the position:
style="left: 100px;
transform:
translateX(0);
top: 20px;
transform:
translateY(0);"
3.4 Basic Properties
Except for a few cases, changes to the basic properties of all assets are supported,
thus making them context-independent.
For width and height:
style="width: 200px;
height: 200px;"
3.4.1 Position, Size, and Opacity
The basic properties of position, size, and opacity can be modified for all asset
types. Position is indicated by x and y coordinates in pixels (px). Basically, you can
enter any coordinates for these properties, but only as whole numbers. Unlike
Flash, CSS rules out the rendering of sub-pixels. See section 3.4.4 to learn more
about how the composition behaves when extreme values are used that com-
pletely or partially position the element outside the Stage's viewable area.
The size for the element's width and height is also defined in pixels. If you
want the ratio to always be maintained when minimizing or maximizing, you
can enable the Link Width and Height option.
You can also use percentages instead of pixel values for flexible layouts. More
on this topic can be found in section 3.9.4.
Opacity in CSS is handled as follows:
style="opacity: 0.5;"
