Graphics Reference
In-Depth Information
7.4.4 Spotlight Overlay (YouTube)
Now I want to introduce you to Spotlight. This component is similar to the
widely used Lightbox or Colorbox overlays. Such overlays allow you to provide
a detail view for individual elements, such as thumbnails, that covers the entire
page. The contents behind the overlay are covered with a semi-transparent area
so that the detail view gets the user's full attention. A small X-button closes the
Spotlight overlay. In the current version, the spotlight function is limited to dis-
playing YouTube videos. However, other types of media, such as images, Edge
Animate compositions, and other video providers are already in the planning
stages.
Let's suppose we've created a simple composition with a thumbnail as
follows:
Figure 7.7
A sample thumbnail image to activate
the Spotlight overlay
To place the spotlight function in a click action, first load Edge Commons
in the
compositionReady
event. This time, also load the relevant style sheet
that provides the CSS classes for the Spotlight overlay. Center the Stage in the
callback as follows:
yepnope({
load: [
'http://cdn.edgecommons.org/an/1.0.0/js/min/
EdgeCommons.js',
'http://cdn.edgecommons.org/an/1.0.0/css/style.css'
],
complete: function() {
EC.centerStage (sym);
}
});
