Adobe Captivate Tutorial - Drag-and-Drop Interaction: Sample 1

 

 

1. Create some object in the window.

Adobe Captivate Tutorial on Drag-and-Drop Interaction | Cemtech Training Center Puchong Selangor, Melaka


Now create the Drop Target. To make the drop target to match the object at the center, you have to create an invisible object.
 
2. Duplicate one of the objects and place it on top of the object in the center, and set the Alpha to 0.

Adobe Captivate Tutorial on Drag-and-Drop Interaction | Cemtech Training Center Puchong Selangor, Melaka



Adobe Captivate Tutorial on Drag-and-Drop Interaction | Cemtech Training Center Puchong Selangor, Melaka


Now we will add the interaction.

3. Go to Insert, Launch Drag and Drop Interaction Wizard.

Adobe Captivate Tutorial on Drag-and-Drop Interaction


 Now we will add the interaction. 
 
4. First Shift click on all the drag sources.


 Adobe Captivate Tutorial on Drag-and-Drop Interaction | Cemtech Training Center Puchong Selangor, Melaka
5. At the Add To Type field, click on the Plus sign  Adobe Captivate Tutorial on Drag-and-Drop Interaction | Cemtech Training Center Puchong Selangor, Melaka and name it as Face, then click OK button.

 
Adobe Captivate Tutorial on Drag-and-Drop Interaction | Cemtech Training Center Puchong Selangor, Melaka 
6. After that click on the Next Button


 Adobe Captivate Tutorial on Drag-and-Drop Interaction | Cemtech Training Center Puchong Selangor, Melaka

 

Define a Drop Target.

7. Click on the transparent object you created just now, and click on the Next button again.



Adobe Captivate Tutorial on Drag-and-Drop Interaction | Cemtech Training Center Puchong Selangor, Melaka

 Adobe Captivate Tutorial on Drag-and-Drop Interaction | Cemtech Training Center Puchong Selangor, Melaka

Associate the Drag Source with the Drop Target.

8. Drag any of the Drag Sources to the Drop Target.


Adobe Captivate Tutorial on Drag-and-Drop Interaction | Cemtech Training Center Puchong Selangor, Melaka


 
9. Then click on the Finish button.

Adobe Captivate Tutorial on Drag-and-Drop Interaction | Cemtech Training Center Puchong Selangor, Melaka 

Now we will make sure that the Drop Target will accept only the Drag Sources from a certain category. 

10. Select the transparent object and click Accept button at the Drag and Drop tab.

Adobe Captivate Tutorial on Drag-and-Drop Interaction | Cemtech Training Center Puchong Selangor, Melaka

 
11. The Accepted Drag Sources dialog box will appear. Uncheck the Accept All check box and choose the Replace button. Then click OK button.
 

 Adobe Captivate Tutorial on Drag-and-Drop Interaction | Cemtech Training Center Puchong Selangor, Melaka

  
 Now you can publish your work.

 

 

 

By Ee LeeLing   | LinkedIn

Cempaka Technology Sdn Bhd

Pusat Latihan Komputer Cempaka
~Your HRDC Premiere Training Provider~
Unit 6, Level 4, SetiaWalk Mall (Block K), SetiaWalk, Persiaran Wawasan, Pusat Bandar Puchong, 47160 Puchong, Selangor, Malaysia.
Tel: 603-80684461, Fax: 603-80684240
1-28, Jalan PM4, Plaza Mahkota, 75000 Melaka, Malaysia
Tel: 606-2835955, Fax: 606-2845955