Flash Drag and Drop

For my first project in the graduate course Producing Interactive Media Class, I decided to create an interactive inforgraphic on the “Big Six” media conglomerates, and the stations they own on television.  The infographic was entitled “Who Owns What You Watch?”

One feature of my inforgraphic was the ability to drag a piece of a movie clip within a movie clip to a target area that would play another movie clip. Sounds confusing don’t it? However, it wasn’t that bad.  In class we had previously learned to use the drag and drop feature. We created an image, converted it into a movie clip and added action script which enabled the movie clip to function as a button that could be dragged when a user used the mouse and dropped upon release of the mouse.  I did the same thing in this project.  The action script looked like this:

bg.btn1.buttonMode = true;

bg.btn1.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

bg.btn1.addEventListener(MouseEvent.MOUSE_UP, dropIt);

function pickUp(event:MouseEvent):void {

            event.target.startDrag();

            event.target.parent.addChild(event.target);

}

bg.btn1 is a button located inside of a movie clip, or in this case, a piece of the pie movie clip. I had six pieces to the pie graph so I had the same ActionScript for each one.  I just changed the name of the button (bg.btn2, bg.btn3, etc…)

My pie chart was imported as a whole from illustrator.  I converted the pie chart into a movie clip on the first layer, and then I went inside, broke the pie chart apart (which made each piece separate) and converted each piece of the pie chart to movie clips. Then, in my action script I was able to have the function as buttons that could be dragged and dropped.

My next step was to incorporate a function that would play a certain movie clip when an individual piece of the pie chart hit a certain area.  (In writing these blogs, I have seen how increasingly hard it is to talk about adobe flash and action script in simple terms!)

In actionscript, the certain area would be considered a target area.  Previously in class, we worked on using target areas to show information. For example, lets say I have a circle that is a drag and drop movie clip.  When a user drags the circle to a target area, a certain frame of the target area would pop up and show additional information.  Therefore, each frame of the target area had different information.

Well, the only difference with my project was, I wanted the target area to play a separate movie clip when hit, not a frame within the target area movie clip. I found out the fix was simple, and all I had to do was change a bit in my action script.  Instead of target.gotoAndStop(), I used movieclip.gotoAndPlay(). This showed me that I didn’t need to put the movie clip within the target. It could be anywhere I wanted It to be. All I had to do was change the actionscript! It looked like this:

function dropIt(event:MouseEvent):void {

            event.target.stopDrag();

                        if (event.target.dropTarget != null && event.target.dropTarget.parent == target){

                                    ge_mc.gotoAndPlay(3);

                                    btn_left.visible = false;

                                    btn_right.visible = false;

                                    info.visible = false;

                                    rings.visible=false;

                        } else {

                                    ge_mc.gotoAndStop(1);

                                    btn_left.visible = true;

                                    btn_right.visible = true;

                                    info.visible = true;

                                    rings.visible = true;

                        }

This project was super tedious, but very fun. I learned a ton of new things about Adobe Flash CS5 and actionscript.

To view my first Flash project click here.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s