4 Replies Latest reply on Feb 5, 2015 7:46 AM by SeanHoughton92

    How to make specific objects visible when a droppable area is occupied

    SeanHoughton92

      Hi,

       

      At the moment I am trying to create a interactive animation in which when the user drops a symbol in a certain area, a layer that is hidden then becomes visible.

       

      What I mean by this is that when the user drops one of the cards at the bottom of the screen in to the blank white space that is on the stage, another band member, (who is initially hidden) then appears. At the moment I have it set up so that when the user double clicks one of these empty white spaces the band member appears, but this is just to test the function. I am confused as to how I can get this to work only when the 'droppable' or blank space is filled.

       

      Any help would be fantastic and attached you will find an image of the situation

       

      Thanks

       

      Screen Shot 2015-02-04 at 22.31.42.png

        • 1. Re: How to make specific objects visible when a droppable area is occupied
          resdesign Adobe Community Professional & MVP

          You need to add a class name to your draggables in order to work on them and you could use data() to assign the band element to each draggable.

          • 2. Re: How to make specific objects visible when a droppable area is occupied
            SeanHoughton92 Level 1

            Thanks for the fast reply!

             

            Unfortunately I'm very new to Edge Animate and don't fully understand what you mean here - apologies. Initially I thought it could be possible for me to accomplish this through using if variables and the simple 'show' command in the script i.e. if 'Card' is in droppable space, show Band member 1 etc. Is this a bad way to go about it? As I say, really sorry if I'm asking stupid questions but I am completely new to this

            • 3. Re: How to make specific objects visible when a droppable area is occupied
              resdesign Adobe Community Professional & MVP

              Please check out my sample for simple draggables and see if you can make yours work.

              ! simple draggable.zip - Box

              • 4. Re: How to make specific objects visible when a droppable area is occupied
                SeanHoughton92 Level 1

                Thank you very much for uploading that example, I just took a look and noticed this section:

                 

                // set up the droppable to accept each draggables

                for (i=0;i<droppableEl.length;i++){

                  sym.$(draggableEl[i]).addClass('C'+i);

                  sym.$('.C'+i).draggable({

                  revert: 'invalid'

                });

                  sym.$(droppableEl[i]).droppable({

                  accept:'.C'+i,   // use class for accept

                  drop: handleDropEvent

                  });

                 

                 

                So here if I have understood correctly you are defining each draggable object, (fruit) as class 'C', and each droppable area to accept 'C'?

                 

                Going off that, as you mentioned before I should be defining each card as a 'class', and then making sure that the droppable areas accept that specific 'class' - which in turn, when dropped in the area should show each band member? Would this be doable through a simple 'Show' command in that case?

                 

                My apologies if I am getting this completely wrong, and I really appreciate your help so far!

                 

                 

                EDIT:

                 

                Apologies, forgot to mention that my draggables are working. I will attach an image of my code example for one of the cards now:

                 

                Card code:

                 

                Screen Shot 2015-02-05 at 16.44.15.png

                 

                Hiding all band members on composition ready:

                 

                Screen Shot 2015-02-05 at 16.45.04.png

                 

                As you can see, at the moment I have the band members to 'Show' when I double click, (just as a test). However I need them to show when there is a 'draggable' in 'droppable' space.

                 

                Screen Shot 2015-02-05 at 16.45.46.png