




In the city navigation interaction, you can choose your Avatar and then drag and drop the Avatar to different places in the city to get an inside view of the place. You can further click the hotspots to know more about the place.
What is the example intending to do? When should the user use such a theme?
In this example, you will see the use of multi-state objects to change the state of the Avatar based on learner selection, an example of drag to navigate interaction, and use the Object Actions for drop functionality. You will also see how Shared Actions are used to create a hotspot interaction with animated appearance of the hotspot text. You can decide to use all the interactions (Avatar selection, Drag to navigate, and Hotspot text) or decide to use one of them for your course material.



Hello again, Pooja!
I tried to make a similar example to practice but I can’t make the avatar effect decrease in size when approaching the icon. In the effect of the placement object and in the dragging object I have put “Zoom in” but it doesn’t decrease. (Attached image).
How did you achieve it???
Hi Maria,
I’ve covered the steps to build this drag and drop interaction in this webinar recording at around 41 minute mark:
Hello Poojba, thank you very much.
I’ve seen the part you tell me, and is explained how to put the action for the avatar to jump to a slide or another, but I have not seen you explain how to make the avatar decrease in size and approach the icon before jumping to the slide.
A greeting
Hello again, I made it!!
I had to put in 0% in size and opacity…
Thanks
Hi Maria,
You can select the pins (drop targets) and change the size and opacity in the Drag and Drop Inspector to 0%.
Great! 🙂
Very nice project, I love it!
Thank you very much for sharing!
Hi, we’ve fixed the issue. Please try downloading the project now.
The download button is creating an error.
There has been a critical error on your website.
Hi, the issue has been fixed now. Please let. us know if you are still not able to download the project.
That’s a great idea! Will surely implement it for the next interaction 🙂
Thank you so much for this wonderful project. Learning new things with Captivate.
I’m glad you liked it, Manish! 🙂
Thank you, I can definitely use this!
Great! Let me know what modifications you will be making to this interaction to use it in your project
Awesome!! Thank you for sharing.
In order to be able to make such a project, I need to learn the illustrator’s skills.
Thanks, Miho. I have used stock images for this project. You just need some basic editing skills for the stock images.
Thank you for your reply. I want to master editing!
In Japan, school teachers can use Adobe Captivate for three months free of charge in response to COVID-19. So, I share the project sample page for teachers on blog and SNS.
Project looks great, but when I hit the download link, I get this message:
There has been a critical error on your website.
It looks that the download issue has been fixed. Please go ahead and download the project. I just downloaded the same.