Flash drag and drop tutorial: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 133: Line 133:


; Improvements to be made
; Improvements to be made
* Fonts of the textbox
* Styling of the textbox: You can do this with the filters panel. Click on the + sign to add filters and then play around with the options.
* Move the red circle back to its initial position
* Move the red circle back to its initial position
* Special effects maybe
* Special effects maybe
== A learning application - drag and match ==
The goal is to move objects to a textbox containing the first letter of its name. E.g. "Cat" should be moved to the "C" box. If there is a hit, the user will get some success message and can't move the object anymore. If he is done, he should get an extra message.
; Step 1 - Create movie clips for object to be moved
* As above with the red and blue circle
* Each object should have an instance name
; Step 2 - Create textboxes
* Also as above
* Create one for each object (E.g. a "C" for the cat, etc.)
* Make sure they are dynamic and they have a name.
; Step 3 - Write Action Script code
Code below is fairly awful since it lacks abstraction, but it has the advantage to use a minimal variety of AS3.
<code><pre>
var hits = 0;
// Register mouse event functions
dog.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
dog.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
rocket.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
rocket.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
cat.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
cat.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
bat.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
bat.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
// Define a mouse down handler (user is dragging)
function mouseDownHandler(evt:MouseEvent):void {
var object = evt.target;
// we should limit dragging to the area inside the canvas
object.useHandCursor = true;
object.startDrag();
}
function mouseUpHandler(evt:MouseEvent):void {
var obj = evt.target;
// obj.dropTarget will give us the reference to the shape of
// the object over which we dropped the circle.
var target = obj.dropTarget;
// If the target object exists the we ask the test_match function
// to compare moved obj and target where it was dropped.
if (target != null)
{
test_match(target, obj);
}
obj.stopDrag();
}
function test_match(target,obj) {
// test if either one of the four pairs match
if ( (target == box_c && obj == cat) ||
(target == box_d && obj == dog) ||
(target == box_r && obj == rocket) ||
(target == box_b && obj == bat) )
{
// we got a hit
hits = hits+1;
textField.text = "Yes ! You got one !";
// make the object transparent
obj.alpha = 0.5;
// kill its event listeners - object can't be moved anymore
obj.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
obj.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
// Test if we are done
if (hits == 4)
{
textField.text = "Made it !!";
}
}
else
{
textField.text = "Missed :(";
}
}
</pre></code>
; Results
* Look at the [http://tecfa.unige.ch/guides/flash/ex/drag-and-drop-intro/flash-cs3-drag-and-drop-matching.html result]
* Get the source from http://tecfa.unige.ch/guides/flash/ex/drag-and-drop-intro/ (files flash-cs3-drag-and-drop-matching.*)


== Reference ==
== Reference ==
I may move these to some other article sometimes soon.


=== Sprites and DisplayObjects ===
=== Sprites and DisplayObjects ===


Objects that you can drag around are Movie Clips. These are children of '''Sprites'''. Sprites have associated graphics.
Objects that you can drag around are Movie Clips. These are children of '''Sprites'''. Sprites have associated graphics.
From the [http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/ ActionScript 3.0 Language and Components Reference]:
The class hierarchy looks like this:
[http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/MovieClip.htm MovieClip] -> [http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/Sprite.html Sprite] -> [http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/DisplayObjectContainer.html DisplayObjectContainer] -> [http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/InteractiveObject.html InteractiveObject] -> [http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/DisplayObject.html DisplayObject] -> [http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/events/EventDispatcher.html EventDispatcher] -> [http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/Object.html Object]


When you drop a sprite over another sprite, the Flash will give the shape of the target object. This shape is a DisplayObject and from a DisplayObject we can get
When you drop a sprite over another sprite, the Flash will give the shape of the target object. This shape is a DisplayObject and from a DisplayObject we can get
its parent, i.e. a Movie Clip in our case.
its parent, i.e. a Movie Clip in our case.


* [http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/Sprite.html Sprite] (part of the [http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/ ActionScript 3.0 Language and Components Reference]
Important: When you look at the definition of Class, there are buttons to open inherited properties and methods. Mostly likely '''you need these'''.


* [http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/DisplayObject.html DisplayObject]
=== Event Listener Interface ===
 
The Movie clips can use this:
 
[http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/events/EventDispatcher.html EventDispatcher]
 
=== Graphics ===


* [http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/Graphics.html Graphics]
* [http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/Graphics.html Graphics]
=== Dictionaries ===
* [http://www.gskinner.com/blog/archives/2006/07/as3_dictionary.html AS3: Dictionary Object] (gskinner.blog)


=== TextFields ===
=== TextFields ===

Revision as of 13:42, 11 September 2007

<pageby nominor="false" comments="false"/>

Overview

Dragging and dropping objects is a popular brick in edutainment programs. This is part of Flash CS3 tutorials. I will expand this article sometimes. - Daniel K. Schneider 18:13, 9 September 2007 (MEST).

Learning goals
Learn how to create simple drag and drop programs with Flash 9 (CS3) components
Learn a little bit of Action Script 3
Prerequisites
Flash CS3 desktop tutorial
Flash drawing tutorial
flash button tutorial
Moving on
The Flash article has a list of other tutorials.
Flash Video component tutorial
Quality
This text should technical people get going and may not be good enough for self-learning beginners. It can be used as handout in a "hands-on" class. That is what Daniel K. Schneider made it for...
Level
It aims at beginners. More advanced features and tricks are not explained here.
Learning materials

Grab the various *.fla files from here:

http://tecfa.unige.ch/guides/flash/ex/drag-and-drop-intro/ (not yet sorry)
The executive summary
  • Draw something on the canvas
  • Transform it to a movie symbol (buttons don't work)
  • Assign an instance name
  • Instance_name.startDrag()
  • Instance_name.stopDrag()

Introduction - simple dragging code

Step 1 - Draw an object
  • Anything you like
Step 2 - Transform it into a Movie Clip
  • Select all if you got several objects, then assemble maybe
  • Right-click on the object
  • Give it a name in the properties panel !
Step 3 - Adapt code below
Most simple drag and drop
// Register mouse event functions
blue_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
blue_btn.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

red_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
red_btn.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

// Define a mouse down handler (user is dragging)
function mouseDownHandler(evt:MouseEvent):void {
	var object = evt.target;
	// we should limit dragging to the area inside the canvas
	object.useHandCursor = true;
	object.startDrag();
}

function mouseUpHandler(evt:MouseEvent):void {
	var obj = evt.target;
		obj.stopDrag();
}
Results

Drag and drop over another object

The goals is to write a little Flash application that will tell the user whether he correctly dragged and dropped an object over another one.

Step 1 - Start from the file above
  • I.e. we want to have the user drag the red circle over the blue rectangle.
Step 2 - Add a text box

This textbox should initially display instruction, then display feedback: "made it" and "missed".

  • Use the Textool in the tools panel to enter the text.
  • Then in the properties panel, change the type to Dynamic Text.
Dynamic Text
Step 3 - Action script code
// Register mouse event functions
blue_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
blue_btn.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

red_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
red_btn.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

// Define a mouse down handler (user is dragging)
function mouseDownHandler(evt:MouseEvent):void {
	var object = evt.target;
	// we should limit dragging to the area inside the canvas
	object.useHandCursor = true;
	object.startDrag();
}

function mouseUpHandler(evt:MouseEvent):void {
	var obj = evt.target;
	// obj.dropTarget will give us the reference to the shape of
	// the object over which we dropped the circle.
	var target = obj.dropTarget;
	// If the object exists AND it is the blue button, then we change
	// the text in the TextBox. 
	// Since obj.dropTarget is a Shape, we need its parent.
	if (target != null && target.parent == blue_btn)
	{
		textField.text = "Made it !!";
	}
	else
	{
		textField.text = "Missed :(";
	}
	obj.stopDrag();
}

Results
Improvements to be made
  • Styling of the textbox: You can do this with the filters panel. Click on the + sign to add filters and then play around with the options.
  • Move the red circle back to its initial position
  • Special effects maybe

A learning application - drag and match

The goal is to move objects to a textbox containing the first letter of its name. E.g. "Cat" should be moved to the "C" box. If there is a hit, the user will get some success message and can't move the object anymore. If he is done, he should get an extra message.

Step 1 - Create movie clips for object to be moved
  • As above with the red and blue circle
  • Each object should have an instance name
Step 2 - Create textboxes
  • Also as above
  • Create one for each object (E.g. a "C" for the cat, etc.)
  • Make sure they are dynamic and they have a name.
Step 3 - Write Action Script code

Code below is fairly awful since it lacks abstraction, but it has the advantage to use a minimal variety of AS3.

var hits = 0;

// Register mouse event functions

dog.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
dog.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
rocket.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
rocket.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
cat.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
cat.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
bat.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
bat.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

// Define a mouse down handler (user is dragging)
function mouseDownHandler(evt:MouseEvent):void {
	var object = evt.target;
	// we should limit dragging to the area inside the canvas
	object.useHandCursor = true;
	object.startDrag();
}

function mouseUpHandler(evt:MouseEvent):void {
	var obj = evt.target;
	// obj.dropTarget will give us the reference to the shape of
	// the object over which we dropped the circle.
	var target = obj.dropTarget;
	// If the target object exists the we ask the test_match function
	// to compare moved obj and target where it was dropped.
	if (target != null)
	{
		test_match(target, obj);
	}
	obj.stopDrag();
}

function test_match(target,obj) {
	// test if either one of the four pairs match
	if ( (target == box_c && obj == cat) ||
	(target == box_d && obj == dog) ||
	(target == box_r && obj == rocket) ||
	(target == box_b && obj == bat) )
	{
		// we got a hit
		hits = hits+1;
		textField.text = "Yes ! You got one !";
		// make the object transparent
		obj.alpha = 0.5;
		// kill its event listeners - object can't be moved anymore
		obj.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
		obj.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
		// Test if we are done
		if (hits == 4)
		{
			textField.text = "Made it !!";
		}
	}
	else
	{
		textField.text = "Missed :(";
	}
}

Results

Reference

I may move these to some other article sometimes soon.

Sprites and DisplayObjects

Objects that you can drag around are Movie Clips. These are children of Sprites. Sprites have associated graphics.

From the ActionScript 3.0 Language and Components Reference:

The class hierarchy looks like this: MovieClip -> Sprite -> DisplayObjectContainer -> InteractiveObject -> DisplayObject -> EventDispatcher -> Object

When you drop a sprite over another sprite, the Flash will give the shape of the target object. This shape is a DisplayObject and from a DisplayObject we can get its parent, i.e. a Movie Clip in our case.

Important: When you look at the definition of Class, there are buttons to open inherited properties and methods. Mostly likely you need these.

Event Listener Interface

The Movie clips can use this:

EventDispatcher

Graphics

Dictionaries

TextFields

The TextField class is used to create display objects for text display and input.