Highlighted

Layer Display Hierarchy using AS3 MouseEvents

Participant ,
Jan 16, 2019

Copy link to clipboard

Copied

I posted this issue a while back but the feedback didn't work out so reposting after trying some new solutions.  See detail below:

I've got a virtual desktop environment that will allow users to click, drag and drop windows in the desktop.  The OS Toolbar layer always stays on top (like an actual desktop).  Additionally, I want the user to be able to select from 4 different desktop backgrounds.

In terms of drag/drop and a single desktop background I have this working.  Where I'm running into issues is a method for selecting different desktop BG's.

CLAY suggested using myDesktopContainingMovieClip.gotoAndStop(1), 2, 3, instead of 'addChild' method for keeping the 'toolBar' layer on top but this didn't work for me either as my DragDrop functionality stopped.

I'm currently working with having 4 consecutive keyframes in the Timeline.  Each keyframe has one of the 4 unique desktop BG's.  I'm using a stop(); command to keep the playhead on any given BG and using keyCodes to advance to each of the frames 1 thru 4.  Problem now is that the drag and drop doesn't work using this method either (per script below).

Note: Each keyframe has its own actions frame above with unique script for that frame.  I'm using unique MC's and Instance names for each frame (which reference the original media that was imported to the library).

I think the issue is the 'addChild' command to keep the toolbar on top of the other layers.

Any advice at this point is greatly appreciate!  Thanks!

Here is my script for Frames 1 & 2 (to show how I'm going about this):

FRAME 1:

// To make the Projector launch FULL SCREEN

stage.displayState = StageDisplayState.FULL_SCREEN;

// Stops the playhead at the current frame

addEventListener(Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame(e:Event):void {

     if (currentFrame == 1) stop();

}

// _____________________________________________________________________

// Event Listener for MouseDown with variable name of 'lab1Start'

sequencer1.addEventListener(MouseEvent.MOUSE_DOWN, lab1Start);

function lab1Start(e:MouseEvent):void {

// 1st addChild makes the MC instance, 'sequencer1' appear on top'

addChild(DisplayObject(e.currentTarget));

// the second addChild forces the MC instance, 'toolBar' to always be on top no matter what's clicked

addChild(toolBar);

sequencer1.startDrag();

}

// this is the 'drop' part of the drag & drop that's cue'd by a Mouse_Up event.

sequencer1.addEventListener(MouseEvent.MOUSE_UP, lab1Stop);

function lab1Stop(e:MouseEvent):void {

sequencer1.stopDrag();

}

// _____________________________________________________________________

// Event Listener for MouseDown with variable name of 'lab2Start'

sequencer2.addEventListener(MouseEvent.MOUSE_DOWN, lab2Start);

function lab2Start(e:MouseEvent):void {

// 1st addChild makes the MC instance, 'sequencer2' appear on top'

addChild(DisplayObject(e.currentTarget));

// the second addChild forces the MC instance, 'toolBar' to always be on top no matter what's clicked

addChild(toolBar);

sequencer2.startDrag();

}

// this is the 'drop' part of the drag & drop that's cue'd by a Mouse_Up event.

sequencer2.addEventListener(MouseEvent.MOUSE_UP, lab2Stop);

function lab2Stop(e:MouseEvent):void {

sequencer2.stopDrag();

}

//navigate frames using  '1' and '2' keys

stage.addEventListener(KeyboardEvent.KEY_DOWN, tester)

function tester(e:KeyboardEvent):void

{

if(e.keyCode == 49)

{

gotoAndPlay(1);

}

else if(e.keyCode == 50)

{

gotoAndPlay(2);

}

}

function reportKeyDown(e:KeyboardEvent):void

{

     trace(e.keyCode);

}

stage.addEventListener(KeyboardEvent.KEY_DOWN, reportKeyDown);

FRAME 2:

// To make the Projector launch FULL SCREEN

stage.displayState = StageDisplayState.FULL_SCREEN;

addEventListener(Event.ENTER_FRAME, onEnterFrame2);

function onEnterFrame2(e:Event):void {

     if (currentFrame == 2) stop();

}

// _____________________________________________________________________

// Event Listener for MouseDown with variable name of 'lab5Start'

sequencer1a.addEventListener(MouseEvent.MOUSE_DOWN, lab5Start);

function lab5Start(e:MouseEvent):void {

// 1st addChild makes the MC instance, 'sequencer1a’ appear on top'

addChild(DisplayObject(e.currentTarget));

// the second addChild forces the MC instance, 'toolBar' to always be on top no matter what's clicked

addChild(toolBarB);

sequencer1a.startDrag();

}

// this is the 'drop' part of the drag & drop that's cue'd by a Mouse_Up event.

sequencer1a.addEventListener(MouseEvent.MOUSE_UP, lab5Stop);

function lab5Stop(e:MouseEvent):void {

sequencer1a.stopDrag();

}

// _____________________________________________________________________

sequencer2a.addEventListener(MouseEvent.MOUSE_DOWN, lab6Start);

function lab6Start(e:MouseEvent):void {

// 1st addChild makes the MC instance, 'sequencer2a’ appear on top'

addChild(DisplayObject(e.currentTarget));

// the second addChild forces the MC instance, 'toolBar' to always be on top no matter what's clicked

addChild(toolBarB);

sequencer2a.startDrag();

}

sequencer2a.addEventListener(MouseEvent.MOUSE_UP, lab6Stop);

function lab6Stop(e:MouseEvent):void {

sequencer2a.stopDrag();

}

//navigate frames

stage.addEventListener(KeyboardEvent.KEY_DOWN, tester)

function tester(e:KeyboardEvent):void

{

if(e.keyCode == 49)

{

gotoAndPlay(1);

}

else if(e.keyCode == 50)

{

gotoAndPlay(2);

}

}

SOLVED... I found a solution to this using addChildAt() and not using the timeline at all. 

Some background on this solution - I found some forums where people were having similar issues using addChild which seems to create instance errors when used on multiple frames on the timeline.  In my case, trying to jump frames where each frame had a unique background image using the same script and instances for the drag/drop windows OR using unique script on each frame and unique instances of the same media on each frame (BOTH APPROACHES) caused instances to multiple each time you changed frames.

I found the 'addChildAt()' command let me do this all with a single frame and AS3.  addChildAt() gave me a more granular way to specify exactly where the background layers fall in the stack.  So I have the BG layers as 0, 1, 2 & 3 (bottom 4 layers) with the drag drop layers always appearing on top courtesy of a simple addChild.  Hope this is helpful to anyone following this thread.  I'm sure there are more eloquent solutions with more complex script.  Please share if so.

See the change to script below:

//navigate frames

stage.addEventListener(KeyboardEvent.KEY_DOWN, tester)

function tester(e:KeyboardEvent):void

{

     if(e.keyCode == 49)

     {

     addChildAt(deskTop1,3);

     addChildAt(deskTop2,0);

     addChildAt(deskTop3,1)

     addChildAt(deskTop4,2)

     }

     else if(e.keyCode == 50)

     {

     addChildAt(deskTop1,2);

     addChildAt(deskTop2,3);

     addChildAt(deskTop3,0)

     addChildAt(deskTop4,1)

     }

     else if(e.keyCode == 51)

     {

     addChildAt(deskTop1,2);

     addChildAt(deskTop2,0);

     addChildAt(deskTop3,3)

     addChildAt(deskTop4,1)

     }

     else if(e.keyCode == 52)

     {

     addChildAt(deskTop1,2);

     addChildAt(deskTop2,1);

     addChildAt(deskTop3,0)

     addChildAt(deskTop4,3)

     }

}

TOPICS
Discussions

Views

140

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Layer Display Hierarchy using AS3 MouseEvents

Participant ,
Jan 16, 2019

Copy link to clipboard

Copied

I posted this issue a while back but the feedback didn't work out so reposting after trying some new solutions.  See detail below:

I've got a virtual desktop environment that will allow users to click, drag and drop windows in the desktop.  The OS Toolbar layer always stays on top (like an actual desktop).  Additionally, I want the user to be able to select from 4 different desktop backgrounds.

In terms of drag/drop and a single desktop background I have this working.  Where I'm running into issues is a method for selecting different desktop BG's.

CLAY suggested using myDesktopContainingMovieClip.gotoAndStop(1), 2, 3, instead of 'addChild' method for keeping the 'toolBar' layer on top but this didn't work for me either as my DragDrop functionality stopped.

I'm currently working with having 4 consecutive keyframes in the Timeline.  Each keyframe has one of the 4 unique desktop BG's.  I'm using a stop(); command to keep the playhead on any given BG and using keyCodes to advance to each of the frames 1 thru 4.  Problem now is that the drag and drop doesn't work using this method either (per script below).

Note: Each keyframe has its own actions frame above with unique script for that frame.  I'm using unique MC's and Instance names for each frame (which reference the original media that was imported to the library).

I think the issue is the 'addChild' command to keep the toolbar on top of the other layers.

Any advice at this point is greatly appreciate!  Thanks!

Here is my script for Frames 1 & 2 (to show how I'm going about this):

FRAME 1:

// To make the Projector launch FULL SCREEN

stage.displayState = StageDisplayState.FULL_SCREEN;

// Stops the playhead at the current frame

addEventListener(Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame(e:Event):void {

     if (currentFrame == 1) stop();

}

// _____________________________________________________________________

// Event Listener for MouseDown with variable name of 'lab1Start'

sequencer1.addEventListener(MouseEvent.MOUSE_DOWN, lab1Start);

function lab1Start(e:MouseEvent):void {

// 1st addChild makes the MC instance, 'sequencer1' appear on top'

addChild(DisplayObject(e.currentTarget));

// the second addChild forces the MC instance, 'toolBar' to always be on top no matter what's clicked

addChild(toolBar);

sequencer1.startDrag();

}

// this is the 'drop' part of the drag & drop that's cue'd by a Mouse_Up event.

sequencer1.addEventListener(MouseEvent.MOUSE_UP, lab1Stop);

function lab1Stop(e:MouseEvent):void {

sequencer1.stopDrag();

}

// _____________________________________________________________________

// Event Listener for MouseDown with variable name of 'lab2Start'

sequencer2.addEventListener(MouseEvent.MOUSE_DOWN, lab2Start);

function lab2Start(e:MouseEvent):void {

// 1st addChild makes the MC instance, 'sequencer2' appear on top'

addChild(DisplayObject(e.currentTarget));

// the second addChild forces the MC instance, 'toolBar' to always be on top no matter what's clicked

addChild(toolBar);

sequencer2.startDrag();

}

// this is the 'drop' part of the drag & drop that's cue'd by a Mouse_Up event.

sequencer2.addEventListener(MouseEvent.MOUSE_UP, lab2Stop);

function lab2Stop(e:MouseEvent):void {

sequencer2.stopDrag();

}

//navigate frames using  '1' and '2' keys

stage.addEventListener(KeyboardEvent.KEY_DOWN, tester)

function tester(e:KeyboardEvent):void

{

if(e.keyCode == 49)

{

gotoAndPlay(1);

}

else if(e.keyCode == 50)

{

gotoAndPlay(2);

}

}

function reportKeyDown(e:KeyboardEvent):void

{

     trace(e.keyCode);

}

stage.addEventListener(KeyboardEvent.KEY_DOWN, reportKeyDown);

FRAME 2:

// To make the Projector launch FULL SCREEN

stage.displayState = StageDisplayState.FULL_SCREEN;

addEventListener(Event.ENTER_FRAME, onEnterFrame2);

function onEnterFrame2(e:Event):void {

     if (currentFrame == 2) stop();

}

// _____________________________________________________________________

// Event Listener for MouseDown with variable name of 'lab5Start'

sequencer1a.addEventListener(MouseEvent.MOUSE_DOWN, lab5Start);

function lab5Start(e:MouseEvent):void {

// 1st addChild makes the MC instance, 'sequencer1a’ appear on top'

addChild(DisplayObject(e.currentTarget));

// the second addChild forces the MC instance, 'toolBar' to always be on top no matter what's clicked

addChild(toolBarB);

sequencer1a.startDrag();

}

// this is the 'drop' part of the drag & drop that's cue'd by a Mouse_Up event.

sequencer1a.addEventListener(MouseEvent.MOUSE_UP, lab5Stop);

function lab5Stop(e:MouseEvent):void {

sequencer1a.stopDrag();

}

// _____________________________________________________________________

sequencer2a.addEventListener(MouseEvent.MOUSE_DOWN, lab6Start);

function lab6Start(e:MouseEvent):void {

// 1st addChild makes the MC instance, 'sequencer2a’ appear on top'

addChild(DisplayObject(e.currentTarget));

// the second addChild forces the MC instance, 'toolBar' to always be on top no matter what's clicked

addChild(toolBarB);

sequencer2a.startDrag();

}

sequencer2a.addEventListener(MouseEvent.MOUSE_UP, lab6Stop);

function lab6Stop(e:MouseEvent):void {

sequencer2a.stopDrag();

}

//navigate frames

stage.addEventListener(KeyboardEvent.KEY_DOWN, tester)

function tester(e:KeyboardEvent):void

{

if(e.keyCode == 49)

{

gotoAndPlay(1);

}

else if(e.keyCode == 50)

{

gotoAndPlay(2);

}

}

SOLVED... I found a solution to this using addChildAt() and not using the timeline at all. 

Some background on this solution - I found some forums where people were having similar issues using addChild which seems to create instance errors when used on multiple frames on the timeline.  In my case, trying to jump frames where each frame had a unique background image using the same script and instances for the drag/drop windows OR using unique script on each frame and unique instances of the same media on each frame (BOTH APPROACHES) caused instances to multiple each time you changed frames.

I found the 'addChildAt()' command let me do this all with a single frame and AS3.  addChildAt() gave me a more granular way to specify exactly where the background layers fall in the stack.  So I have the BG layers as 0, 1, 2 & 3 (bottom 4 layers) with the drag drop layers always appearing on top courtesy of a simple addChild.  Hope this is helpful to anyone following this thread.  I'm sure there are more eloquent solutions with more complex script.  Please share if so.

See the change to script below:

//navigate frames

stage.addEventListener(KeyboardEvent.KEY_DOWN, tester)

function tester(e:KeyboardEvent):void

{

     if(e.keyCode == 49)

     {

     addChildAt(deskTop1,3);

     addChildAt(deskTop2,0);

     addChildAt(deskTop3,1)

     addChildAt(deskTop4,2)

     }

     else if(e.keyCode == 50)

     {

     addChildAt(deskTop1,2);

     addChildAt(deskTop2,3);

     addChildAt(deskTop3,0)

     addChildAt(deskTop4,1)

     }

     else if(e.keyCode == 51)

     {

     addChildAt(deskTop1,2);

     addChildAt(deskTop2,0);

     addChildAt(deskTop3,3)

     addChildAt(deskTop4,1)

     }

     else if(e.keyCode == 52)

     {

     addChildAt(deskTop1,2);

     addChildAt(deskTop2,1);

     addChildAt(deskTop3,0)

     addChildAt(deskTop4,3)

     }

}

TOPICS
Discussions

Views

141

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 16, 2019 0
Participant ,
Jan 16, 2019

Copy link to clipboard

Copied

Made a little Progress on this...

So I got rid of the additional keyframes in the Actions Layer and stretched the 1st frame Actions across my frames containing the various Backgrounds.  I'm able to navigate to each desktop background (in this case Just 1 & 2).  When I arrive I can drag/drop the windows and all works well.  BUT, when I loop back to the first frame using the hotkey, the windows start to multiple.  So my two drag/drop MC's labeled, "sequencer1" and "sequencer2" double and now there are 2 of each.  It seems that looping back to a frame I've already been in calls up duplicate instances of the MC's????

Here's the current Script on Frame 1 of the Actions Layer:

// To make the Projector launch FULL SCREEN

stage.displayState = StageDisplayState.FULL_SCREEN;

stop();

// _____________________________________________________________________

// Event Listener for MouseDown with variable name of 'lab1Start'

sequencer1.addEventListener(MouseEvent.MOUSE_DOWN, lab1Start);

function lab1Start(e:MouseEvent):void {

// 1st addChild makes the MC instance, 'sequencer1' appear on top'

addChild(DisplayObject(e.currentTarget));

// the second addChild forces the MC instance, 'toolBar' to always be on top no matter what's clicked

addChild(toolBar);

sequencer1.startDrag();

}

// this is the 'drop' part of the drag & drop that's cue'd by a Mouse_Up event.

sequencer1.addEventListener(MouseEvent.MOUSE_UP, lab1Stop);

function lab1Stop(e:MouseEvent):void {

sequencer1.stopDrag();

}

// _____________________________________________________________________

// Event Listener for MouseDown with variable name of 'lab2Start'

sequencer2.addEventListener(MouseEvent.MOUSE_DOWN, lab2Start);

function lab2Start(e:MouseEvent):void {

// 1st addChild makes the MC instance, 'sequencer2' appear on top'

addChild(DisplayObject(e.currentTarget));

// the second addChild forces the MC instance, 'toolBar' to always be on top no matter what's clicked

addChild(toolBar);

sequencer2.startDrag();

}

// this is the 'drop' part of the drag & drop that's cue'd by a Mouse_Up event.

sequencer2.addEventListener(MouseEvent.MOUSE_UP, lab2Stop);

function lab2Stop(e:MouseEvent):void {

sequencer2.stopDrag();

}

//navigate frames

stage.addEventListener(KeyboardEvent.KEY_DOWN, tester)

function tester(e:KeyboardEvent):void

{

if(e.keyCode == 49)

{

gotoAndStop(1);

}

else if(e.keyCode == 50)

{

gotoAndStop(2);

}

}

function reportKeyDown(e:KeyboardEvent):void

{

     trace(e.keyCode);

}

stage.addEventListener(KeyboardEvent.KEY_DOWN, reportKeyDown);

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 16, 2019 0
Participant ,
Jan 17, 2019

Copy link to clipboard

Copied

SOLVED... I found a solution to this using addChildAt() and not using the timeline at all. 

Some background on this solution - I found some forums where people were having similar issues using addChild which seems to create instance errors when used on multiple frames on the timeline.  In my case, trying to jump frames where each frame had a unique background image using the same script and instances for the drag/drop windows OR using unique script on each frame and unique instances of the same media on each frame (BOTH APPROACHES) caused instances to multiple each time you changed frames.

I found the 'addChildAt()' command let me do this all with a single frame and AS3.  addChildAt() gave me a more granular way to specify exactly where the background layers fall in the stack.  So I have the BG layers as 0, 1, 2 & 3 (bottom 4 layers) with the drag drop layers always appearing on top courtesy of a simple addChild.  Hope this is helpful to anyone following this thread.  I'm sure there are more eloquent solutions with more complex script.  Please share if so.

See the change to script below:

//navigate frames

stage.addEventListener(KeyboardEvent.KEY_DOWN, tester)

function tester(e:KeyboardEvent):void

{

     if(e.keyCode == 49)

     {

     addChildAt(deskTop1,3);

     addChildAt(deskTop2,0);

     addChildAt(deskTop3,1)

     addChildAt(deskTop4,2)

     }

     else if(e.keyCode == 50)

     {

     addChildAt(deskTop1,2);

     addChildAt(deskTop2,3);

     addChildAt(deskTop3,0)

     addChildAt(deskTop4,1)

     }

     else if(e.keyCode == 51)

     {

     addChildAt(deskTop1,2);

     addChildAt(deskTop2,0);

     addChildAt(deskTop3,3)

     addChildAt(deskTop4,1)

     }

     else if(e.keyCode == 52)

     {

     addChildAt(deskTop1,2);

     addChildAt(deskTop2,1);

     addChildAt(deskTop3,0)

     addChildAt(deskTop4,3)

     }

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 17, 2019 0
ClayUUID LATEST
Adobe Community Professional ,
Jan 18, 2019

Copy link to clipboard

Copied

Okay first, sticking all your backgrounds in a single movieclip and setting its frame is still the best way to do this, because that way you aren't forcing the player to draw four different backgrounds even though only one is visible at a time. There is no way this approach would have broken your drag-drops. You must have done something else to screw them up.

But if you're bound and determined to do it the inefficient way, your code could be much simpler. There's absolutely no need to addChild every single background when you're only changing the order of one of them. This works just as well:

function tester(e:KeyboardEvent):void {

    if (e.keyCode == 49) {

        setChildIndex(deskTop1, numChildren - 1);

    }

    else if (e.keyCode == 50) {

        setChildIndex(deskTop2, numChildren - 1);

    }

    else if (e.keyCode == 51) {

        setChildIndex(deskTop3, numChildren - 1);

    }

    else if (e.keyCode == 52) {

        setChildIndex(deskTop4, numChildren - 1);

    }

}

Since your backgrounds are named the way they are, even just this works:

function tester(e:KeyboardEvent):void {

    var code = e.keyCode;

    if (code >= 49 && code <= 52) {

        setChildIndex(this["deskTop" + (code - 48)], numChildren - 1);

    }

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 18, 2019 0