I'm very new to Articulate Storyline. I'm creating a toolkit for people to use in stakeholder analysis. I want people to be able to drag these little icons over each silhouette and also be able to have multiple icons on each silhouette (articulate help attachment)
There is also no correct answer here. Can someone help me with how to do this?
I ultimately want users to be able to create something like Toolkit Base attachment.
What you are wanting to do can be accomplished in Storyline. First, it is important to know what can be done by simply converting to a freeform drag and drop interaction. When converting, Storyline supports a one-to-one or one-to-many drag and drop interaction. Meaning, one drag item per drop target -or- one drag item can be dropped on multiple drop targets.
Your design is a many-to-one which means there are more drag items than there are drop targets, and any drag item can be dropped on any of the available drop targets. This design can be custom developed but not through the built-in convert to freeform feature.
There are a few ways to approach this by leveraging object states and variables. First, you want to name each of your drag items (icons) in the timeline. There's no rule here other than good asset management. I name all drag objects as 'drag1', 'drag2', 'drag3', etc. For you drop targets, name them as 'dropA', 'dropB', 'dropC', etc. Again, there is no rule here and depending on how complex your design is you may want to log naming conventions in a separate document or style guide.
Next, create a new object state for each drag item. Storyline has built-in drag and drop states (Dropped Over, Drop Correct, Drop Incorrect). However, since this interaction does not have any correct combination in terms of 'correct' or 'incorrect' feedback, you'll need create a custom state. Select the 'drag1' object > create new state > name: "dropped" or "on" for example. Next, use the format painter and 'paint' the remaining drag objects.
Next step is a set of T/F variables to account for each drag item. If you have seven (7) drag items, then create seven T/F variables. For consistency, name the variable the same as the object name. This helps you identify which object is being affected.
Finally, it's Trigger time! For each drag item: "Change the state of 'drag1' to 'dropped' when 'drag1' is dropped on 'dropA', or 'dropB' or 'dropC', or..."
Create triggers to adjust variables based on the lesson. And then use those variable values to evaluate the interaction and offer customized feedback.
Again, there are few ways to approach this and without building it out myself the above should get you going in the right direction.
Hi, Sara -- Looks like you are receiving lots of great input here, but if you find that you still need help, you'd be welcome to share your file, as well. All you'd need to do is use the grey ADD ATTACHMENT button in the bottom left of the reply box and you can attach from there.
Also, as you mentioned that you are very new to using SL2, I thought I might pass along the following in case you'd find these resources helpful:
5 Replies
Hi Sara,
What you are wanting to do can be accomplished in Storyline. First, it is important to know what can be done by simply converting to a freeform drag and drop interaction. When converting, Storyline supports a one-to-one or one-to-many drag and drop interaction. Meaning, one drag item per drop target -or- one drag item can be dropped on multiple drop targets.
Your design is a many-to-one which means there are more drag items than there are drop targets, and any drag item can be dropped on any of the available drop targets. This design can be custom developed but not through the built-in convert to freeform feature.
There are a few ways to approach this by leveraging object states and variables. First, you want to name each of your drag items (icons) in the timeline. There's no rule here other than good asset management. I name all drag objects as 'drag1', 'drag2', 'drag3', etc. For you drop targets, name them as 'dropA', 'dropB', 'dropC', etc. Again, there is no rule here and depending on how complex your design is you may want to log naming conventions in a separate document or style guide.
Next, create a new object state for each drag item. Storyline has built-in drag and drop states (Dropped Over, Drop Correct, Drop Incorrect). However, since this interaction does not have any correct combination in terms of 'correct' or 'incorrect' feedback, you'll need create a custom state. Select the 'drag1' object > create new state > name: "dropped" or "on" for example. Next, use the format painter and 'paint' the remaining drag objects.
Next step is a set of T/F variables to account for each drag item. If you have seven (7) drag items, then create seven T/F variables. For consistency, name the variable the same as the object name. This helps you identify which object is being affected.
Finally, it's Trigger time! For each drag item: "Change the state of 'drag1' to 'dropped' when 'drag1' is dropped on 'dropA', or 'dropB' or 'dropC', or..."
Create triggers to adjust variables based on the lesson. And then use those variable values to evaluate the interaction and offer customized feedback.
Again, there are few ways to approach this and without building it out myself the above should get you going in the right direction.
I don't know what you want to do next, but this should do what you have described.
Hi, Sara -- Looks like you are receiving lots of great input here, but if you find that you still need help, you'd be welcome to share your file, as well. All you'd need to do is use the grey ADD ATTACHMENT button in the bottom left of the reply box and you can attach from there.
Also, as you mentioned that you are very new to using SL2, I thought I might pass along the following in case you'd find these resources helpful:
Thanks for your help, everyone! If I have problems, it's great to know I have this community as a resource :)
Delighted to hear you are all set, Sara, and thanks for the update!
This discussion is closed. You can start a new discussion or contact Articulate Support.