Flash MX - Simulate a Video Editor

This tutorial was inspired by Dyno who wanted help to emulate Brendan Dawes' Flash Emulation of the Shower Scene from Psycho editing exercise.
Go Here to see our discussion about the origins of this tutorial.
This is a very basic re-creation of this Video Editing Simulation.

Have a look at mine here..
Download it here.
Make sure that each section has its own layer - icons, ViewWindows, Buttons, code, timelines.
The frame rate for our flash movie will be 5 frames per second, the same as our video clips.
I have made my flash movie 700 wide by 400 high.

Make the Video Clips

I made all my video clips 2 seconds long. I settled on a frame rate of 5 frames per second. That was good enough to show some basic movement and would keep the filesize down. In Adobe Premiere, bring a 2 second length of video to the timeline and Export timeline as frames. I made the video size 176 X 144. And exported at 5 fps.
You can use whatever Video Editor you like and can export as a quicktime or .avi files. I made 5 video clips, each one 2 seconds long, consisting of 10 frames. I also batch converted all the frames, using IrfanView and made them heaps smaller by converting each frame to a 14% compression jpeg file.

Import the Video Clips into Flash

My technique was to create a movie clip first, call it "vid01" and then click File - Import.

I selected the first frame and then it would ask me if I wanted to import the sequence. Go yes.

This saves lots of work as each frame of the video clip is loaded into a frame of the movieclip. The naming of the importing files is important. They need to be saved in sequence such as - blah01.jpg, blah02.jpg, blah03.jpg - blah10.jpg.
Or just use prefabricated movie clips and embed them or link them. Go here to find out how to do that.
In the movieClip in which the video frames are embedded, make another layer, call it "code" and in frame 10 of the code layer, make a keyframe and put the code in:

stop();

Making the draggable Clip Icons

We have to make 5 draggable movieclips to represent each Video clip.

• First make a transparent Button.
• Click F8 and select "Button".
• Make a square about 63.5 x 52.
• Make a keyframe for the over , down and hit frames.
• Delete the squares in the up, over and down frames.
• There should be only a square in the "hit" frame.
• A transparent button allows us to have a hit area but is invisible and can go over a movieclip to make it draggable.
• Create a MovieClip, call it "but1".
• Drag a frame of the video to the stage of the mc.
• Make it half size ( about 63.5 x 52) and centre the pic.
• Make another layer above the pic layer and drag the transparent button to that layer.
• Make 4 more buttons and call them but2 - but5 .
• Drag the buttons to the stage and put them in the top right section or wherever you want.
• Name the instances on the stage "but1_mc", but2_mc, - but5_mc

Make the Preview Windows

• Create a preview window. This will be a square the same size as the videos (176x144) plus some embellishments to make it look like some sort of TV or monitor.
• Make it a MovieClip. Drag 2 copies to the Stage, name one "view" and the other "program".

The Timeline

• Make a timeline movieclip.
• I made mine to look like a frame of film.
• Call it "time_mc".
• Drag 5 copies to the stage underneath the video icon buttons.
• Give them instance names of "line1", "line2", etc.

Preview and Play Buttons

• Make a button on the buttons layer, and write "preview" on it somewhere.
• Drag it to the stage, if it isnt there already, and put it underneath the preview window.
• Give it the instance name of "pre_btn".
  
• Make another button and write "play" on it.
• Put it underneath the program window.
• Give it the instance name of "play_btn".
• We will write the code for them later.

Coding the Drag and Drop

• First up extend all the layers to 50 frames.
• Seeing I have 5 video clips, each 10 frames each.
• If you have different length Video clips, work out the maths.
• In the code layer , make keyframes at frames 1, 2, 10, 20, 30 ,40 ,50.
• on frame 2 , code layer, put this code :

  	_root.attachMovie(clip1, "show1", 3);
  	_root.show1._x = _root.program._x;
  	_root.show1._y = _root.program._y;
  	_root.show1.play();
  

• Frame 10:

  	_root.attachMovie(clip2, "show2", 3);
  	_root.show2._x = _root.program._x;
  	_root.show2._y = _root.program._y;
  	_root.show2.play();
  

• Frame 20:

  	_root.attachMovie(clip3, "show2", 3);
  	_root.show2._x = _root.program._x;
  	_root.show2._y = _root.program._y;
  	_root.show2.play();
  

• Frame 30:

  	_root.attachMovie(clip4, "show2", 3);
  	_root.show2._x = _root.program._x;
  	_root.show2._y = _root.program._y;
  	_root.show2.play();
  

• Frame 40:

  	_root.attachMovie(clip5, "show2", 3);
  	_root.show2._x = _root.program._x;
  	_root.show2._y = _root.program._y;
  	_root.show2.play();
  

• Frame 50:

  	_root.show2.removeMovieClip();
  // set start positions for buttons
  	 _root.but1_mc._x = b1startx ;
  	 _root.but1_mc._y = b1starty ;
  	 _root.but2_mc._x = b2startx ;
  	 _root.but2_mc._y = b2starty  ;
  	 _root.but3_mc._x = b3startx ;
  	 _root.but3_mc._y = b3starty  ;
  	 _root.but4_mc._x = b4startx ;
  	 _root.but4_mc._y = b4starty ;
  	 _root.but5_mc._x = b5startx  ;
  	 _root.but5_mc._y = b5starty ;
  

Main Script - frame 1, code layer

Here is the code for frame 1, "code" layer.

 stop();
// declare icon start points
var b1startx, b1starty;
var b2startx, b2starty;
var b3startx, b3starty;
var b4startx, b4starty;
var b5startx, b5starty;
//initialise clip variables for playback
var clip1 = "";
var clip2 = "";
var clip3 = "";
var clip4 = "";
var clip5 = "";
// initialise buttons and timeline mcs
_root.onLoad = function() {
	// set start pts for buttons
	b1startx = _root.but1_mc._x;
	b1starty = _root.but1_mc._y;
	b2startx = _root.but2_mc._x;
	b2starty = _root.but2_mc._y;
	b3startx = _root.but3_mc._x;
	b3starty = _root.but3_mc._y;
	b4startx = _root.but4_mc._x;
	b4starty = _root.but4_mc._y;
	b5startx = _root.but5_mc._x;
	b5starty = _root.but5_mc._y;
// attach drop zones to time line
_root.line1.attachMovie("dropzone", "dropzone", 100);
_root.line1.dropzone._alpha = 0;
_root.line2.attachMovie("dropzone", "dropzone2", 100);
_root.line2.dropzone2._alpha = 0;
_root.line3.attachMovie("dropzone", "dropzone3", 100);
_root.line3.dropzone3._alpha = 0;
_root.line4.attachMovie("dropzone", "dropzone4", 100);
_root.line4.dropzone4._alpha = 0;
_root.line5.attachMovie("dropzone", "dropzone5", 100);
_root.line5.dropzone5._alpha = 0;
};
// button 1 and preview
//
_root.but1_mc.onPress = function() {
	startDrag(this);
};
_root.but1_mc.onRelease = function() {
	this.stopDrag();
	// drop on the preview window
if (this._droptarget == "/view" || this._droptarget == "/view/view_mc") {
	// send button back to start
	_root.but1_mc._x = b1startx;
	_root.but1_mc._y = b1starty;
	// attach movie to preview window
	_root.view.attachMovie("vid1", "view_mc", 2);
	_root.view.view_mc.gotoAndStop(1);
} else {
	_root.but1_mc._x = b1startx;
	_root.but1_mc._y = b1starty;
}
// drop on the timeline
if (eval(this._droptarget) == _root.line1.dropzone) {
	clip1 = "vid1";
	_root.but1_mc._x = _root.line1._x;
	_root.but1_mc._y = _root.line1._y;
}
if (eval(this._droptarget) == _root.line2.dropzone2) {
	clip2 = "vid1";
	_root.but1_mc._x = _root.line2._x;
	_root.but1_mc._y = _root.line2._y;
}
if (eval(this._droptarget) == _root.line3.dropzone3) {
	clip3 = "vid1";
	_root.but1_mc._x = _root.line3._x;
	_root.but1_mc._y = _root.line3._y;
}
if (eval(this._droptarget) == _root.line4.dropzone4) {
	clip4 = "vid1";
	_root.but1_mc._x = _root.line4._x;
	_root.but1_mc._y = _root.line4._y;
}
if (eval(this._droptarget) == _root.line5.dropzone5) {
	clip5 = "vid1";
	_root.but1_mc._x = _root.line5._x;
	_root.but1_mc._y = _root.line5._y;
	}
};
//  button 2 and preview
//
_root.but2_mc.onPress = function() {
	startDrag(this);
};
_root.but2_mc.onRelease = function() {
	this.stopDrag();
if(this._droptarget == "/view" 
|| this._droptarget == "/view/view_mc") {
		// send button back to start
		_root.but2_mc._x = b2startx;
		_root.but2_mc._y = b2starty;
		// attach movie to preview window
		_root.view.attachMovie("vid2", "view_mc", 2);
		_root.view.view_mc.gotoAndStop(1);
	} else {
		_root.but2_mc._x = b2startx;
		_root.but2_mc._y = b2starty;
	}
	if (eval(this._droptarget) == _root.line1.dropzone) {
		clip1 = "vid2";
		_root.but2_mc._x = _root.line1._x;
		_root.but2_mc._y = _root.line1._y;
	}
	if (eval(this._droptarget) == _root.line2.dropzone2) {
		clip2 = "vid2";
		_root.but2_mc._x = _root.line2._x;
		_root.but2_mc._y = _root.line2._y;
	}
	if (eval(this._droptarget) == _root.line3.dropzone3) {
		clip3 = "vid2";
		_root.but2_mc._x = _root.line3._x;
		_root.but2_mc._y = _root.line3._y;
	}
	if (eval(this._droptarget) == _root.line4.dropzone4) {
		clip4 = "vid2";
		_root.but2_mc._x = _root.line4._x;
		_root.but2_mc._y = _root.line4._y;
	}
	if (eval(this._droptarget) == _root.line5.dropzone5) {
		clip5 = "vid2";
		_root.but2_mc._x = _root.line5._x;
		_root.but2_mc._y = _root.line5._y;
	}
};
//  button 3 and preview
//
_root.but3_mc.onPress = function() {
	startDrag(this);
};
_root.but3_mc.onRelease = function() {
	this.stopDrag();
	if (this._droptarget == "/view" 
	|| this._droptarget == "/view/view_mc") {
		// send button back to start
		_root.but3_mc._x = b3startx;
		_root.but3_mc._y = b3starty;
		// attach movie to preview window
		_root.view.attachMovie("vid3", "view_mc", 2);
		_root.view.view_mc.gotoAndStop(1);
	} else {
		_root.but3_mc._x = b3startx;
		_root.but3_mc._y = b3starty;
	}
	if (eval(this._droptarget) == _root.line1.dropzone) {
		clip1 = "vid3";
		_root.but3_mc._x = _root.line1._x;
		_root.but3_mc._y = _root.line1._y;
	}
	if (eval(this._droptarget) == _root.line2.dropzone2) {
		clip2 = "vid3";
		_root.but3_mc._x = _root.line2._x;
		_root.but3_mc._y = _root.line2._y;
	}
	if (eval(this._droptarget) == _root.line3.dropzone3) {
		clip3 = "vid3";
		_root.but3_mc._x = _root.line3._x;
		_root.but3_mc._y = _root.line3._y;
	}
	if (eval(this._droptarget) == _root.line4.dropzone4) {
		clip4 = "vid3";
		_root.but3_mc._x = _root.line4._x;
		_root.but3_mc._y = _root.line4._y;
	}
	if (eval(this._droptarget) == _root.line5.dropzone5) {
		clip5 = "vid3";
		_root.but3_mc._x = _root.line5._x;
		_root.but3_mc._y = _root.line5._y;
	}
};
//  button 4 and preview
//
_root.but4_mc.onPress = function() {
	startDrag(this);
};
_root.but4_mc.onRelease = function() {
	this.stopDrag();
	if (this._droptarget == "/view" 
	|| this._droptarget == "/view/view_mc") {
		// send button back to start
		_root.but4_mc._x = b4startx;
		_root.but4_mc._y = b4starty;
		// attach movie to preview window
		_root.view.attachMovie("vid4", "view_mc", 2);
		_root.view.view_mc.gotoAndStop(1);
	} else {
		_root.but4_mc._x = b4startx;
		_root.but4_mc._y = b4starty;
	}
	if (eval(this._droptarget) == _root.line1.dropzone) {
		clip1 = "vid4";
		_root.but4_mc._x = _root.line1._x;
		_root.but4_mc._y = _root.line1._y;
	}
	if (eval(this._droptarget) == _root.line2.dropzone2) {
		clip2 = "vid4";
		_root.but4_mc._x = _root.line2._x;
		_root.but4_mc._y = _root.line2._y;
	}
	if (eval(this._droptarget) == _root.line3.dropzone3) {
		clip3 = "vid4";
		_root.but4_mc._x = _root.line3._x;
		_root.but4_mc._y = _root.line3._y;
	}
	if (eval(this._droptarget) == _root.line4.dropzone4) {
		clip4 = "vid4";
		_root.but4_mc._x = _root.line4._x;
		_root.but4_mc._y = _root.line4._y;
	}
	if (eval(this._droptarget) == _root.line5.dropzone5) {
		clip5 = "vid4";
		_root.but4_mc._x = _root.line5._x;
		_root.but4_mc._y = _root.line5._y;
	}
};
//  button 5 
//
_root.but5_mc.onPress = function() {
	startDrag(this);
};
_root.but5_mc.onRelease = function() {
	this.stopDrag();
	if (this._droptarget == "/view" 
	|| this._droptarget == "/view/view_mc") {
		// send button back to start
		_root.but5_mc._x = b5startx;
		_root.but5_mc._y = b5starty;
		// attach movie to preview window
		_root.view.attachMovie("vid5", "view_mc", 2);
		_root.view.view_mc.gotoAndStop(1);
	} else {
		_root.but5_mc._x = b5startx;
		_root.but5_mc._y = b5starty;
	}
	if (eval(this._droptarget) == _root.line1.dropzone) {
		clip1 = "vid5";
		_root.but5_mc._x = _root.line1._x;
		_root.but5_mc._y = _root.line1._y;
	}
	if (eval(this._droptarget) == _root.line2.dropzone2) {
		clip2 = "vid5";
		_root.but5_mc._x = _root.line2._x;
		_root.but5_mc._y = _root.line2._y;
	}
	if (eval(this._droptarget) == _root.line3.dropzone3) {
		clip3 = "vid5";
		_root.but5_mc._x = _root.line3._x;
		_root.but5_mc._y = _root.line3._y;
	}
	if (eval(this._droptarget) == _root.line4.dropzone4) {
		clip4 = "vid5";
		_root.but5_mc._x = _root.line4._x;
		_root.but4_mc._y = _root.line4._y;
	}
	if (eval(this._droptarget) == _root.line5.dropzone5) {
		clip5 = "vid5";
		_root.but5_mc._x = _root.line5._x;
		_root.but5_mc._y = _root.line5._y;
	}
};
//	-----	PLAY & PREVIEW  BUTTONS
//
_root.pre_btn.onRelease = function() {
	_root.view.view_mc.play();
};
_root.play_btn.onRelease = function() {
	_root.gotoAndPlay(2);
};

 

There. That is the main part of it. You can make it more beautiful if you like and add some instructions. Make the Preview windows real high-tech and space age. Make it look like a futuristic interface. Or whatever you like. The code probably could be massively simplified. I will leave that up to you.