Simulating stretching of a wire in Drag and Drop

Just wondered if anyone else has tried to create a drag and drop for a wire with a connection point on the end.

The learner will be dragging the connection tip of the wire to a spot to connect it to (drop area - blue circle at top of image).  The proper effect should have the wire's length "stretching " as it it pulled/dragged around to different areas.

This post gave an idea to do this with states.. meaning change the state of the drag object/image depending when on the screen it's being dragged, using hotspots, etc. This initially sounded like a good idea.

This Articulate tutorial video explains using states/triggers as well but using an image that isn't supposed to "stretch".

However, the states of a wire are a bit different than other objects/images.  Basically what happens when the wire is dragged to a hotspot above it. the point of origin changes and it doesn't stay anchored to the bottom (as I originally thought might happen).   It ends up being a somewhat choppy experience.

Does anyone know of a way to have the wire stay anchored to an "origin" point and be able to be dragged/stretched from there? 

Or other ideas on how to get it to look right with drag and drop? (using other interaction in SL2). Surely this must be possible in some way.



8 Replies
Ademola Johnson

Hi Jay,

I don't know if that is possible in storyline yet. I would like to suggest a work around.

Instead of having them to drag the wire to the port, you can give them option of clicking the correct port. on this port, you put an hot spot that jumps to another slide or layer that shows the animated wire moving by itself to the port (motion path animation can be used).

so this is what you might have:

Slide 1.

What is seen on the screen: The device as shown with markers on different ports

Voice over or On screen text (OST): Click on the correct port or associated marker to insert the "name of wire"

Tirgger: Jump to next slide (or next layer as you wish) if "the correct port or marker" is clicked

Slide 2.

What is seen: The wire moves up (motion path) to the correct port.


Ashley Terwilliger-Pollard

Hi Jay,

I can't think of another way to ensure it stays anchored - but based on just your images alone, could you just set the object itself to be longer and therefore appear while below the slide stage so that when it is dragged the user can see more of the wire connected to it? It's a simplistic solution for sure - so I'd defer to the community experts on further design ideas. 

Bill Kelleher

Ashley's method of making it longer and placing most of it below the stage is a pretty great way to get this effect and its very simple, a win-win.

If that doesn't work for you though, here are some ways of using stages and lines to simulate a line extending (drawing lines and boxes in this case).

Jay Yearley

Thank you all for each of your suggestions, and for the demo file as well.

I did like Ademola's idea of using motion paths  (like putting those motion paths to use ;-)

Believe I'll just do the simplest way, using the elongated wire image.  Was thinking about doing it with states for so long that I didn't even see that as an option until now  :-)

The only thing with that is that any part of the wire could be dragged onto the drop area (when only the tip really needs to connect - don't think there's a way to define just a point of an image to register as the "drop point"),

Though it may just do the trick. Again, thanks.


Jerson  Campos

I didn't look at the other examples, but I did something similar that might help.

This is going to sound confusing, but don't make the image the drag object. Create a different shape and make that the drag object. Make the drag object about the same size as the drop object.  Then in the normal state place the image of the long wire and line it up where you want it connected to.

If you look at the image here, you can get an idea what I'm talking about.

The selected square on the spoon is just the image of the spoon inside the normal state of the square so they are one object. This is my drag object.  

The square on the hand is the drop object. 

I lined up the spoon image on the drag object so that when a user drags the spoon to the hand it always snaps to both shapes over each other.  

The shapes are just squares with no border and transparency set to 100% (don't set it to no fill).

For you case, just create a shape the same size of your drop point and then paste the image you used for state 4 into the normal state.  

If you have any questions just respond here or PM me. 

Jay Yearley

Thanks so much Jerson, for sharing your idea!  That "invisible" box idea is actually what I ended up using to have the ends of the wires to connect with the drop target to show "correct" feedback (instead of having the whole length of wire be able to be dropped on the drop target).

There was still a small issue with using larger/longer images like this for drag items. They had random behavior and when dropped around different points on the screen (which weren't the target)  they would randomly jump and "snap" to the top of the screen, etc., instead of staying put where dropped.

This was just solved by doing a workaround and checking the box for "return item to start point if dropped outside.. drop target", and the box for "snap dropped items to drop target".  Not really an ideal fix, but it keeps the longer image drag items to keep from snapping to the top of the screen randomly anyway.  If anyone has any input to why the snap to the top like that, feel free to share.

In any case, thank you to all who shared your ideas! Much appreciated!