Drag Over Interaction and States

Jan 09, 2015

Belal Sweileh
By Belal Sweileh

Hello,

I'm trying to build an interaction where the tip of a pencil triggers a "drag over" state change. Also in this interaction, when the pencil is dragged, it turns into a hand holding a pencil for more realism. 

Please see attached story project.

Two issues:

1) When I drag the pencil itself, the state change is fine. But when I drag the oval, the normal state persists and I start seeing both the pencil and the hand holding the pencil at the same time. I don't know why.

2) So far, the drag over interaction works except that the entire image of the pencil/hand triggers the "drag over" interaction and not the tip of the pencil alone (as determined by the small oval). I only want the tip of the pencil to trigger an interaction when dragged over another object.

What I did initially was create an oval to demarcate the tip of the pencil, then I added an image of a pencil to the normal state of the object. Then I added the image of the hand holding a pencil into a new down state for the oval and removed the pencil. The oval also changes colour from blue to orange when dragged.   

This is probably the wrong way to go about it. I guess I could just make the pencil and hand images smaller by scaling them down, but I would like to hear your thoughts on how to do this differently. Thanks! 

6 Replies
Ashley Terwilliger-Pollard
9 years ago01/19/15 at 4:13 pm (UTC)

Hi Belal, 

I'm sorry - it looks like your post got missed by our team, but we are monitoring and replying in the forums on a Mon-Fri 9- 5 EST time frame. If you ever need additional assistance from our Support team, you're welcome to connect with them here. 

As far as the dragged over element, it's capturing that the element you're dragging is over the intended target or spot - not just where your mouse cursor is located. 

For the pencil and hand, it does seem to behaving oddly and when trying to recreate the pencil as it's own object it disappeared on me - which makes me want to check and confirm that you're working on project files as described here. Working otherwise could cause odd behavior or corruption within your files. 

Kevin Thorn
9 years ago01/19/15 at 4:54 pm (UTC)

Hey Belal,

Clever setup. Studying your triggers and states everything seems to be working correctly in concept. 

I understand what you're wanting to do by only allowing the tip (circle shape) to be the main point of contact for triggering the 'dragged over' state changes of the other shapes. I'm guessing here but I thing what you're trying to do is a little bit more involved that what Storyline is currently capable of, although I haven't tried an alternate approach.

The reason: Even though you're adding an image to the Normal state of an object (circle), the invisible bounding box is still identifying the parameters of both the circle shape and the pencil image. Same for the hand image and circle shape in the Down state.

I verified this by dragging the pencil to where the very top of the eraser touched one of the drop over shapes and they indeed changed. This suggests Storyline is "seeing" the edges that comprise that object. Again, same for the hand shape.

Additionally, when you click on the pencil image it changes to the hand image which I think is the behavior you want. However, if you click on the blue circle shape itself the hand image appears in the Down state but the pencil image remains. Not sure why that's happening or how to troubleshoot. I do know that I've experienced different behaviors in Storyline 2 when customizing object states than that from Storyline 1.

Sorry. That's all I got. :)

This discussion is closed. You can start a new discussion or contact Articulate Support.