Is it possible to change an item as you drag and drop?

Hi

I have created a drag and drop interaction using screenshots of a menu bar.  I have the icons seperated out as individual images, so can drop them to the right (or wrong) area.

Is there a way of re-sizing the image as I drag it from the menu bar which is quite small to the rectangle which is much larger.

For example, I have a help icon which is currently quite small (about 10pt) I have larger images available which don't fit the screenshot, but would look  much better when they're dragged onto the answer area. the larger Icons are about 26pt  but are different images.

Is it possible to drag one to fit the answer critera but display the larger one which looks better?

18 Replies
Antony Snow

Hi Bridget - welcome to Heroes

Unless I'm mistaken, it sounds like you should be able to add the larger icon to the smaller icons 'drag over' state - this will make the icon bigger when the user drags it over a drop target.

You can also make the larger icon the smaller icons 'drop correct' and 'drop incorrect' state, so it stays larger when the user drops it on a target.

Antony

Bridget Collins

Hi Antony

I have done this and it works perfectly for the drag over option.  Unfortunately, when I drag to either the correct or incorrect position, it does not display at all.  I'm sure it's something simple, I'm quite new to Storyline, but I'm a bit baffled at the moment.

The initial state, the hover state and the drag over state are all fine, but dropped correct and dropped incorrect just don't display at all.

Antony Snow

Hi Bridget,

Do you mean that the drop correct and drop incorrect states don't display at all?

If you click on 'Edit Drag and Drop' above the triggers panel, the feedback option on the right-hand side controls when these states are triggered - checking the box triggers them all when the user clicks on submit and leaving it un-checked triggers the state change one item at a time.

If you are still having issues, please feel free to post the .story file and I/we will take a closer look.

Antony

Bridget Collins

Hi Antony

I had tried that both checked and unchecked.  Slide attached.  If you could indicate where I have gone wrong that would be great.

So far I have only done this with the Home button.  There are several more that need doing but I wanted to be sure it all worked ok with one first. (the images are stored on the Image Layer as I can't copy and paste from powerpoint).

I have imported this from a powerpoint that was set up by a colleague, so I may be missing something from the other application.

Antony Snow

Hi Bridget,

I had a look at your example file last night and to be completely honest, I'm not 100% sure why it didn't work for you.

I therefore thought that I would start again and build my own version, which seems to be working as you need it to. I have attached it here so you can have a look and hopefully make sense of the mechanics behind it

If you have any questions, please feel free to send me a private message.

Antony

Carol Ridlington

I'm wondering if I need a similar solution to my problem?

I have a telephone conversation between two individuals both depictied on the same slide. Several statements are stacked up as a drag and drop - the idea is that as each of the caller's statements is dragged across to the operator, the operator changes state depending on whether they can progress the call or not.

The problem is that because I have both captions showing (the one where the statement originated and the one dependant on the 'dropped correct' or 'dropped incorrect' state) it looks confusing to the user because the next statement displays at the same time as the answer to the previous question!

Should I just put each interaction on a different slide or is there a way of hiding the next statement in the drag and drop list  until the user is ready for it?

Carol Ridlington

Thanks so much for responding Anthony - they reveal one at a time OK - it's making it so that you don't see the next one in the stack at all, until you do something like click into the caption that I think I need. Here's the slide which might be better than me trying to explain it - there's something else going wrong because the correct 'dropped correct/incorrect' state isn't always displaying either.

Any suggestions very welcome - I just think it would be better to have it all on one slide that do one per slide!

Cheers

Carol

OWEN HOLT

I haven't looked at the file, but one thing to be aware of is that the correct/incorrect "states" are layers that sit on top of the base slide. They do not have a background as the intent is to add items/interactions etc to the slide. If you can see things on the base that you want to hide, add a shape with a color to match your background to the correct/incorrect layers and send it to the back/bottom of your layer. Position and size it over the items you wish to hide that are on the base layer.

Carol Ridlington

Thanks Owen - I get what you're saying completely - sadly the stuff I want to hide is not part of the correct/incorrect state. I think I need some kind of variable that keeps each text box hidden until I need it. But if I don't find a solution I'll just put each drag item on a separate slide. Still hoping for inspiration!

Antony Snow

Hi Carol,

I have tweaked your slide slightly and rather than using correct and incorrect states for the CICA staff member, I have created drop correct and drop incorrect layers with the state already changed.

On each layer, I have also added a greyed out blank caption over the caption of the caller on the base layer. This acts as a mask so that the user cannot see the next caption text until they have read the CICA response. I have also set the duration of this caption to 5 seconds (which I felt was long enough for the user to read the response) and have added a trigger to close each layer when the timeline of the caption ends.

Finally, I have set the initial state of your custom continue button to hidden and I am controlling when this becomes visible using some off-screen shapes - each are set to hidden but are triggered to change their state to normal when their respective caption has been dropped on the CICA staff. I have therefore added a trigger to your continue button to change its state to normal when the state of ALL off-screen shapes are equal to normal.

Apologies for the long-winded explanation and I hope seeing the attached will make it clearer for you.

Antony