• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Layer Display Hierarchy using AS3 Key_Down KeyCodes and MouseEvents

Participant ,
Dec 31, 2018 Dec 31, 2018

Copy link to clipboard

Copied

I'm fairly new to Animate.  I'm trying to emulating a desktop environment and I'm wanting the user to be able to drag and drop windows within the desktop environment.  I'm accomplishing that using the following code for each window (Note: I've included script for 1 of the drag/drop windows as an example).  This script allows the user to click on any window (a MC instance) which brings that 'window' to the front and allows the user to drag and then drop it.

GeneMap1.addEventListener(MouseEvent.MOUSE_DOWN, geneMap1Start);

function geneMap1Start(e:MouseEvent):void {

addChild(DisplayObject(e.currentTarget));

// keeps the Windows desktop toolbar on top

addChild(toolBar);

geneMap1.startDrag();

}

geneMap1.addEventListener(MouseEvent.MOUSE_UP, geneMap1Stop);

function geneMap1Stop(e:MouseEvent):void {

geneMap1.stopDrag();

}

Further, I'm wanting the user to be able to change the desktop Backgrounds using Key_Down KeyCodes.  I'm using the following AS3 script for that (keys 1 - 4) to rotate thru 4 different desktops.  (Note: I've included script for 1 of the desktops as an example)

// desktop 1

stage.addEventListener(KeyboardEvent.KEY_DOWN, deskTop1top);

function deskTop1top(e:KeyboardEvent):void

{

  if(e.keyCode == 49)

  {

  addChild(DisplayObject(deskTop1));

  }

}

My issue is that I need the Desktop Backgrounds to always display below the Drag/Drop windows.  I tried building this with 2 layers in Animate and creating the Windows on the top layer.  Each layer has its own AS3 script.  But 'addChild(DisplayObject...)) always puts that object on absolute top regardless of the way the layers in the timeline are configured. 

Can anyone in the community suggest a strategy for accomplishing this?  Thanks very much in advance for your help/advice!  Happy New Year!

Views

365

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
community guidelines

correct answers 1 Correct answer

Participant , Jan 17, 2019 Jan 17, 2019

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 m

...

Votes

Translate

Translate
LEGEND ,
Dec 31, 2018 Dec 31, 2018

Copy link to clipboard

Copied

Why on earth are you using addChild() instead of just putting every background in a single movieclip and setting the current one with gotoAndStop()?

Votes

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
community guidelines
Participant ,
Dec 31, 2018 Dec 31, 2018

Copy link to clipboard

Copied

As explained I'm new to Animate so your suggested didn't come to mind. 

So I understand, you're saying put the Desktop Backgrounds in the timeline and then navigate the timeline using key codes as hotkeys to jump to specific frames?

If so would you mind sharing sample script to get me going?  I haven't done that before.

Thanks!

Votes

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
community guidelines
LEGEND ,
Dec 31, 2018 Dec 31, 2018

Copy link to clipboard

Copied

Exactly the same as you're doing now, only myDesktopContainingMovieClip.gotoAndStop(1), 2, 3, etc... instead of addChild.

Votes

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
community guidelines
Participant ,
Dec 31, 2018 Dec 31, 2018

Copy link to clipboard

Copied

Clay,

Thanks for this... Defiantly make some progress.  I'm able to use the key codes to navigate to each of the 4 desktops in the timeline.  This works perfectly to keep the desktops below the windows and allow the user to select a custom desktop.


My issue now is that the windows (drag/drop MC instances) only appear in frame 1.  When I drag out this frame, the windows still only appear in the 1st frame and they are no longer interactive.  You cannot drag/drop them.  Note sure where to go from here?

THanks!

Votes

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
community guidelines
Participant ,
Jan 16, 2019 Jan 16, 2019

Copy link to clipboard

Copied

Still Struggling with getting this to work - To Recap what I'm trying to accomplish:

I've got a virtual desktop environment that will allow users to click, drag and drop windows in the desktop.  The bottom 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 (bottom layer). 

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

I'm currently trying by 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 (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.

Here is my script for Frames 1 & 2:

Any advice at this point is greatly appreciate!  Thanks!

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);

}

}

Votes

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
community guidelines
Participant ,
Jan 17, 2019 Jan 17, 2019

Copy link to clipboard

Copied

LATEST

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)

     }

}

Votes

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
community guidelines