Joomla! with Flash

Chapter 1. Get Started with Flash in Joomla!

We assume that you know what Joomla! and Flash are. You have taken this title because you want to build stunning websites with Joomla! and Flash. The only thing you may need to know is how to use Flash with the powerful Joomla! Content Management System (CMS) and build a Joomla!-based website with stunning Flash animations. With this assumption, we proceed to building websites with Joomla! and Flash, without delving into what Joomla! and Flash are.

Before starting with the techniques of building stunning websites with Joomla! and Flash, some of you may be interested in knowing the reasons for using Flash in Joomla!, and also may be interested in knowing how to create Flash objects. In this chapter, we will discuss about:

Why use Flash in Joomla! CMS
How to create Flash objects
Some useful tools for working with Flash objects

On the completion of this chapter, you will be able to select the appropriate tools required for working with Flash objects.

Why use Flash in Joomla!?

There is no doubt that Joomla! is a very powerful CMS. It has an object-oriented, modular architecture with lots of extensibility features. Joomla! is feature-rich and useful for almost all types of websites. You can build almost any kind of website using Joomla!. It has a strong security, authentication and authorization framework, content management framework, and templating system. The look and feel of a Joomla! website can largely be customized through its templates. There are thousands of templates available for Joomla!, many of which are very visually pleasing.

In addition to templates, there are also thousands of Joomla! components, modules, and plugins. Components, modules, and plugins are ways to extend Joomla!'s functionality. A component for Joomla! can be compared to an application for Joomla!. For example, if you want to add a photo gallery, there are several components that provide this functionality. You may choose any of the Joomla! components and extend the functionality of your Joomla! website. If you want to build an e-commerce site, then you can add an e-commerce component, such as the VirtueMart, and add that functionality to your Joomla!-based website. Similarly, modules are extensions to display the data on Joomla!-based websites. Plugins are also extensions for performing specials tasks, such as pre- and post-filtering of contents, for Joomla!-based websites.

With all these features of Joomla!, ease of administration and options for customization, sometimes you may think of integrating other technologies such as Flash into it. This is because Flash provides great features for animation, which are otherwise not possible using only Joomla!, HTML, or JavaScript. Flash is unique in creating animated objects, and this adds an extra flavor to your Joomla!-based website. For example, suppose you have to create an attractive site for kids. The site aims to provide interactive games, videos, and animations for the kids. It is an edutainment site and should be attractive enough to hold its audience. In addition to stunning graphics, design, and layout, Flash can definitely add value to the website. Some of the features such as animations, small videos, and interactive games, can only be possible through Flash.

Using Flash with Joomla! can benefit you in the following ways:

You can add streaming videos, animations, and more of such interactive objects inside Joomla! contents or articles. Adding graphical and multimedia objects like these provides a better user experience.
Besides using the default menu system of Joomla! and some other extensions for making the Joomla! menus more attractive, you can use Flash menus to give the users a better visual experience.
Joomla! has many components for showing photo galleries. It is widely accepted that Flash-based photo galleries are visually richer than normal galleries built upon HTML, PHP, CSS, and JavaScript. You can add Flash photo galleries to a Joomla! website and make your photo galleries visually rich.
Besides menus, photo galleries, and videos, you can also use Flash-based charts, graphs, and maps with your Joomla! articles.
For improving the overall design and the look and feel of your site, you can use Flash headers, banners, templates, and tickers in Joomla!.

Later in this book, we will learn to add these functionalities and make our site look stunning, visually rich, and interactive.

Why use Flash in Joomla!?

Using Flash with Joomla! can benefit you in the following ways:

You can add streaming videos, animations, and more of such interactive objects inside Joomla! contents or articles. Adding graphical and multimedia objects like these provides a better user experience.
Besides using the default menu system of Joomla! and some other extensions for making the Joomla! menus more attractive, you can use Flash menus to give the users a better visual experience.
Joomla! has many components for showing photo galleries. It is widely accepted that Flash-based photo galleries are visually richer than normal galleries built upon HTML, PHP, CSS, and JavaScript. You can add Flash photo galleries to a Joomla! website and make your photo galleries visually rich.
Besides menus, photo galleries, and videos, you can also use Flash-based charts, graphs, and maps with your Joomla! articles.
For improving the overall design and the look and feel of your site, you can use Flash headers, banners, templates, and tickers in Joomla!.

Later in this book, we will learn to add these functionalities and make our site look stunning, visually rich, and interactive.

Creating Flash objects

Adobe Flash was previously known as Macromedia Flash. Flash objects are created using Adobe Flash, a software program created by Macromedia and acquired by Adobe, Inc. The latest version of this software is Adobe Flash CS4.

Note

Nowadays, many applications can generate Flash objects. For example, there are converters that can generate a Flash animation from Microsoft PowerPoint. OpenOffice.org Impress can natively save a presentation as a Flash presentation. Therefore Flash objects are not only generated by Adobe Flash. However, for the sake of this book, we will assume that the animation and Flash objects we are talking about have been created using Adobe Flash.

By using Adobe Flash, we can create multiple types of Flash objects including animations and videos. The application generates the following types of Flash files:

Extension	Description
`.fla`	Files with this extension are Flash files that can be edited by the Adobe Flash application. This is not a compiled file and is not intended for embedding in to web pages.
`.swf`	These files are complete and compiled Flash files ready for embedding into web pages. SWF means ShockWave Flash, and this is the most, format for distributing animated vector graphics. SWF files can be generated using several products, such as Adobe Flash, Adobe Flex, and SWiSH Max 2. There are several other small tools available for creating such animations.
`.as`	This is a script file generated by ActionScript. Although FLA files can contain scripts directly, for structural purposes separate script files are kept with the extension `.as`.
`.flv`	You may be using `.flv` files already on YouTube and other streaming video sites. FLV is a Flash Video file, ready for streaming with good compression. In fact, Flash video files are container files, which contain the videos and act as wrapper. The file itself is not a video format. Flash video files play on most operating systems using Adobe Flash Player and other third party players including VLC Media player, Windows Media Player, RealPlayer, and Media Player Classic. The file format itself is open, but the codecs for this format are proprietary, which makes this format dependent on Adobe Systems.

Note

Adobe Flash Player is available for free at http://www.adobe.com/products/Flashplayer/. It is required for playing any Flash object embedded in any website.

Some tools for working with Flash

Besides Adobe Flash, there are many other tools currently available for working with Flash objects. Some of these can create Flash objects just as Adobe Flash does. Some are used to create variants of a Flash object, such as a Flash wallpaper, a Flash screensaver, a Flash photo gallery, and so on. In this section, we are going to highlight some of the popular Flash tools that you may need to use while building a Joomla!-based web site with Flash.

SWiSH Max

SWiSH Max is the alternative to Adobe Flash for creating Flash animations, banners, and designs. It has a simpler interface and is often used by users who want a low cost solution for Flash. Many websites are now using SWiSH animations and hundreds of SWiSH templates are available online. For more information and to download a trial version of this stunning Flash designer, visit www.swishzone.com.

The following screenshot shows the designer interface of SWiSH Max:

Ajax Animator

Ajax Animator is an online interactive application for building Flash animation. It aims at creating a fully-functional alternative for creating Flash animations. It is available at http://antimatter15.110mb.com/ajaxanimator/build/. If you do not have any tool for creating Flash animations, you can use this simple online tool for creating a quick animation with images and text.

The following screenshot shows the interface for the animation builder that can be accessed only by using a web browser:

Once created, you can preview the animation and download it to your computer.

Wink

Wink is a freely available software for creating tutorials and demonstrations. The software records screen activities and voices and saves the resulting video as a Flash animation. You can directly upload the Flash animation to a web server and embed it within any web page. A Flash animation created through Wink thus provides an animated learning material with video, captions, and voice. This is best suited for creating software tutorials and presentations, especially when you want to create some teaching/learning materials to demonstrate how to use a software. You can download this software from the website http://www.debugmode.com/wink/.

The next screenshot shows the Wink interface:

Wink has some other great features too, such as saving the resulting tutorial as an Adobe Flash (SWF) file, a standalone EXE, a PDF, a postscript, and an HTML or any other web image format. It can capture screen activities or use images (BMP, JPG, PNG, TIF, GIF formats) to create a tutorial. The Flash file becomes a highly compressed animation and gives better performance compared to some of the other commercial competing applications. Wink is available for both Windows and Linux operating systems.

When creating a presentation or a tutorial using Wink, you can add callouts, buttons, navigational buttons, and texts through which the users can interact with the tutorial or the presentation.

Flash charting tools

Charting on web pages is a much sought after feature for web developers. At some point, most web developers want to visualize their data in different types of charts. Recently, the Google Visualization API has opened up the door to the use charting and graphing on web pages. However, Flash charting tools still remain popular for the stunning graphs and charts. There are many Flash charting tools that provide ways to create different types of charts. Some of the popular Flash charting tools are described in following sections.

Animated Charts

This proprietary software allows you to create different types of charts from the data you provide. The charts created by this software may have several animations. Dynamic charts can be built using its Pro version. Animated Charts is available from its website http://www.animatedchart.com/.

amCharts

amCharts provides the flexibility to generate different types of charts using both static and dynamic data. By default, there are four sets of predefined charts: Pie and Donut, Line and Area, Column and Bar, and Scatter and Bubble. It can dynamically generate 2D as well as 3D Flash charts. amCharts is available for use with Joomla!, and we will be looking at this software in Chapter 5 , Flashier than Ever: Maps, Charts, Custom Fonts, Multimedia, and More.

Open Flash Chart

Open Flash Chart is an open source free library of functions that can be used to generate different types of Flash charts. It can be used with different web-scripting languages including PHP, Java, .Net, Perl, Python, and Ruby on Rails. It is feature-rich and easy to use with web-scripting languages. Open Flash Chart is available at http://www.openflashchart.com/. The following screenshot shows a 3D bar chart created using Open Flash Chart:

FusionCharts

FusionCharts is a free Flash-charting component that can generate charts from both dynamic as well as static data and can be used with many types of web applications. It is cross-browser and cross-platform and can be used with PHP, ASP, ASP.Net, JSP, ColdFusion, Ruby on Rails, and JSP. You can even use it with simple HTML pages or in PowerPoint presentations. This is a commercial component, but a free version is also available.

By using this component, most of the popular chart formats, including 2D/3D column charts, bar charts, line charts, pie and doughnut charts, stacked charts, and area charts, can be readily generated in an SWF file. The data to be visualized can be taken from XML files. To get a free version of FusionCharts and to know more about it, visit its website at http://www.fusioncharts.com/.

ActionScript libraries

ActionScript is the scripting language for Flash. Most Flash authoring tools now support ActionScript. There are some online repositories from where you can download ActionScript and use these scripts freely. The following are some of the noteworthy ActionScript libraries:

Senocular.com ActionScript Library: This library contains hundreds of scripts for ActionScript versions 1, 2, and 3. The scripts can be browsed and viewed online. You choose a script, copy it, and use it in your Flash object. The library is available at: http://www.senocular.com/Flash/actionscript.php.
ActionScript.org Library: This library contains more than 700 scripts that you can use with your Flash animations. It is accessible at http://www.actionscript.org/actionscripts_library/.
ActionScript Physics Engine: This is a freely available open source 2D physics engine that can be used with Flash and Flex. It is available at http://www.cove.org/ape/.

There are many other sites where you can get lots of ActionScript scripts and tutorials on how to use them.

Riva FLV Encoder

With this encoder you can convert your videos into high-quality Flash Videos (FLV) and embed them into a web page. After selecting a video to transcode into a Flash video, you can use presets or custom settings and later play the converted FLV with the bundled Riva FLV Player. This encoder can transcode AVI, MPEG, QuickTime, and WMV videos into FLV. It can be downloaded free of charge from http://rivavx.com/?encoder.

The Riva FLV Encoder is shown in the following screenshot:

sIFR

sIFR is used for adding Flash texts to HTML pages. The font does not need to be installed on the visitor's computer. Instead, by using sIFR, you can create the text in any font as you want, and sIFR will display that text in your desired font irrespective of the availability of the font on the visitor's computer. In chapter 5, we will be looking into using sIFR in Joomla! sites.

PowerPoint to Flash converter

Many general users may not know how to use Flash. Generating Flash animations may seem difficult to them, or simply, they may not be eager to learn Flash. However, it is expected that most of the readers of this book do know how to make a PowerPoint presentation using text, graphics, and sound. In fact, you can create an animated presentation using PowerPoint, which can later be converted into a Flash object for embedding into your web application. There are many converters which convert a PowerPoint presentation to a Flash animation.

Most of these converters can retain the sound, animation, and other visual effects of PowerPoint presentations. Some are also capable of converting multiple files at once in a batch.

Setting up the development environment

It is always good to set up a development environment and test an application before publishing it on the production web server. For the purpose of this book, we will also set up the development environment with a web server and Joomla!.

Web server

You can use any web server that supports PHP. For the purpose of this book, we will use the most popular web server — Apache, version 1.3 or version 2. If you are using Linux as an operating system, then you may get the Apache server bundled with the Linux OS. However, you are always free to download the latest version of Apache from its website at http://httpd.apache.org/. The Apache web server is available for both Linux and Windows operating systems, and you can download the appropriate version for your own operating system.

Database server

In order to use Joomla! we need to set up a relational database system. We will be using MySQL as the database system. Like Apache, MySQL is also available for free to download for Linux, for Windows, and for other platforms as well. You can download it from http://www.mysql.com/.

PHP

To run Joomla! we need a web server capable of running PHP scripts. We can easily download the PHP bundle, install it, and configure the Apache web server for PHP. Joomla! will run on both PHP4 and PHP5, but to take advantage of the advanced Joomla! features and PHP5's rich features, we will use PHP5. You can download PHP5 from the website http://www.php.net. Like Apache and MySQL, PHP is also available for Linux, Windows, and other platforms.

For the development server, users with less technical skills may find it daunting to set up the web server, database server, and to configure PHP and its libraries. Administration of these services also becomes complex. To ease the task of setting up a development environment with Apache, MySQL, and PHP, there are several packaged software applications, such as WampServer, PHPTriad, EasyPHP, and so on that include all the three services and can be installed in one shot. For our development environment, we will use WampServer for Windows.

The latest version of the WampServer package contains Apache2.2.x, MySQL 5.1.x, and PHP 5.2.x. To setup the development environment for using Joomla! with Flash, follow these steps:

1. Get the WAMP Server: The WAMP Server provides you with Apache, MySQL, and PHP. Point your browser to www.wampserver.com, and download the latest version of the WAMP Server.
2. Install the WAMP Server: Once the WAMP Server is downloaded to your computer, double-click on the installation file. By default, it will be installed at C:\wamp. Under that, there will be a directory www that is known as the web directory. This means that whatever web application you want to run should be put inside this folder (in our case it is c:\wamp\www).
3. Run the WAMP Server: You can configure your WAMP Sever to run when Windows starts. Alternatively, you can run it as and when needed. You can start the WAMP Server from Start | All Programs | WampServer | start WampServer. When the WAMP Server is started, you will see the WampServer icon in the system tray. Click on that icon, and you get the WampServer menu, as shown in the next screenshot:
For starting all the services (Apache, MySQL, and PHP), click on .Start All Services. For configuring PHP, go to .PHP. You can create databases with .phpMyAdmin.
To see the default page in the web root, click on .Localhost or type http://localhost/ in your browser's address bar. It will display a page like the one shown in the next screenshot:

Once you get the web server with MySQL and PHP running, you can proceed with installing Joomla! on that web server as follows:

1. Get theJoomla installation package: Now it is your turn to get the Joomla! installation package, through which you will install Joomla! on your local computer. Open your browser and type www.joomla.org in the address bar. You will see the Joomla! home page. On the right side, there is a download link for the latest release. Click on this link to download the latest release of Joomla!. It comes as .zip or .tgz archive.
2. Create the database for Joomla!: Before starting the Joomla! installation, you need to create a MySQL database on the localhost. Open your browser and point it to http://localhost/phpmyadmin. In the phpMyAdmin screen, enter the name of the database and create it. Remember the name of the database as the Joomla! installation wizard will ask for it later.
3. Install Joomla! on your local computer: Once you have downloaded the installation package for Joomla!, unpack the Joomla! installation files to your web root directory (for example c:\wamp\www\dreamschool), and then point your browser to http://localhost/dreamschool/. That starts the Joomla! installation wizard. Follow the wizard, and complete the Joomla! installation.

Note

To learn more about Joomla! installation, administration, and building a site using Joomla!, please read "Building Websites with Joomla! 1.5", Hagen Graf, Packt Publishing.

Example website

While learning the techniques of using Flash in the Joomla! Content Management System, we will be building a Joomla!-based site to demonstrate Flash functionalities. To illustrate the example, we will build a fictitious school website — DreamSchool — that will include interactive material for learners, video tutorials, animations, and other stuff necessary for learning.

The example site will start with a basic installation of the latest version of Joomla!, and we will gradually make it stunning using Flash templates, headers, banners, content, videos, animation, charts, graphs, maps, and so on.