Create A Drag & Drop Painting Interface

How to create simple drag and drop painting interface:

1.Create the art movie clip:

• In the main menu go to Insert > New Symbol.
• Then in the "Create New Symbol" window:
  • Set the symbol type to " Movie Clip".
  • Set the name to "art".
  • Press the "OK" button.
• Drag the graphic "artw" on stage.
• Then right click on frame 2 and select "Insert Blank Keyframe".
• Repeat this for frames "3" and "4".
• Then select frame 2 and drag graphic "artr" from the library and center on stage.
• Select frame 3 and drag graphic "artg" from the library and center on stage.
• Select frame 4 and drag graphic "artb" from the library and center on stage.
• Select frame 1 then open the "actions" panel and enter the following script:

stop();

• Click on "Scene 1" to return to the main timeline.
• Select the first frame of the "Painting" layer and drag the mc "art" from the library.
  • In the properties panel set the instance name to "art_mc".

2. Add the paint bucket tools:

• Select the first frame of the "buckets" layer.
  • Drag the mc "symbol 5" from the library on stage.
  • Name the instance "rbucket_mc"
  • Drag the mc "symbol 5" from the library on stage.
  • Name the instance "rbucket_mc"
  • Drag the mc "symbol 4" from the library on stage.
  • Name the instance "gbucket_mc"
  • Drag the mc "symbol 3" from the library on stage.
  • Name the instance "bbucket_mc"
• Select the first frame of the "actions" layer then open the "actions" panel and enter the following script:
  

rbucket_mc.onPress = function(){
this.startDrag();
}
rbucket_mc.onRelease = function(){
this.stopDrag();
if(this._droptarget == "/art_mc"){
art_mc.gotoAndStop(2);
}
}
rbucket_mc.onReleaseOutside = function(){
this.stopDrag();
}

gbucket_mc.onPress = function(){
this.startDrag();
}
gbucket_mc.onRelease = function(){
this.stopDrag();
if(this._droptarget == "/art_mc"){
art_mc.gotoAndStop(3);
}
}
gbucket_mc.onReleaseOutside = function(){
this.stopDrag();
}

bbucket_mc.onPress = function(){
this.startDrag();
}
bbucket_mc.onRelease = function(){
this.stopDrag();
if(this._droptarget == "/art_mc"){
art_mc.gotoAndStop(4);
}
}
bbucket_mc.onReleaseOutside = function(){
this.stopDrag();
}

• Then in the main menu go to Control > Test Movie.