Cam Comments

Cam Comments was born from the question, "How can we take Flash's incredibly cool ability to utilize webcams and apply it to something useful?". I decided that adding webcam support to a comment system / guestbook would be both fun and useful. On top of this, I wanted an interface that was clean, quick to load, and I wanted to be able to manage it through XML. Cam Comments is the result!

Try it out here!

Cam Comments currently boasts the following features:

• Cutting Edge - No other comment system available optionally utilizes your users webcam.
• XML Managed - All comments and their respective images are managed through a simple XML file.
• Light Weight - Published SWF size of about 63KB.
• Compatibility - Coded in AS2, opens with Flash 8+. Backwards compatible from Flash Player 8 all the way to Flash Player 10.
• TweenMax Driven - Unparalleled tweening performance and flexibility.
• Load and Go - Load Cam Comments into any of your pages with a simple 'loadMovie()' command.

Cam Comments was designed to be intuitive so you won't need instructions on how to use it. But for the sake of thoroughness, here's a breakdown of how it works.

Reading comments:
Comments and their respective photo are arranged into pages (15 per page default) with the newest comments at the top. Each comment contains the users photo, name, and comment text as well as a calculated age of the comment. Mouse over the top or bottom of the comment window to scroll through the comments and use the arrow buttons at the bottom to slide to the next or previous page.

Writing comments:
Write a comment by clicking on the 'write comment' button (duh!). Doing so will present a dialog box asking the user if they wish to enable their webcam. If the user has a webcam present and selects 'Yes' they are able to utilize the webcam features. Otherwise, the webcam features will be disabled and a default snapshot will be used for their message. By clicking on the 'Capture' button, users are able to grab a snapshot of their webcam. They are free to snap as many shots as they like before deciding to send their message.

Cam Comments requires that you have a PHP enabled web host. Most web hosts support PHP but please double check that yours does before purchasing.

Cam Comments makes use of the freely available TweenMax and PreloadAssetManager classes by GreenSock. You will need to download each from the respective links. Cam Comments also uses a modified version of the Bitmap Exporter class by Mario Klingemann in order to save the captured images to your php enabled server. The modified version of bitmap exporter has been included in this package for simplicity.

The font FS-IngridBold, by FontSmith is used in the demonstration. This font is NOT free, but is available for purchase. A great alternative is 'Trebuchet MS - Bold' which is preinstalled on most computers.

The comment SWF is quite compact at only 63KB. Since this small amount of data can be loaded almost instantly on modern internet connections, there is no preload animation for the comment SWF.

As mentioned above please be sure your web host supports PHP as it is required for Cam Comments to work.

I've setup Cam Comments to be as simple to implement in your website as possible. If you're the type that likes to jump right in, take a look at loaderSample.fla to see how Cam Comments is loaded into a SWF. If you're the methodical type, follow the steps I've outlined below. You should be up and running in less than 10 minutes.

• Step 1 - Download AS Classes - As I mentioned earlier, Cam Comments makes use of the freely available TweenMax and PreloadAssetManager classes by GreenSock. Please visit these links to download a copy of each. Both classes are contained within a folder called 'gs'. Place a copy of this folder next to our 'comments.fla'. The gs folder should now contain the files TweenFilterLite.as, TweenLite.as, TweenMax.as, and a folder called dataTransfer which contains the files PreloadAsset.as and PreloadAssetManager.as.


• Step 2 - Define BitmapExporter Location - Before the comment system will work, we'll need to tell it where our 'BitmapExporter.php' file is located on the web. Open up 'comments.fla' and select the first frame of the first layer called 'AS Variables'. Here you will find the variable called '_global.exporterLocation'. Change this variable to the location of BitmapExporter.php on your web server. For instance, "http://www.mysite.com/comments/BitmapExporter.php". Remember to publish the swf!


• Step 3 - Place the files - Within the 'Deploy' folder you will find the 'comments' folder. Copy the 'comments' folder to your web server, placing it next to your main SWF you will be loading it into. In the example I've provided I'm loading Cam Comments into 'sampleLoader.swf' so I've placed the 'comments' folder next to 'sampleLoader.swf'.


• Step 4 - Load it - Open your main FLA and load the comments into it using the following two lines of code:

_global.commentsFolder = "comments/"
commentsHolder.loadMovie(commentsFolder+"comments.swf")

'_global.commentsFolder' refers to the folder that comments.swf is located in. The comments SWF later refers to this variable so be sure to include it as silly as it may look. 'CommentsHolder' is the empty movieclip we are loading our comments SWF into.

See the 'AS Load Comments' layer of 'sampleLoader.fla' for reference.

I hope to add more variables in future releases and certainly encourage any suggestions.

The following variables can be found on the 'AS variables' layer of comments.fla:

• exporterLocation - http://www.mysite.com/comments/BitmapExporter.php - MUST replace this with the location of the BitmapExporter.php file on your server.
• showAmount - 15 - Set this to the number of entries you want to view per page.
• emailNotification - true - Set this to true to receive email notifications when a user has submitted a new comment. Additionally, the users name and message will be attached to the email.
• notificationAddress - Name@SomeSite.com - If email notification is enabled, notifications will be sent to this address.

"I'm trying to preview this on my computer but I can't post comments. What Gives?"

In order to post comments the files need to be run from a PHP enabled web server.

"OK, so it's now up on my server and I know my server has PHP but I still can't post comments. What should I do?"

Make sure that the variable, '_global.exporterLocation', (located on the 'AS variables' layer of comments.fla) correctly points to the BitmapExporter.php file located on your server. Relative paths will not work, use the full address. For example:

_global.exporterLocation
= "http://www.mysite.com/comments/BitmapExporter.php"

"I'd like to have seperate comment boards on different parts of my site, can I do that?"

Sure! I would do this by having multiple copies of the comments folder on your site. So perhaps a folder called 'comments1' and another called 'comments2'.

Update the '_global.exporterLocation' variable in each of your comments.swf to reflect the location of their respective BitmapExporter.php file. The first one might now read
"http://www.mysite.com/comments1/BitmapExporter.php", the second one,
"http://www.mysite.com/comments2/BitmapExporter.php".

When loading the comments, be sure include the correct folder name for your '_global.commentsFolder' variable. If you were loading the first comments it might read:

_global.commentsFolder = "comments1/"
commentsHolder.loadMovie(commentsFolder+"comments.swf")

and the second might read:

_global.commentsFolder = "comments2/"
commentsHolder.loadMovie(commentsFolder+"comments.swf")