Joomla! with Flash: Flashy Templates, Headers, Banners, and Tickers: Part 2

Suhreed Sarkar — Mon, 16 Nov 2009 02:14:11 +0000

This article is a continuation to the previous artcile with same title. This is an exceprt from my book – Joomla! with Flash – recently published by Packt Publishing. This article was orginally published at http://www.packtpub.com, and I am reposting it with their permission.

Using Flash headers

We have seen that one of the uses of Flash in Joomla! templates is as a header. By using a Flash animation in a site’s header you can create some stunning effects. As we have already seen, while designing the template, we may embed Flash animation in the header region and control the layout using an appropriate CSS stylesheet. To embed such Flash animations like these, you can use the XHTML tag. We have seen its use in the previous section. An alternative to this is showing the Flash header at some module position. There are several extensions that can be used for showing Flash objects at a module position. We will be looking at some of them next.

Using Flexheader3

Flexheader3 is a Joomla! 1.5-compatible extension for using Flash as headers in Joomla! sites. This is available for download for free at http://flexheader2.andrehotzler.de/en/download/folder/208-flexheader3.html. After downloading the package, install it from the Extensions | Install/Uninstall screen in Joomla! administration. Then click on Extensions | Module Manager. In the Module Manager screen, you will find the module named Flexheader3. Click on it and that shows the Module: [Edit] screen for the Flexheader3 module, as shown in the following screenshot:

The Details section is similar to other modules from where you enable the module, select the module position to display this, select the order of display, and assign menus for which this module will be displayed. The module-specific settings are in the Parameters section. As you see, selecting the module position is crucial for this module. Most of the templates don’t have a position to display the header using a module. Therefore, you may need to create a module position for displaying a Flash header. The following section shows you how to create a module position displaying a header.

Creating a module position

To create a module position in your template you need to edit at least two files. Browse to the /templates directory, and click on the name of the template that you want to modify. You need to edit two files in the template folder: index.php and templateDetails.xml. First, open the templateDetails.xml file in your text editor and find the tag. Under this, type the line highlighted in the following code so that the file looks like the following:

 flexheader left user1 ... right  debug

Remember to type flexheader before ending tag. Placing it outside the block will make the template unusable.

After modifying the templateDetails.xml file, open the index.php file in your text editor. Find out the code for including a header image in that template. Generally, this is done by inserting an image using the tag. If you don’t find such a tag, then look for

or something like that. In such cases, CSS is used to display the background image to the div element.

Once you have found the code for showing the header image, replace it with the following code:

This line of code means that you are instructing to include modules designated for the flexheader position. When we assign the Flexheader3 module to this position, the contents of that module will be displayed in this position. Generally, this module will produce a code like the following in this position:

When changes to index.php are made, save those changes. We will be configuring the module to display a Flash header in this module position.

Build a stunning, content-rich, and interactive web site with Joomla! 1.5 and Flash CS4
Build an attractive web site integrating Flash objects into Joomla!
Create stunning photo galleries with Flash transition and animation effects
Use interactive Flash-based maps, charts, animations, videos, MP3 players, logos, headers, and banners in Joomla!-based web sites
Turn your Joomla! web site into a feature-rich multimedia enhanced site through this step-by-step easy-to-follow guide enriched with screenshots

http://www.packtpub.com/joomla-with-flash/book

Configuring the module

After creating a module position for Flexheader by modifying the index.php and templateDetails.xml files, you can configure the Flexheader3 module to show the Flash header. To configure the Flexheader3 module, go to the Parameters section in the Module: [Edit] screen for the Flexheader3 module. Now we will look into the Module Parameters section shown in the following screenshot:

In the Module Parameters section you need to configure the following:

Show Help information on Frontpage: When showing Flash headers you may display some help tips for the frontend users.You can choose:
- none—to prevent showing such help
- for endusers—if you want to show help to site visitors
- for developers—if you want to show help messages to developers only
Selecting for developers is logical as that enables the messages and fixing if needed.
Location of image folder: Select the path of the folder where you have stored the images to be displayed in the header. You can select /images or /templates/current template. Selecting /images stores the header images in the global /images directory, which can then be accessed through the media manager. On the other hand, you can store the images into the template’s images folder. In such a case, select the /templates/current template/ option from the drop-down list.
Name of image folder: Specify the name of the folder where the header images will be stored. If you have selected /images in the previous field and type header-images in this field, then the images will be stored in the /images/header_images folder.
Name of default image (without extension): Type the name of the default image to be displayed if there is no image. Specify the name without the file extension; extensions for the images will be defined later.
Filetype of image: Specify the type of images used for the header. You need to select an extension from the drop-down list. The available extensions are: jpg, jpeg, gif, and png. Remember that when you select an extension the images to be used for the header have to be of that type. If you select png, for example, the header images need to be in the PNG format.
Height: Specify the height of the header images in pixels or percentage, as indicated in the Indication of Dimensions field. All images need to be resized to this height.
Width: Specify the width of the header images in pixels or percentage, as indicated in the Indication of Dimensions field. All images need to be the same width as this.
Indication of Dimensions: Select either px or % to indicate the unit of dimension. For example, if you select px in this drop-down list, the values in the Height and Width fields will be in pixels. For a fluid layout you may specify the image height and width in percentage. In this case, you have to select % from the drop-down list.

You can display images, XHTML

, or Flash objects using the Flexheader3 module. The Advanced Parameters section for the module, shown in the next screenshot, allows you to configure what will be displayed in this module and how:

From the Advanced Parameters section you need to configure the following:

Display Mode: Select a display mode from this drop-down list. You can either display an image, a
object, or a Flash object with this module. Select any one from the drop-down list: Image, DIV area with image as background, or Flash Object. One of the reasons you may want to use
is that you want to show some text in the header. When you use a
, images are used as background to the
tag and the text inside the
tag is visible. Based on the selection of this field, you need to configure the other fields.
DIV Content (for Display mode=DIV Area with background image): When you have selected DIV Area with background image in the Display Mode field, you need to specify the DIV content in this textbox. For example, if you want to display the logo in the header, then simply type and the logo will be displayed as an overlay to the header images. However, for formatting the DIV content, you also need to specify the relevant styles in the CSS file.
IMG Alternative Text (XHTML ALT): When you select Image in the Display Mode field to display images in the Flexheader3 module, you can specify alternative text for images, which is equivalent to the alt attribute in the tag.
Hyperlinked header: You can make the header hyperlinked. If you want to make it hyperlinked, then select Yes for this field.
Hyperlink Target: If you have selected Yes for the Hyperlinked header field, then specify the URL for the hyperlink in this field. This URL may be relative or absolute.
JoomFish Support: Flexheader3 can display language-specific images. For example, your site has two languages—English (en), and French (fr). You create the language-specific header images, such as 1-en.png, 2-en.png, 3-en.png, 4-en.png, and so on for English, and 1-fr.png, 2-fr.png, 3-fr.png, 4-fr.png, and so on for French. Then, to enable the multilingual feature, select Yes in the JoomFish Support field.
VirtueMart Support: Prefixing the image names with the VirtueMart category and product IDs, such as category1_product1_01.png, may link that image to that category and product. To enable this support for linking with VirtueMart products and categories, select Yes in this field.
Load a css file: Select Yes to use a CSS file for formatting different pages.
Position of Debug Information: Specify the position where you want the debug information for this Flexheader3 module to be displayed. You can show this on top or at the bottom of the front page. This will be very useful for adjusting the module’s output.
Debug Background Color: Specify a background color for the debug information shown on the front page. You can select Red, Blue, Yellow, Green, or Cyan as the background color for the debug information.
Debug Opacity: Specify the opacity for the debug information by selecting a number from 5 to 100 from the drop-down list.
Debug Height: Specify the height of the debug window as a percentage of the size of the main window. Select a percentage from the drop-down list or select auto to let the height be adjusted automatically.
Module Class Suffix: For individual module styling, you can specify a suffix to the module class so that you can apply appropriate CSS styles to this class suffix. For example, you can specify the module suffix myclass, and add a CSS declaration module-heading-myclass to define your own style for this module’s heading.
Flexheader3 CSS Class: You can specify a CSS class for the Flexheader3 module. You should use such a class if you have included the Flexheader3 module as raw, without any styling.
Caching: You can select Use Global from the drop-down list to enable caching for this module. Select No caching to disable caching.
Cache Time: If you have chosen to use caching, then specify the time in minutes, after which the module will be re-cached.

If we configure these settings for the Flexheader3 module and save them, you will find the header—either images from the specified directories or SWF animations—displayed in the newly created Flexheader module position. The module will look similar to the following screenshot:

Using Web Flash Module to show headers

We can use the mod_web_flash as a site’s header. The only difference will be in configuring the module differently with appropriate images, texts, and link URLs. Then we have to publish that module in a position like the Flexheader3 module position. For example, placing the same module that we have configured with mod_web_flash would display the header as shown in the following screenshot:

When using the Web Flash Joomla 1.5 module (mod_web_flash), you can also add menu links to the rotating header images. It will be nice to add different background images, some text (a slogan for your site), and then linking them to the different parts of your website.

Using Flash banners

Joomla! has a banner management system from where you can add banner clients, categorize the banners, define the banners, and publish the banners through the module. Usually you can display banner images using this component and also manage the banners very effectively. You can specify the banner images and links for the same. The banners can be displayed for a specified duration or for a certain number of impressions. Unfortunately, we cannot display a Flash banner using this banner component.

For adding animated Flash banners, we need to use third-party extensions. Any module that can show a Flash object at a module location can be used to display Flash banners. For example, we have already learned how to use the Web Flash Joomla! 1.5 module. We can use this module as a banner. To do this, first create a Flash animated banner and configure the module to display this Flash object at a position called banner in your template.

You can always hardcode your Flash objects to a Joomla! template. In this case, Flash banners can also be displayed in a Joomla! site using the tags. However, you will have to edit the template file each time you change the banner.

Flash tickers

Tickers are used for displaying small amounts of information on your site. You can either use text-based tickers or animated Flash tickers. The same principle applies when displaying animated Flash tickers. If you want to display an animated Flash ticker, design the ticker with appropriate text, images, sounds, and so on, and publish it on your site. Like others, you can display this either by embedding the ticker Flash object in the template, or by publishing it through a module. If you want to use a module for publishing tickers, use the Web Flash Joomla! 1.5 module or any other module that can display one or more animated Flash objects from a directory on your web server.

Summary

Although Flash can be used for designing the layout of a Joomla! site, it is often used as a header or a logo for the site’s template. You can use Flash objects in different parts of the Joomla! template to display the Flash objects. In this article, we have learned two ways of showing Flash objects in a Joomla! site: by embedding the Flash object in a Joomla! template and showing it permanently on a Joomla! website; and by using a suitable module. First, we have seen how to embed Flash objects in Joomla! templates using the tag. Later, we have explored options for displaying Flash objects using the Joomla! modules such as FlexHeader3 and Web Flash Joomla!.

If you have read this article you may be interested to view :

Build a stunning, content-rich, and interactive web site with Joomla! 1.5 and Flash CS4
Build an attractive web site integrating Flash objects into Joomla!
Create stunning photo galleries with Flash transition and animation effects
Use interactive Flash-based maps, charts, animations, videos, MP3 players, logos, headers, and banners in Joomla!-based web sites
Turn your Joomla! web site into a feature-rich multimedia enhanced site through this step-by-step easy-to-follow guide enriched with screenshots