Flash 4 introduced the drag’n’drop feature, which enables the user to pick up objects with the mouse pointer and move them around the movie stage. Flash 5 has added some new ways to use drag’n’drop with the new onClipEvent Movie Clip handler.
Drag’n’drop in Flash is based entirely on Movie Clips. The only objects that can be moved with the mouse are Movie Clip instances. So, if you want a drawing of a triangle to be moveable by the user, you have to first put that triangle into a Movie Clip, and then place a named instance of that clip onto the Stage. Flash’s drag’n’drop support is fairly broad, but more-complex drag’n’drop behaviors require some ActionScript knowledge. We’ll cover building drag’n’drop Movie Clips in two parts: “Drag’n’Drop Basics” and “Advanced Drag’n’Drop.”
In mouse-based computer interfaces, the most common form of drag’n’drop goes like this: A user points to an element with the mouse pointer, clicks the element to begin moving it, and then releases the mouse button to stop moving it. In Flash 4, drag’n’drop functionality could only be achieved with the use of a nested Button instance in a Movie Clip symbol. Why? The Button symbol was the only Flash symbol that responded to mouse clicks. Furthermore, because Buttons couldn’t be targeted like Movie Clips, a Button instance needed to exist within a Movie Clip in order for it be draggable. Then, a Drag Movie Clip Action (in Flash 4) was added to that Button instance. This method still works in Flash 5 (with the startDrag method or action), and uses the least amount of ActionScript to enable drag behavior. Here’s how:
Constrain to rectangle
Check this setting in order to specify the limits of the rectangular region within which a draggable Movie Clip instance can be dragged. After you’ve checked Constrain to Rectangle, enter the pixel locations of the four corners of the rectangle.
The pixel coordinates are set relative to the top-left corner of the Stage upon which the draggable Movie Clip instance resides. For example startDrag (“drag-me”, false, 0, 0, 300, 300) would constrain the draggable Movie Clip instance named drag-me to a 300-pixel square region in the top-left corner of the Main Timeline’s Stage.
Lock mouse to center
This setting makes the dragged Movie Clip instance center itself under the mouse pointer for the duration of the drag. If the dragged Movie Clip instance is not already under the mouse pointer when the Drag Movie Clip action occurs, the instance will automatically be moved under the pointer, providing that the pointer is not outside the region defined by Constrain to Rectangle. When checked, this setting will add a Boolean value of true just after the specified instance name in the startDrag action.
Detecting the drop position: Using _dropTarget
In “Drag’n’Drop Basics,” we showed you how to make Movie Clip instances that the user can move around. But what if we wanted to force the user to move a Movie Clip Object into a certain location before we let them drop it? For instance, consider a child’s shape-matching game in which a small circle, square, and triangle should be dragged onto corresponding larger shapes. If the child drops the small circle onto the large square or large triangle, the circle returns to its original location. If, on the other hand, the child drops the small circle onto the large circle, the small circle should stay where it is dropped, and the child should receive a “Correct!” message. That kind of game is quite possible in Flash, but it requires some understanding of Movie Clip properties.
Here’s how it works we’ll use the circle as an example. First, create a draggable instance of the little circle Movie Clip just as you did earlier in the “Drag’n’Drop Basics” section (put a button in a Movie Clip, put a named instance of that clip on stage, and then add the startDrag and stopDrag actions to the button). Then, you create a large circle graphic Symbol, put it into a Movie Clip, and place an instance of that Movie Clip onto the Main Timeline’s Stage. Name the large circle Movie Clip circleBig. Here’s where the Movie Clip properties come in: When the user drops any Movie Clip instance, the instance’s _droptarget property is updated. The _droptarget property specifies the name of the Movie Clip instance upon which the dragged Movie Clip instance was last dropped. So if the user dropped the little circle Movie Clip instance onto the large circle instance, the _droptarget property for the little circle instance would be set to /circleBig. Knowing that, we can add an if . . . else condition to check whether the little circle was dropped onto the big circle. If it was, we simply let the little circle stay dropped, and we display a “Correct” message by targeting a Movie Clip to update a status-message contained within it. If the little circle wasn’t dropped onto the big circle, we return the little circle to its place of origin by setting the X and Y coordinate properties of the little circle instance. Here’s what the code on the little circle button would look like (note that the stopDrag action must occur before we check the _droptarget property):
Making alpha and scale sliders
A compelling use of a draggable Movie Clip is a slider that can alter the properties of another object. By checking the position of a Movie Clip, you can use the position’s X or Y coordinate value to alter the value of another Movie Clip. In this section, we create two sliders (one for alpha and another for scale) that will dynamically change the transparency and size of a Movie Clip instance on the Stage. Many thanks to Sandro Corsaro of spanktoons.com for supplying the artwork of Robert’s dog Stella and the park sign.
Assembling the parts
In this section, we set up the basic composition of the Stage, using elements from the slider_basic_starter.fla Library. You will add artwork of a dog and a park sign to the movie. The dog artwork will be duplicated using the duplicateMovieClip method, and the duplicate instance will be manipulated by the sliders that we create in the next section. The park sign will be used to remove the duplicate instance using the _dropTarget property and the removeMovieClip method.
The dog_1 instance will be used as our reference Movie Clip Object.
The scale and transparency of this dog instance will not be changed.
The first line of code duplicates the instance dog_1, names the new instance dog_2 and places it on the first depth layer of the _root timeline. The second and third lines of code position the dog_2 instance at the X coordinate of 350 (350 pixels from the left corner of the Main Timeline Stage) and the Y coordinate of 175 (175 pixels down from the left corner).
The parkSign instance will be used to remove duplicates of the dog_1 Movie Clip instance.
Building the sliders
In this section, you’ll create two sliders: one for scale, and one for transparency. We’ll only need to make one slider Movie Clip symbol, and use a new instance for each slider. The basic “problems” of a dynamic slider are to (a) retrieve the position value of an object on the slider (we’ll call this the slider bar), and (b) set the value of another object equal to (or some factor of) the position value of the slider bar. Finding the position of a slider bar is relatively straightforward. The difficulty lies in creating the value scale for the slider.
The duplicateMovieClip method creates a new instance of a Movie Clip Object. Unless you alter the new instance’s X and Y position, it will appear directly above the parent instance.
Because we have already determined the properties that will be altered (scale and transparency) we need to establish a range of values that each property can use.
Luckily, both scale (as _xscale and _yscale in ActionScript) and transparency (as _alpha) use percentage units. However, scale can be any value that’s greater than 0 percent and less than 3200 percent. Alpha has a range of 0 to 100 percent. If we want to use the same parent slider for each property slider, then we need to manipulate the position values of the slider bar differently for each property. Let’s start with building the basic slider.
The sliderRule’s starting point (just to the right of the first left-hand circle) needs to be at the slider Movie Clip’s zero X coordinate.
The starting X coordinate for the position Movie Clip instance is set to 100. When the Flash movie starts, this value will be applied to the scale and alpha properties of the dog_2 instance on the Main Timeline.
To make the position instance draggable, we need to detect the mouseDown event. Any Movie Clip that has the onClipEvent(mouseDown) handler will receive any and all mouse clicks on the Stage. Because this is the case, we need to determine whether the mouse click occurs within the space that the position instance occupies on the Main Timeline Stage.
The first line of code uses the onClipEvent handler to detect the mouseDown event (the act of pressing down on the left mouse button). When a mouse click occurs, the actions nested within the onClipEvent action will be executed. The second line of code uses an if action to test whether the mouse click occurs on the position instance. The hitTest method can test the overlap of spaces in one of two ways: (a) by comparing a specific X and Y coordinate to an instance’s occupied space, or (b) by comparing one Movie Clip instance’s occupied space to another Movie Clip instance’s space. If the hitTest method is used in the first way, then you can also check whether the X and Y coordinate intersects with the bounding box of the instance (false) or the entire shape of the instance (true). In this example, we use the hitTest method to retrieve the current X and Y coordinates of the mouse pointer (_root._xmouse and _root._ymouse) and compare them to the occupied space of this, which is a reference to the current instance of the position Movie Clip. If the mouse pointer is over the position instance on a mouse click, then the hitTest method will return a true condition, and execute the nested if actions.
The third line of code will execute only if the if condition on the second line is true. Here, we enable the dragging behavior of the position instance by using the startDrag method on this. Because it’s used as a method and not as an action, we don’t need to specify a target instance in the arguments. The arguments prescribed here lock the mouse to the center of the object and constrain the draggable region to a bounding box defined by 10, 0 and 200, 0. This effectively keeps the position instance confined to the line of our sliderRule Graphic.
The fourth line of code sets a variable called state on the Main Timeline (_root) to the value of down. Because we’ll be using two instances of the slider Movie Clip symbol, we need to know whether any instance has received the mouseDown event. We’ll see why we need this code in later steps.
This block of code performs in the same manner that our code in Step 6 did. Once a mouseUp event (the act of releasing the left mouse button) is detected (line 1), we check whether the event occurred over the space of the position instance (line 2). If it did, then we stop the dragging of the position instance initiated in Step 6 (line 3). Finally, we set the state variable on the Main Timeline (_root) to up. Next, we’ll create two instances of the slider Movie Clip symbol on the Main Timeline Stage: one for scale, and one for alpha.
Checking the positions of the sliders
Once we have a slider bar that is draggable, we need to access the new values of the position instance and apply the values to the properties of the dog_2 instance. To do this, we need to have a Movie Clip whose sole job is to check the X coordinate of the position instance. In this section, you’ll learn how to make a Movie Clip that uses the onClipEvent(enterFrame) handler.
At this point, your Flash movie Stage should contain the dog and parkSign artwork, as well as two instances of the slider Movie Clip symbol.
Because the event enterFrame is specified for the onClipEvent handler, this block of code will execute continuously in our Flash movie. Why? Any timeline will continuously enter a frame for playback, even if a stop() action is applied to all timelines. The speed at which the enterFrame event occurs is determined by the frame rate of the Flash movie (as defined by the Modify➪Movie dialog). The frame rate of 20 fps was already set in the sample file before you opened it. Therefore, this block will execute 20 times each second.
What happens on each execution of the enterFrame event? The second and third lines of code set the X and Y scale properties of the dog_2 instance to the value returned by the current X coordinate of the position instance (relative to the coordinates within the slider Movie Clip symbol).
Notice that the target path for the position instance is the scaleSlider instance in lines 2 and 3. The fourth line sets the alpha property of the dog_2 instance equal to the X coordinate of the position instance within the alphaSlider instance.
Okay, we have the sliders changing the size and opacity of the dog_2 instance. However, nothing happens as we drag the bar on the alphaSlider instance toward its upper limit. Because the X coordinate of the position instance starts at 100, we won’t see any visual effect to the alpha property as it increases beyond 100 percent. The lower limit of the alpha slider is 10 percent—it’s prevented from going below that value by the coordinate arguments of the startDrag method. Therefore, it would be better to have the alphaScale slider convert the X coordinate of the position instance to a true 0 to 100 range of
To do this, we need to develop an equation that will do the work of automatically remapping values to a 0–100 scale. We know that the lowest X coordinate of the position instance is 10, and that the highest X coordinate is 200. If we want the highest position of the bar to provide 100 percent opacity, then we need to divide 200 by a number that will give us 100. Dividing 200 by 2 gives us 100. How does that work for the low end? If the X coordinate returns the lowest value of 10, then our lowest opacity value will be 5.
This block of code will execute once, when the position instance (a Movie Clip Object) first appears (or loads) on the Stage. Remember that the position instance occurs twice: once inside scaleSlider, and again inside alphaSlider. The second line of code checks which slider instance is executing this code. We use the _parent target to access the properties of the outer Movie Clip containing the position instance. Then, we access its name property (_name) to see if its name is alphaSlider. If it is, then, in line 3, we’ll change the X coordinate (_x) of this (which is the position instance) to 200.
Removing Movie Clips
At this point, you have two sliders that dynamically control the scale and alpha of the dog_2 Movie Clip instance on the Stage. What if you wanted to get rid the dog_2 instance? How would you delete it? The only way to remove a duplicated Movie Clip instance is to use the removeMovieClip method or action. In this section, we show you how to use the _dropTarget property and the remove MovieClip method of the Movie Clip Object.
Most of this code is already familiar to you. Here we want to make only our duplicate dog instance (dog_2) draggable. We don’t want to be able to remove our original dog. Even if we wanted to, we couldn’t delete the dog_1 instance, as it is physically placed on the Stage of the Flash movie. Only duplicated Movie Clip instances can be removed with ActionScript.
When a mouseDown event is detected, this code uses the hitTest method to see if the mouse pointer is over the current dog instance (this) and if the current dog instance (this) is not named dog_1. If both of these conditions are true, then the startDrag method of the current dog instance (this) will be enabled and constrained to the dimensions of the Flash movie Stage.
When a mouseUp event is detected over the dog instance, then the stopDrag method will be executed. The last if statement checks whether the _drop Target property of the current dog instance is equal to the target path of the parkSign instance. If the dog instance is over the parkSign instance on the Stage when the dragging stops, then the current dog instance is removed.
Duplicating Movie Clips with new colors
What do we do after we’ve removed the dog_2 instance? How do we get more dog instances to use in the movie? This next section explores using the duplicate MovieClip method on a Button symbol. Not only will we duplicate the dog instance, but we’ll also change its color attributes using the colorTransformObject.
The crossHairsButton will contain actions that duplicate the dog_1 instance and apply different color attributes to the new instance.
Because we already covered the colorTransformObject earlier, we won’t explain its use here. However, we will describe the use of two new user-defined functions, randomPercent() and randomOffset(). These functions will be added to the Main Timeline (_root) in the next step. Instead of assigning fixed values to the color attributes, we supply new random values each time this button is clicked.
Both of these functions work the same way. When each function is evoked, it will return a new random percent or offset value to the line of code that called the function. Each percent attribute (ra, ga, ba) evokes the randomPercent() function, while each offset attribute (rb, gb, bb) accesses the random Offset() function. The only difference between the two functions is the number multiplied to the Math.random() method. For percent, we need a value between 1 and 100. For offset, we need a value between 1 and 255.
Using the Mouse Object
While the onClipEvent(mouseDown) handler can be used instead of nested Button instances for draggable behavior, you may have noticed one small difference: The mouse pointer does not change the finger icon when you rollover a Movie Clip Object with onClipEvent(mouseDown or mouseUp) event handlers.
In Flash 4, we could emulate new mouse pointers by using the startDrag behavior (with lock to center true) on Movie Clips containing icon graphics. However, this technique did not hide the original mouse pointer it would appear directly above the dragged Movie Clip instance. In Flash 5, there is a Mouse Object, which has two simple methods:
Once the Mouse Object (the mouse pointer) is hidden, you can lock a Movie Clip Object (containing a new icon graphic) to the position of the mouse pointer. If you have only one Movie Clip Object that works like a Button symbol, then attaching a new Movie Clip instance to the mouse pointer is relatively straightforward. However, in our slider example, we have two different sliders with draggable bars. If we want to enable a custom icon, we need to know which bar is being moused over, and which bar isn’t.
The first onClipEvent handler detects the load event. Remember that the load event happens when a Movie Clip instance first appears on the Stage. When the Movie Clip instance checkPosition appears on the Stage, the variable overSlider will equal false. This variable remembers if we’re currently mousing within one of the position instances. The second onClipEvent handler detects any mouse movements on the Stage with the mouseMove event. The two variables, scaleSliderOver and alphaSliderOver, will be either true or false, depending on the return of the hitTest method for the mouse pointer and the position instances. The first if statement checks to see if either hitTest returned a true value.
The || operator indicates that only one hitTest needs to return a true value for the nested actions after the if statement to execute. If the mouse is over either slider, then the next if statement checks whether overSlider is not equal to true. When the checkPosition instance first loads, overSlider is equal to false. Therefore, the actions in this second if statement will execute.
If overSlider is false, then the attachMovie method will be executed from the Main Timeline (_root). In this example, we are attaching the fingerIcon Movie Clip from the Library to a new instance of the same name. This new fingerIcon instance is a child of the _root timeline, and is located on its second depth layer—the dog_2 instance occupies the first depth layer. After the fingerIcon is attached to the _root timeline, we need to hide the mouse pointer.
The code line Mouse.hide(); does just that. Then, we set overSlider to equal true so that these nested actions are not repeated until we leave a position instance and reenter its space. Then, we need to change its X and Y coordinates to match the position of the mouse pointer we can still track its position even if it’s hidden. The next two lines of code set the X and Y coordinates of the fingerIcon to the X and Y coordinates of the mouse pointer.
If the mouse pointer is not over either of the sliders, then the else condition tells Flash what to do on mouseMove events: If the mouse isn’t currently dragging a slider’s bar (_root.state != “down”), then show the mouse pointer, remove the fingerIcon Movie Clip instance, and set overSlider back to false. If the mouse has clicked a position instance and is overdragging the area of the position instance (see the following Tip), we still want the fingerIcon to move with the hidden mouse pointer.
Flash Related Interview Questions
|Adv Java Interview Questions||J2EE Interview Questions|
|Adobe Flex 3 Interview Questions||Dreamweaver Interview Questions|
|3D Animation Interview Questions||Adobe Flash CS6 Interview Questions|
|Dreamweaver CS3 Interview Questions||Adobe Flex Interview Questions|
|Adobe Flex Actionscript Interview Questions||Gif Animation Interview Questions|
|Adobe Fireworks Interview Questions|
Understanding The Flash Framework
Exploring The Interface: Panels, Settings, And More
Using Tools For Navigation And Viewing
Working With Selections And The Pen Tool
Working With The Drawing And Painting Tools
Working With Text
Exploring The Timeline
Checking Out The Library: Symbols And Instances
Drawing In Flash
Animating In Flash
Using Bitmaps And Other Media With Flash
Designing Interfaces And Interface Elements
Understanding Sound For Flash
Importing And Editing Sounds In Flash
Optimizing Flash Sound For Export
Understanding Actions And Event Handlers
Navigating Flash Timelines
Controlling Movie Clips
Sharing And Loading Assets
Planning Code Structures
Creating Subroutines And Manipulating Data
Understanding Movie Clips As Complex Objects
Sending Data In And Out Of Flash
Understanding Html And Text Field Functions In Flash
What Is Generator?
Revving Up Generator
Working With Third-party, Server-side Applications
Working With Raster Graphics
Working With Vector Graphics
Working With Audio Applications
Working With 3d Graphics
Working With Quicktime
Working With Realplayer
Creating Full-motion Video With Flash
Creating Cartoon Animation With Flash
Planning Flash Production With Flowcharting Software
Working With Authoring Applications
Publishing Flash Movies
Integrating Flash Content With Html
Using Players, Projectors, And Screensaver Utilities
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.