Web Page Design for Designers (Beginners)

I first came across this site when I was still a student myself. Albeit a final year degree student. At the time it held some valuable insights for me as a newbie to web design. I was therefore very pleased to find that although the site has been re-designed, a full archive remains of all the articles since 1998.

Although technology has changed somewhat since 1998, the basics of web page construction (HTML, basic principles of good graphic design etc) have not really changed. Consequently this site makes a great place for any web design beginner to start.

While it won't tell you much about the how it will help you a lot with the what and why, and that - let's face it - is where most wannabe web designers fall short. Too much time in the early days is spent learning the technology and not enough time on good design (how to use the technology well).

So web design beginners - start here >

Play/Pause Button

On some players, when you click play, it turns into a pause button, and then when you click pause, it turns into a play button.

But how can you do this in Flash?

The code is below, but you need to also make the button. So code first, then how to make the button:

var pausestatus = 1;
var position = 0;

_root.playpause_mc.onPress = function () {
if (pausestatus == 0) {
audio_sound.stop();
position = (audio_sound.position/1000);
_root.playpause_mc.play();
pausestatus = 1;
}
if (pausestatus == 1) {
audio_sound.start(position);
_root.playpause_mc.play();
pausestatus = 0;
}
}


The Button

The idea is that we make a button that can change its appearance, not just on rollOver, but depending on whether the sound is playing or not.

There is no automatic function for this in Flash, so we have to write a short ActionScript to do it (see above). But we also need to set-up the buttons so the ActionScript has something to work with.

Here's how:

Make 2 buttons of the same size, with the registration point in the same place for each one. One of the buttons needs a play symbol on it, the other needs a pause symbol.

Then make a MovieClip. The clip needs to have 2 keyframes each with a stop action. Place the play button on the first keyframe, place the pause button on the second keyframe. Make sure they are in the same place, so as you flick from frame to frame the button appears to stay still, and only the icon changes.

On the stage, give the MovieClip the instance name of 'playpause_mc'.

Finishing Up

Add the ActionScript to the first keyframe of the main timeline, and test the movie (CTRL+ENTER).

When you click the button, the icon should appear to change, when you click it again, it should appear to change back.

This is because of this line in the actionscript above:


_root.playpause_mc.play();


In effect, by clicking the playpause_mc MovieClip we tell the clip to move from its first keyframe to its second - the MovieClip plays, it moves to the next frame, but the stop(); action on the next frame stops it - then when we click again we play again, but because there are only 2 frames, so we go back to the first frame.

In this way we switch between the icons.

The rest of the code allows the button to have 2 purposes.

Normally, 1 button 1 purpose. A play, a pause, a stop, a rewind, you get the picture. But this time, we want the same button to play AND pause.

For this reason we have to use an IF statement in our code. We only want the MP3 to start playing IF it is currently stopped. We only want the MP3 to stop playing IF it is currently playing.

The way we do this is to use a variable called pausestatus:


var pausestatus = 0;


In this case 0 means NOT paused and 1 means IT IS paused. Because when we first begin there is NO MP3 playing, we set this variable to 1 - paused - not playing.

When we press the button the first time, we start the MP3:


audio_sound.start(position);


But we also change the value of the pausestatus variable, to tell the script that we are now playing:


pausestatus = 1;


When we pause, we change it back.

By doing this we can then use the pausestatus to decide what we want the button to do when we click it.


if (pausestatus == 0) {
//DO SOMETHING
}
if (pausestatus == 1) {
//DO SOMETHING ELSE
}


Thats the logic.

Get back to me if you have any questions.

Please note, this is not all the code you need for the MP3 player, you still need the menu to choose your track. This just covers play/pause button.