Author: Brian Judy
Date: October 9, 2006
Level: Intermediate
Cartoon Builder has two places where thumbnails can be dragged and dropped. This discussion will focus on dragging thumbnails from the animation character Palette to a slot on the Timeline. This tutorial explains the coding for dragging and dropping a thumbnail from the Palette to the Timeline. Basically it works by attaching a copy of the thumbnail MovieClip image to the a temporary MovieClip that will be dragged using the new draw method in Flash 8.
- Intermediate ActionScript 2.0
- Flash version 8 or higher
- Classes/Main.as
startdrag_dropTargetonPressonRelease, onReleaseOutsideBitmapDatadrawThis software is licensed to the public under the CC-GNU GPL.
Open Main.as. This is a class that contains all the interactive code for Cartoon Builder. At about line 359 you'll find this code which sets up the button methods which start and stop the drag and drop.
paletteBtnMC.btn.onPress = function () {
this._parent.main.startPaletteButtonDrag(this._parent. myPictureIdx);
}
paletteBtnMC.btn.onRelease = paletteBtnMC.btn.onReleaseOutside = function () {
this._parent.main.stopThumbDrag();
}
Button handlers are setup for each Palette thumbnail slot. When a button is pressed down the function startPaletteButtonDrag() is called in Main.as and is passed the thumbnail slot number(myPictureIdx) so we can track which slot was pressed. When the mouse button is released, inside or outside, the flash button, stopThumbDrag() is called which in turn calls several functions to update the Cartoon Builder screen. Consult references to the commented code in Main.as below.
PaletteBtnMC: is a variable containing the current movieclip. Each Palette slot has a movieclip which contains the button that starts and stops the dragging. These slots are numbered.
btn: is the button object within PaletteBtnMC above.
onPress: is the button handler which is executed when the user presses the mouse down on a Palette thumbnail.
this._parent.main: stores the class instance of Main.as and can be accessed through a variable stored in the movieclip PaletteBtnMC.
startPaletteButtonDrag(this._parent. myPictureIdx): is the function that starts the thumbnail drag. Please refer to the commented code in Main.as starting at line number 369 for details.
onRelease, onReleaseOutside: are button handlers which are executed when the user releases the mouse button while dragging.
stopThumbDrag(): is the function that ends the thumbnail drag. See the commented code in Main.as starting at line 471.