Received my copies of Joomla! with Flash

After returning home from Office, I found that my copies of Joomla! with Flash has come to post office. The postman has left a slip and asked to receive the parcel from the post office. I went with my family, and received the parcel. Then moved to Coffeeworld. Those who have authored a book knows how one feels seeing his/her book published. The book looks fine. Flipping over the pages I could not find any mistake. This book is about 240 pages and looks thinner than my other books. Here are my photograph with the book.

Posted via email from Suhreed Sarkar | the philosopher | Comment »

Bangkok trip and new laptop

Recently I have been to Thailand. I attended one official meeting at Krabi, Thailand. On the way to Krabi, I stopped at Bangkok. While wandering around I found Acer Aspire 4732Z laptop at very amazing price. The configuration of the laptop is:

• Intel Pentium Dual Core Processor T4300 (2.1 GHz, 800 MHz FSB)
• Intel GMA 4500M Graphics Adapter
• 14.0 inch HD LED LCD
• 2 GB Memory
• 250 GB HDD
• DVD Super Multi DL Drive
• Acer Nplify 802.11b/g/Draft N
• Multi-in 1 Card reader
  
• 6-cell Li-ion battery
• 1 LAN port
• 1 VGA port
  
• Built-in webcam
• 2 USB ports
  

The laptop had no OS pre-installed. The store could not show me its functioning. I just bought it and brought to my hotel. I got one 4GB USB pen drive free with this. That helped me installing Ubuntu to this new laptop. In my old laptop I had .iso image of Ubuntu 9.10 Live Desktop. With help of UNetbootin I made the installation USB and installed Ubuntu 9.10. And amazing thing  haappened. It detected and configured all hardware. All worked well. I started Cheese Webcam Booth and found the webcam working. Later I installed Ubuntu Netbook Remix things. and now my desktop looks great!
All of these I have got for only USD 415.

Posted via email from Suhreed Sarkar | the philosopher | Comment »

Updated Fedora book

I have updated my book , Red Hat/Fedora Linux, in Bangla, to the latest version of Fedora Linux. The book was basically written on Read Hat Linux 7.2. Then came Fedora and it was updated for Fedora Core 4. Since then it has not been updated. For around two years, the book is out of print and I was not getting time to revise it for new version of Fedora. Recently I have done it, and for one month I was trying to finish it by giving a final print of the revised edition. At last, I spent whole day yesterday and worked on it - and at the end of the day I printed the final revised copy.Oh, what a relief!
The book is now with my publisher, Gyankosh Prokashani, and hope to be in the marker mid december. The book will accompany Fedora 12 DVD and Fedora Live CD (GNOME). Waiting to see the book in it printed form.

Posted via email from Suhreed Sarkar | the philosopher | Comment »

I am using Mozilla Firefox 3.6 Beta 2

I have installed Mozilla Firefox 3.6 Beta 2 and enjoying using it. Its ‘persona’ feature is really cool! With one click you can install and use it. When you visit persona section you get a lots of personas so far. Take you mouse over the persona image, and your browser’s look is changed! What a live preview. Other changes to Firefox are not that much visible. I am fan of Firefox and using it for more than 2 years. In fact, I have not installed and tried IE8, after using Firefox. You can get the beta of Firefox 3.6 from here: http://en-us.www.mozilla.com/en-US/firefox/3.6b2/releasenotes/. Have a look at it.

Posted via email from Suhreed Sarkar | the philosopher | Comment »

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

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 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 <positions> tag. Under this, type the line highlighted in the following code so that the file looks like the following:

<positions> 
<position>flexheader</position> 
<position>left</position> 
<position>user1</position> 
... 
<position>right</position> 
 <position>debug</position> 
</positions>

Remember to type <position>flexheader</position> before ending </positions> tag. Placing it outside the <positions> </positions> 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 <div id=”header” … > 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:

<jdoc:include type="modules" name="flexheader" style="RAW" />

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:

<img src="/images/header.png" 
title="My header image" 
alt="Header image" 
 style="width: 528px; height: 70px;" 
/>

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:

1. 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.
2. 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.
3. 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.
4. 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.
5. 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.
6. 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.
7. 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.
8. 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 <div>, 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 <div> 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 <div> is that you want to show some text in the header. When you use a <div>, images are used as background to the <div> tag and the text inside the <div> 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 <img> 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 :

• Joomla! with Flash: Showing maps using YOS amMap
• Joomla! with Flash: Flashy Templates, Headers, Banners, and Tickers: Part 1

---

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

Posted via email from Suhreed Sarkar | the philosopher | Comment »

Buy Joomla! with Flash ebook + Papervision3D Essentials ebook at 50% Discount

Posted via web from Suhreed Sarkar | the philosopher | Comment »

Special Offer for my Zen Cart: E-commerce Application Development Book

Posted via web from Suhreed Sarkar | the philosopher | Comment »

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

In this two-part article, we are going to use Flash for decorating our Joomla! site. On completion of this article you will be able to use:

• Flash-based templates for your Joomla! website
• Flash logos
• Flash headers
• Flash banners

In this article, we will mainly focus on the visual design of our site. To acquire the information presented here, it is assumed that you have some basic understanding of Joomla!’s visual design including templates, components, module position, and so on.

Adding Flash in templates

If you are familiar with Joomla! templates, then you will understand that there are two ways to display Flash in a template:

• By hardcoded embedding of Flash items
• By dynamically loading Flash objects at module positions

We have seen many modules that can display Flash objects. Therefore, in this section, we will be looking into the embedding of Flash objects within templates. It will also be helpful if we understand the structure of Joomla! templates.

Generally templates for Joomla! include headers in Flash. Flash animations are included in the header area of a Joomla! template. Some templates include the mechanism to show images from a specific directory. For example, the template shown in the following screenshot, available for download at http://joomlatp.com/joomla-1.5-templates/Templates-has-flash-header.html, is designed to show a Flash header comprised of the images kept in a directory:

The following sections briefly describe the structure of a Joomla! template and the ways to embed a Flash object in this template.

Structure of a Joomla! template

The look and feel of Joomla! is determined by templates. You can apply a template to the frontend as well as to the backend. Templates for the Joomla! frontend reside in the /templates directory of the Joomla! webroot, while those for the administration panel are found in the /administrator/templates directory. You can install multiple templates and apply one or more templates to the different sections. However, you must designate one default template for the site.

To designate a default template, go to Extensions | Template Manager. Select the desired template and click on the Default button on the toolbar. For assigning a template to a specific section of the site, click on a template, except the default template, and then select the section or the menu item for which you want to assign the template from the Menu Assignment section.

If you examine the directory structure of a Joomla! template, you will find at least the following subdirectories in the templates directory:

Directory Description mx_joofree2 This is the main template directory. It contains some subdirectories and at least the following files under its root: • index.php: This is the main file for a template. The basic structure of a Joomla! template is defined in this file. We will examine this file later. • templateDetails.xml: This XML file defines the template by mentioning its designer, the different files bundled with it, the positions and parameters available, and so on. • params.ini: This file contains the parameters and their default values. For example, a template may use several colors for theming, but users can select a preferred color as a parameter for this template, and that information is stored in this file. mx_joofree2/css This directory contains all the cascading stylesheets to be used for a Joomla! site. This directory will contain at least one stylesheet named template_css.css. It may also contain a stylesheet named template_ie6.css and other stylesheets. mx_joofree2/html This folder may contain some definitions for the custom rendering of certain parts of the site. For example, the mx_joofree2 template contains two files—module.php and pagination.php. These two files define custom module rendering and pagination for Joomla!. For more information on using HTML overrides, refer to http://docs.joomla.org/How_to_override_the_content_from_the_Joomla!_core. mx_joofree2/images This folder contains the images for the template. It may contain a logo image, a background image, and so on. It may also contain some subdirectories, for example, the mx_joofree2 template contains a subdirectory images/headers, where the header images for the template are stored. Joomla! with Flash 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 As you know, the main structure of a Joomla! template is defined in the index.php file. The file looks as follows: <?php // no direct access defined( '_JEXEC' ) or die( 'Restricted index access' ); This line of code is to prevent direct access to the file. This is a convention to prevent direct access to any file in Joomla!. After this, the following lines define some variables for the template that will be used later on in the template: define( 'YOURBASEPATH', dirname(__FILE__) ); $live_site = $mainframe->getCfg('live_site'); $template_path = $this->baseurl . '/templates/' . $this->template; $show_flashheader = ($this->params->get("showFlashheader", 1) == 0)?"false":"true"; $show_logo = ($this->params->get("showLogo", 1) == 0)?"false":"true"; $show_date = ($this->params->get("showDate", 1) == 0)?"false":"true"; $show_breadcrumbs = ($this->params->get("showBreadcrumbs", 1) == 0)?"false":"true"; ?> Having defined the template variables, the template’s structure starts with some common HTML declarations as follows: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang= "<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> Whatever is included after the following lines will be considered as included in the <head> section. Generally, stylesheets, JavaScript, and site-wide files are included in a template’s <head> section with the following lines: <jdoc:include type="head" /> <link rel="shortcut icon" href= "<?php echo $this->baseurl; ?>/images/ favicon.ico" /> <link href="<?php echo $this->baseurl ?>/templates/system/ css/system.css" rel="stylesheet" type="text/css" /> <link href="<?php echo $this->baseurl ?>/templates/system/css/general. css" rel="stylesheet" type="text/css" /> <link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this-> template?>/css/template_css.css" rel="stylesheet" type="text/css" /> <!--[if lte IE 6]> <link rel="stylesheet" href="templates/<?php echo $this-> template ?> /css/ie6.css" type="text/css" /> <![endif]--> </head> Next, the body section of the template starts: <body class="body_bg"> <div id="bgr"> <div id="wrapper"> <div id="tophead"> The following block checks whether any module for position user4 is enabled. If the count of enabled modules is greater than zero, then a <div>element with an ID search is displayed, and modules specified for position user4 are displayed as children of this <div> element: <?php if($this->countModules('user4')) : ?> <div id="search"> <jdoc:include type="modules" name="user4" style="xhtml" /> </div> <?php endif; ?> Having placed the modules for the position user4, the following block now defines where to show the site’s logo. This block of code dynamically selects the site’s logo and links that to the site’s home page: <?php if($show_logo == "true") : ?> <div id="logo"> <a href="<?php echo $mosConfig_live_site;?>"> </a> </div> <?php endif; ?> If we want to show a Flash header beside the logo, then we can add the following block to include a Flash object: <?php if($show_flashheader == "true") : ?> <div id="ol-flashheader"> <object type="application/x-shockwave-flash" data="<?php echo $this-> baseurl; ?>/templates/<?php echo $this->template?>/ images/header.swf " width="700" height="240"> <param name="wmode" value="transparent" /> <param name="movie" value="<?php echo $this->baseurl; ?>/templates/ <?php echo $this->template?>/images/header.swf" /> </object> </div> <?php endif; ?> This code block first checks whether the variable for showing a Flash header is checked or not. If it is checked, then a  <div> element will be created, under which the Flash object is embedded using the tags. The following code block is used to display the current date on the site: <?php if($show_date == "true") : ?> <div id="date-format"> <?php $now = &JFactory::getDate(); echo $now->toFormat("%A, %d %b %Y"); ?> </div> <?php endif; ?> </div> The following block defines another module position. Modules designated for the user3 position will be displayed here. Note that modules are included with the <jdoc:include type=”modules” name=”position-name” /> markup: <?php if( $this->countModules('user3') ) {?> <div id="topcol"> <div id="topmenu"> <table cellspacing="0" cellpadding="0" style="float: left;"> <tr> <td> <jdoc:include type="modules" name="user3" /> </td> </tr> </table> </div> </div> <?php } ?> <div id="wrapper_2"> <div id="holder"> The following code block displays another module called breadcrumbs. First, it checks whether the parameter is set to show breadcrumbs or not. If it is, then the breadcrumbs module will be displayed in the block: <?php if ($show_breadcrumbs == "true") : ?> <div class="path"> You are here: <jdoc:include type="module" name="breadcrumbs"/> </div> <?php endif; ?> Next comes the module for the left position: <div id="content"> <?php if($this->countModules('left') and JRequest::getCmd('layout') != 'form') : ?> <div id="left"> <jdoc:include type="modules" name="left" style="rounded" /> </div> <?php endif; ?> The following block includes the modules designated for the right position: <?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?> <div id="main"> <?php else: ?> <div id="main_full"> <?php endif; ?> <div class="nopad"> <jdoc:include type="message" /> The next code block counts the number of modules available for the user1 and user2 positions and then includes the modules designated for these two positions. Note the highlighted line of code in this code block. It shows the component currently selected: <div id="lr-padd"> <table class="lr-padd" cellspacing="2"> <tr valign="top"> <?php if( $this->countModules('user1') ) {?> <td class="lr-padd"> <jdoc:include type="modules" name="user2" style="xhtml" /> </td> <?php } ?> <?php if( $this->countModules('user1') ) {?> <td class="lr-padd"> <jdoc:include type="modules" name="user2" style="xhtml" /> </td> <?php } ?> </tr> </table> </div> <jdoc:include type="component" /> </div> </div> <?php if($this->countModules('right') and  JRequest::getCmd('layout') != 'form') : ?> <div id="right"> <jdoc:include type="modules" name="right" style="rounded" /> </div> <?php endif; ?> <div class="clr"></div> </div> </div> Finally, here comes the footer section. The highlighted line in the following code block includes a footer file to show the footer text: <div id="footer"> <div id="footer_in"> <div> <div style="text-align: center; padding: 18px 0 0;"> <?php include (dirname(__FILE__).DS.'/footer.php');?> </div> </div> </div> </div> </div> </div> </div> </div> <jdoc:include type="modules" name="debug" /> </body> </html> All this code in the index.php file when rendered with template_css.css and other stylesheets will display a layout like the one shown in the following screenshot: In a Joomla! template, the site’s data comes from the database and fits in different positions. When you are planning for Flash-based Joomla! templates, you should first identify where to put the Flash objects and where to display the dynamic data for the site. In the template layout, we have seen that a suitable place for adding a Flash object are the logo and the header positions. We can also use some extensions to display Flash headers. The following sections explain how to use extensions for showing Flash logos and headers. Using Flash logos You can replace the ordinary image with Flash-animated logos by embedding it in that position. As we have seen earlier, Flash objects are embedded in Joomla! templates using the XHTML element. For styling purposes, you may put this element under a <div> element, as shown in the following code: <div id="logo"> <object type="application/x-shockwave-flash" data= "/templates/mx_joofree2/images/logo.swf" width="200" height="200"> <param name="movie" value="/templates/mx_joofree2/images/logo.swf"> </object> </div> As you can see, the tag can contain child elements. We pass parameters to the Flash objects using the <param> element. For example, we have passed the name of a movie file using the highlighted tag in the previous code. Some of you may already know about the SWFObject JavaScript library. It is used to embed Flash files using JavaScript. You can also use it to embed Flash objects in Joomla! and can also generate Flash objects. It is freely available at http://code.google.com/p/swfobject/. Brief documentation on its usage is also available there.

Posted via web from Suhreed Sarkar | the philosopher | Comment »

Joomla! with Flash: Showing maps using YOS amMap

Adding a map to your site may be a necessity in some cases. For example, you want to show the population of countries, or you want to show a world map to your students for teaching geography. Flash maps are always interesting as you can interact with them and can view them as you like. amMap provides tools for showing Flash maps. The amMap tool is ported as a Joomla! component by yOpensource, and the component is released with the name YOS amMap. This component has two versions—free and commercial. The commercial or pro version has some advanced features that are not available in the free version.

The YOS amMap component, together with its module, allows you to display a map of the world, a region, or a country. You can choose the map to be displayed, which areas or countries are to be highlighted, and the way in which the viewers can control the map. Generally, maps displayed through the YOS amMap component can be zoomed, centered, or scrolled to left, right, top, or bottom. You can also specify a color in which a region or a country should be displayed.

Installing and configuring YOS amMap

To use YOS amMap with your Joomla! website, you must first download it from http://yopensource.com/en/component/remository/?func=fileinfo&id=3. After downloading and extracting the compressed package, you get the component and module packages. Install the component and module from the Extensions | Install/Uninstall screen.

Once installed, you can administer the YOS amMap component from Components | YOS amMap. This shows the YOS amMap Control Panel, as shown in the following screenshot:

YOS amMap Control Panel displays several icons through which you can configure and publish maps. The first thing you should do is to configure the global settings for amMap. In order to do this, click on the Parameters icon in the toolbar. Doing so brings up the dialog box, as shown in the following screenshot:

In the Global Configuration section, you can enter a license key if you have purchased the commercial or the pro version of this component. For the free version, this is not needed. In this section, you can also configure the legal extensions of files that can be uploaded through this component, the maximum file size for uploads, the legal image extensions, and the allowed MIME types of all uploads. You can also specify whether the Flash uploader will be used or not. Once you have configured these fields, click on the Save button and return to YOS amMap Control Panel.

Adding map files

You can see the list of available maps by clicking on the Maps icon on the YOS amMap Control Panel screen or by clicking on Components | amMap | Maps. This shows the Maps Manager screen, as shown in the next screenshot.

As you can see, the Maps Manager screen displays the list of available maps. By default, you find the world.swf, continents.swf, and world_with_antartica.swf map files. You will find some extra maps with the amMap bundle. You can also download the original amMap package from http://www.ammap.com/download. After downloading the ZIP package, extract it, and you will find many maps in the maps subfolder. Any map from this folder can be uploaded to the Joomla! site from the Maps Manager screen.

Creating a map

There are several steps for creating a map using YOS amMap. First we need to upload the package for the map. For example, if we want to display the map of the United States of America, then we need to upload the map template, the map data file, and the map settings file for the United States of America. To do this first upload the map template from the Maps Manager screen. You will find the map template for USA in the ammap/maps folder. Then we need to upload the data and the settings files. For doing so, click on the Upload link on the YOS amMap Control Panel screen. Then, in the Upload amMap screen, which is shown in the next screenshot, type the map’s title (United States) in the Title field. Before clicking on the Browse button besides the Package File field, you first add the ammap_data.xml and the ammap_settings.xml files to a single ZIP file, unitedstates.zip. Now, click on the Browse button, and select this unitedstates.zip file. Then click on the Upload File & Install button.

Once uploaded successfully, you see this map listed in the YOS amMap Manager screen, as shown in the next screenshot. You get this screen by clicking on the amMaps link on the toolbar.

As you can see, the map that we have added is now listed in the YOS amMap Manager screen. However, the map is yet in an unpublished state, and we need to configure the map before publishing it. We need to configure its data and settings files, which are discussed in the following sections.

Map data file

The different regions of a map are identified by the map data file. This is an XML file and it defines the areas to be displayed on the map. The typical structure of a map data file can be understood by examining ammap_data.xml. The file has many comments that explain its structure. This file looks like as follows:

<?xml version="1.0" encoding="UTF-8"?>
<map map_file="maps/world.swf" tl_long="-168.49" tl_lat="83.63" 
br_long="190.3" br_lat="-55.58" zoom_x="0%" zoom_y="0%" zoom="100%">
<areas>
  <area title="AFGHANISTAN" mc_name="AF"></area>
  <area title="ALAND ISLANDS" mc_name="AX"></area>
  <area title="BANGLADESH" mc_name="BD"></area>
  <area title="BHUTAN" mc_name="BT"></area>
  <area title="CANADA" mc_name="CA"></area>
  <area title="UNITED ARAB EMIRATES" mc_name="AE"></area>
  <area title="UNITED KINGDOM" mc_name="GB"></area>
  <area title="UNITED STATES" mc_name="US"></area>
  <area title="borders" mc_name="borders" color="#FFFFFF" 
balloon="false"></area>
</areas>
<movies>
  <movie lat="51.3025" long="-0.0739" file="target" width="10"
   height="10" color="#CC0000" fixed_size="true" title="build-in
   movie usage example"></movie>
  <movie x="59.6667%" y="77.5%" file="icons/pin.swf" title="loaded
   movie usage example" text_box_width="250" text_box_height="140">
   <description>
     <![CDATA[You can add description text here. This text will
      appear the user clicks on the movie. this description text can
      be html-formatted (for a list which html tags are supported,
      visit <u>
<a href="http://livedocs.adobe.com/flash/8/main/00001459.html">this
  page</a></u>. You can add descriptions to areas and labels too.]]>
   </description>
  </movie>
</movies>
<labels>
  <label x="0" y="50" width="100%" align="center" text_size="16"
     color="#FFFFFF">
  <text><![CDATA[<b>World Map]]></text>
  <description><![CDATA[]]></description>
</label>
</labels>
<lines>
  <line long="-0.0739, -74" lat="51.3025, 40.43" arrow="end"
      width="1" alpha="40"></line>
  </lines>
</map>

This code is a stripped-down version of the default ammap_data.xml file. Let us examine its structure and try to understand the meaning of each markup:

• <map> </map>: You define the map’s structure using this markup. First, by using the map_file attribute, we declare the map file that should be used to display this map. This markup has some other attributes through which we declare the top and the left offset in longitude and latitude. We can also specify the zooming level using the zoom_x, zoom_y, and zoom attributes.
• <areas> </areas>: Areas are the regions or countries on a map. These are defined in the map. We only need to define the areas that we want to display. For example, in the sample, we have defined eight countries to be displayed and one straight line. Each area element has several attributes, among which you need to mention mc_name and title. You specify the area’s name in mc_name, which is predefined in the map template. The title element will be displayed as the title of that map area. For example, <area mc_name=”BD” title=”Bangladesh”></area> means the areas marked as BD in the map template will be displayed with the title Bangladesh. In order to specify the mc_name element, you need to follow the map template designer’s instructions.
• <movies> </movies>: Movies are some extra clips that can be displayed as a separate layer on the map. For example, to display the capital of each country, a movie clip could be displayed in the specified latitude and longitude. You can also display some other animations or text using a movie definition.
• <labels> </labels>: The <labels> markup contains the text to be displayed on the map. You can add any text on a map by defining a label element.

To view and edit the map data file, ammap_data.xml, click on the map name on the YOS amMap Manager screen. This opens-up the amMap: [Edit] screen, as shown in the following screenshot:

The amMap: [Edit] screen displays several configurations for the map. From the Details section you can change the map name, publish the map, and enable security. From the Design section you can view and edit the data and the settings files. Clicking on Data will show the data file. You can edit the data file from the online editor. As we want to display the map of USA, we will make the following changes on this screen:

1. Select usa.swf in the Maps list.
2. Change the data file as follows:

   <?xml version="1.0" encoding="UTF-8"?>
   <map map_file="maps/usa.swf" zoom="100%" zoom_x="7.8%"
   zoom_y="0.18%">
   <areas>
     <area mc_name="AL" title="Alabama"/>
     <area mc_name="AK" title="Alaska"/>
     <area mc_name="AZ" title="Arizona"/>
     <area mc_name="AR" title="Arkansas"/>
     <area mc_name="CA" title="California"/>
     <area mc_name="CO" title="Colorado"/>
     <area mc_name="CT" title="Connecticut"/>
     <area mc_name="DE" title="Delaware"/>
     <area mc_name="DC" title="District of Columbia"/>
     <area mc_name="FL" title="Florida"/>
     <area mc_name="GA" title="Georgia"/>
     <area mc_name="HI" title="Hawaii"/>
     <area mc_name="ID" title="Idaho"/>
     <area mc_name="IL" title="Illinois"/>
     <area mc_name="IN" title="Indiana"/>
     <area mc_name="IA" title="Iowa"/>
     <area mc_name="KS" title="Kansas"/>
     <area mc_name="KY" title="Kentucky"/>
     <area mc_name="LA" title="Louisiana"/>
     <area mc_name="ME" title="Maine"/>
     <area mc_name="MD" title="Maryland"/>
     <area mc_name="MA" title="Massachusetts"/>
     <area mc_name="MI" title="Michigan"/>
     <area mc_name="MN" title="Minnesota"/>
     <area mc_name="MS" title="Mississippi"/>
     <area mc_name="MO" title="Missouri"/>
     <area mc_name="MT" title="Montana"/>
     <area mc_name="NE" title="Nebraska"/>
     <area mc_name="NV" title="Nevada"/>
     <area mc_name="NH" title="New Hampshire"/>
     <area mc_name="NJ" title="New Jersey"/>
     <area mc_name="NM" title="New Mexico"/>
     <area mc_name="NY" title="New York"/>
     <area mc_name="NC" title="North Carolina"/>
     <area mc_name="ND" title="North Dakota"/>
     <area mc_name="OH" title="Ohio"/>
     <area mc_name="OK" title="Oklahoma"/>
     <area mc_name="OR" title="Oregon"/>
     <area mc_name="PA" title="Pennsylvania"/>
     <area mc_name="RI" title="Rhode Island"/>
     <area mc_name="SC" title="South Carolina"/>
     <area mc_name="SD" title="South Dakota"/>
     <area mc_name="TN" title="Tennessee"/>
     <area mc_name="TX" title="Texas"/>
     <area mc_name="UT" title="Utah"/>
     <area mc_name="VT" title="Vermont"/>
     <area mc_name="VA" title="Virginia"/>
     <area mc_name="WA" title="Washington"/>
     <area mc_name="WV" title="West Virginia"/>
     <area mc_name="WI" title="Wisconsin"/>
   <area mc_name="WY" title="Wyoming"/>
   </areas>
   <labels>
     <label x="0" y="60" width="100%" color="#FFFFFF" text_size="18">
       <text>Map of the United States of America</text>
     </label>
   </labels>
   </map>
   

   As you can see, we have defined regions (states) on the map of USA, and towards the end of the file, we have added a label for the map.

3. Select Yes for the Published field in the Details section.

When you are done making these changes click on the Save button to save these changes. Now we will look into the map settings file.

Map data files for countries are available with the amMap package. Thus, if you download amMap 2.5.1, you will get the map settings files for different countries. For example, the map data file for USA will be in the amMap_2.5.1/examples/_countries/usa folder.

---

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

---

Map settings file

The map settings file is another XML file through which the map’s display and other settings are defined. You can view and edit this file in the same way as you have done for the map data file, ammap_data.xml. A map settings file is named as ammap_settings.xml, and like the ammap_data.xml file, it has lots of annotations to explain each setting. You can view as well as edit this file by clicking on the Settings section in the amMap: [Edit] screen, as shown in the following screenshot:

An annotation for each setting is provided on the right side. You can configure the settings by following the instructions in the annotations. Once the changes have been made to this file, click on the Save icon on the toolbar to save the changes and close the screen.

Publishing a map through the module

After configuring the map through the amMap: [Edit] screen and editing the map data file, ammap_data.xml and the map settings file, ammap_settings.xml, you can display the map on the frontend by publishing the amMap module.

If you have not installed the amMap module yet, then install it from the Extensions | Install/Uninstall screen. The module and the plugin installation packages are bundled with the YOS amMap package that you have already downloaded. Once installed, go to Extensions | Module Manager and click on the YOS amMap module. That shows the Module: [Edit] screen for the YOS amMap module, as shown in the following screenshot:

Like other modules you can use the Details section to provide a title for this module, publish the module, select the position where it should be displayed, set the access level, and establish the order of display. Similarly, from the Menu Assignment section, you can specify the menus for which the module will be displayed. The settings specific to this module are displayed in the Parameters section. First you need to type the amMap’s ID, which is displayed in the list shown on the YOS amMap Manager screen. After typing the amMap’s ID, select Yes in the Enable Plugin field if you want to show this map using a plugin.

The next few settings are for displaying the map in your desired format. You can assign a module suffix (for example, green), which can be used to manipulate the display through a CSS. In the Display-Type drop-down box, select either SWF-Object or Embedding Flash Object. SWF-Object is the default mode and it uses a wrapper for embedding Flash objects. Then you can specify the width and height of the Flash object in pixels. This needs to be in line with your module’s position. You can also specify the version of Flash needed to display the map. The default value for this field is 8, which means that Flash Player version 8 will display the map properly, and users having a version lower than this will be prompted to upgrade to the required version of Flash Player. In the Background Color field you can specify the background color for the module.

The path to the amMap files can be specified in the Path field. The default value for this field is components/com_yos_ammap/ammap, which is fine as the files are installed in this directory. You can specify default data and settings files in the Data file and Setting file fields. The default values for these fields are components/com_yos_ammap/ammap/ammap_data.xml and components/com_yos_ammap/ammap/ammap_settings.xml respectively. The files specified in these two fields will work only when no ID number for amMap is specified in the amMap’s ID field.

You can specify a preloader color, a loading text, and a settings loading text. These texts are displayed when the map’s data and settings are being loaded.

When all these settings have been set and saved by clicking on the Save button on the toolbar, you can preview the map by clicking on the Preview button on the toolbar. The map should be displayed as shown in the following screenshot, in the frontend:

When you move your mouse pointer over the map area you will see that the states are highlighted displaying the state’s name. You can zoom in or zoom out using the Zoom control shown on the left of the map. Note that an overview map is displayed at the bottom-right corner. Clicking the arrow below it will hide the overview map.

If you want to display multiple maps, then you can copy the YOS amMap module and configure each instance with a different amMap ID. To copy the module, in the Extensions | Module Manager screen, select the module and click on the Copy icon in the toolbar. Then, rename the copied module. Alternatively, you can use the new module wizard by clicking on the New icon on the toolbar. In this wizard, you have to select YOS amMap in the Module: [New] screen and then configure it with the same settings, as described above.

Showing the map in content using a plugin

So far we have seen how to display a Flash map with the amMap module. You can also display the map in your Joomla! content, that is, articles. The YOS amMap component package comes with a plugin for displaying an amMap map into Joomla! articles. If you have installed the plugin already, then go to Extensions | Plugin Manager and click on Plugin - YOS Ammap. This displays the Plugin: [Edit] screen, shown in the following screenshot, for the YOS Ammap plugin:

Enable this plugin by selecting Yes in the Enabled field. Next, read the instructions given in the Description field. The instructions show how to use this plugin. From this text, you will notice that you can embed an amMap map in articles using the following syntax:

{yos_ammap mapid='3' width='500' height='400' flashv='8'
 bgcolour='#000000' type='js' plugin='1'}

You may be familiar with most of these by now. First, we have to specify the mapid, and then its width, height, flash version, background color, type, and plugin. Use 1 in plugin if you want to show dynamic data in the map. Therefore, using this syntax, we can add the map of USA in an article. The text for the article may be as follows:

amMap is an interactive flash map creation software. Use this tool 
to show locations of your offices, routes of your journeys, create 
your distributor map. Photos or illustrations can be used instead 
of maps, so you can make different presentations, e-learning tools and more.
YOS amMap is an Joomla extension which integrated almost amMap 
features. With YOS amMap you can easily integrate maps which provided 
by amMap to your Joomla site.
You can also include a map in Joomla! artilcle. Here is an example:
{yos_ammap mapid='3' width='600' height='500' falshv='8' plugin='1'}

The last line, inside {}, will show the map with the ID 3, which is the map of USA. When this article is published and viewed in the frontend, the article will look like the following screenshot:

As you see, the map of USA has been embedded in the article. The map behaves in the same way as it does inside the module. You can add multiple maps in an article using the same syntax. However, you must ensure that the map IDs are correct.

For more information on using the YOS amMap component, please visit http://yopensource.com/en/documentation/yos-ammap. You can also check www.ammap.com for more information on amMap and to download new map files.

Summary

In this article we have seen how to use YOS amMap and YOS amChart to create and display interactive Flash-based maps and charts.

---

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

Posted via web from Suhreed Sarkar | the philosopher | Comment »

Joomla! with Flash - my new book

Posted via web from Suhreed Sarkar | the philosopher | Comment »