Creating flash 'whiteboard'

i have a script but need to modify it

[HelenDev]

I want to create a flash movie that has a board you can draw on. I found this script on the net somewhere which creates a simple drawing pad which is great.

However I need to make this so that the drawing board is only part of the movie, rather than the whole movie, as it is presently. ie I want the drawing pad to sit inside some other graphics.

Here is the code:

init();
stop();
//
function init() {
 initDrawing();
 initMouse();
}
function initDrawing() {
 createEmptyMovieClip("draw_mc", 10);
 draw_mc.lineStyle(2, 0x000000);
 createEmptyMovieClip("temp_mc", 20);
}
function initMouse() {
 mouseMoveListener = new Object();
 mouseMoveListener.onMouseMove = function() {
 mouseMoveEvent();
 };
 //
 mouseClickListener = new Object();
 mouseClickListener.onMouseDown = function() {
 mouseDownEvent();
 };
 mouseClickListener.onMouseUp = function() {
 mouseUpEvent();
 };
 Mouse.addListener(mouseClickListener);
}
function mouseDownEvent() {
 draw_mc.moveTo(_xmouse, _ymouse);
 Mouse.addListener(mouseMoveListener);
}
function mouseUpEvent() {
 temp_mc.clear();
 Mouse.removeListener(mouseMoveListener);
}
function mouseMoveEvent() {
 // Remove any previous drawing
 temp_mc.clear();
 // Draw dot at End Point
 temp_mc.lineStyle(6, 0x00ff00);
 temp_mc.moveTo(_xmouse, _ymouse);
 temp_mc.lineTo(_xmouse + 0.5, _ymouse);
 // Draw line segment
 draw_mc.lineTo(_xmouse, _ymouse);
}
// this actionscript goes in frame 1

I am able to use flash on a quite basic level and am happy to play with the actionscript, even if I'm not always sure what I'm doing!

Any help would be much appreciated.

[benihana]

try publishing that from flash to create a self contained .swf containing the whiteboard, then in the parent movie with the other graphics use loadMovie [macromedia.com] to load the whiteboard in.

ben

<added> alternatively, you could create a new moiveclip (insert > symbol) and add that script to the first frame of the new movieclips timeline.

you can then drag that new movieclip from the library onto the stage with the rest of your graphics etc

[HelenDev]

Cheers for the reply ben.

When I create the movieclip and drop this in, it works, but I don't know how to get the movieclip (drawing pad) to be the exact size I want. At the moment the user can draw all over the surroundings.

it is possible that it's past dumb o'clock for me

[benihana]

hmm . didnt think of that.

you could possibly add an if statement to check the mouses position before drawing, something alongm the lines of:

function mouseDownEvent() {
if (_xmouse>=100&&_xmouse=<400&&_ymouse>=100&&_ymouse=<400){
draw_mc.moveTo(_xmouse, _ymouse);
Mouse.addListener(mouseMoveListener);
}
}

so basically you can only draw if the mouse is between 100 and 400 px along both the x axis and y axis - experiment with co-ordinates to suit.

note: totally untested code. sounds ok in theory but...

[HelenDev]

Cheers again ben. You look like a bit of a flash pro to me. I shall come to you with all my flash problems ;)

It just occured to me to put the 'surroundings' in the layer above the movieclip and voila, it works. Told you it was past dumb o'clock :)

[benihana]

yep thats probably a much better idea .

flash problems

he he - i tend to goto to winstun when hes about :)

good luck

[winstun]

Also if you're putting the drawing pad mc into a container ( blank mc to 'hold' the pad ) then you could put:
function mouseDownEvent() {
var clip = this._parent;
if (_xmouse>=clip._x&&_xmouse=<(clip._x+clip._width)&&_ymouse>=clip._y&&_ymouse=<(clip._y+clip._height)){
draw_mc.moveTo(_xmouse, _ymouse);
Mouse.addListener(mouseMoveListener);
}
}

This way it's more dynamic and re-usable so you can use it in other applications and with the option of resizing it.
Long story short is so you don't have go in and edit the function every time you need a different size.

[winstun]

Thanks for the props, Ben, but just doing my part to help out. :)