Graphics Reference
In-Depth Information
7.
Left side •
In order for the slogan on the left to always be completely visible,
we must ensure that the image container fits in the width and that the
image content is always centered. To do this, we first set the preview slider
back to our standard width of 1200 px, and then switch the image width to
percentages. In addition, we also apply the layout preset Center Background
Image so that the slogan is always displayed in the middle.
8.
Final result •
The flexible banner is now ready and can be opened in the
browser. Depending on how it will be used, the project can now be export-
ed as an optimized web version or for digital publications. You will learn
more about this in section 6.3.3.
3.10.2 Independent Layouts for Different Screen Sizes
Of course, the flexible layout described above has one serious disadvantage—it
can only display very limited content. It must be possible to display the tiniest
details of all content in percentages. Often it is necessary or more practical to cre-
ate independent layouts for different screen sizes that adjust to defined widths.
The first version of Edge Animate does not yet directly support this feature un-
less you program the code using the Edge Animate API. Since such functionality
is needed quite often, a few colleagues and I have developed a free extension
for Edge Animate that offers a very simple way to create independent layouts,
in addition to numerous other features:
Edge Commons—Dirty Little Helpers for
Edge Animate
. For more information about Edge Commons, refer to section 7.4.
In the following example, we will use the Adaptive Layouts feature from the
Edge Commons Library to generate three independent layouts. The following
screenshots show the layout for screen widths of 400-599 px, 600-799 px and
> 800 px.
4
Project
The files for this example can be
downloaded from http://edgebuch.
simonwidjaja.com
Project Name:
Creation_AdaptiveLayouts
