Summary: Harness the power of Acrobat Pro to add 3D to your Articulate presentations
Difficulty: Medium

You might have heard about the new Nintendo 3DS, and you have no doubt had a glimpse of a 3D image on a 3D TV or a 3D movie at Disneyland, but how about viewing 3D with Articulate? Well in this post, we are looking at how we can include 3D models into our Articulate presentations, not so that they can be viewed with special glasses (or not), but so that the user can manipulate them, turn them around, look underneath etc.

Garry Hargreaves is our guide today as he helps us to see how we can use Acrobat Pro to leverage the PDF format to include 3D models.

Note that to follow this tutorial, you will need Microsoft Word and Acrobat Pro or Acrobat X. (trial downloads are available on the Adobe site). You’ll also need some project files which you will find here.

I didn’t know Acrobat could do that?

Released in 1993, Adobe’s Acrobat and Portable Document Format (PDF) has become the default global application and the ubiquitous open standard for creating, viewing and sharing rich content. Acrobat supports multiple platforms including most popular mobile devices such as Android and Symbian based systems. PDF popularity is underpinned by being hardware independent whilst retaining the original file appearance and print integrity. Conservative estimates have over a billion PDF files in existence, supported by some 2000 vendors offering PDF related solutions to a user base of some 300 million users. Adobe estimates over ‘200 million PDF documents are publicly available on the web today, along with countless PDF files in government agencies and businesses around the world’.

Articulate web objects and PDFs combined – an underused solution

What is curious about this level of critical mass and market penetration is that many users are yet to take advantage of the substantial interactive capability of Acrobat. Most users disregard or are simply oblivious to authoring functions inherent within Acrobat. For example, Acrobat Pro Extended versions 7 and 8 have the Acrobat 3D Toolkit (3DT) editor. The Toolkit has an impressive array of 3D mesh editing capabilities and was licensed from Right Hemisphere (3DT is/was version 5 of Deep Explorer). Version 9 of Acrobat Pro Extended saw Adobe include their own 3D editor called 3D Review. Both 3D Toolkit and 3D Reviewer allow designers to delete internal parts, unify normals and reduce the size of complex meshes by reducing the number of polygons in the tessellated object. To view these 3D PDFs the end user need only have the free Acrobat Reader (now called Adobe Reader) later than version 7 loaded. Combined with Articulate’s web object feature, it is a simple matter to include 3D perpectives into our eLearning.

Why is 3D function important to Learning professionals?

3D PDFs are ideal for trade and technical courseware such as aerospace, medical, construction, mining, architecture, automotive, engineers, designers, manufactures and anyone dealing with 3D CAD. Previous eLearning paradigms have courseware development following the manufacturing of a prototype – ‘build it and then the courseware will come’. The ability of Articulate eLearning courseware to leverage off 3D PDF files means the training content can now utilize the same CAD data as manufacturer or architects. What does that mean? Training and maintenance based eLearning courseware can be developed in parallel with the physical prototype. In fact the user can access the training content before the physical prototype is completed. Courseware can now mimic the look and feel and operations of complex 3D objects. Previously, clients wishing to view 3D data, plans, mockups, prototypes had to install, even buy, a 3D viewer – of course each application had their own 3D viewer. 3D PDF can, for the most part, fill that need. It’s free, and end user(s) probably already have it installed.

3D PDF + Articulate = eLearning Darwinism

Typically technical training or trade courseware is usually lacking highly engaging eLearning and can resemble eReading. Maintenance manuals and ‘Safe Operating Procedures (SOP) documents usually contain step by step instructions along with a range of static line art imagery enviably in different positions to show the participants the critical aspects – one 3D object can replace all static images. The 3D PDF model can have an infinite number of views, preset perspectives, zoom, look inside, hide and isolate parts and show line art and wire mesh representations. Users can adjust lighting, background colours, textures and materials, part transparency can be changed along with multi-angle cross sections. Animations and exploded views of disassemblies can be added including use of JavaScript for ultimate control over 3D object behaviours. According to Right Hemisphere, ‘3D displays have been shown to be more effective in communicating essential structural and spatial information than 2D art and can replace up to 20 isometric drawings.’ The resulting 3D PDF can be viewed by anyone who has the free Adobe Reader. Adding 3D based learning to existing content provides interactive visualization allowing for compelling transference of complex real world systems and objects. Adobe Acrobat Pro 9 can import both interactive SWFs and video based FLV Flash content including cue points within the FLV. Acrobat Pro Extended version of 9 supports interactive Flash and can be placed as a texture material into an object within a 3D environment. This means if you modeled say an smart phone you can add an interactive map of phone buttons then apply the map to the top of the 3D phone and it would act like a real phone. The addition of 3D PDF content together with Articulate courseware is not just eLearning, but an eEvolution. – eLearning Darwinism.

Example

Before we look at the instructions, let’s look at an example of a 3D PDF embedded into an Articulate presentation. Note that you can move the object around.

View Demo

Note that the demo works with both Internet Explorer and Firefox but not with Google Chrome or Safari

.

How Do You Do It? – 3D tutorial – How to make 3D PDF

Remember that to complete this tutorial you will need:

1. Microsoft Word
2. Acrobat Pro
3. Garry’s project files. Download this zip file and extract it on your local computer. You’ll find a folder entitled 3DPDF containing
   two files, Articulate Poster.jpg and Articulate.u3d and a Button folder containing 18 button PNG images. Make sure this is ready
   before you begin the tutorial.

If you don’t own these programs, you can download trials from the Microsoft and Adobe websites.

In this tutorial we will use a premade 3D model of the Articulate logo. There are many CAD and animation and modelling applications that can produce suitable 3D models. The actual modelling (or building) of the 3D Articulate logo is beyond the scope of this tutorial.

Setting Up A Simple PDF Template

1. Make yourself a simple template in MS Word.
• Open Word
• Select Page Layout -> Size -> A4 page
• Select Page Orientation -> Landscape.
• Add a title. I (Garry) added a solid blue rectangle and placed some white text “Interactive 3D PDF tutorial”. Under Picture
  Tools -> Picture Styles, I selected Simple Frame, White.



You could use any applications with the ability to output a PDF to make your simple template.

2. If you have Acrobat Pro loaded on your machine you have the ability to output your MS Word template as a PDF.
   • Use File -> Print -> select Acrobat PDF
   • Save your word template as 3D Model.PDF.

Insert Your 3D Object

3. Start Acrobat Pro. Go to File ->Open and open up your 3D Model.PDF

   

   Adobe Acrobat Pro only imports a 3D file format call U3D (or Universal 3D file format). This is probably due to what has now been referred to as the ‘GIF Fiasco’ most organisation are loath to use existing file format that are not their own – due to license fees and limited control over the iterations of the third party file format. Adobe traditionally did not have any 3D applications there was no internal 3D file format to leverage off. Therefore Adobe together with some other industry players like Intel, HP, Bentley Systems Boeing and Right Hemisphere come up with an extensible, compressed, open source 3D file format that allows for 3D data exchange regardless of the system. U3D was later adopted as a standard by ECMA as ECMA-363
   

   Note if you own the Adobe Acrobat Pro Extended version of the software you can import a range of other CAD and animation formats directly and Acrobat Pro Extended will automatically do the translation into U3D. Below are the 3D file import capabilities on Acrobat Pro Extended 8 (left) and Acrobat Pro Extended 9 (right):

   

4. Now we will insert the premade mesh of the Articulate logo. Select Tools>Multimedia>3D Tool. Notice the cursor has changed to a cross. We are going drag the window from the top left to the bottom right which the 3D object will occupy. Leave the space on the far right of the screen for our navigation controls.

   

5. When you release your cursor Acrobat will ask you to Browse to your U3D file. In this case Browse to the Articulate.U3D file in
   the project files you downloaded at the beginning of this tutorial. Then check the Show Advanced Options box.
   
   
6. The insert 3D dialog box opens. In the Launch Settings tab, go to the Poster Image area. Here you have the option to Retrieve poster from the default view or Create poster from file. Select Create poster from file. Then Browse -> Articulate Poster.jpg (one of the project files you should already have downloaded)

   

7. Select the 3D tab and change the Background Colour to white. Just below the Background Color check box, make sure the Lighting Scheme drop down menu shows Lights from File and then select OK.

   

8. The Articulate Poster.jpg will appear in the middle of the screen with small blue handles around the image.

   Now go up the Acrobat menu and select the Hand icon. Click on the Articulate Poster.jpg to activate the 3D model inside Acrobat. The Articulate Poster.jpg will be replaced by the 3D model. Now left click on the 3D model and Acrobat will automatically give you a new set of 3D menus to play with.

   Congratulations! You have just made a 3D PDF.

   Each time you open your 3D PDF the Articulate Poster.jpg will appear. As the hand cursor rolls over the Articulate Poster.jpg a small tool tip will pop up hinting Click to activate…Of course you could replace the Articulate Poster.jpg file with a message asking the user to Click Here to Activate the 3D model. The poster is in effect a still image that the viewer sees BEFORE they activate the 3D model.

9. Save as 3D Model2.pdf

Correcting initial orientation

OK did you notice after you activated the 3D model the orientation was wrong? Acrobat seems to have a problem interpreting the original orientation of the 3D mesh. Easily fixed!



10. Use Rotate and Pan icons in the new 3D Menu to drag your model till it looks a little like its orientation in the Articulate poster.jpg or this below screen shot:

    

11. In the middle of the new 3D menu you see Views drop down menu. Select Manage Views -> New View and check the Don’t display the dialog from the Create View button. Select OK.

    

12. Acrobat will offer a default name of ‘New1N. Change this name to ‘Default’, select Rename and then Use As Default. Click OK.

    

13. Let’s test our navigation. Left Drag the model and zoom it anywhere on the screen. Then go to the Views menu in the middle of the new 3D menu and select Default. The model will transition back to your original position.
14. File ->Save. Then Close your 3D Model2.pdf
15. Reopen 3D Model2.pdf again. Using the Hand icon, left click on the Articulate Poster.jpg and notice Acrobat remembers your Default mesh orientation..

Adding Render Modes

16. Let’s add some different Render Modes. Use Rotate and Pan icons to move the model to a new suitable location. Select Model Render Mode icon from the new 3D Menu and select Wireframe. The 3D mesh is now shown in Wireframe mode.

    

17. In the middle of the new 3D menu you see the Views drop down menu. Select Manage Views -> New View and click OK. Rename the ‘New2N name to ‘Wireframe’. Select OK.
18. Save your file 3D Model2.pdf, then close it and reopen the file again.
19. Repeat Steps 16 to 18 until you have the following views in order: Default, Top, Rear, Side, Wireframe and Zoom. For example, for the Top View, choose Model Render Mode -> Solid and drag the model with your mouse until you view it from the top. Now move on to step 17. In the Manage View dialog box use the Move Up and Move Down to put the views in same order as I have listed.

    

Adding Buttons

20. Let’s add some button for end user navigation. Have your model zoomed in like in the picture below. We have six views so we will need six buttons with three modes.

    

21. Go to Tools -> Content ->Button. Drag a button in a spare space on the top right of screen.

    

22. Right click and select All Properties and change the Name and Tooltip to Default View.

    

23. With the Button Properties dialog box still showing, select the Appearance tab and change the Fill Colour to White to match your background.

    

24. With the Button Properties dialog box still showing, select the Options Tab. Change the Layout to Icon Only. Change the Behavior drop down menu to Push.
    

    Changing the Behavior will alter the available States.

25. Select Up -> Choose Icon -> Browse. Change the filetype to PNG and browser to ‘default up.png’ (one of the downloaded project files in the Buttons folder). Select OK
26. Select Down and follow the same procedure to select ‘default down.png’ in the project files. Select OK.
27. Select Rollover and link it to ‘default rollover.png’.



28. With the Button Properties dialog box still showing. Select the Actions tab and view from the Select Action drop down menu, choose Go to a 3D/Multimedia. Use the Add button to add the action. The Select a 3D View dialog box opens. Choose Named view and select Default. Click OK and Close.

    

29. Select the Hand icon and test your Default Button. If all is working use Tools -> Content -> Select Object to select the button again – it will turn blue. Right click the button and copy. Use Control V to paste the new button. Do this five more times till you have six buttons in a row.
30. Shift select all the buttons, right click the selection and choose Align, Distribute or Centre -> Align Right.

    

    Now allocate a different action with the remaining buttons so your buttons will perform Default, Top, Rear, Side, Wireframe and Zoom views. Select a button and repeat from Step 22 and make the necessary changes to each button. There is no need to save and close your PDF after each button but remember to save from time to time.

31. Finally File ->Save. Then close your 3D Model3.pdf. Reopen the file again and test.

Your 3D PDF is now ready to be included as a web object in your Articulate Presenter presentation. You’ll find all the instructions on how to do this in the article Working With PDFs in Articulate Presenter.

Good luck with adding 3D to your Articulate content!

Notes

3D PDFs are not supported on Macs, or on iOS devices (iPad, iPhone, iTouch) or on the PC versions of Google Chrome and Safari.

You may find some of the screenshots or instructions very slightly different according to your version of Acrobat Pro.

I walked through Garry’s steps, one by one and made a few edits where I thought it would make things a little easier to follow. So
you can blame me if you don’t follow!

If you have never worked with 3D objects, I would strongly encourage you to give the tutorial a go. It might open you to other types
of content you could include in your Articulate presentations.

About our guest contributor, Garry Hargreaves

Garry is currently the Corporate Solutions Manager, at SkillsTech Australia. SkillsTech Australia, Queensland’s largest public provider of trade training was created to boost the state’s skilled workforce and build the capacity of the vocational education and training sector.

Garry has extensive experience managing eLearning based projects ensuring delivery of client-focused solutions. He has over twenty years’ experience in information technology and in education sectors, coupled with a real passion for Learning regardless of the modality. He has published numerous articles in National Multimedia/CAD magazines and has acknowledgments in two international publications as a technical writer on the topic of 3D Animation.

Garry’s expertise includes strong people and project management skills, excellent technical knowledge and implementation focus.

Most recently, Garry has served as a Judge on the Brandon Hall Global eLearning Awards since 2006-2010. His specialities include Education, Training, Custom Built Self-paced Online Content, Learning Management Systems (LMS), 3D, and Interactive 3D PDFs.

He is also an active Articulate forum member since Nov 2006.

Many, many thanks to Garry for taking the trouble to write up this tutorial!

I, for one, have found it very useful.

This post is tagged