Some clients require presentations that can be shown to a large group of people and don't want to fiddle around with a mouse trying to get from page to page or slide to slide.  In fact, they'd rather use the ol' clicker to get through their aimated/video heavy presentation.

The clicker uses keyboard code to designate what it's doing.  In it's simpliest form, it performs page up and page down functions.  To code this in flash is rather easy:

stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler);
stage.addEventListener (KeyboardEvent.KEY_UP, keyUpHandler);
function keyDownHandler (evt:KeyboardEvent):void {
     trace("this means we've hit the key"+evt.keyCode+"");
}
function keyUpHandler (evt:KeyboardEvent):void {
     trace("this means we've released the key"+evt.keyCode+");
}

It's rather straight forward, like I said. You're starting with adding event listeners to the stage that will listen for keyboard presses. If one is pressed, you will get an event fired off.

The evt.keyCode will let you know which key you are pressing or releasing. From here, you can assign functions, events etc. to your different key presses. For instance, you can set a variable to the evt.keyCode and if that variable equals "UP" you can tell your flash move to gotoAndPlay the previous slide.

In Part 1 of this tutorial, we'll go over the actionscript needed to make a dynamic video player in Flash.

The is for AS3 so please follow accordingly.

First thing is to create you AS file.  You'll have to import a variety of classes as shown below:

package {

	import flash.events.*;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.text.*;
	import flash.display.*;
	import fl.transitions.*;
	import fl.transitions.Tween; 
	import fl.transitions.TweenEvent;
	import fl.transitions.easing.*;
	import fl.video.FLVPlayback;
	import flash.display.StageDisplayState;
	import fl.video.MetadataEvent; 

What to remember here is that you're getting the FLVPlayback, StageDisplayState (for allowing full screen later) and MetdataEvent.

You want to start your class by setting the variables you'll be using.  You can set these to whatever you want to fit your specific play.

public class MediaPlayer extends MovieClip{
		private var flvPath:String = root.loaderInfo.parameters.videoPath;
		private var flvTitle:String;
		private var offScreen:Number = -5000;
		private var share_onScreen:Number = 260;
		private var embed_onScreen:Number = 260;
		private var time_elapsed:Number;
		//private var flvPath:String;
		
		public function MediaPlayer(){
			PlayVideo();
		}

Here, we are setting an flvPath string to read from a flash vars that will be in our html code (covered in Part 2 of this tutorial).  You can also pull out the title, where to set elements off screen, and then some buttons.  time_elapsed is a numeric value you'll want to keep for displaying time and processing time events.

Next, we're going to run the PlayVideo function, update the time and handle other events:

public function PlayVideo(){
			share_btn.addEventListener(MouseEvent.CLICK, shareVideo);
			embed_btn.addEventListener(MouseEvent.CLICK, embedVideo);
			share_mc.exit_btn.addEventListener(MouseEvent.CLICK, exit_popups);
			embed_mc.exit_btn.addEventListener(MouseEvent.CLICK, exit_popups);
			fullscreen_btn.addEventListener(MouseEvent.CLICK, goFullScreen);
			video_player.playPauseButton = playPause_btn;
			video_player.stopButton = stop_btn;
			video_player.seekBar = seekbar;
			video_player.source = flvPath;
			stage.addEventListener(Event.ENTER_FRAME, updateTime); 
			title_txt.htmlText = ""+root.loaderInfo.parameters.videoTitle+"";
			
			share_btn.alpha = .5;
			share_btn.mouseEnabled = false;
			embed_btn.alpha = .5;
			embed_btn.mouseEnabled = false;
		}
		
		public function updateTime(ev:Event):void{
			trace(video_player.playheadTime);
			time_elapsed = video_player.playheadTime;
			var minutes:Number = Math.floor(time_elapsed / 60);
			var seconds:Number = Math.floor(time_elapsed % 60);
			var time_elapsed_str:String = ((minutes >= 10) ? minutes : "0" + minutes) + ":" + ((seconds >= 10) ? seconds : "0" + seconds);
			time_elapsed_txt.text = ""+time_elapsed_str+"";
			
			var minutes2:Number = Math.floor((video_player.totalTime) / 60);
			var seconds2:Number = Math.floor((video_player.totalTime) % 60);
			if (minutes2 < 0) {
				minutes2 = 0;
			}
			if (seconds2 < 0) {
				seconds2 = 0;
			}
			var remainingTime_str:String = ((minutes2 >= 10) ? minutes2 : "0" + minutes2) + ":" + ((seconds2 >= 10) ? seconds2 : "0" + seconds2);
			time_remaining_txt.text = ""+remainingTime_str+"";
		}
		
		public function shareVideo(event:MouseEvent):void{
			if(share_mc.y != 160){
				embed_mc.y = offScreen;
				share_mc.y = share_onScreen;
				var shareTween:Tween = new Tween(share_mc, "y", Strong.easeOut, share_onScreen, 160, .5, true);
			} else {
				share_mc.y = offScreen;
			}
		}
		
		public function embedVideo(event:MouseEvent):void{
			if(embed_mc.y != 160){
				share_mc.y = offScreen;
				embed_mc.y = embed_onScreen;
				var embedTween:Tween = new Tween(embed_mc, "y", Strong.easeOut, embed_onScreen, 160, .5, true);
			} else {
				embed_mc.y = offScreen;
			}
		}
		
		public function exit_popups(event:MouseEvent):void{
			share_mc.y = offScreen;
			embed_mc.y = offScreen;
		}
		
		public function goFullScreen(event:MouseEvent):void{
			trace("go full screen");
			if(stage.displayState == StageDisplayState.NORMAL){
				stage.displayState = StageDisplayState.FULL_SCREEN;
			} else {
				stage.displayState=StageDisplayState.NORMAL;
			}
		}
	}
	
}

first, we're adding event listener to some buttons we can use for sharing the file and embedding the content.  This will provide users with code to share your video from your site on other blogs etc.  The fullscreen event listener will allow our video to be viewed in full screen mode.  

We also establish playPause, seek, stop and the source for the video itself.  In order to run the current time of the video (elapsed) we add a stage listener to update the time.

In the updateTime function, we are establishing the parameters for displaying total and elapsed time.  These will be fed into text fields in your actual fla file.  

The shareVideo and embedVideo options again are up to you to fill in with what you want.  It is good practice of course to provide an "exit_popups" function that will remove these elements from the stage once they are no longer needed.

Finally, the full screen function will check the current display state, and if it is normal, will expand the video to full screen.  The code is relatively simple and should prove no problem to use.

There is the first step in setting up your actionscript file!  In the next part of this tutorial, we will look at setting up the html page and the actual fla file itself to receive dynamic content and use it to load the video, titles etc.

In order to create this effect with swfobject, you must first create a flash movie with a transparent background and some graphics that will sit outside the box. Basically, you need areas where the background will show through.

Next, write your embed script using swfobject (if you need to learn more about swfobject, go here: http://blog.deconcept.com/swfobject/). Your embed script should look like this:

wmode is the important part here. You need to set it to transparent or flash will not render your background in the html page.

The div you are posting the flash file to should have a class with z-index equal to 1 (or a value higher than the rest of your page). When the swfobject javascript embeds the flash movie here, it will sit on top of the other content.

Now, test your files and you should see your flash content sit ontop of the other divs. Make sure you're setting the position of your flash div so that it will be in the correct place on your site.

Switching content with tabs is useful to a) limit the number of pages in your website and b) for containing multi-use forms in one space.

JQuery's extensive library allows for unique transitions from one set of tabbed content to another.

First, you need to gather the JQuery library from http://jquery.com/ This provides all the necessary code to perform animation and transitions. JQuery is a javascript language used to manipulate content on the web without the need for any other plug in (such as Adobe Flash, Silverlight etc.).

Next, you need to create a javascript file for your tab switcher. For this example, we're designating the divs we're switching with an id name of "tabNav".

The code for this tabSwitcher is as follows:

$(document).ready(function(){
     $('ul.tabNav a').click(function() {
          var curChildIndex = $(this).parent().prevAll().length + 1;
          $(this).parent().parent().children('.current').
removeClass('current');
          $(this).parent().addClass('current');
          $(this).parent().parent().next('.tabContainer').c
hildren('.current').
fadeOut('fast',function() {
               $(this).removeClass('current');
               $(this).parent().children('div:nth-child('+curChildIndex+')')
.fadeIn('normal',function() {
                    $(this).addClass('current');
                });
           });
          return false;
     });
});

Link this code in the header section of your html page. This creates the switching functions for your tabs.

To create a tab, set up an unordered list. Give them an a href value of #. The first li should have a class of "current".

The class “current” establishes the initial tab we’ll be seeing and the other tabs will be hidden.

Then, create your divs using the class "tab" for each div. The div you want to be the first one should have the class "tab current" so it will display first.

And that’s it. You will now be able to click on each tab link and the jquery script will provide a smooth fade in/fade out transition between tabs.

For a working example of this tab switcher look here: http://www.mind4m.com/contact.php

Initially, you're likely to not pass a code validation test. Mainly, some techniques we're used to using don't comply with the DOCTYPE or only work in one browser and not others. The main thing to remember is not to completely freak out or be overly obsessive with validation.

Checking your code is a slow process but one that should be adhered to. Go error for error and keep rechecking your code each time you make a correction. One man's fix is another section's error.

Here are some more common issues that come up with validating code:

Unclosed Div Tags: Probably the most common error. An easy way to avoid this while coding is to start by creating both the opening and closing tag. Once you're knee deep into a project, it becomes harder to pick out where the closed div isn't for long pages.

Incorrect DOCTYPE: This has always been a pain. There are a variety of DOCTYPE's and you have to make sure whatever script you're using to make your fancy transition effect from Script.aculo.us work complies.

Image Slashes: You have to make sure you always close your image tags with a / before the final >. Otherwise, it won't validate.

img src="" alt="">

'Alt' for images: All images need alt tags. This is pretty much standard now and if you don't include one, you'll get booted for not conforming for users with disabilities.

No Title: While it may seem like an obvious problem, many developers (including myself), still leave off a 'title' tag in the 'head' section every now and again. If you see the error "missing a required sub-element of HEAD", then you know that you're missing a title tag.