Working with Drupal Audio in Flash (part 2)

Exclusive offer: get 50% off this eBook here
Flash with Drupal

Flash with Drupal — Save 50%

Build dynamic, content-rich Flash CS3 and CS4 applications for Drupal 6

$26.99    $13.50
by Travis Tidwell | May 2009 | Content Management Drupal Open Source PHP

In this 2-part article series by Travis Tidwell, we cover all the necessary steps to integrate audio content into our Drupal web site by building a custom Flash application that works seamlessly with Drupal multimedia.

In the first part we saw how audio is handled within Drupal and how to build a custom application that can play audio content created through Drupal. In this part, we will add controls to the audio player to give our users a way to interact with the playback of that audio track.

Although there are a handful of controls that we can add to this custom audio player, this section will demonstrate the concept by adding the most basic control for multimedia, which is the play and pause buttons.

Adding a play and pause button

To begin, we will need to first move and resize our title field within our Flash application, so that it can hold more text than "Hello World". We can then make room for some new controls that will be used to control the playback of our audio file. Again, the design of each of these components is subjective, but what is important is the MovieClip instance hierarchy, which will be used within our ActionScript code. Before we begin, we will need to create a new layer in our TIMELINE that will be used to place all AudioPlayer objects. We will call this new layer player:

Flash with Drupal

Creating a base button MovieClip

Our base button will simply be a rounded rectangle, which we will then add some gradients to, so as to give it depth. We can do this by first creating a rounded rectangle with a vertical linear gradient fill as follows:

Flash with Drupal

We can now give it some very cool depth by adding a smaller rounded rectangle within this one, and then orient the same gradient horizontally. An easy way to do this is to copy the original shape and paste it as a new shape. Once we have a new copy of our original rounded rectangle, we can navigate to Modify | Shape | Expand fill, where we will then select Inset, change our Distance to 4px, and then click on OK. After doing this, you will realize how such a simple contrast in gradients can really bring out the shape.

Flash with Drupal

After we have our new button shape, we will then need to create a new MovieClip, so that we can reuse this button for both the play and pause buttons. To do this, simply select both the rounded rectangle regions, and then choose Modify | Convert to Symbol in the Flash menu. We are going to call this new movie clip mcButton.

Flash with Drupal

Now that we have a base button MovieClip, we can now add the play and pause symbols to complete the play and pause buttons.

Adding the PlayButton movie clip

The first button that we will create is the play button, which simply consists of a sideways triangle (icon) with the button behind it. To do this, we will first create a new movie clip that will hold the button we just created, and the play icon. We can do this by first clicking on the mcButton movie clip, and then creating a new movie clip from that by selecting Modify | Convert to Symbol. We will call our new movie clip mcPlayButton.

Flash with Drupal

What we are really doing here is creating a parent movie clip for our mcButton, which will allow us to add new specific elements. For the play button, we simply want to add a play symbol. To do this, we first want to make sure that we are within the mcPlayButton movie clip by double-clicking on this symbol, so that our breadcrumb at the top of the stage looks as follows:

Flash with Drupal

Our next task is to modify our timeline within this movie clip so that we can separate the icon from the button. We can do this by creating two new layers within our timeline, called button (which will hold our button) and icon (which we will create in the next section).

Flash with Drupal

We are now ready to start drawing the play icon.

Drawing a play icon

To draw a Play icon, we will need to first select the PolyStar Tool by clicking and holding on the tool until you can select the PolyStar Tool.

Flash with Drupal

This tool will allow us to create a triangle, which we will use for the play icon in our play button. But before we can start drawing, we need to first set up the PolyStar Tool so that it will draw a triangle. We can do this by clicking on the Options button within the Properties tab, which will then bring up a dialog, where we can tell it to draw a polygon with three sides (triangle).

Flash with Drupal

After we click on OK, we will then need to change the fill color of this triangle, so that it is visible on our button. We will just change the fill color to Black. We can then move our cursor onto the stage where the button is, and then draw our triangle in the shape of a play button icon. Remember, if you do not like the shape of what you made, you can always tweak it using the transform tool. When we are done, we should have something that resembles a play button!

Flash with Drupal

Our next task is to create a pause button. Since we have already created the play button, which is similar to the pause button except for the icon, we can use a handy tool in Flash that will let us duplicate our play button, and then modify our duplication for the pause button icon.

Creating a pause button from the play button

In order to create our pause button, we will first need to duplicate our play button into a new movie clip, where we can change the icon from play to pause. To do this, we will first direct our attention to the library section of our Flash IDE, which should show us all of the movie clips that we have created so far. We can find the LIBRARY by clicking on the button on the right-hand side of our workspace.

Flash with Drupal

To create a duplicate, we will now right-click on the mcPlayButton movie clip, and then select the option Duplicate.

Flash with Drupal

This will then bring up a dialog very similar to the dialog when we created new symbols, but this time, we are defining a new movie clip name that will serve as a duplicate for the original one. We will call our new movie clip duplicate mcPauseButton.

Now that we have created our duplicate movie clip, the next task is to change the icon within the pause button. We can do this by opening up our mcPauseButton movie clip by double-clicking on that name within the Library. At this point, we can now change the icon of our pause button without running any risk of also modifying the play button (since we created a duplicate). When we are done, we should have a complete pause button.

Flash with Drupal

We now have play a nd pause buttons that we will use to link to our AudioPlayer class.

Flash with Drupal Build dynamic, content-rich Flash CS3 and CS4 applications for Drupal 6
Published: May 2009
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Linking MovieClips to ActionScript

One overlooked feature within the Flash IDE is its ability to link MovieClips to ActionScript code, which is used to add scripted functionality to movie clips. This is an extremely powerful feature that we will use to create the play and pause buttons automatically when we create the AudioPlayer object. To start, we will need to combine both the mcPlayButton and the mcPauseButton into a single MovieClip that will directly link to the AudioPlayer class, which we created earlier in this chapter. This movie clip that we will create will be called mcAudioPlayer since it is directly representative of the class that will govern it. With that said, we will now create a new MovieClip by first navigating back to our stage, and then clicking on the Insert | New Symbol from our Flash IDE.

Flash with Drupal

Now, before we do anything, I would like to point out a difference in how we will create this MovieClip versus other MovieClips that we have created in the past. This time, instead of just giving our MovieClip a name (mcAudioPlayer), we will also check the box that says Export for ActionScript. What this is doing is linking this movie clip to ActionScript code, and even cooler, we can provide a class that will link its functionality to this MovieClip by filling out the class name where it says Class. Before hitting OK, make sure that your MovieClip definition looks like the following:

Flash with Drupal

After we have done this, it will open up our new movie clip for editing, where we will add both the mcPlayButton and the mcPauseButton. Again, it is highly recommended to place each of these MoveClips on their own separate layer within the mcAudioPlayer movie clip. We will also need to make sure that both the X and Y positions for both the mcPlayButton and mcPauseButton are 0. It is also important to give each of our buttons an instance name using the Properties panel for each movie clip. This is so that we can reference them within ActionScript. We will call our play and pause buttons playButton and pauseButton respectively.

When we are done, our mcAudioPlayer MovieClip should look like the following on your stage:

Flash with Drupal

Our next and final task is to add our new mcAudioPlayer movie clip to our stage.

Adding the AudioPlayer to the stage

If we were to navigate back to the stage, we will see that the mcPlayButton movie clip is currently being shown on the stage. Because of this, we will need to swap this object out for the mcAudioPlayer movie clip, since it now contains both the play and pause buttons. Luckily, there is a very handy operation in Flash that allows for us to swap one symbol with another.

When we click on the mcPlayButton movie clip, and look over at the Properties panel, we should see a button called Swap that will allow us to switch one movie clip for another. This is perfect for our use case since we would like to swap the mcPlayButton movie clip with the mcAudioPlayer movie clip that we just finished creating. When we click on the Swap button, we are presented with a list of movie clips that we would like to swap. In this list, we can select the mcAudioPlayer and then click on OK to accept the swap.

Flash with Drupal

We can now give our new mcAudioPlayer movie clip an instance so that it can be referenced within our ActionScript code. We will call it player.

Flash with Drupal

Once we do this, we will be ready to make some modifications to our AudioPlayer class to reference the mcAudioPlayer movie clip that we just created.

Modifying the AudioPlayer class to use play and pause

In this section, we will take our AudioPlayer class and modify it so that it will work with the mcAudioPlayer movie clip that we just created, which incorporates the play and pause buttons. We can accomplish this with a series of quick steps.

Step 1: Adding the SoundChannel

Before we begin, we will need to add the mechanism to our Sound class that allows us to control the audio channel that is currently being played. In Flash, there is a class that we will use to do this called SoundChannel. We can use the SoundChannel as a member variable with sound that will keep track of the current track position. Because of this, we will also need to add another variable called position to our AudioPlayer class. These variables will live along with the sound variable that we already created. We will also need to include the dependency for the SoundChannel variable, which we can place at the top of the class.

Click here to access all the codes used in this article.

// Import all dependen cies
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.net.URLRequest;
...
...
...
// Declare our sound variable.
private var sound:Sound;
// Declare our sound channel
private var channel:SoundChannel;
// Variable to keep track of the audio position.
private var position:Number;

Step 2: Adding load, play, and pause functions

The next major change t hat we will need to make is to modify our class so that we can load, play, and pause the file in three separate functions. This will require us to completely change the current play function that we have, so that it matches this new structure. The play function will set the audio channel and play the file at the current position. The pause function will first save the channel position and then stop the audio file. And finally, the load function will simply load the file passed to our AudioPlayer class. These changes are as follows:

// Constructor function.
// Called when someone creates a new AudioPlayer
public function AudioPlayer()
{
// Make sure to create our sound object
sound = new Sound();
// Initialize the position.
position = 0;
// Let us know that we created this player.
trace( "AudioPlayer created!" );
}
// Play an audio file
public function playFile()
{
// Play our sound file.
channel = sound.play(position);
}
// Pause an audio file
public function pause()
{
// Save the channel position.
position = channel.position;
// Stop our sound file.
channel.stop();
}
// Load an audio file.
public function load( file:String )
{
// Load our sound file.
sound.load( new URLRequest( file ) );
}

Step 3: Reference the mcAudioPlayer MovieClip

After we have done that , the next task will be to change our class so that it officially references the mcAudioPlayer movie clip that we created. We can do this by simply stating that our class derives from the MovieClip class. This can be done using the extends keyword, when we declare our class as follows:

// Import all dependencies
import flash.display.MovieClip;
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.net.URLRequest;
// Declare our class
public class AudioPlayer extends MovieClip
{
// Constructor function
// Called when someone creates a new AudioPlayer
public function AudioPlayer()
// Make sure we call the MovieClip constructor
super();
// Make sure to create our sound object
sound = new Sound();
// Initialize the position.
position = 0;
// Let us know that we created this player.
trace( "AudioPlayer created!" );
}

Step 4: Hooking up our buttons!

The last and final step in creating our AudioPlayer class is to hook up the play and pause buttons that we added to our mcAudioPlayer movie clip object. Since we already told Flash to reference the AudioPlayer class when creating mcAudioPlayer movie clip, the instance names for the play and pause buttons can now be used within our class to manipulate their behavior during audio playback. These instance names were playButton and pauseButton, and we will start out by declaring them as buttons.

Declaring playButton and pauseButton as buttons

We will declare playButton and pauseButton as buttons using the buttonMode parameter along with an event handler that will call any given function when that button is clicked. The mouseChildren parameter is used to tell Flash to not let any child movie clip within these buttons to get focus. This functionality will be placed within the load function of our class, and then we will set their visibility state according to which button should be shown (which we will default as the play button).

// Import all dependencies
import flash.display.MovieClip;
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.net.URLRequest;
import flash.events.MouseEvent;
...
...
...
// Load an audio file.
public function load( file:String )
{
// Setup the play button.
playButton.buttonMode = true;
playButton.mouseChildren = false;
playButton.addEventListener(MouseEvent.MOUSE_UP,onPlay);
// Setup the pause button.
pauseButton.buttonMode = true;
pauseButton.mouseChildren = false;
pauseButton.addEventListener(MouseEvent.MOUSE_UP,onPause);
// Set the state of the play and pause buttons.
// We want to show the play button at first, so...
playButton.visible = true;
pauseButton.visible = false;
// Load our sound file.
sound.load( new URLRequest( file ) );
}

Along with this, we need to create two handler functions that will handle the mouse events and then make the correct function calls depending on which button the user clicks.

// Load an audio file.
public function load( file:String )
{
// Setup the play button.
playButton.buttonMode = true;
playButton.mouseChildren = false;
playButton.addEventListener(MouseEvent.MOUSE_UP,onPlay);
// Setup the pause button.
pauseButton.buttonMode = true;
pauseButton.mouseChildren = false;
pauseButton.addEventListener(MouseEvent.MOUSE_UP,onPause);
// Set the state of the play and pause buttons.
// We want to show the play button at first, so...
playButton.visible = true;
pauseButton.visible = false;
// Load our sound file.
sound.load( new URLRequest( file ) );
}
// Called when the play button has been pressed.
private function onPlay( event:MouseEvent )
{
// Play the audio track.
playFile();
}
// Called when the user presses the pause button.
private function onPause( event:MouseEvent )
{
// Pause the audio track.
pause();
}

Now, all we need to do is make sure we change the state of these buttons as they are clicked, by adding the following code to the play and pause functions:

// Play an audio file
public function playFile()
{
// Play our sound file.
channel = sound.play(position);
// Show only the pause button.
playButton.visible = false;
pauseButton.visible = true;
}
// Pause an audio file
public function pause()
{
// Save the channel position.
position = channel.position;
// Stop our sound file.
channel.stop();
// Show only the pause button.
playButton.visible = true;
pauseButton.visible = false;
}

We have now finished making modifications to our AudioPlayer class to allow the play and pause buttons to work. The last and final step is to make two very minor modifications to our main audioplayer.fla project to account for the changes that we have made.

Modifying our main.as file to use our new AudioPlayer

Now, moving back to the main.as file, we will make some very simple modifications to our ActionScript code to allow the AudioPlayer to work the way we want it to. The first change that we will need to make is to remove our call to create the new player using new AudioPlayer(). The reason we can remove this is because Flash has done this for us when we added the mcAudioPlayer movie clip to our stage and then gave it an instance name of player. Because of this, we now have a valid AudioPlayer on our stage when the Flash movie is created, and we can then use the player instance to reference that AudioPlayer.

The last and final change that we will need to make is to change the play call from the player to the load call, which will set up our AudioPlayer's buttons to allow the user to control whether the audio should play or not. Our new onNodeLoad function should look like the following:

// Called when Drupal returns with our node.
function onNodeLoad( node:Object )
{
// Print out the node title.
title.text = node.title;
// Declare our base URL.
var fileURL:String = baseURL;
// Add our file's relative path.
fileURL += "/";
fileURL += node.audio.file.filepath;
// Load our audio file
player.load( fileURL );
}

When we run this, we will now be happy to see that our play/pause button works as expected, and we are now able to control the play or pause state of the audio track being played!

Flash with Drupal

A good exercise from here would be to build our audio player for a live site (by changing the nodeId variable at the top of the page to use FlashVars). Once we are done with that, we can then replace the default theme for the Audio node type and use our new player to play the audio tracks attached to each audio node!

Summary

In this article we learned how audio is handled within Drupal and how to build a custom application that can play and pause audio content created through Drupal.

There are several key points learnt in this two-part article:

  • The Audio module is a contributed module that allows Drupal to upload and automatically tag audio content using the getID3 library.
  • We can determine how to reference that audio content in Flash using Drupal's Services Administrator section.
  • We designed our custom audio player to take advantage of the object-oriented techniques provided by ActionScript 3 using the class construct. By doing this, we allowed for our implementation to be easily maintained, portable, and expanded.
  • When creating the mcAudioPlayer movie clip, we were able to link the ActionScript code to the MovieClip buttons that we created using the Export to ActionScript checkbox.

 

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

Flash with Drupal Build dynamic, content-rich Flash CS3 and CS4 applications for Drupal 6
Published: May 2009
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Travis Tidwell

Travis Tidwell is the founder and CTO for TMT Digital (http://www.tmtdigital.com), a company that specializes in the development of Flash applications for the Drupal content management system. He is also the sole developer for the Dash Media Player (http://www.tmtdigital.com/project/dash_player, http://www.drupal.org/project/dashplayer), which is a media player built specifically for Drupal. As well as contributing this media player, Travis is also the author and co-maintainer for the FlashVideo module (http://www.drupal.org/project/flashvideo), which is a complete video solution for Drupal.

Travis graduated with a Bachelors of Science in Electrical and Computer Engineering from Oklahoma State University and has worked as an Embedded Systems Engineer for companies specializing in automotive and agricultural GPS products. Travis then fell in love with web development and more specifically with Drupal and Flash, where he has developed numerous sites including http://www.delicioso.com for Food Network's Ingrid Hoffmann.

Travis is happily married to his beautiful wife, Erin, and is the proud parent of a feisty one-year-old named Brycen. When Travis isn't working on the computer (which is rare these days), he enjoys the performing arts including playing guitar, singing, and tap dancing (Search for "Soul Man Tap" at http://www.youtube.com to see him in action).

Books From Packt

 

Drupal for Education and E-Learning
Drupal for Education and E-Learning

Drupal 6 Social Networking
Drupal 6 Social Networking

PHP 5 CMS Framework Development
PHP 5 CMS Framework Development

Drupal 6 JavaScript and jQuery
Drupal 6 JavaScript and jQuery

Spring Web Flow 2 Web Development
Spring Web Flow 2 Web Development

Learning Drupal 6 Module Development
Learning Drupal 6 Module Development

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

Mastering phpMyAdmin 3.1 for Effective MySQL Management
Mastering phpMyAdmin 3.1 for Effective MySQL Management

 

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software