Ming Button

By now, you have learned all the basics needed to create some amazing swf movies! Now let's take the first step toward interaction between the visitor and your swf movie.

Buttons are the basic interactive tool in Ming, similar in many ways to HTML's link. You can create buttons that can do almost anything using scripting and special URLs, just as you can with the trusty old <a href tag.

Flash buttons have several "states" to them, corresponding to the status of the button at any given time: up, over, down, and hit. We can set different shapes, or the same one, to each state using their set functions.

Let's make a button that will act like a link taking us to the URL we specify.

A) Begin as always with our opening html tags and begin our php code block

<html>
<body>
<?php

B) Next, we define three shapes for the various states of our button. You can use the same shape over and over if you do not want any mouseover or onclick changes to your button.

$upShape = new SWFShape();
$upShape->setRightFill(0,0,255);
$upShape->drawLine(250,0);
$upShape->drawLine(0,60);
$upShape->drawLine(-250,0);
$upShape->drawLine(0,-60);
$overShape = new SWFShape();
$overShape->setRightFill(255,0,0);
$overShape->drawLine(250,0);
$overShape->drawLine(0,60);
$overShape->drawLine(-250,0);
$overShape->drawLine(0,-60);
$hitShape = new SWFShape();
$hitShape->setRightFill(255,0,255);
$hitShape->drawLine(250,0);
$hitShape->drawLine(0,60);
$hitShape->drawLine(-250,0);
$hitShape->drawLine(0,-60);

C) Next, let's create some text to place over our button Obtain Bimini font here.

$myFont=new SWFFont("Bimini.fdb");
$myText1=new SWFText();
$myText1->setFont($myFont);
$myText1->setColor(255,255,0);
$myText1->setHeight(40);
$myText1->addString("Ming Lessons");

D) Now, we define our SWFButton

$myButton=new SWFButton();

E) Next, we set the button's up state

$myButton->setUp($upShape);

F) Then, we set the button's over state

$myButton->setOver($overShape);

G) Now, we set the button's down state

$myButton->setDown($hitShape);

H) And finally, we set the button's hit state, which is the area you want to be clickable (you may want to make this larger than the button's shapes for ease of use)

$myButton->setHit($hitShape);

I) Now we set the action the button will take, in this case acting as a link to my Ming lessons index. Pay close attention to the syntax here!! Note that we use "_top" so that our link will load in the document window.(more on actions in future lessons)

$myButton->setAction(new SWFAction("
getURL('http://www.lingolinda.com/ming/Lessons/MingLessons.html', '_top');
"));

J) Next, we define our movie and set it's attributes as normal

$myMovie = new SWFMovie();
$myMovie->setDimension(300,100);
$myMovie->setBackground(255,255,255);

K) Now, let's add our button to our movie and move it into position as with any object in Ming

$firstButton=$myMovie->add($myButton);
$firstButton->moveTo(20,20);

L) You may have noticed previously that adding things to your movie at the same position as previous objects will layer them with the last one on top. So, let's add add our text now so it will be on top of our button

$firstText=$myMovie->add($myText1);
$firstText->moveTo(35,60);

M) Finally, we save our movie, close our php code block, and add our object codes then close our html document. For WebTv to see the mouseover/out/onclick changes, you should add an extra link so the cursor has somewhere else to go besides the button.

$myMovie->save("lesson11.swf"); ?>
<a href="javascript:void(0)">Extra Link For MouseOver/Out Changes</a>

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0" ID=objects WIDTH=300 HEIGHT=100>
<PARAM NAME=movie VALUE="lesson11.swf">
<EMBED src="lesson11.swf" WIDTH=300 HEIGHT=100 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>
</BODY>
</html>


Buttons can be made in many ways, and their actions can do almost anything. Learn the basics of buttons now (spend some time reading the documentation), and you will open yourself up to an entire new method of interacting with your online visitors!

Code summary for lesson 11:

Result: