Flash animation gives websites pizzazz. It’s used for video and other moving graphics, as well as non-static adverts. Flash is an excellent way of adding a little something extra to your site and making it stand out from the crowd.
It’s been around since 1996 and has become a standard tool for creating multimedia for sites, adding sophisticated video and audio streaming to its role as a graphics animator.
But Adobe Flash is a complex, expensive tool and there are plenty of alternatives. Most are much cheaper; many are free.
We’ve used three tools in the following workshop, and each adds a separate Flash multimedia element to your website. The following pages will show you how to provide animated galleries and embed an MP3 player or video widget to your website.
You will need to know a small amount of HTML and XML but, for the most part, you are simply required to enter a URL for your own media and follow templates.
Exposé 4.4 is the most complex tool we will use. It provides a standalone gallery that runs on both your desktop PC and your website.
PremiumBeat provides free Flash players that can be hosted on a site. Different styles and formats are available and, once you have installed a player, you simply copy and paste the relevant code into your web page.
Our third application, Flowplayer, works in a similar fashion to PremiumBeat, and you’ll again need to copy the relevant files to your site. But this app is more extensible. FlowPlayer’s scripts allow you to do some fairly sophisticated things with video, including animated scrolling between playlists.
Add animated photo and video galleries
1. Once you have installed Exposé 4.4, either as a standalone package on your site or as part of a content-management system, click the Album Manager link and enter your password. This will launch the application’s back-end, where you can upload images to be displayed on your website.
2. Exposé uses collections which, in turn, host individual albums. Click Create Collection, enter a name, then click Create Album. A collection can contain multiple albums. These appear in the program’s front-end as animated lists.
3. Once you’ve created your album, you can start to upload images and videos from your hard drive. Click Upload videos/photos in the bottom centre of the screen, then Add videos/photos in the resulting dialog box. Click Upload to start the process.
4. As images are uploaded to your album, they will be automatically resized according to Exposé’s default settings. To modify these settings, click Main Configuration. Among the options found here, you can set other parameters such as the width and height of your gallery.
5. When adjusting settings in the configuration panel, bear in mind that positions are measured from the top lefthand corner of your browser window. You’ll need to change both X and Y co-ordinates.
6. Uploaded images will be displayed on your website as a series of animated menus and slideshows. Select the album you wish to view, then move your mouse over the thumbnails to display them on screen.
>>NEXT PAGE: Embed a music player in your site
Embed a music player in your site
1. If you’d like to add an MP3 player to your website, you can download one of the customisable players from PremiumBeat – we’re using the multitrack player. Unzip the files on to your web server, then locate the file sampleEmbedCode.html.
2. Copy and paste this code into a web page to embed the PremiumBeat player into a hypertext markup language (HTML) file. Opening the source code will show two variables: one sets music to play automatically; the other specifies a playlist.
3. After uploading music files to your server, you’ll need to modify the playlist. Open playlist.xml and change the sample code between each tag to point to your own music. Save the XML file and, if necessary, rename it (sometimes the sample HTML works better when pointing to a different file name).
4. Open the web page with the embedded HTML code for the PremiumBeat player. This will display a compact MP3 player, which you can use to skip between tracks. For different versions of the same player, such as a mini player or single-track release, check out the PremiumBeat site.
>>NEXT PAGE: Add Flash video to your website
Add Flash video to your website
2. After installing Flowplayer on your site, click the examples folder on your server’s hard drive. This displays a series of embedded videos, from the most basic single file on a page to more advanced customisable and scrollable videos and playlists.
3. Using the simple video as an example, go to View, Source to get the code required to embed a Flash file. The two important elements are the SRC argument, which links to the Flowplayer applet on your server, and the videoFile argument under config to link to your video.