Activity 12

Intent:

Students will be introduced to the Flash programming environment through the creation of a snake game. They will examine the code and make modifications.

ActionScript is an object-oriented language originally developed by Macromedia Inc. (now owned by Adobe Systems). It is a dialect of ECMAScript (meaning it is a superset of the syntax and semantics of the language more widely known as JavaScript), and is used primarily for the development of websites and software targeting the Adobe Flash Player platform, used on Web pages in the form of embedded SWF files. The language itself is open-source in that its specification is offered free of charge and both an open source compiler (as part of Adobe Flex) and open source virtual machine are available.

ActionScript 3.0 is an object-oriented programming language allowing far more control and code reusability when building complex Flash applications. This version of the language is intended to be compiled and run on a version of the ActionScript Virtual Machine that has been itself completely re-written from the ground up (dubbed AVM2). Because of this, code written in ActionScript 3.0 is generally targeted for Flash Player 9 and higher and will not work in previous versions. At the same time, ActionScript 3.0 executes up to 10 times faster than legacy ActionScript code.

source:  wikipedia

In AS3 you can structure and organise your application a lot more strategically. It’s faster, neater and far more recommended than AS2. The main difference is that you can develop flash applications with a much stronger OOP influence than in AS2.

Drag and drop is a very intuitive way of interaction from the user. It’s a control scheme that is very easy get used to, and using it you can create many very interesting mechanics. In this tutorial, you will learn how to create drag & drop functionality using Flash actionscript.Drag & Drop Using Adobe Flash:  There are actually many ways to achieve the drag and drop effect, but there are two methods that are used the most commonly. The first one is to use Flash’s built in startDrag() function, and the second one is to set the object position to the same as the mouse position. The first method is a tad bit simpler, but the second one has more advantages.
(source: http://helpx.adobe.com/flash/using/animation-basics.html)
flash-cheat-sheet
flash tools

Criteria:

  • Create two Drag and Drop animations using AS2 and AS3

Task:

Part 1 – AS2

onReleaseOutside event – makes it much easier

  • Create a new AS2 animation:
    • 400 (W) X 600 (H)
    • 24 fps
    • background colour (your choice)
  • Create a Happy face symbol.
  • Follow the instructions of ActionScript 2.0 “Drag and Drop” interactive script
  • Save it as firstlastname_activity2AS2.fla in your Activity 2 folder in your Unit 3 folder,
  • Export movie as:  firstlastname_activity2AS2.swf in your Activity 2 folder in your Unit 3 folder

Part 2 -AS3

no “release Oyutside” event
Use a “Mouse up” event

  • Create a new AS3 animation:
    • 400 (W) X 600 (H)
    • 24 fps
    • background colour (your choice)
  • Create a different Happy face symbol.
  • Follow the instructions of ActionScript 2.0 “Drag and Drop” interactive script
  • Save it as firstlastname_activity2AS3.fla in your Activity 2 folder in your Unit 3 folder
  • Export movie as:  firstlastname_activity2AS3.swf in your Activity 2 folder in your Unit 3 folder
  • Follow the instructions of ActionScript 3.0 “Drag and Drop” interactive script
drag1 drag2

 

 

 

Part 1 – Advanced Tweening:

 

The First Method: startDrag

Here is an overview of what we want to achieve:

1.when a displayObjecct is clicked, started having the object move around with the mouse with a corresponding offset position.

2.when when the user lets go of the mouse button, stop dragging the object.

When you convert the above logic to code, you will see that it’s actually very simple. Create a MovieClip in Flash (or dynamically generate one), and instance name is something. I’m going to draw Circle and name mine circle_mc.

import flash.events.MouseEvent;circle_mc.addEventListener(MouseEvent.MOUSE_DOWN,downf);
circle_mc.addEventListener(MouseEvent.MOUSE_UP,upf);function downf(e:MouseEvent)
{
circle_mc.startDrag();
}function upf(e:MouseEvent)
{
circle_mc.stopDrag();
}

The above code is in fact very simple, when clicked, startDrag, when released, stopDrag.

The Second Method: Setting the Position

This position is a little more complicated, since you need to save the offset everytime if you don’t want your mouse to always align with the origin of you shape. The idea is to check if you are dragging the shape or not, and use and enter frame function to move the object if you are dragging it.

import flash.events.MouseEvent;
import flash.events.Event;circle_mc.addEventListener(MouseEvent.MOUSE_DOWN,downf);
circle_mc.addEventListener(MouseEvent.MOUSE_UP,upf);addEventListener(Event.ENTER_FRAME, update);var dragging:Boolean;
var offSetX:int;
var offSetY:int;function downf(e:MouseEvent)
{
dragging = true;
offSetX = mouseX – circle_mc.x;
offSetY = mouseY – circle_mc.y;
}function upf(e:MouseEvent)
{
dragging = false;}function update(e:Event)
{
if(dragging)
{
circle_mc.x = mouseX – offSetX;
circle_mc.y = mouseY – offSetY;
}
}

 

 

Comparison

Both of these methods can apply to any shape or interactive object, but they do have their differences. For example, you can try changing the starDrag method’s frame rate to one, and the circle will still follow the math at a decent speed. With the EnterFrame method, you can only reach the top frame rate.

Why would you use one method over the other? It depends on your specific needs. If you want something frame rate independent, you should use the first method. If you want something that gives you more flexibility, use the second one.

The below example shows one use of the “more complicated method”

Changing the code a little will give you a whole new effect :

import flash.events.MouseEvent;
import flash.events.Event;

circle_mc.addEventListener(MouseEvent.MOUSE_DOWN,downf);
stage.addEventListener(MouseEvent.MOUSE_UP,upf);

addEventListener(Event.ENTER_FRAME, update);

var dragging:Boolean;
var offSetX:int;
var offSetY:int;

function downf(e:MouseEvent)
{
dragging = true;
offSetX = mouseX – circle_mc.x;
offSetY = mouseY – circle_mc.y;
}

function upf(e:MouseEvent)
{
dragging = false;

}

function update(e:Event)
{
if(dragging)
{
circle_mc.x += (mouseX – offSetX-circle_mc.x)/10;
circle_mc.y += (mouseY – offSetY-circle_mc.y)/10;
}
}

You can also make a snap to grid effect my making a few modifications:

import flash.events.MouseEvent;
import flash.events.Event;

circle_mc.addEventListener(MouseEvent.MOUSE_DOWN,downf);
stage.addEventListener(MouseEvent.MOUSE_UP,upf);

addEventListener(Event.ENTER_FRAME, update);

var dragging:Boolean;
var offSetX:int;
var offSetY:int;

function downf(e:MouseEvent)
{
dragging = true;
offSetX = mouseX – circle_mc.x;
offSetY = mouseY – circle_mc.y;
}

function upf(e:MouseEvent)
{
dragging = false;
}

function update(e:Event)
{
if(dragging)
{
circle_mc.x = mouseX – offSetX;
circle_mc.y = mouseY – offSetY;
}
circle_mc.x = Math.round(circle_mc.x/50) * 50;
circle_mc.y = Math.round(circle_mc.y/50) * 50;
}

The source files of all these example are included at the end of this tutorial.

Drag & Drop Using FlashDevelop

If you have seen the tutorial about using FlashDevelop, you might be using that IDE now. This section of the tutorial will show you how to implement the exact effects with FlashDevelop code.

If you don’t know how to import graphics into FlashDevelop yet, then you will have to use some code generated graphics. The examples below uses code generated graphics, but is very simple, just to show you how to do a drag and drop effect using the FlashDevelop work flow.

After you create an AS3 project in FlashDevelop, your Main class should look like this:

package
{
import flash.display.Sprite;
import flash.events.Event;

/**
* …
*/
public class Main extends Sprite
{

public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}

private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
}

}

}

Because you need to reference your drag and drop object, you will have to declare the variable in the class, out of the Main constructor. You may, however, instantiate and assign an instance of the object in your constructor.

package
{
import flash.display.Sprite;
import flash.events.Event;

/**
* …
*/
public class Main extends Sprite
{
private var dragObject:Sprite;

public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}

private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
trace(“hello world”);
dragObject = new Sprite();
dragObject.graphics.beginFill(0);
dragObject.graphics.drawCircle(0, 0, 100, 100);
addChild(dragObject);
}

}

}

Next, add in your event listeners, and define the functions within the same scope as your init and Main function. Note that you can create a function automatically by typing its name and pressing CTRL + SHIFT + 1.

package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;

/**
* …
*/
public class Main extends Sprite
{
private var dragObject:Sprite;

public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}

private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
trace(“hello world”);
dragObject = new Sprite();
dragObject.graphics.beginFill(0);
dragObject.graphics.drawCircle(0, 0, 100);
addChild(dragObject);

dragObject.addEventListener(MouseEvent.MOUSE_DOWN, downf);
stage.addEventListener(MouseEvent.MOUSE_UP, upf);
}

private function downf(e:MouseEvent):void
{
dragObject.startDrag();
}

private function upf(e:MouseEvent):void
{
dragObject.stopDrag();
}

}

}

As you can see, drag and drop effects are fairly easy for both coding IDEs.

You can find the source project and flas here.

Part 2– Saving, Exporting and Posting your work:

  • Save as: firstlastname_activity2.fla in your Unit 3/Activity 2 folder
  • export as:  firstlastname_activity2.swf in your Unit 3/Activity 2 folder