Drag and Drop Flash CS3 - VERSION 2

Step 1 - Draw an object

* Anything you like

Step 2 - Transform it into a Movie Clip

* Select the object (or if you created several objects for a drawing select them all)
* Right-click on the object and create a movie symbol
* Give the instance a name in the properties panel !

Step 3 - Adapt code below

Dragging code is really simple and follows the same principles we encountered for example in the Flash button tutorial.

* Associate an event listener with an event handler function. This time we listen to "mouse down" and "mouse up" events and for each we need to write a function that will do the dragging.

// 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.startDrag();
}

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

Results

* Admire the result (flash-cs3-drag-and-drop-intro.html)
* Get the source from http://tecfa.unige.ch/guides/flash/ex/drag-and-drop-intro/ (files flash-cs3-drag-and-drop-intro.*)

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.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

* Admire the result
* Get the source from http://tecfa.unige.ch/guides/flash/ex/drag-and-drop-intro/ (files flash-cs3-drag-and-drop-intro2.*)

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

Drag and match learning application - dumb version

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 - Foreground/Background

Make sure that the textboxes are in the background or the movie clips in the foreground. Otherwise a dropped object will not find its target.

* Select all the movie clips, then right-click->Arrange->Bring to Front.

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.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 :(";
}
}

Read more »

Frame By Frame Animation

Langkah-langkah untuk mencipta animasi bingkai demi bingkai atau disebut sebagai frame by frame animation.

Persediaan:
Cipta atau dapatkan satu set imej pergerakan animasi. Untuk tujuan ini saya perlu mencari imej menerusi fungsi Google Search:

Web Images Maps News Translate Books Gmail more ▼

Saya klik pada Images, dan di ruang carian, saya taip: motion image

Hasilnya saya menemui satu set mej seperti di bawah:

Motion Image - Horse Rider

1. Anda boleh lukiskan gambar latar belakang atau anda boleh memasukkan gambar apapun dengan mengklik File> Import> Import toStage.
2. Masukkan symbol dengan mengklik Insert> New Symbol. Pilih klip video dan klik OK.
3. Anda akan melihat Scene baru bernama 'Symbol 1'
4. Import set gambar yang menunjukkan gerakan dengan mengklik File> Import ke Stage. (Import file pertama sahaja kerana fail-fail lain akan diimport secara automatik. Untuk tujuan ini, anda harus memastikan bahawa semua gambar adalah disimpan secara berurutan (sequence), misalnya kuda01, kuda02, kuda03 dan seterusnya. Jika tidak, imej-imej tidak akan dapat diimport secara automatik ke Library)
5. Kembali ke Scene 1 dan seret (drag) symbol anda (dari Library) untuk Stage.
6. Pergi ke mana-mana timeline (misal: timeline 40) dan masukkan satu lagi keyframe dengan menekan F6.
7. Pindah symbol anda ke lokasi yang lain di Stage.
8. Antara timeline, klik Insert> Timeline> Create Motion Tweening.
9. Simpan fail anda (Ctrl + Save) dan uji movie (test movie) anda (Ctrl + Enter).

Komen: Saya dapati penggunakan shortcut key memudahkan kerja-kerja menghasilkan animasi. Antara kekunci atau kombinasi kekunci yang boleh digunakan dalam aktiviti kali ini ialah:

Short cut key:

F6 - Insert keyframe
Ctrl + SAve - Save file
Ctrl + Enter = Test movie

Read more »