MyRealPage Custom Theme Banners

MyRealPage Custom Theme Banners

Custom Theme Banners represent a means to create highly attractive, graphically-rich website banners using Adobe Flash® and let the website owner further customize their content and look-and-feel. Custom Theme Banners’ key feature is their customizability that is highly specific to each banner. In a nutshell, Custom Theme Banners are packaged and used in the following way:

  • Designer creates a Flash® canvas which can be populated by a mixture of built-in and user-specified content; such as graphics, text, external movies, etc; using settings passed in via flashvars
  • Designer uses a special ActionScript library provided by MyRealPage to read user-specified content and settings from the flashvars
  • Designer creates a file called “banner.xml” which in a structured way describes what settings the banner is able to recognize
  • Designer packages the main SWF file, banner.xml as well as any number pre-packaged images, movies, etc which can be provided to the user to choose from, as a ZIP file
  • Designer uploads the resulting ZIP file via a special Theme Banner weblet which un-packages the Custom Theme Banner and interprets the banner.xml settings into a user interface automatically, allowing the user to start customizing the banner

Custom Theme Banners support a wide variety of generic types, such as numbers, text, image and movie links, etc. Each Custom Theme Banner can be configured to expose a variety of settings using these types. Probably the easiest way to introduce Custom Theme Banners is to take a look at a Case Study:

Custom Theme Banner: a Case Study

Here is a link to Custom Theme Banner what we’ll take apart. From the point of view of its component parts, this is what the banner below may look like (click on the image below to open the functioning banner in a new window):

custom-theme-annotated

As you can see, these components provide an opportunity for giving the user customization options. “Custom Text” should be configurable, as well as the 3 images that are transitioned between; perhaps the transition interval, the exact position of the website title and logo; the font choices for the website title, etc.

This is exactly what Custom Theme Banners were designed to do. So, in order to start exposing these customization options, we need to establish a concrete way of how the actual flash object is going to obtain these options. Custom Theme Banners always read all the configuration parameters from flashvars parameter passed into the movie via the hosting page. The flashvars is constructed by the MyRealPage Website System and is based on the configurations that have been saved by the user or provided by the banner package. To facilitate the reading of the parameters, MyRealPage has built an ActionScript library which can be used as part of of the flash object. Note, that since the entire interaction between the flash object and the hosting page is expressed via the flashvars, it is easy to create local mock-up pages for testing. Simply create a page, embed your flash object and manually “construct” the flashvars parameters that your flash object is capable of handling.

The next thing is to enable the user to edit and save the configuration settings. In order to achieve that, the Custom Theme Banners come with an included “manifest” file called “banner.xml”. It’s an XML file that describes in a structured way what options are available, what sort of values they accept, what they are called, what sort of pre-packaged media is available, in what groups these options are organized, etc. The full banner.xml file that is packaged with this Custom Theme Banner is available here. Here is a few quick slices with some annotations:

banner-xml1

banner-xml2

banner-xml3

After the banner.xml, custom graphics and the SWF file are packaged all together, they can be uploaded to an end-user website via an “Advanced” weblet, called “Theme Banner”:

theme-banner-selec

 

banner-select-and-upload

As a result the final User Interface for this Custom Theme Banner will look like the following (note that  the interface is annotated to show you the standard controls available by simply specifying parameter types, as well as more complex controls, such as pre-packaged image and movie pickers):

banner-UI

 

If you would like to see an non-annotated Custom Theme Banner User Interface, click here.

Custom Theme Banners may provide an interesting opportunity in combination with Custom Templates to offer packaging of custom templates with custom banners. A pick-and-choose combinations of these custom templates and banners may provide ready-made solutions for lower-end design projects where a few tweaks in the templates and banners may provide enough differentiation to satisfy the customer.

If you would like to learn more about Custom Theme banners or would like to start developing them for your own distribution and clients, please contact us for details on where to obtain our client libraries and for sample projects (bill–myrealpage.com)

Subscribe To Our Blog


Learn something new every day