Tutorial. Getting Started. Volume II: 3D in WireFusion 5

Transcription

1 Turial Getting Started Volume II: 3D in WireFusion 5

2

3 Contents INTRODUCTION...1 REQUIREMENTS...1 User Requirements...1 System Requirements...1 RESOURCE FILES...1 GENERAL WORKFLOW...2 PHOTOS...5 PART I...6 3D MODELING IN 3DS MAX...6 Image Reference...6 Polygon Modeling...8 Materials...18 Animations...21 Export...22 PART II...25 WIREFUSION...25 Import the 3D model...25 Tuning of the 3D model...26 Interface...34 Navigation...36 Reset Camera...40 Touch Sensors...41 Animations I Simple Logic...43 Animations II Advanced Logic...44 Adding Hotspot Labels...48 Optimize Project...57 Publish...62 PART III...64 HTML EDITING IN DREAMWEAVER...64 SUMMARY...66

4

5 Introduction Introduction Welcome Getting Started, Volume II. This turial will guide you through the entire process of creating a WireFusion Web3D presentation - from 3D modeling a final presentation running on the web. We will create an interactive product presentation of a tape rule, which will contain e.g. object animations, uch sensors, user interface and real-time shadows. The 3D modeling part in this turial is quite brief, as it is expected that you are already familiar with 3D modeling. Requirements User Requirements This turial requires that you are familiar with 3D modeling, using either Audesk 3ds Max, or any other 3D authoring ol capable of exporting X3D or VRML (VRML2/VRML97). It is also highly recommended that you work through the WireFusion turial Getting Started, Volume I, in which you will learn the basics of WireFusion. System Requirements You will need the following ols in order complete this turial: A 3D authoring ol capable of exporting X3D or VRML (VRML2/VRML97). In this turial we use Audesk 3ds Max 7. A graphics software that can save pictures in JPEG, transparent GIF and transparent PNG. In this turial we use Adobe Phoshop. Any edition of WireFusion (or later). An HTML edir and FTP client. In this turial we use Adobe Dreamweaver. Resource Files The resource files for this turial can be found in: [Path]/My Documents/WireFusion/resources/turials/tape_rule/ 1

6 Getting Started Volume II: 3D Turial General Workflow The general workflow for this turial is: 1. Take phos of the tape rule (Figure 1). Figure 1: Taking phos of the tape rule 2. Model, texture and animate the tape rule in Audesk 3ds Max. Export from 3ds Max VRML (Figure 2). Figure 2: Modeling of the tape rule 2

7 General Workflow 3. Import the 3D (VRML) model WireFusion. In WireFusion, tune the 3D model and its behaviors, create interactivity and export the presentation as a Java Applet (Figure 3). Figure 3: Adding interactivity and publishing from WireFusion 4. Edit HTML page with Adobe Dreamweaver. Upload web server (Figure 4). Figure 4: Editing and uploading in Dreamweaver 3

8 Getting Started Volume II: 3D Turial 5. Test online in a web browser (Figure 5). Figure 5: Testing in the browser 4

9 Phos Phos To create a nice realistic 3D model from a real physical object, we generally start by taking pictures of the object (Figure 1). We then use these pictures for the following purposes: As reference images in the 3D authoring ol while modeling. We take phos from the Front, Top, Back, Botm, Left and Right views. Possibly also from different object configurations. As textures that we apply on the 3D model. NOTE: The picture quality should be as good as possible, which means no barrel disrtion and as little reflections as possible. In order capture small objects and details, and get sharp pictures, we recommend using a macro lens. All the phos should be taken in the same light conditions. Image quality is a key facr for a good result. 5

10 Getting Started Volume II: 3D Turial Part I 3D Modeling in 3ds Max NOTE: If you want skip the 3D modeling part you can go directly the WireFusion section and load a ready-made model. If you want examine the final MAX file in 3ds Max, then load the following: [Path]/My Documents/WireFusion/resources/turials//tape_rule/tape_rule.max Image Reference In order build the 3D model as exact as possible, we will use reference images of the tape rule as background images. However, rather than using the built-in Viewport Background function, found in 3ds Max, we will use another method instead: 1. From the Create panel, create a Box primitive. 2. Press M open the Material Edir, and then load 'help-1-1.jpg' as diffuse material (Figure 6). [Path]/My Documents/WireFusion/resources/turials/tape_rule/help-1-1.jpg Figure 6: Loading a reference image 3. To display materials on the surfaces in the viewports, choose Material Edir > Material > Select Map in Viewport 6

11 3D Modeling in 3ds Max 4. With the box selected, click the Assign Material Selection butn. 5. In the Modify panel, edit the size of the box. Set Width 512 and Length 415. NOTE: In order have no disrtion, the box should have the same size (proportions) as the picture, i.e. 512x Convert the box polygon by right clicking the box, then choose Convert : Convert Editable Poly 7. Erase all faces, except the front face (Figure 7). Figure 7: Erasing faces 8. Create four quad reference images in tal; for the Front View, the Back view, the Left view and the Right view. Load 'help-2-1.jpg', 'help-3-1.jpg' and 'help-4-1.jpg'. For each quad, the tape rule should have the same dimensions. 9. Select all the quads. In the Display panel, unmark the Show Frozen in Gray checkbox. 10.Open the Layers window, and add a new layer by choosing Create New Layer. Rename the layer 'references' and click on Freeze (Figure 8). Now the reference images cannot be selected nor moved. 7

12 Getting Started Volume II: 3D Turial Figure 8: Freezing the quads in a layer Polygon Modeling 1. Select the Front View viewport and click on the Min/Max Toggle butn (or press ALT+W). 2. Most objects can be built from a box primitive. However, in this case we will start with a cylinder primitive. Create a Cylinder with only one height segment and 18 sides. 3. Press ALT+X make the cylinder translucent, and press F4 display the edges (Figure 9). 8

13 3D Modeling in 3ds Max Figure 9: A translucent cylinder with edges 4. Convert the cylinder Poly. With the help of the reference image, build the front side of the tape rule by moving the vertices (Figure 10). Figure 10: Vertices moved fit the reference image 9

14 Getting Started Volume II: 3D Turial 5. Bevel the front side and the backside of the tape rule, and arrange the vertices positions (Figure 11). Figure 11: Bevel the front side 6. Use the Slice Plane command cut the faces (Figure 12). Figure 12: Cutting faces with the Slide Plane 10

15 3D Modeling in 3ds Max 7. Extrude the faces, and move the points get the look in Figure 13. Figure 13: Extruding faces 8. To create a hole for the butn, we connect edges gether. Then Chamfer the new edges and finally Bevel the built surface (Figure 14). Figure 14: Creating the hole for the butn 11

16 Getting Started Volume II: 3D Turial 9. Extrude create the cut in the shell, as seen in Figure 15. Figure 15: Extruding polygons 10.Create the belt clip on the backside of the tape rule from an extruded Line. Use the Shell command aumatically generate the width of the belt clip (Figure 16). Figure 16: Creating the belt clip TIP: Useful commands create the geometry are Edge Chamfer, Edge Connect and Bevel. 12

17 3D Modeling in 3ds Max 11.Use the FFD (Free-Form Deformation) command transform the belt clip (Figure 17). We will use an alpha map later on simulate the holes in the belt clip. TIP: Try not use Boolean operations create holes. It generally creates non-smooth surfaces. Figure 17: Free-Form Deformation 12.Create the butn/lock of the tape rule as a separate object (Figure 18). Start with a Box primitive and then deform it. 13

18 Getting Started Volume II: 3D Turial Figure 18: Creating the butn/lock 13.To create the cord, use Splines > Line (Figure 19) Then use Extrude and Shell deform it. Figure 19: Creating the cord using a line spline 14.We are almost finished with the geometry process. Control the polygon counts, by choosing Utilities panel > Polygon Counter (Figure 20). The default polygon budget in 3ds Max is polygons, which is a good guideline for Web3D presentations created with Wire- Fusion. 14

19 3D Modeling in 3ds Max Figure 20: Using the Polygon Counter control the number of polygons used 15.The tape is created from a modified Box, while the end of the tape is created from Cylinders and a multi-extruded Box (Figure 21). Figure 21: Creating the tape 15

20 Getting Started Volume II: 3D Turial 16.When assigning NURMS Subdivision, there are a lot of artifacts (Figure 22). To fix the artifacts, use the Separate by Smoothing Groups. In the Smoothing Groups panel, assign the same number faces belonging the same surface. Figure 22: NURMS Subdivision with artifacts After assigning the Smoothing Groups correctly you should get a result similar Figure 23. Figure 23: Smoothing groups assigned 16

21 3D Modeling in 3ds Max The fact that we applied NURMS Subdivision has doubled the triangle count of the scene. We now have about polygons in the scene. However, we are still in our initial budget, which is polygons (Figure 24). Figure 24: polygons and smooth result 17

22 Getting Started Volume II: 3D Turial Materials Even though WireFusion is not limited any specific texture size, you should always keep in mind that texture maps should be as small as possible. Large textures will slow down the presentation and increase initial startup time. WireFusion has no upper limit for the dimensions of the texture maps either, but we recommend using the power of 2, e.g. 512X128, 256x256 etc. This rule generally improves memory allocation, and speeds up the presentation. Figure 25: Creating a texture map of 512x128 in Adobe Phoshop 1. Use UVW Map or UnWrap UVW arrange the position of the textures (Figure 26). Figure 26: Using UVW Mapping 2. Instead of making a hole in the geometry of the belt clip, we will use a transparent texture map (Figure 27). Save the file as a transparent PNG-8 (8-bits) file (PNG-24 generates o 18

23 3D Modeling in 3ds Max big files). The WireFusion 3D engine supports both Bilinear Filtering and MIP Mapping improve the texture rendering, so even low quality alpha channels can be well rendered. Figure 27: Using an alpha map simulate holes TIP: You should always keep the original textures (in Phoshop PSD format) in case you have change or modify them in WireFusion later on. 3. You can display (preview) the alpha channel in 3ds Max by using both the Diffuse and Opacity channels. In the Opacity > Bitmap Parameters menu, select Mono Channel Output > Alpha. 4. Use the Multi/Sub-Object Material assign different textures the different faces of the tape rule (Figure 28). 19

24 Getting Started Volume II: 3D Turial Figure 28: Using Multi/Sub-Object Material 20

25 3D Modeling in 3ds Max Animations We will animate three elements in the scene using the Au Key function; we will animate the butn, the belt clip and the tape. 1. To create an animation, click the Au Key butn. Change the current frame on the Time Slider, then transform the object you want animate (Figure 29). Figure 29: Using Au Key for animations 2. The butn object is a simple translation, while the belt clip is a vertex animation. 3. For the tape animation we want both the tape object and the tape end object be animated. Instead of having two separate animations we link the objects gether. We make the tape object a Parent the tape end object, which becomes a Child. To link the objects, use the Select and Link function (Figure 30). When you move the parent object, then the child object follows. If you move the child, then the parent is not affected. 21

26 Getting Started Volume II: 3D Turial Figure 30: Linking the tape and the tape end as child and parent Export 1. Before exporting the final model, we center the objects according the origin of the coordinates, also known as Center of the Universe in 3ds Max (Figure 31). Figure 31: Center the model 22

27 3D Modeling in 3ds Max 2. Rename the objects in your model meaningful names. It will make it easier when working in WireFusion. NOTE: We are not using light sources in this project. We will use reflection maps in WireFusion instead. 3. Add a Target Camera your scene and position the target in the Center of the Universe (Figure 32). This camera will be the default camera used in WireFusion later on. Figure 32: A Target Camera added the scene 4. To export the model, choose File > Export. Choose VRML97 as file type. Save the VRML file in the same folder as the textures. 5. In the VRML97 Exporter dialog (Figure 33), select the Normals checkbox ( export the smoothing groups informations) and the Coordinate Interpolars checkbox ( export the belt clip animation). Unmark all the other parameters, and click OK. 23

28 Getting Started Volume II: 3D Turial Figure 33: VRML 97 Exporter dialog Now the VRML file has been exported and it is time start working in WireFusion. 24

29 WireFusion Part II WireFusion Import the 3D model Now it is time launch WireFusion. You can optionally keep 3ds Max open, as it is possible re-import the 3D scene in case you would need modify the original scene in 3ds Max. 1. From Objects > 3D, insert a 3D Scene object in the Script Area (Figure 34). Figure 34: Inserting a 3D Scene object 2. When dropping the object you have choose what type of 3D model you intend import; either a 3D Object (Examine mode) or a 3D World (Walk mode). From the Load Option dialog, choose 3D Object and click OK (Figure 35). 25

30 Getting Started Volume II: 3D Turial Figure 35: Choosing the type of 3D model load 3. Load the VRML file 'tape_rule.wrl': [Path]/My Documents/WireFusion/resources/turials/tape_rule/tape_rule.wfp Tuning of the 3D model When the 3D Scene dialog opens, you will find a Preview window in the middle of the dialog containing your 3D model (Figure 36). NOTE: If you do not see anything in the Preview window, then you probably have not added a camera in 3ds Max before exporting. Make sure add a camera before exporting, or let WireFusion add one for you when importing by selecting the Generate default camera checkbox. 26

31 WireFusion Figure 36: 3D Scene dialog opened 4. In the olbar, set the Target Area size for the 3D Scene object (and Preview window size). Set the Width 400 and Height 400 (Figure 37). Figure 37: The 3D Scene olbar 5. In the Navigation panel > Navigation Speed, set Zoom and Pan speed 20, and the Friction slider 30 (Figure 38). To test the settings, try navigating in the Preview window using the mouse. 27

32 Getting Started Volume II: 3D Turial Figure 38: Navigation settings 6. In the Rendering panel > Renderer, from the drop down menu, choose Reflection as renderer type. Then load and use 'ref4.jpg' as Reflection Map (Figure 39). [Path]/My Documents/WireFusion/resources/turials/tape_rule/ref4.jpg Figure 39: Choosing renderer 28

33 WireFusion 7. A nice feature in WireFusion is the real-time shadows. To add shadows your scene, in the Rendering panel > Shadow, select the Shadow On checkbox. Then make the following settings for the shadows (Figure 40): Opacity = 70 Blur = 5 Quality = 3 Height Intensity = 10 Light Source > Height = 1400 Light Source > X Position = 1500 Light Source > Z Position = 3000 Shadow Plane > Height = 0 Shadow Plane > Size = 2500 Figure 40: Adding real-time shadows the scene 8. In order work with an object and change settings for it you first have select the object. In the Objects view, select the object 'belt_clip_0' (Figure 41). 29

34 Getting Started Volume II: 3D Turial Figure 41: Selecting an object from the Objects view 9. When the object is selected, in the Object panel, change the Glossiness value 90 (Figure 42). This will increase the reflection on the belt clip. Figure 42: Setting the glossiness value 10.For the 'belt_clip_1' object, set the Glossiness value 50. We choose a lower reflection on the inner side of the belt clip. 11.To avoid that a user zooms in o much, i.e. so that the inside of the tape rule can be seen, we can set camera restrictions for a selected camera. In the Cameras view, select 'Camera01' (Figure 43). 30

35 WireFusion Figure 43: Selecting a camera 12.In the Preview window, zoom-in the tape rule so that it covers the window as seen in Figure 44. Figure 44: Zooming in 13.Without changing anything in the Preview window, in the Camera panel > Zoom-In Sp, click the Set butn (Figure 45). 31

36 Getting Started Volume II: 3D Turial Figure 45: Setting the zoom-in sp 14.In the Preview window, zoom-out the tape rule as seen in Figure 46. Figure 46: Zooming out 15.Without changing anything in the Preview window, in the Camera panel > Zoom-Out Sp, click the Set butn. 16.By default, all animations in the 3D scene will aumatically start, and loop. To turn off the au-run, we first have select all the animations. In the Animations view, select all animations (Figure 47). 32

37 WireFusion Figure 47: Selecting all animations in the Animations view 17. In the Animation panel, unmark the Loop at Startup checkbox (Figure 48). Figure 48: The Animation panel NOTE: You can at any time re-import the 3D model (the VRML file). This is useful e.g. if you have made changes or adjustments in 3ds Max. To do this, click the Replace butn in the olbar. In most situations the Replace function preserves all the parameters, but if you create new Multi/Sub Object materials the Replace function will not operate correctly. In those cases, uncheck the Keep old Object settings. 18. We are ready for now in the 3D Scene dialog. Click the OK butn at the botm of the dialog close it. Position the 3D Scene Target Area in (0,0). This is done in the Properties view > Target Area (Figure 49) 33

38 Getting Started Volume II: 3D Turial Figure 49: Setting X and Y position Interface We will now set up the basic look and interface for our presentation. 1. The presentation shall have a window of 400x450 pixels. Choose Project > Properties from the program menu. Set the Stage Width 400 and the Stage Height 450. Also, set the Frame Rate (fps) 15 (Figure 50). NOTE: Setting the frame rate 15 means that the presentation will try playback at a maximum of 15 frames per second. The reason for this value is that 15 frames per second is normally sufficient for a 3D presentation like the one in this turial, and using a higher value will only consume unnecessary CPU time. Figure 50: Scene Properties dialog 2. In Adobe Phoshop, create a user interface for the 3D presentation. We have used a transparent PNG (24-bit) get smooth results (Figure 51). 34

39 WireFusion Figure 51: Creating user interface in Phoshop 3. In WireFusion, insert an Image object. Load the user interface image 'nav.png': [Path]/My Documents/WireFusion/resources/turials/tape_rule/nav.png 4. Rename 'Image 1' 'Navigation' and position the image in (0,294) (Figure 52). Figure 52: Navigation image inserted 5. Insert an Image object. Load the background image 'background.png': 35

40 Getting Started Volume II: 3D Turial [WireFusion Path]/resources/turials/tape_rule/background.png 6. Rename 'Image 1' 'Background' and position the image in (0,0). 7. Reorder the layers in the Layers view. Position the 'Background' in the botm layer. Unmark the Activate checkbox and select the Stamp Background checkbox (Figure 53). Figure 53: Changing the layer order NOTE: The Background image will be static in your presentation and will not cover any moving graphics. Therefore you will save CPU time and increase the performance by deactivating the image and by stamping it in the background. Navigation We normally use the mouse for navigating a 3D scene. However, in this presentation will give the user the option use navigation butns for rotating the scene. TIP: Remember save your project from time time. 1. From the Objects > Widgets folder, insert a Butn object. When the Butn dialog opens, select the Advanced Mode checkbox. This allows you load your own butn graphics. In the Up panel, click the Change Graphics butn and load 'up1.png' (Figure 54): [Path]/My Documents/WireFusion/resources/tape_rule/butn_up1.png 36

41 WireFusion Figure 54: The Butn dialog 2. Still in the Butn dialog, in the Down panel, select the Enable checkbox. Click the Change Graphics butn and load 'butn_up2.png' (Figure 55). Click OK close the Butn dialog. Figure 55: The Butn dialog 3. Rename 'Butn 1' 'Up'. 4. Insert a second Butn object. In the Up panel, load 'butn_down1.png'. In the Down panel, load 'butn_down2.png'. Click OK close the dialog. 5. Rename 'Butn 1' 'Down'. 37

42 Getting Started Volume II: 3D Turial 6. Insert a third Butn object. In the Up panel, load 'butn_left1.png'. In the Down panel, load 'butn_left2.png'. Click OK close the dialog. 7. Rename 'Butn 1' 'Left'. 8. Insert a fourth Butn object. In the Up panel, load 'butn_right1.png'. In the Down panel, load 'butn_right2.png'. Click OK close the dialog. 9. Rename 'Butn 1' 'Right'. 10.Insert a fifth Butn object. In the Up panel, load 'butn_reset1.png'. In the Down panel, load 'butn_reset2.png'. Click OK close the dialog. 11.Rename 'Butn 1' 'Reset'. 12.Insert a sixth Butn object. In the Up panel, load 'butn_labels1.png'. In the Down panel, load 'butn_labels2.png'. Click OK close the dialog. 13.Rename 'Butn 1' 'Labels'. 14.Position the Target Areas for the Butn objects as follows (Figure 56): 'Up' at X:39 and Y:389 'Down' at X:39 and Y:423 'Left' at X:21 and Y:407 'Right' at X:55 and Y:407 'Reset' at X:100 and Y:395 'Labels' at X:164 and Y:390 Figure 56: Butn objects re-positioned 38

43 WireFusion 15.Connect (Figure 57): 'Up' > Out-ports > Butn Clicked '3D Scene 1' > In-ports > Navigation > Rotate > -X 'Down' > Out-ports > Butn Clicked '3D Scene 1' > In-ports > Navigation > Rotate > X 'Left' > Out-ports > Butn Clicked '3D Scene 1' > In-ports > Navigation > Rotate > -Y 'Right' > Out-ports > Butn Clicked '3D Scene 1' > In-ports > Navigation > Rotate > Y TIP: Remember use the Wire Crear when connecting objects. It speeds up the wiring process a lot. Figure 57: Butn objects connected the 3D Scene object 16.For each navigation butn; 'Up', 'Down', 'Left' and 'Right', in the Properties view, set the Repeat rate 50 (Figure 58). This means that the Butn object will send out 50 events per second when the butn is clicked (and held). Change this value if you want adjust the rotation speed. 39

44 Getting Started Volume II: 3D Turial Figure 58: Setting the butn repeat rate 17.Press F7 preview the presentation. You should now be able use the navigation butns rotate the tape rule. Reset Camera We want be able reset the camera view in our presentation. There is an option in Wire- Fusion that allows you have a glide (animation) from the current view a preset camera view. 1. Open the 3D Scene dialog. Select 'Camera01' in the Cameras view, then open the Camera panel. In the Camera Animation section, set the Speed 1500 (Figure 59). Click OK close the 3D Scene dialog. Figure 59: Setting the camera animation speed 40

45 WireFusion NOTE: The camera animation speed, i.e. the speed with which the camera glides from the current view a predefined view, depends on the size of your 3D scene. Therefore you might get different results on different 3D scenes, and you might need try your way out. 2. Connect (Figure 60): 'Reset' > Out-ports > Butn Clicked '3D Scene 1' > In-ports > Camera > Set ''Camera01'' Figure 60: Reseting the camera view 3. Press F7 preview the presentation. You should now be able reset the camera by clicking the Reset butn. Touch Sensors Our 3D scene contains animations and we will trigger those animations by clicking on uch sensors. Any object (shape) in your 3D model can be configured be a uch sensor. This is done in the 3D Scene dialog. In our presentation we will have three uch sensors; the belt clip, the butn, and the tape end. 1. Open the 3D Scene dialog. Select 'belt_clip_0' in the Objects view, then open the Object panel. Select the Show Touchsensor Ports checkbox and the Enable Touchsensor checkbox (Figure 61). 41

46 Getting Started Volume II: 3D Turial Figure 61: Making a uch sensor of the belt clip shape 2. Select 'butn' in the Objects view, then open the Object panel. Select the Show Touchsensor Ports checkbox and the Enable Touchsensor checkbox. 3. Select 'tape_end' in the Objects view, then open the Object panel. This time, select only the Show Touchsensor Ports checkbox, and not the Enable Touchsensor checkbox. Click OK close the 3D Scene dialog. New in- and out-ports, for the newly created uch sensors, will now be available in the 3D Scene object (Figure 62). Both the 'belt_clip_0' and the 'butn' uch sensors are enabled at presentation startup, while the 'tape_end' uch sensor is disabled. Figure 62: New uch sensor out-ports added 42

47 WireFusion Animations I Simple Logic In the previous section we created uch sensors, which we will use trigger our animations with. In this first animation section we will trigger and run the belt clip animation using a rather simple logic. The logical scheme looks like this: Click the 'belt_clip_0' uch sensor with the mouse, which triggers a Progressor object run. The Progressor object runs and counts from in 1 second. The numbers (0-100) from the Progressor is sent the 3D Scene object and runs the animation. 1. From the Objects > Logic folder, insert a Progressor object. When the Progressor dialog opens, select the Advanced Mode checkbox. Keep the default values, but change the At Startup option Do nothing, and select the third Output Curve option by marking its radiobutn (Figure 63). Figure 63: Progressor dialog 2. Rename 'Progressor 1' 'Run belt_clip animation'. 3. Connect (Figure 64): '3D Scene 1' > Out-ports > Touch Sensors > ''belt_clip_0'' > Mouse Press 'Run belt_clip animation' > In-ports > Run 'Run belt_clip animation' > Out-ports > Progress [Number] '3D Scene 1' > In-ports > Animations > ''belt_clip-timer'' > Set Animation Fraction [Number] 43

48 Getting Started Volume II: 3D Turial Figure 64: Logics for running the belt clip animation 4. Press F7 preview the presentation. Clicking the belt clip will now trigger the animation run. Animations II Advanced Logic In this second animation part we will create a more advanced logic for how the other animations should be triggered, and, how and when they should run. The logical scheme looks like this: Clicking the 'butn' uch sensor with the mouse will (1) trigger a first Progressor object run, and, (2) disable the 'butn' uch sensor. The Progressor object runs and counts from in 1 second. The numbers (0-100) from the Progressor are sent the 3D Scene object, which will run the 'butn' animation. When the Progressor has finished, it will start and run a second Progressor that also counts from in 1 second. The numbers (0-100) from the second Progressor is sent the 3D Scene object, which will run the 'tape' animation. When the second Progressor has finished, it will enable the 'tape_end' uch sensor. NOTE: It is not possible click the 'butn' uch sensor at this stage, as it has been disabled. However, the 'tape_end' uch sensor has now been enabled and can be clicked. Clicking the 'tape_end' uch sensor with the mouse will (1) trigger a third Progressor object run, and, (2) disbable the 'tape_end' uch sensor. The Progressor object runs and counts from in 1 second. The numbers (100-0) from the Progressor are sent the 3D Scene object, which will run the 'tape' animation backwards. When the Progressor has finished, it will start and run a fourth Progressor that also counts from in 1 second. 44

49 WireFusion The numbers (100-0) from the fourth Progressor is sent the 3D Scene object, which will run the 'butn' animation backwards. When the fourth Progressor has finished, it will enable the 'butn' uch sensor. 1. Insert two Progressor objects. For both Progressor objects, keep the default values, but change the At Startup option Do nothing. 2. Rename: 'Progressor 1' 'Run butn animation - up' 'Progressor 2' 'Run tape animation - in' 3. Connect (Figure 65): '3D Scene 1' > Out-ports > Touch Sensors > ''butn'' > Mouse Press 'Run butn animation - up' > In-ports > Run '3D Scene 1' > Out-ports > Touch Sensors > ''butn'' > Mouse Release '3D Scene 1' > In-ports > Touch Sensors > ''butn'' > Disable 'Run butn animation - up' > Out-ports > Progress [Number] '3D Scene 1' > In-ports > Animations > ''butn-timer'' > Set Animation Fraction [Number] 'Run butn animation - up' > Out-ports > Finished 'Run tape animation - in' > In-ports > Run 'Run tape animation - in' > Out-ports > Progress [Number] '3D Scene 1' > In-ports > Animations > ''tape-timer'' > Set Animation Fraction [Number] 'Run tape animation - in' > Out-ports > Finished '3D Scene 1' > In-ports > Touch Sensors > ''tape_end'' > Enable 45

50 Getting Started Volume II: 3D Turial Figure 65: The first animation part 5. Press F7 preview the presentation and test what you have accomplished so far. Clicking the butn will trigger the animations run. 6. Insert two more Progressor objects. For both Progressor objects, in the dialogs, change the Start Value 100, and the Sp Value 0. Change the At Startup option Do nothing. 7. Rename: 'Progressor 1' 'Run butn animation - down' 'Progressor 2' 'Run tape animation - out' 8. Connect (Figure 66): '3D Scene 1' > Out-ports > Touch Sensors > ''tape_end'' > Mouse Press 'Run tape animation - out' > In-ports > Run '3D Scene 1' > Out-ports > Touch Sensors > ''tape_end'' > Mouse Release '3D Scene 1' > In-ports > Touch Sensors > ''tape_end'' > Disable 'Run tape animation - out' > Out-ports > Progress [Number] '3D Scene 1' > In-ports > Animations > ''tape-timer'' > Set Animation Fraction [Number] 'Run tape animation - out' > Out-ports > Finished 'Run butn animation - down' > In-ports > Run 46

51 WireFusion 'Run butn animation - down' > Out-ports > Progress [Number] '3D Scene 1' > In-ports > Animations > ''butn-timer'' > Set Animation Fraction [Number] 'Run butn animation - down' > Out-ports > Finished '3D Scene 1' > In-ports > Touch Sensors > ''butn'' > Enable Figure 66: The animation logic ready 9. Press F7 preview the presentation. Try first click the butn, which will release the lock and have the tape moving in. Then, try click the end of the tape, which will move the tape out again and then lock it by moving the butn down. 47

52 Getting Started Volume II: 3D Turial Adding Hotspot Labels We will point out the hotspots (the uch sensors) in our presentation and will briefly describe what they do by showing a label next them (Figure 67). Figure 67: Hotspot labels added 1. Insert an Image object. Load the image 'arrows.png': [Path]/My Documents/WireFusion/resources/tape_rule/arrows.png 2. Rename 'Image 1' 'Arrows', position the image in (0,0) and disable it by unmarking the Activate checkbox in the Layers view (Figure 68). 48

53 WireFusion Figure 68: Deactivating 'Arrows' at presentation startup 3. Double click the 3D Scene object open its dialog. In the Camera panel, add a new camera by clicking the Add Camera butn. Name the new camera 'Labels' (Figure 69). Change the Camera Animation > Speed NOTE: The added camera will get the same settings as the default camera, or the camera that is currently selected in the Cameras view when clicking the Add Camera butn. Figure 69: New camera added, named 'Labels' 4. To make a good 3D composition between camera and object, select the Show Background checkbox (Figure 70). You will now see a preview of the Stage window in the 3D preview window. 49

54 Getting Started Volume II: 3D Turial Figure 70: Making the stage graphics visible in the 3D Scene preview 5. Use the mouse rotate, zoom and pan the object in the right position (Figure 71). When you are satisfied, click the Set Camera butn (Figure 72). Click the OK butn close the 3D Scene dialog. Figure 71: Positioning the object 50

55 WireFusion Figure 72: Setting the camera 6. Insert a Dummy object, a Number object and a Progressor object. In the Progressor dialog, select the Advanced Mode checkbox, set the Time Interval 8 seconds and select the third Output Curve option by marking its radiobutn. 7. Rename (Figure 73): 'Number 1' 'Reset animations' 'Progressor 1' 'Fade in/out' Figure 73: Objects inserted and renamed 51

56 Getting Started Volume II: 3D Turial 8. When the Labels butn is clicked, send a pulse the Dummy object. Connect (Figure 74): 'Labels' > Out-ports > Butn Clicked 'Dummy 1' > In-ports > Push Pulse NOTE: The Dummy object works as a repeater, and only passes on the pulse coming from the Butn object. We could optionally have connected the Butn object directly the other objects if we wanted, but the benefit of using the Dummy object in between is that we can then trigger the same function from elsewhere. Figure 74: Sending a pulse the Dummy object 9. From the Dummy object, have the 'Arrows' image activated and faded in. Connect (Figure 75): 'Dummy 1' > Out-ports > Pulse Pushed 'Arrows' > In-ports > Activate 'Dummy 1' > Out-ports > Pulse Pushed 'Fade in/out' > In-ports > Run 'Fade in/out' > Out-ports > Progress [Number] 'Arrows' > In-ports > Set Opacity [Number] Figure 75: Activating and fading in the Image object 52

57 WireFusion 10.When the 'Arrows' image has been faded out, disable the Image object. Connect (Figure 76): 'Fade in/out' > Out-ports > Finished 'Arrows' > In-ports > Deactivate Figure 76: Deactivating the Image object 11.From the Dummy object, reset all the animations (i.e. set the animation fraction 0). Connect (Figure 77): 'Dummy 1' > Out-ports > Pulse Pushed 'Reset animations' > In-ports > Push Value 'Reset animations' > Out-ports > Value Pushed [Number] '3D Scene 1' > In-ports > Animations > ''butn-timer'' > Set Animation Fraction [Number] 'Reset animations' > Out-ports > Value Pushed [Number] '3D Scene 1' > In-ports > Animations > ''belt_clip-timer'' > Set Animation Fraction [Number] 'Reset animations' > Out-ports > Value Pushed [Number] '3D Scene 1' > In-ports > Animations > ''tape-timer'' > Set Animation Fraction [Number] 53

58 Getting Started Volume II: 3D Turial Figure 77: Resetting the animations 12.From the Dummy object, set the 'Labels' camera. Connect (Figure 78): 'Dummy 1' > Out-ports > Pulse Pushed '3D Scene 1' > In-ports > Camera > Set ''Labels'' Figure 78: Switching camera view 54

59 WireFusion 13.From the Dummy object, disable the 3D rendering by switching Pause mode. Connect (Figure 79): 'Dummy 1' > Out-ports > Pulse Pushed '3D Scene 1' > In-ports > Pause NOTE: Pause mode temporarily sps the 3D rendering, making it impossible interact with the model. The Pause mode can also be used when you want show, for example, animations in front or behind the 3D, as the 3D will not consume any CPU while paused. Figure 79: Switching Pause mode 14.From the Dummy object, reset the uch sensors their initial states. Connect (Figure 80): 'Dummy 1' > Out-ports > Pulse Pushed '3D Scene 1' > In-ports > Touch Sensors > ''butn'' > Enable 'Dummy 1' > Out-ports > Pulse Pushed '3D Scene 1' > In-ports > Touch Sensors > ''tape_end'' > Enable 55

60 Getting Started Volume II: 3D Turial Figure 80: Resetting the uch sensors 15.When the 'Arrows' image has been faded out, set the 'Camera01' camera. Connect (Figure 81): 'Fade in/out' > Out-ports > Finished '3D Scene 1' > In-ports > Camera > Set ''Camera01'' Figure 81: Setting the default camera 16.When the 'Arrows' image has been faded out, enable the 3D rendering again by resuming it. Connect (Figure 82): 'Fade in/out' > Out-ports > Finished '3D Scene 1' > In-ports > Resume 56

61 WireFusion Figure 82: Resuming from Pause mode 17.Press F7 preview the presentation. Click the Labels butn test the newly added function. 18.Press CTRL+F7 preview the presentation in your default web browser. Make sure all function and features are working. Optimize Project Before saving and publishing the project we will clean it up a bit, making it easier navigate and read the project. 1. Insert a Scene object. On the question have a Target Area for your Scene object, answer Yes (Figure 83), then rename the object from 'Scene 1' 'Butns'. Figure 83: Choosing have a Target Area 2. Select all Butn objects with the mouse (Figure 84). Press SHIFT on your keyboard and drag and drop the objects on the Butns object in order group them. 57

62 Getting Started Volume II: 3D Turial Figure 84: Selecting objects be grouping in the Butns object 3. Double click the Butns Scene object open it up. Then click the Stage tab see the entire Stage window (Figure 85). Figure 85: Switch tab 4. Click the Scene Properties butn in the Menu Bar open its dialog. Set the Stage Width 400 and the Stage Height 100 (Figure 86). Click OK close. 58

63 WireFusion Figure 86: Scene Properties dialog 5. Select all the butns and move all their Target Areas at one and the same time so that the Up butn is positioned at X:38 and Y:38 (Figure 87). Click the Script and Stage tab and then move back the root of your project using either the Folders view or the Up butn found in the Menu Bar. Figure 87: Positioning the butn graphics 6. Insert another Scene object. On the question have a Target Area for your Scene object, answer Yes, then rename the object from 'Scene 1' 'Labels'. 7. Select all objects related the labeling (Figure 88). Press Shift on your keyboard and drag and drop the objects on the Labels object in order group them. 59

64 Getting Started Volume II: 3D Turial Figure 88: Selecting objects be grouping in the Labels object 8. Double click the Labels Scene object open it up. Click the Scene Properties butn in the Menu Bar open its dialog. Set the Stage Width 400 and the Stage Height 100. Click OK close. Move back the root of your project using either the Folders view or the Up butn found in the Menu Bar (Figure 89). Figure 89: The grouping objects 9. Position the Labels object at X:0 and at Y:0. 10.Insert a Folder object and rename it from 'Folder 1' 'Animations'. 60

65 WireFusion 11.Select all objects related the animations (Figure 90). Press Shift on your keyboard and drag and drop the objects on the Animations object in order group them. Figure 90: Selecting objects be grouping in the Animations object 12.To bundle all connections going and from two objects, select View > Toggle Wire Bundling, or press CTRL + B on your keyboard (Figure 91). NOTE: Note how much easier it is navigate and understand your project after grouping visual and nonvisual functions in container objects. 61

66 Getting Started Volume II: 3D Turial Figure 91: Bundled wires Publish We are ready with our presentation and will now publish it. We have different options for publishing a WireFusion presentation, however, in this turial we will publish it as a Java Applet, as we want it run on a web page. 1. Choose File > Publish 2. When the Publish dialog opens, choose a name for the presentation and a folder publish it. Choose the name 'My_tape_rule' (Figure 92). Figure 92: Choosing name and location publish the presentation 3. Make sure the Format is set Java Applet. You can optionally also select the Download Java Plug-in if Java is missing checkbox (Figure 93). Figure 93: Publishing the presentation as a Java Applet 62

67 WireFusion NOTE: You can optionally choose encrypt your resources by marking the Encrypt resource file option. This prevents other users from stealing your resources. Not available in the Standard edition. 4. Change the default loading graphics by marking the Cusm Loader Graphics checkbox (Figure 94). Change the default Progress Bar Graphics, by clicking the Change butn. Load the image 'loading_bar.gif': [Path]/My Documents/WireFusion/resources/tape_rule/loading_bar.gif NOTE: The Cusm Loader Graphics option is not available in the Standard edition. 5. Change the default Background Graphics, by clicking the Change butn. Load the image 'loading_background.gif': [Path]/My Documents/WireFusion/resources/tape_rule/loading_background.gif Figure 94: Changing loading graphics 6. Click Finish publish the presentation. A dialog opens confirming that the presentation has been published. In the dialog, click the Open Folder butn go directly your published presentation (Figure 95). Figure 95: Publishing confirmed 7. Test the presentation by double clicking the HTML file. Your default browser should open and display the presentation. 63

68 Getting Started Volume II: 3D Turial Part III HTML Editing in Dreamweaver The final step in this turial is insert the published presentation in a HTML file of your choice, and, upload the presentation a web server. We use Adobe Dreamweaver, but any HTML edir and FTP client can be used. 1. In Dreamweaver, open the published WireFusion HTML file (Figure 96). Figure 96: Dreamweaver opened with the WireFusion HTML file 2. Switch Code View so that you can see the HTML source code. Copy all the HTML source code from (Figure 97): <!-- BEGIN WIREFUSION PRESENTATION CODE --> <!-- END WIREFUSION PRESENTATION CODE --> Figure 97: WireFusion HTML source code 64

69 HTML Editing in Dreamweaver 3. Open the HTML file which you would like insert the WireFusion presentation in. 4. Paste the source code the position on your page where you would like show the presentation. Save your HTML file. 5. Copy the published 'wf-player' folder and the 'My_tape_rule' project folder the same folder as your HTML file (Figure 98). Figure 98: Placing the player and project folders in the same folder as the HTML file NOTE: It is very important that the 'wf-player' folder and the project folder are located in the same folder as your HTML file. Else, the presentation will not work. NOTE: In case you still would like have the 'wf-player' folder and the project folder in a different folder than your HTML file, then you have change the codebase parameter in the HTML source code. 6. Test your HTML file locally before uploading the web server. Make sure the presentation is working. 7. Use the built-in FTP client upload your HTML file, the 'wf-player' folder (with contents) and the 'My_tape_rule' project folder (with contents) your web server. 8. Open the uploaded HTML file in your browser and test that the presentation is working as it should. 65

70 Getting Started Volume II: 3D Turial Summary We are now ready with the turial and you have learned the basic steps of creating a Web3D presentation using WireFusion - from 3D modeling publishing of a final presentation the web. There are still a lot learn and explore about the 3D capabilities in WireFusion, and a good point start with is read the reference manual WireFusion, Volume II. We also recommend the guide 3D Modeling, which gives useful tips for creating and preparing 3D models for WireFusion and the web. For those interested in creating dynamic presentations containing a lot of streamed models and textures, such as 3D configurars, we recommend the 3D API section found in the Java in WireFusion manual. End of turial * * * Publication date: November 7, 2007 The author and the publisher make no representation or warranties of any kind with regard the completeness or accuracy of the contents herein and accept no liability of any kind including but not limited performance, merchantability, fitness for any particular purpose, or any losses or damages of any kind caused or alleged be caused directly or indirectly from this book. All rights reserved 2007 Demicron AB, Solna, Sweden. World rights reserved. No part of this publication may be sred in a retrieval system, transmitted, or reproduced in any way, including but not limited phocopy, phograph, magnetic or other record, without the prior agreement and written permission of the publisher. This product and related documentation are protected by copyright and distributed under licenses restricting its use, copying, distribution, and decompilation. No part of this product or related documentation may be reproduced in any form by any means without prior written authorization of Demicron and its licensors, if any. Trademarks Demicron and WireFusion are trademarks of Demicron AB. Acrobat, Phoshop, Flash, Dreamweaver are registered trademarks of Adobe Systems Incorporated. Java, SunSoft are trademarks of Sun Microsystems, Inc. Windows 2000, Windows XP, Windows Vista are trademarks or registered trademarks of Microsoft Corporation. Pentium is a trademark of Intel Corporation. OS X is a trademark of Apple Computer. All other trademarks are the property of their respective owners. 66