Our Flash tutorials provide you with step-by-step instructions on how to create beautiful Flash animations and integrate them into your website.  Home Flash & Swish Flash Tutorials Flash Shout Box

Flash Shout Box


1. Start off by creating a new document in photoshop, 322x296

Create the layout of your shoutbox, make sure you leave a space for, Name and Message fields, also a window for the shouts to be displayed in.

Here is what I have created:

image 1

2. Then open up Flash MX and create a 322x296 document, then goto file>import>to stage

image 2

3. Then browse to the shoutbox layout you have created and center it in the middle of the stage

4. Then in the actions dialog, enter this action

image 3

5. Create a new layer and do the following

a. create a square box over the button that says shout, or whatever you have put and select it

image 4

b. press f8 to convert it to a symbol, select button and name it shout

image 5

c. select ok and double click the button you just made and right click the hit frame, select insert keyframe

image 6

d. then move back to the Up keyframe and select the box you made, and select it, then goto edit clear

image 7

e. move back to the stage and duplicate the button and move it over reset

image 8

f. select the shout button and apply this action

image 9

g. do the same with the reset button except have it goto the reset frame

image 10

All done with those two buttons, now lets move onto the text fields, do the following

6. Create a dynamic text field the size of where you want the shouts to be viewed

image 11

Then create two input text field over name and message areas

Here are the settigs for each field

image 12

image 13

Make sure they are both set to single line

Then create a new keyframe, name the frame, shout

image 14

Add this action to the frame

image 15

What this does is, it asks flash if name is empty or if message is empty, if they are, tell the user they need to enter there name & or message

Then create a new keyframe named post, make sure it is about 30 frames ahead

image 16

Then add this action

image 17

then, 10 frames later create a keyframe named, reset

image 18

Add the following actions

Flash Shout Box

That wraps up the flash part, now we will move on to php

Create a new file in your favorite text editor and enter this.

<?php
mysql_connect("host", "username", "password");
mysql_select_db("database_name");
?>

Save it as dbconnect.php. Then create another new file in the text editor and enter this.

<?php
include("dbconnect.php");
$query = "SELECT * FROM shouts ORDER BY autoID DESC";
$shouts = mysql_query($query);
$row_shouts = mysql_fetch_assoc($shouts);
?>
message=<?php do { ?><b><?php echo $row_shouts['name'];
?></b><br><?php echo $row_shouts['message']; ?><br><?php } while
($row_shouts = mysql_fetch_assoc($shouts)); ?>

Save it as shouts.php. Then create another new file and enter this.

<?php
include("dbconnect.php");
$query = "INSERT INTO messages (name, message) VALUES ($name, $message)";
mysql_query($query);
?>

Save it as post.php. Then goto your mysql console or php my admin and execute this.

CREATE TABLE 'shouts' ( 'autoID' INT( 11 ) NOT NULL AUTO_INCREMENT ,
'name' VARCHAR( 85 ) ,
'message' TEXT,
PRIMARY KEY ( 'autoID' )
);

That will create the table and fields required for the shoutbox, That should be it, thanks people.



Author's URL: GreyCobra.com
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Our Flash tutorials provide you with step-by-step instructions on how to create beautiful Flash animations and integrate them into your website. More Flash Tutorials: Featured Materials | Fresh Materials | More Flash Tutorials at FlashPerfection.com

Reader's comments
comments Schooley July 27, 2010 says:
I had some errors using your SQL syntax. Here is how I revised it:

CREATE TABLE shouts (
autoID int(11) NOT NULL auto_increment ,
name varchar(85) ,
message TEXT,
PRIMARY KEY (autoID)
);

Reply
Add comments to "Flash Shout Box"

Captcha