Personalize the mouse cursor in your Adobe Flash movies August 28, 2007

If you want a special mouse cursor in your Flash movies, all you have to do is pay some attention to this tutorial. It will be explained how to personalize, change the appearence of the user’s mouse cursor in Flash, in 5 easy steps. 1. Create a new Flash document, 400×400 size. Name the first layer content.
2. Create a new MovieClip that holds the mouse cursor you want user see on your website.Name it MouseCursorMC. Make an instance of it in the first frame of the content layer and name it mouseCursor_mc.
3. Create a new layer and give it the name actions.
4. In the first frame of the actions layer put this code in:
Mouse.hide();// to hide the actual mouse cursor
startDrag(“mouseCursor_mc”,true);// start drag the cursor_mc MovieClip across the Flash movie

5. Press CTRL+Enter and test the movie. Nice job!

Create Drag and Drop August 28, 2007

1. Start creating a flash document about 400×400 pixels.

2. Name the first layer background and then introduce a new layer and name it objects. Introduce a third layer and name it actions.

3. In the objects layer draw a orange circle with 50×50 dimensions (to draw a perfect circle hold Shift key pressed while you’re drawing).

4. Double click the circle to select both the fill and the stroke and go to Modify>>Convert to Symbol (F8). In the Convert to Symbol window choose MovieClip, name it circleMC and assure that the registration is center. In the Properties panel give it an instance name of circle_mc. Set X:175, Y:175 for circle_mc.

5. In the first frame of the actions layer put the following code:
circle_mc.onPress = function(){
this.startDrag()
}

circle_mc.onRelease = function(){
this.stopDrag()
}

Now test the movie (Ctrl+Enter) and you’ll see you can drag the circle.

Drag on a specified aria

But probably you need more than that.
The syntax of startDrag function is the following:

startDrag(target:Object, [lock:Boolean, left:Number, top:Number, right:Number,

bottom:Number]) : Void

target: represents the object to be dragged.
lock: if true the movieclip that is draged is locked to the center of the mouse position, if false it is locked in the point where it was first time clicked when the drag action begun.
left, top, right, bottom: the coordinates that describes an rectangle aria in the parent

movieclip where the movieclip is allowed to be drag.
Maybe it was not very clear, let’s have now an example:
1. We will use the document we already created in the previous example. In the first frame of the background layer draw a rectangle with 340×340 dimensions. In the Properties panel set the X:30, Y:30. Choose also a light gray for the Fill Color.

2. Replace the code existing in the actions layer with the code below:
circle_mc.onPress = function(){
startDrag(this, false, 55,55, 345, 345)
}

circle_mc.onRelease = circle_mc.onReleaseOutside = function(){
this.stopDrag()
}

3. Test the movie again and you will observe that the circle is allowed to be dragged only in the aria of the gray rectangle.

Drag on a vertical or horizontal line If you want that your movieclip to be dragged only an a vertical or horizontal line just put left parameter equal with the right, or top equal with bottom.

Example: Drag on a vertical line

1. We will use the flash document from behind.

2. In the background layer delete the rectangle and draw a black vertical line with stroke height of 5. Set the X:150. Set also X:125 for the circle_mc.

3. In the actions layer replace the code existing with the following:
circle_mc.onPress = function(){
startDrag(this, false, 150,55, 150, 345)
}

circle_mc.onRelease = circle_mc.onReleaseOutside = function(){
this.stopDrag()
}

4. Test again the movie and see the result.