Reference Manual. WireFusion 4.1 Volume I: General Reference

Transcription

1 Reference Manual WireFusion 4.1 Volume I: General Reference

2

3 Contents WHAT IS NEW...1 What is New in WireFusion What is New in WireFusion WIREFUSION FEATURES...5 3D FEATURES...9 SYSTEM REQUIREMENTS...12 Windows Systems...12 Macintosh Systems...12 Linux Systems...12 SHORTCUTS...13 FILE FORMATS...16 FILES AND DIRECTORIES...17 FOR MACINTOSH USERS...18 INTRODUCTION TO WIREFUSION...19 THE CONCEPT...19 HOW, WHAT AND WHO?...21 How you work with WireFusion...21 What to create with WireFusion...21 Who uses WireFusion...22 JAVA...23 History...23 Java Technologies...23 Java Virtual Machine...24 Versions...24 Security...24 WORKING IN WIREFUSION...25 HOW TO WORK WITH WIREFUSION...25 PRINCIPLES OF WORKING WITH WIREFUSION...25 LAYOUT...27 MENUS...30 File...30 Edit...31 View...32 Objects...33 Project...33 Scene...34 Debug...35 Window...35 Help...36 Toolbar...37 PREFERENCES...38 General tab...38 Defaults tab...39 Workbench tab...39 PROJECTS...40 Steps in Creating a WireFusion Presentation...40 Saving and loading projects...41 Navigating Projects...41 Navigating the Script Area and Work Area...43 Project Properties...44 OBJECTS...46 Predefined Objects...46 Object Categories...47

4 Library...48 Insert Objects...52 Import Objects...53 Rename Objects...54 Object Menu...54 Target Area Objects...57 Object Properties...63 TEXTIMAGE EDITOR...68 CONNECTIONS...70 Port Constraints...71 Create Connections...72 Cancel Connection Mode...73 Deleting Wires...73 Wire Creator...73 Connection Properties...75 Connection Information...76 Wire List...77 FORWARDING AND STORING DATA...79 Push Parameters...79 Set Parameters...80 GROUPING OBJECTS...82 Container Objects...82 The Scene Object...82 The Folder Object...85 Moving Objects into a Container...86 The Port Exporter...88 LAYERS...96 Layers View...96 Reordering Layers...97 Layers Checkboxes...98 ALPHA CHANNELS Alpha Channels in WireFusion Mouse Map OPTIMIZING YOUR PRESENTATIONS Frames per Second (FPS) Image Processing Target Area Scenes Resources Reuse of Objects Summary of Optimization Tips TESTING YOUR PRESENTATIONS Hierarchy Viewer Browser Debugging DEPLOYMENT Loading Manager Publish Dialog Java Applets Java Applications Java Components Image Generator Servlet Animation INDEX...142

5 What is New What is New What is New in WireFusion 4.1 X3D Support Support for the new ISO Standard X3D format (XML and classic VRML encoding). Support for X3D Event Utility Nodes. Password Protection Password protection of Library objects makes it possible to share proprietary work with other WireFusion users without revealing construction details. Shareware objects A Shareware system for those interested in developing, sharing and selling WireFusion Library favorite objects to other WireFusion users. Cross connections It is now possible to make connections between two objects that are located in different hierarchical levels without first exporting any ports. Connected ports are now automatically exported. Easier grouping of objects Grouping of objects into Folder and Scene objects, while still preserving connections to objects at different hierarchical levels, is now possible. Dynamic icon size The object icon size now increases with the number of wires connected to it. Wire Arrows Wire connections now end with an arrow, indicating that the wire enters an in-port. Highlight Information Source and destination objects are highlighted when the mouse cursor is over a wire, and, objects and wires connected to a specific object are highlighted when the mouse cursor is over an object. Script Area Panning Possibility to pan the Script Area with Space + Mouse drag. 1

6 WireFusion 4.1 Volume I: General Reference Improved 3D Parsing Improved parsing of VRML-files produced in LightWave 3D and 3ds Max. Improved Caching Improved caching of applets with option to change cache size. Show/Hide Ports For dynamic showing or hiding of individual objects in a 3D model, new Show and Hide ports have been added to the 3DScene object. Renderer Ports Dynamically set different renderers for individual objects in a 3D model. New Renderer ports have been added to the 3DScene object. What is New in WireFusion 4.0 New Layout A new and faster user interface, with greatly improved file dialog performance. The navigation of projects has been inspired by the Windows Explorer, with its file and folder structure, using Back, Forward and Up navigation buttons. It is also possible to switch between different views to obtain a better overview of the objects in your projects; switch between "Large Icons", "Small Icons" and "Details". 3D included 3D features are now included directly into WireFusion (the former WF-3D add-on product is stopped). Macromedia Flash Playback A new object (Flash) allows playback of Macromedia Flash (SWF) animations within Wire- Fusion presentations. Undo/Redo Multi-level Undo and Redo have been added. 3D Walkthrough A new navigation mode allows walking in 3D worlds and rooms. Supports collision detection and walking in stairs (multi-level worlds). 2

7 What is New Real-time Shadows 3D objects now support real-time drop-down shadows, with multiple settings possibilities. MIP Mapping Support for MIP mapping greatly improves texture quality. New 3D renders Two new 3D renderes added: Contour and Wireframe. 3D Navigation Renderer The optional Navigation Renderer switches renderer type when navigating. Can be used for high-polygon models when switching to fast renderers such as the Contour or the Wireframe renderer. Screenshot A new object (Screenshot) allows site visitors to make screenshots of the presentation display, or portions of the display. Screenshot images can be uploaded and stored on a web server, using JSP [Professional and Enterprise Edition only]. Image Generator Servlet Image Generator Servlet is a new and powerful presentation type allowing a server to generate images from a presentation. The Image Generator Servlet receives calls from the client browser and returns a screenshot image. It is useful for automatic resizing of images and creation of watermarks for example. [Enterprise Edition only]. Image Sequence You can now save a presentation as a sequence of (JPEG) images. It is useful for creation of video sequences of your presentations [Professional and Enterprise Edition only]. Custom Loading Graphics You can replace the default loading graphics with your own graphics. Also possible to change loading background color and optionally use a screenshot of the first presentation frame as loading background [Professional and Enterprise Edition only]. Wire Creator A new Wire Creator helps to quickly make connections between objects. Easily make connections between objects and between more than two ports at one and the same time. 3

8 WireFusion 4.1 Volume I: General Reference Wire List The Wire List window shows all connections made to and from a selected object. It lists the connections in correct execution order and allows reordering of the connections. It also allows tracking a connection chain by jumping to the next object in the chain. Library A new object Library gives a better overview of the available objects in WireFusion. Add Favorites Possibility to expand the object Library with your own configured objects, as Favorites. You can also export and share your Favorites with other WireFusion users, who easily can import them to their libraries. New 3D Layout The 3DScene has a new and improved user interface, allowing, for example, a customized preview window size. Bounding boxes on selected objects facilitates the development. Improved Debugger Readability The Debug Console readability has been improved. Improved Widgets Button, CheckBox and RadioButton can now have user-defined graphics. Button can repeatedly send out pulses when pressed. Alpha Channels Texture alpha channel support is now available directly in the 3DScene object. Touchsensor Cursors Touchsensors in 3D can have optional mouse cursors. Properties A new Properties view makes it easier to survey and change settings for objects. Default Wire Color The default wire color of a new connection can be changed. 4

9 WireFusion Features WireFusion Features No plug-in No browser plug-in is needed to view presentations. Reaches a wide audience Visitors can view the presentations in all cross-platform Java 1.1 (or higher) enabled browsers. Short-time-to-market WireFusion is a RAD (Rapid Application Development) tool, which allows you to quickly create and deliver robust and secure applications to your clients. High Performance WireFusion presentations are high performing, small in size and loads quickly. Extendable Special Add-ons expand WireFusion with new objects. LiveUpdate A built-in LiveUpdate function ensures your software is always up-to-date. Visual Environment WireFusion has a comprehensive visual programming environment, which allows even nonprogrammers to create advanced logic quickly, and without any prior programming or scripting skills. ISO Standard 3D Support WireFusion is capable of importing and handling 3D models specified in the ISO standards X3D and VRML (97/2.0). Most 3D authoring tools can export directly to VRML and X3D without any extra add-ons. Macromedia Flash Support for playback of Macromedia Flash animations within WireFusion presentations. 5

10 WireFusion 4.1 Volume I: General Reference MPEG video Support for MPEG-1 video with MPEG-1 Audio Layer I&II, when extending WireFusion with the free WF-Video add-on. MP3 audio Support for high quality MP3 audio, when expanding WireFusion with the free WF-MP3 addon. Java A Java object allows Java programmers to write and compile advanced Java code directly from inside WireFusion. The Java object is also used to access the 3D API. 2D Authoring WireFusion has a set of tools to author 2D graphics and to create 2D presentations, which can be used as standalone presentations or combined with your 3D presentations. External Communication The External Link object allows WireFusion presentations to communicate (send/receive parameters to/from) with HTML pages, using JavaScript. JavaScripts can also be executed directly from inside WireFusion presentations. The External Link object allows for communication between WireFusion presentations and Java Applications and Java Beans. It can also be used to read Java applet parameters from the HTML code. Debugger A built-in debugger analyzes your visual code, highlights wires in correct execution order and lists parameters (values and pulses) sent between objects. Unlimited Layers Graphics elements in WireFusion are placed in layers, similar to the layers in Adobe Photo- Shop. The layer order can be dynamically changed while the presentation is running. Real-time Filters Advanced real-time image processing filters, similar to Adobe PhotoShop filters. Filter parameters can be dynamically changed. Animated Parameters Dynamically change (animate) parameters and settings of objects, such as opacities, colors, positions, dimensions, filter parameters etc. 6

11 WireFusion Features Animated Alpha Channels Alpha-channels can be programmed and animated for complex effects. Anti-Aliasing Anti-aliasing on graphics ensures smooth edges. Easy GUI Creation Creation of GUI with widget objects. Use buttons, sliders, checkboxes, radiobuttons, panels, labels etc. Menu Structure Object Is used for easy creation and navigation of menu structures. Useful when creating product simulations like mobile phones etc. with simulated menus. Reuse of Code WireFusion always reuses code (objects) to ensure compact presentations and small files. 10 or 100 Flash players in a presentation does not matter, it only uses the code once. Super Fast Compilation Presentations are compiled in a flash. Compression JAR compression is used to achieve smaller presentations and faster loading. Encryption Published HTML presentations can optionally be encrypted, preventing users from stealing your resources. Streaming Resources can be streamed into the presentations and a Loading Manager makes it possible to specify the streaming order. Java Applets Presentations can be published as Java Applets and are prepared for the web by insertion into a default HTML page. The applet can easily be integrated in your own HTML page via an HTML editor. 7

12 WireFusion 4.1 Volume I: General Reference Java Applications Presentations can be published as stand-alone Java Applications, which can run in both window mode and full screen mode. Java Component Presentations can be published as Java Beans. Java Beans are used as software building blocks from which you can create more complex software programs, or Java Applications. This feature allows advanced Java developers to include WireFusion presentations into their own Java applications. Screenshot A Screenshot object allows site visitors to make presentation screenshot images, which are uploaded to the web server (using a Java Server Pages). Image Sequence You can export a presentation as an image sequence (JPEG). Use third party tools to create e.g. AVI, QuickTime (MOV), Flash (SWF), RealMedia (RM), Windows Media (WMV) and GIF animations. Image Generator Servlet You can publish a WireFusion presentation as a Java Servlet, which generates screenshot images on the web server. Import 3D (X3D/VRML2/VRML97) Flash (SWF) Video (MPEG-1) Sound (MP3, WAV, AIFF, GSM, AU) Image (JPEG, GIF, PNG) Logic and Scripts (Java code, JavaScript code) Export HTML Presentations (Java Applets) Off-line presentations (Java Applications) Components (JavaBeans) Image Sequence Image Generator Servlet 8

13 3D Features 3D Features 3D Support Supports a subset of the ISO standard 3D formats X3D and VRML 97/2.0. The 3D engine supports/uses the following rendering techniques/features: Shading Reflection Map Phong Gouraud Wireframe Contour Constant Flat Individual Renderer Navigation Renderer Rendering features Bilinear Filtering MIP Mapping Real-time Shadows Anti-Aliasing 256 Levels of Transparency Overlapping Transparent Surfaces 32-bit Color Depth Rendering True 32-bit z-buffer Backface Culling 3D Clipping Anti-aliasing Full Scene Anti-Aliasing Edge Anti-Aliasing Textures UV Texture Mapping Bilinear Filtering MIP Mapping 9

14 WireFusion 4.1 Volume I: General Reference Texture Opacity Alpha Channel Dynamic Textures Architecture Perspective Correction Sub-pixel Precision 8-bit or 24 bit High-resolution Bitmaps Material settings Ambient Intensity Diffuse Color Specular Color Emissive Color Glossiness Opacity Reflection Map Material Assignment Animation Full Control over the Animation Matrix Animations Vertex Animations Dynamic Normals Material Properties Animation Light Animation Camera Animation Hierarchic Animation Control Smoothing Crease Angle Generated Normals Navigation Examine Mode (3D Object) Walk Mode (3D World) Collision Detection (Walk Mode) Multi-level Support (stairs) 5 different modes of user interaction Configurable Mouse Navigation 10

15 3D Features Configurable Keyboard Navigation True 6 DOF (Degrees Of Freedom) Navigation Renderer Navigation Friction Camera Restrictions Two different camera rotation modes Multiple Camera Support Streaming Object Streaming Texture Streaming Animation Streaming Streaming Order Compression Mesh Data Compression Texture Coordinate Data Compression Vertex Animation Data Compression 3D API A 3D API allows advanced users to control parameters (X3D/VRML nodes and fields) in a 3D model, using the Java object. 3D objects can also be dynamically added to and removed from a running scene. Encryption Encrypt 3D models to protect them from unauthorized use/alterations. 11

16 WireFusion 4.1 Volume I: General Reference System Requirements The following minimum hardware and software requirements are needed to author WireFusion presentations: Windows Systems Processor: Intel Pentium III 400 MHz (or compatible) Operating system: Microsoft Windows 95/98/ME/NT4/2000/XP Internal memory: 512 MB of available RAM Hard disk: Minimum of 100 MB available hard-disk space Screen resolution: Sound: Sound card for multimedia presentations Macintosh Systems Processor: PowerPC processor G3 Operating system: Mac OS X version 10.2 (or higher) Java: Java for 10.2 and Java for 10.3 Internal memory: 256 MB of available RAM Hard disk: Minimum of 100 MB available hard-disk space Screen resolution: Sound: Sound card for multimedia presentations Linux Systems Processor: Intel Pentium III 400 MHz (or compatible) Operating system: Linux * Java: Java (or higher) installed Internal memory: 256 MB of available RAM Hard disk: Minimum of 100 MB available hard-disk space Screen resolution: Sound: Sound card for multimedia presentations * The following system has been verified to work well: Mandrake Linux release 9.0 (dolphin) for i586 Kernel version mdk KDE 3.0 Java 1.4.1_01 Netscape

17 Shortcuts Shortcuts File Menu shortcuts PC/Linux Mac New Project CTRL + N Command + N Open Project CTRL + O Command + O Save Project CTRL + S Command + S Edit Menu shortcuts PC/Linux Mac Undo CTRL + Z Command + Z Redo CTRL + Y Command + Y Cut CTRL + X Command + X Copy CTRL + C Command + C Paste CTRL + V Command + V Select All CTRL + A Command + A Delete DELETE Command + Backspace View Menu shortcuts PC/Linux Mac Toggle Folders CTRL + 1 Command + 1 Toggle Library CTRL + 2 Command + 2 Toggle Layers CTRL + 3 Command + 3 Toggle Toolbar CTRL + 4 Command + 4 Toggle Stage Magnifier ALT + Z ALT + Z Large Icons CTRL + Shift + L Command + Shift + L Small Icons CTRL + Shift + S Command + Shift + S Details CTRL + Shift + D Command + Shift + D Up ALT + Up ALT + Up Forward ALT + Right ALT + Right Back ALT + Left ALT + Left Console CTRL + ALT + I Command + ALT + I Project Menu shortcuts PC/Linux Mac Preview F7 F7 Preview in Browser CTRL + F7 Command + F7 13

18 WireFusion 4.1 Volume I: General Reference Scene Menu shortcuts PC/Linux Mac Preview Scene F8 F8 Preview Scene in Browser CTRL + F8 Command + F8 Debug Menu shortcuts PC/Linux Mac Debug ALT + F7 ALT + F7 Debug Scene ALT + F8 ALT + F8 Window Menu shortcuts PC/Linux Mac Wire Creator CTRL + M Command + M Wire List CTRL + W Command + W Help Menu shortcuts PC/Linux Mac Reference Help F1 F1 Object Help F2 F2 Local Object Menu shortcuts PC/Linux Mac Explore CTRL + E Command + E Export Ports... CTRL + P Command + P Cut CTRL + X Command + X Copy CTRL + C Command + C Delete DELETE Command + Backspace Help CTRL + H Command + H Configure ENTER RETURN 14

19 Shortcuts Wire Creator PC/Linux Mac Select new source object S S Select new destination object D D Connect C C Disconnect DELETE Command + Backspace Other shortcuts PC/Linux Mac Set Target Area to Stage dimension ALT + S ALT + S Move Target Areas SHIFT + Mouse drag SHIFT + Mouse drag 15

20 WireFusion 4.1 Volume I: General Reference File Formats Below is descriptions of some of the most common file formats used in WireFusion..au.class.jar.mp3.mpg.png.swf.w3f.wf.wrl.wfp.wlf.wob.wpl The filename extension for AU Audio files. This is a sound file format recognized by Java. The filename extension for Java files. JAR (Java ARchive) is a platform-independent file format that aggregates many files into one. Multiple Java applets and their requisite components (.class files, images, sounds etc) can be bundled in a JAR file and subsequently downloaded to a browser in a single HTTP transaction, greatly improving the download speed. The JAR format also supports compression, which reduces the file size, further improving the download time. Stands for Moving Picture Experts Group - Audio Layer 3. It is a coding standard for compression of audio data. An acronym for Motion Picture Expert Group. The filename extension for MPEG movies (also.mpeg). WireFusion supports MPEG-1 movies with MPEG-1 Audio Layer I&II. An acronym for Portable Network Graphics. The PNG format is used for lossless compressing and displaying of images on the Web. Unlike GIF, PNG supports 24-bit images and produces background transparency without jagged edges. The filename extension for Macromedia Flash animations. WireFusion supports Flash version 2 animation. The filename extension for the WireFusion 3D format. Previous WireFusion 3D format. Replaced with.w3f The filename extension for WireFusion projects. The filename extension for WireFusion Library Favorites. A saved Favorites file can consist of one or several objects and is installed from the Library menu Import Favorites... The filename extension for saved WireFusion objects. The filename extension for WireFusion add-ons. An add-on can consist of one or several objects and is installed by choosing File > Install Add-on....wpo The filename extension for WireFusion objects. Can be installed by choosing File > Install Add-on....wrl.wrz.x3d,.x3dv Virtual Reality Modeling Language (VRML) is an ISO standard 3D file format for describing interactive 3D objects and worlds. WireFusion supports the VRML 97/2.0 standard. A compressed VRML file. X3D is an ISO standard 3D file format for describing interactive 3D objects and worlds..x3d uses XML encoding, while.x3dv uses VRML encoding. 16

21 Files and Directories Files and Directories The default installation locations for WireFusion, and some of the installed subdirectories are described here. All directories and files are installed under: [Path]/WireFusion 4.1/ The installation program creates, among others, these subdirectories: [Path]/WireFusion 4.1/projects/ Contains example projects. [Path]/WireFusion 4.1/resources/ Resources, such as tutorials, 3D models, images, sounds etc are stored here. PC By default, the installation adds WireFusion to the Microsoft Windows Start Menu. You can Uninstall WireFusion from Start > Control Panel > Add/Remove Programs. Macintosh By default, the installation adds WireFusion to the Application folder and an alias to the Desktop. 17

22 WireFusion 4.1 Volume I: General Reference For Macintosh Users When you read the different WireFusion manuals, you will notice that you sometimes should right click your mouse in order to achieve certain things. It could, for example, be that you should "right click the object icon to open the object menu or right click the wire to open the wire menu or "right click and drag" to navigate a 3D model. This is how it is done on the Windows and Linux systems, but on a Macintosh, you should perform the following actions instead: To "right click": Press CTRL + click mouse button To "right click and drag": Press CTRL + click mouse button and drag To "left + right click and drag": Press Shift + click mouse button and drag Windows and Linux: Click Left + Right mouse button and drag 18

23 The Concept Introduction to WireFusion The Concept Whether you are producing interactive product presentations or virtual rooms for the Web, WireFusion delivers the creative tool you are looking for. WireFusion is a drag-and-drop visual-programming tool developed for creating advanced, interactive and dynamic Web3D and off-line presentations and animations, without writing a single line of code. WireFusion is a rich-media authoring platform that allows you to combine several different media types. It supports 3D, 2D, Macromedia Flash, MPEG video and MP3 audio. It is also capable of creating 360 degree panoramas, slide shows and zoomable images. Figure 1: Web3D presentations made with WireFusion. WireFusion makes you more efficient, it helps you to create advanced, small in size and high performing presentations quickly, which also reaches a very large Internet audience, as your viewers do not need a browser plug-in in order to view the presentations. WireFusion operates with pre-programmed functions and operations, which are located in modules called WireFusion Objects, or just Objects. These objects are thoroughly tested and optimized, which ensures small and robust presentations and operations. The idea of programming in WireFusion is very similar to conventional programming techniques. Data, or information (commonly known as parameters, such as numbers, strings, colors, images etc.), are sent from one function into another. However, the difference from conventional techniques is that WireFusion does this by connecting objects by purely visual means. When new or updated objects become available, either from Demicron or a third party, they can easily be installed in WireFusion. Included with WireFusion are around fifty objects, half of them are related to graphics, and the rest are data objects or miscellaneous tools needed for creating logic. 19

24 WireFusion 4.1 Volume I: General Reference Basically, the whole cycle of developing presentations is done in three steps: 1. The first step is to create your resources; 3D models, images, Flash animations, movies, sound etc. in other programs, such as Autodesk 3ds Max, Adobe PhotoShop, Macromedia Flash. 2. The second step is to import the resources in WireFusion and by visual means develop your presentations. 3. The third and last step is to deploy your presentations to the web, or as off-line presentations. Developers working with JavaScript can use the scripting language to create interactions between WireFusion presentations and the webpages containing the presentations. Java developers can also easily extend functionality directly in WireFusion, due to a Java object, which allows for compilation of Java source. The Java object is also used for the 3D API, which allows for advanced programming of 3D scenes. WireFusion presentations are suitable for use on the Internet for sales purposes, support, e- learning, digital campaigns, digital advertisements, games, but also for fairs, conventions, teaching purposes etc. 20

25 How, What and Who? How, What and Who? How you work with WireFusion Whether you are a 3D artist, designer or programmer, you are suggested to follow the steps below when creating a WireFusion presentation: 1. Decide what your presentation is meant to accomplish. 2. Determine how your presentation will be working for the people using or looking at it. 3. Create the resources (3D models, images, audio, movie, Flash etc) you need in third party programs. 4. Choose the main WireFusion objects you need. 5. Create the presentation by dragging and dropping objects on the Script Area view, and by connecting the objects. 6. Test your presentation after each function has been created. 7. Publish the presentation as a Java Applet, or alternatively as a Java Application, Java Component or Animation. NOTE: Before starting to work in WireFusion it is highly recommended to work through the tutorial Getting Started, Volume I. If you intend to work with 3D in WireFusion, then it is also recommended to work through the tutorial Getting Started, Volume II. What to create with WireFusion With WireFusion you create high quality and interactive graphical presentations, but without the requirement of any programming or scripting skills. Some ideas on what you will be able to do: Create interactive product simulations and configurators in both 3D and 2D, such as mobile phones, computers, watches, cars, furniture etc. Create interactive manuals and guides, such as how to put together furniture. Create interactive 3D worlds and rooms. Show scientific data, CAD files and 3D scans. Create 360 degree panorama presentations. Show company or product videos directly on your site. Show company, product or family photos in professional slide shows. Zoom into product and family photos, while still preserving high image quality. Create menus and site maps. Create interactive banners. 21

26 WireFusion 4.1 Volume I: General Reference Create animated company introductions or logos. Create pure visual effects to spice up web pages. Create web based games. And much more... Who uses WireFusion WireFusion gives professional 3D artists, designers, modelers, programmers, scientists, teachers and students, as well as private individuals, the opportunity to develop their own graphical Java applets in just a fraction of the time needed by a professional Java programmer. WireFusion is a tool for anyone who wants to create advanced web presentations quickly. Some users of WireFusion will have experiences from using common web design, multimedia or authoring tools, others will have knowledge of Java and of using professional development tools. 3D artists, designers and modelers for 3D artists, designers and modelers WireFusion give them a virtual Java programmer in their hands. Without knowing anything about Java or programming you will be able to create advanced product presentations, logic, menus and spectacular graphics effects. Programmers and developers for Java programmers, WireFusion will speed up the development enormously. You can write your Java and JavaScript code directly inside WireFusion, and share it with other WireFusion users. Teachers or producers of educational materials for teachers who want to give students or audiences an understanding through interactivity or demonstrations of concepts or, for example, virtual representations of physical objects. 22

27 Java Java History In 1991, Sun Microsystems started a research project that resulted in the development of Java. The project was created to develop a language for use in intelligent consumer electronic devices. In 1993, the World Wide Web exploded in popularity and Sun saw the potential of using Java to create web pages with dynamic content. In May 1995, Sun formally announced Java. Java immediately gained interest in the business community, because of the recent commercial interest in the World Wide Web. In January of 1996, a big breakthrough came for widespread Java use when the market leader of the time Netscape released a Java enabled browser, the Navigator. Sun released the first official version of Java in early The main value of Java is its ability to connect users with information from web servers, databases, information providers, and any other imaginable source. Java's run time library provides platform independence allowing the same code to be run on different operating systems, which is necessary for Internet programming. Sun describes Java as a ''simple, object-oriented, network-savvy, interpreted, robust, secure, architecture-neutral, portable, high-performance, multithreaded, and dynamic language''. Java Technologies WireFusion presentations can be generated as Java Applets, Java Applications, Java Components or Java Servlets. Java Applets Java Applets are tiny Java programs that are embedded into web pages, and automatically downloaded from a web site. They are executed within a web browser in response to instructions contained in the web page. A browser with Java 1.1 (or higher) enabled is required. Java Applications A Java Application is a more general program that is written in Java, but does not require a browser to run. It is executed off-line on the client machine, just like any other conventional software, but it requires a Java Runtime Environment (JRE) to be installed on the client system in order to work. Java Applications generated from WireFusion can either run in a resizable window (requires JRE 1.1 or higher) or in fullscreen mode (requires JRE 1.4 or higher). Java Components WireFusion presentations can also be published as Java Components. Java Components are user interface building blocks. Advanced Java developers can include WireFusion presentations saved as Java Components in their own Java applications. 23

28 WireFusion 4.1 Volume I: General Reference Java Servlets WireFusion presentations can also be published as Java Servlets. A Java Servlet can be seen as a Java Applet that runs on the server side. In order to run a Java Servlet your web server must support Java Servlets. Java Virtual Machine Normally, programs are created to run on an intended architecture and that is why you can not run a Microsoft Windows application on e.g. an Apple Macintosh. To enable Java programs (applications and applets) to run on any platform, Sun created a 'Virtual Machine' that interprets Java code so it can be run on any platform. A Java Virtual Machine (JVM) is separately written for each operating system, and thanks to it you do not have to rewrite your Java code to have it working on other systems ('create once, run anywhere'). Versions There is a historical development of Java: Java 1.0, Java 1.1, and today Java 2. The first two versions were implemented directly in browsers, and are therefore still available for several platforms (Linux, Palm OS, Pocket PC, Mac, Windows ). Some browsers have not included Java. Therefore, there is also a Java 2 plug-in from Sun Microsystems, which will enhance these browsers with Java. The largest OEM's delivering Windows preinstalled (like DELL, HP, Acer, Gateway, Toshiba, Samsung ), are now, and have been for some time, shipping with the latest version of Java 2 from Sun preinstalled. OS X also have Java 2 preinstalled. The applets generated by WireFusion are Java 1.1 compatible, working in all browsers supporting Java 1.1 and upward. Security Security is a main concern in consideration to Java. This is because Java-enabled browsers download code across networks, and the code is executed on the user's computer. A basic rule, concerning security on the Internet, is not to download anything that you plan to execute, except when you are sure of its source. Java applets can run in safety due to a sandbox feature in the Java Virtual Machine. The execution of code is restricted in several ways. Applets are not allowed to: Read or write files to the local computer (the user's computer). Delete or rename files on the local computer. Create directories or list a directory locally. Check size, type or existence of a file locally. Create a network connection to another computer, other than the originating host for the applet. Accept connections from another computer (besides originating host). Invoke any programs on the local computer. 24

29 How to Work with WireFusion Working in WireFusion How to Work with WireFusion The way you work in WireFusion differs from other web authoring tools. WireFusion works with pre-programmed functions and operations, encapsulated in modules. We will refer to these modules as Objects (WireFusion Objects). The use and reuse of already made and tested code assures robust applets and operations. Hence, there is little need for traditional debugging. WireFusion is not based on a timeline as many other web animation tools. However, you can use the time as a parameter to run an animation or to have events executed in a specific order. WireFusion shows its best if you create presentations where the user will interact in real-time with your presentations. Let them navigate, rotate and zoom your 3D models, change textures, configure colors, open and close hatches and doors. Everything is easily created by you and easily experienced by the user. Even if you are using image-processing filters which normally are very processor intensive, as e.g. blur or brightness, WireFusion will handle those smoothly. You can also use alpha channels, which let you manipulate, isolate, and protect specific parts of an image or a filter. WireFusion presentations could in this area be described as ''programmable and interactive Adobe PhotoShop images''. Principles of Working with WireFusion How do you then typically work with WireFusion? First, you drag the objects of your choice to a special area where you work with them (Figure 1). Then, you connect the objects by choosing an out-port from an object, selecting another object, and then choosing one of its available in-ports (Figure 3). Result: an object has been "wired" to another object. WireFusion works with a flow of data through connected objects. Figure 2: A group of objects 25

30 WireFusion 4.1 Volume I: General Reference Figure 3: Connection between two objects Figure 4: Connections are done by connecting in- and out-ports Data can be sent from the out-port of an object to the in-port of another object (or back to the object itself). You will learn more about this and how to apply it when creating logic, in image processing, filters, layers or alpha channels in the following chapters. In some cases though, connections are not necessary to give fully adequate presentations. 26

31 Layout Layout Some terminology, definitions and names on parts, areas or views of WireFusion are described below. In figure 5 you'll find an overview of the general workspace of WireFusion. Figure 5: The WireFusion workspace Menu The main menu of WireFusion. Menu Bar The Menu Bar contains the Project List, with the name of the project displayed. If there are more projects opened, the current project name will be displayed. You will also find duplications of some commonly used menu items, such as New Project, Open Project, Save Project etc. Objects The WireFusion Objects, or simply the objects, are encapsulations of pre-programmed functions. These are the building blocks of your presentations. Objects can have Connections (also called Wires) between them. Wire information is displayed in a tooltip when the mouse pointer is located on top of a wire. Extended connection information is shown in the Information Bar or in the Properties View when a Wire is selected. 27

32 WireFusion 4.1 Volume I: General Reference Wires Wires are used to connect objects with each other. Information can be sent through the Wires. Information Bar The Information Bar is a general information text field at the bottom of the program window, where connection information, instructions, dimensions and positions can be displayed. Library The Library contains all the objects available. They are located in folders: 3D, Data, Environment, Filters, Logic, Misc, Multimedia and Widgets. Customized objects are stored in the Favorites folder. Work Area The Work Area is the main working area for visual objects. It contains the Stage and all Target Areas. Stage The Stage is the presentation area. It will become the visible area in the presentation. Target Area Objects displaying graphics or having any visual effects have a corresponding area in the Work Area called the Target Area. For example, a button, an image or a text, will be displayed in a Target Area. Script Area In the Script Area you specify the workings of your presentation by placing objects and connecting them together. The Script Area can display the objects in different manners; as large icons, as small icons or as a detailed list. Folders The Folders view helps to survey the object hierarchy in your projects. Use it to navigate through the objects. Only objects that can contain other objects are listed here. Layers The Layers view lists all layers in the Work Area. Only objects with a Target Area are listed. The Stamp background and Activate properties can be changed here. 28

33 Layout Properties The Properties view shows object properties and allows you to configure object specific settings. Some objects are configured in a special dialog window, which you can bring up by clicking the Configure button in the Properties view (the dialog can also be opened by pressing return). 29

34 WireFusion 4.1 Volume I: General Reference Menus The WireFusion main program has nine menus: File, Edit, View, Objects, Project, Scene, Debug, Window and Help (Figure 6). Figure 6: The WireFusion program menus File The File menu contains menu items related to projects and their properties (Figure 7). Figure 7: The File menu New Project Creates a new project. (A duplicate command resides in the Menu Bar.) Open Project... Lets you open a saved project. (A duplicate command resides in the Menu Bar.) To import/load a previously saved object, read about Importing Objects. Reopen Lets you reopen a previously saved project. 30

35 Menus Close Project Lets you close the current project. Save Project Saves the current project. If the project has not been saved before, a Save Dialog will be opened. (A duplicate command resides in the Menu Bar.) To learn about how to save an object, see Object Menu on page 54. Save Project As... Saves the project, and lets you choose a name and location for the project file. Publish... Deploy the presentation. For more information, see Deployment on page 123. Install Add-on... Install add-ons containing new objects into WireFusion. Preferences Opens the Preferences dialog, where the general WireFusion settings are configured. For more information, see Preferences on page 38. Exit Prompts you to save any open projects, then exits WireFusion. Edit The Edit menu contains menu items related to editing of objects and wires. You can cut, copy, paste and delete objects of your choice. You can also select objects by groups and edit them. To copy a group of objects in the Script Area: 1. Select the objects (click and hold the mouse button down, then drag over the area where the objects are located, or press CTRL and click on the objects). 2. Choose copy from the Edit menu 3. In the Script Area, position the mouse cursor at the position you want to paste the objects. Then right-click and choose Paste from the menu. Undo Undo the last operation. If an operation can not be undone, the command is disabled. 31

36 WireFusion 4.1 Volume I: General Reference Redo Redo the last operation. Cut Cut the selected objects, and place them on the clipboard. Copy Copy the selected objects to the clipboard. Paste Paste the objects from the clipboard. Select All Select all objects in the Script Area. Delete Delete the selected objects. View Toggle Folders Toggle the Folders view on and off. Toggle Library Toggle the Library view on and off. Toggle Layers View Toggle the Layers view on and off. Toggle Toolbar Toggle the Toolbar on and off. Toggle Stage Magnifier Toggle the Stage Magnifier on and off. 32

37 Menus Large Icons Switch Script Area to show objects as large icons. Small Icons Switch Script Area to show objects as small icons. Details Switch Script Area to show objects as a detailed list. Default Wire Color Specify the default wire color. Console Opens the Java Console Objects The Objects menu contains all the available WireFusion objects. These objects are the same as those found in the Library view. Project The Project menu contains menu items related to projects (Figure 8). Figure 8: The Project menu Preview Preview the current project in the internal viewer. 33

38 WireFusion 4.1 Volume I: General Reference Preview in Browser Preview the current project in the browser. By default, the default browser is used. You can specify a custom browser in the Preferences dialog. Properties... Open the Scene properties dialog. Loading Manager... In this dialog you can control if resources like images and sounds should be streamed into the presentation and in which order. For more information, see Loading Manager on page 123. Scene Figure 9: The Scene menu Preview Scene Preview the current Scene in the viewer. Preview Scene in Browser Preview the current Scene in the browser. By default, the default browser is used. You can specify a custom browser in the Preferences dialog. Scene Properties... Opens a configuration dialog with the properties of the current Scene, i.e. for the Stage you can see in the Work Area. 34

39 Menus Debug Figure 10: The Debug menu Debug Run the current project through the Debugger. Debug Scene Run the current Scene through the Debugger. Window If several projects are open, you can switch between windows from this menu. You can also open the Wire Creator and the Wire List windows. Wire Creator Opens the Wire Creator window. The Wire Creator helps to connect objects. Wire List Opens the Wire List window. The Wire List displays all connections to and from a selected object. 35

40 WireFusion 4.1 Volume I: General Reference Help Figure 11: The Help menu Reference Help This command opens the table of contents of the reference help. From here you can also search all of the Reference help for a particular topic. Object Help This command opens the Reference Help for the WireFusion Objects. Basic information about the objects can be found as well as information about the In-ports and Out-ports. Tip of the Day... Opens the Tip of the Day window. Software Updates Live Update... Looks for WireFusion and add-on updates. Updates can be downloaded and installed automatically. Manual Update... Lets you download and install WireFusion and add-on updates manually. Useful if you can not connect to the Update Server using the Live Update function. WireFusion on the Web Contains links to services found on the Demicron web site. 36

41 Menus Online Lessons: (online) Learn how to use WireFusion with a series of free online lessons and download PDF manuals and tutorials. Download More Objects: (online) Download and install new objects in WireFusion. WireFusion Forum: (online) Exchange experiences and ask other WireFusion users questions in the WireFusion Forum. Support Center: (online) Connect to the Support Center to report bugs and check already known issues. Order Online: (online) Connect to the Demicron Online Store. Installed Add-ons Contains menu items related to installed add-ons (only visible if add-ons have been installed). About... Displays the splash screen and user license information. Toolbar In the Toolbar you can find duplicates of often used menu items (Figure 15). Each toolbar button has a tooltip describing its function, and their icons match the icons of the equivalent menu items. Figure 12: The Toolbar The Cancel connection mode button ( ) in the toolbar has no equivalent in the menu. For more information, see Cancel Connection Mode on page

42 WireFusion 4.1 Volume I: General Reference Preferences General WireFusion settings are configured in the Preferences dialog, which is accessed from the File menu. Figure 13: The Preferences dialog General tab Theme (exclusive choice) The Java environment comes with a number of desktop themes. Select the theme that appeals to your taste. The program has to be restarted in order to update the appearance fully. Max undo (number) Specifies the maximum number of undo/redo levels. The more undo levels you use, the more system memory is used. The default is 100. Snap icons to grid in Script Area (checkbox) Select this option if you want the object icons to snap to an invisible grid in the Script Area. 38

43 Preferences Browser location (text) Specify a path to your browser. If not specified, the default browser will be used. Show help texts at startup (checkbox) Specifies if help texts should be shown at startup, explaining the different WireFusion work areas (on by default). Show "Tip of the Day" at startup (checkbox) Specifies if tip of the day texts should be shown at startup. Check for Updates Automatically (Live Update) (checkbox) Mark this checkbox to let WireFusion automatically check for updates. Defaults tab Stage Width (number) Specifies the default width of the Stage in pixels. Stage Height (number) Specifies the default height of the Stage in pixels. Workbench tab Highlight connected Objects when mouse is over Wire/Object (checkbox) Mark this checkbox to have objects and wires highlighted when the mouse cursor is over an object or wire. 39

44 WireFusion 4.1 Volume I: General Reference Projects Steps in Creating a WireFusion Presentation It is suggested that you follow the steps below when you create your presentations in Wire- Fusion: 1. Creating Resources: Before you start working in WireFusion, you should create or collect the resources you need for your project, like 3D models, images and Flash animations. 2. Choosing Objects: Once inside WireFusion you need to identify the objects you will need for your project. Since each object has a specific task or function associated with it, try to break your overall design plan into small pieces that can be addressed using just a few objects. If there is no specific or obvious object for the function you need, then it is often possible to create the needed function with an object which main purpose is for a different task, or by building new functions by connecting objects together. It is therefore important to learn what the different objects can achieve. Advanced users can create their own functions by writing and compiling Java source code in the Java object. 3. Placing Objects: To place an object on the Script Area, you drag the object icon from the Library and drop it on the Script Area. If it is an object with visual properties, then a rectangular area associated with the object will also be visible in the Work Area. You can drag the rectangles in the Work Area to define both the size and location of these objects. Objects with visual properties also appear in the Layers view. If an object can contain other objects, then it will be visible in the Folders view. The Script Area will always display all of the objects in your presentation. 4. Customizing Objects: All objects have settings that can be configured in the Properties view after they have been dropped on the Script Area. For example, some properties allow you to change the visual size of an image, while others allow you to specify number or color parameters. 5. Connecting Objects: WireFusion objects have out-ports that can send parameters, and in-ports that can receive parameters. If you connect an out-port of an object to an in-port of another object, a wire will be created between the ports and parameters sent from the out-port will travel through the wire to the in-port. Creating connections is an important part of the process of making the presentations behave the way your want. For more information, see Connections on page Rearranging your objects: Rearrange your objects to make it easier to view the logical layout of your project. You can also change the wire colors, or make them invisible, to make the layout easier to understand. 7. Testing your presentation: Your presentation is inactive as you build it. That means that objects do not begin to function until you preview/view your presentation. Some objects can however show a preview on the stage of their visual contents, as for example the Image object. It is important to pre- 40

45 Projects view the presentation along with the development of new functions, in order to achieve a well working presentation. 8. Deploying your presentation: When your presentation is working as it should, you can publish it. Saving and loading projects To save a project: 1. Choose File > Save Project As Enter a name and choose where to save your project. 3. Click Save Project. WireFusion creates a file with a.wfp extension. To load a previously saved project: 1. Choose File > Open Project 2. Browse the.wfp file in which you saved your project. 3. Click Open Project. Navigating Projects In WireFusion, some objects can contain other objects. These types of objects can be seen as folders. The yellow tab on their icons indicates that they are folder objects (Figure 14) and they are also visible in the Folders view (Figure 15). Figure 14: A folder object icon Figure 15: The Folders view 41

46 WireFusion 4.1 Volume I: General Reference As objects can contain other objects, your project will get a hierarchical object structure, very much like the file and folder structure on your computer. The way you navigate this structure in WireFusion is actually very similar to how you use the Microsoft Windows Explorer for navigation. Figure 16 and Figure 17 shows the resemblance between Explorer and WireFusion. Figure 16: Navigation in Windows Explorer Figure 17: Navigation in WireFusion In WireFusion, you use the Folders view to navigate through the folder hierarchy. How to navigate using the Folders view: 1. To open the contents of a folder, in the Folders view, click the object you want to explore. 2. To move up again in the hierarchy, in the Folders view, click the parent object, or click the Up button in the Menu Bar. 3. Just as in Windows Explorer, in the Menu Bar, click the Back and Forward navigation buttons to find recently visited folders. 42

47 Projects TIP: You can also open a folder by double-clicking its object icon in the Script Area (unless the object has a configuration dialog, in which case the dialog will be opened instead). Another way is to select the Explore menu item from the objects popup menu. Another resemblance with Explorer is that you can choose what the object icons in the Script Area should look like. They can be presented as Large Icons, Small Icons or Details. TIP: To simplify the navigation of your projects, it is recommended to name your objects in a way that makes it easy to understand the function of the objects. Navigating the Script Area and Work Area Script Area To view another area of the Script Area, do one of the following: Use the scroll bars. Hold down the spacebar and drag the Script Area using the mouse. Click on the Script Area and scroll using the arrow keys. Figure 18: Dragging the Script Area to view another area of it. Work Area If the Work Area, with the Stage and all Target Areas, is not fully visible, you can navigate to bring another area of it into view. You can navigate the Work Area in the same way as the Script Area (see above). 43

48 WireFusion 4.1 Volume I: General Reference Project Properties Scene properties can be set through the Scene Properties dialog (Figure 19). You can always change the properties of the local scene, i.e. the scene you are located in, by pressing the Scene Properties button in the Menu Bar or by choosing Scene > Scene Properties. To change the scene properties of the project: 1. Choose Project > Properties In the Scene Properties dialog, make your changes and click OK. Figure 19: Scene properties dialog Stage Width (number) Specifies the Stage width in pixels. Stage Height (number) Specifies the Stage height in pixels. Grid Size (number) This option allows you to set the distance between the grid points in pixels (Default is 10 pixels). Show Grid (checkbox) Select to show the grid. 44

49 Projects Frame Rate (f/s) (number) Specifies the maximum number of frames displayed per second in your presentation. The user's computer will try to show your presentation at this frame rate. The default is 25 frames per second. Background Color (color) Specifies the Stage background color. 45

50 WireFusion 4.1 Volume I: General Reference Objects Predefined Objects There are encapsulations of preprogrammed functions and operations in WireFusion known as objects. They are located in the Library (Figure 20) and in the Objects menu (Figure 21). Figure 20: The Object Library Figure 21: The Objects menu WireFusion is delivered with around fifty objects and about half of them are related to graphics. The remaining are data objects and miscellaneous tools needed for creating logic. The objects that are delivered with WireFusion fall into the categories 3D, Data, Environment, Fil- 46

51 Objects ter, Logic, Misc, Multimedia and Widgets. Then there is an extra category called Favorites, which can contain your own saved objects and third party objects. New or updated objects, either from Demicron or from third parties, can also be installed in WireFusion, individually or as Add-ons Object Categories The object categories below are predefined in WireFusion. The default objects delivered with WireFusion are also listed under each category. 3D 3DScene, Texture (*), Texture Array (*) Data 2D Number, Boolean, Color, Color Array, Number, Number Array, Text Environment External Link (*), Keyboard, Mouse Area, System, Time, URL Filter Blur, Brightness, Bump Map, Emboss, Grayscale, Invert, Lens, Line Art, Mosaic, Noise, Plasma, RGB Filter Logic Boolean Operations, If, Math, Progressor, Relational, Sequencer, Tree, Tree Node Misc Dummy, Folder, Java (*), Scene, Scene Window, Screenshot (*), Tooltip Multimedia Flash (*), Image, Image Array, Sound Widgets Button, CheckBox, Label, Panel, RadioButton, Slider, Text Window (*) Not available in the Standard Edition. NOTE: All help files and references for the objects in WireFusion can be found in Help > Object Help. 47

52 WireFusion 4.1 Volume I: General Reference Library The Library view contains all objects. It contains all preprogrammed objects, shipped with WireFusion or installed as Add-ons, but also objects stored as Favorites. Favorite objects are made by you, or by a third party, and are derivatives of the preprogrammed objects. Examples of objects you may want to add to Favorites are objects with special settings, folder objects containing several objects that create a special function, or Java objects. The Library Menu The Library view has a menu, which controls the Library tree behavior and the Favorites (Figure 22). Figure 22: Library menu Auto collapse Select this option if you want opened folders to automatically close when you open a new folder. Import Favorites... Lets you import saved objects to the Favorites category. Export selected Favorites... Lets you export objects selected in the Favorites category. Delete selected Favorites... Lets you delete objects selected in the Favorites category. Create Favorites To add an object as a favorite, open the Favorite Configuration dialog by selecting Add to Favorites... from the menu of an object you want to add (Figure 23). 48

53 Objects Figure 23: Favorite Configuration dialog Name Specifies the name your object will have when placed in Favorites. Category Specifies a sub category of favorites to store your object in. Select an already existing category name or enter a new name. If you leave this field blank, the object will be placed directly under the Favorites category. Icon (32 32) If you select User defined, a custom icon for the object can be specified. The icon image must be in the PNG format and have the size 32x32 pixels. If Use default is selected, the icon of the original object will be used. Export Favorites You can export objects stored in your Favorites, either as Freeware or as Shareware objects, and share them with other users. To export objects from Favorites: 1. Select one or several objects (or folders) in the Favorites category. 2. In the Library menu, choose the option Export selected Favorites Choose to export your objects (or folders) as Freeware or Shareware (Figure 24). If Shareware is selected, choose a Secret Key and a URL where the user can register your objects. 4. Choose a location on your hard disk to save the objects to. Your objects will be stored in a file with the extension.wlf (WireFusion Library Favorites). 49

54 WireFusion 4.1 Volume I: General Reference Figure 24: Export dialog Backup/Freeware Select this option if you want to backup your objects or share them (for free) with other Wire- Fusion users. Shareware Select this option if you want to create and sell shareware versions of your objects. Presentations containing unregistered shareware objects will run in tryout mode. In order to unlock the objects, the users have to register (purchase) a serial number. For more information, please contact Demicron. Secret Key If you have selected to export as shareware, you must specify a unique Secret Key (minimum 6 characters). The Secret Key is used when generating the serial number for your shareware object. For more information, please contact Demicron. 50

55 Objects Registration URL If you have selected to export as shareware, you can specify a URL where a user can register (purchase) your objects. Library Description You can optionally enter a descriptive text for your exported object. This text will be shown when users import the object. Import Favorites To import objects to Favorites: 1. In the Library menu, choose the option Import Favorites When the file dialog opens, browse for the.wlf file (WireFusion Library Favorites) on your hard disk. 3. If the library to be imported is shareware, then a registration dialog opens (Figure 25). Purchase a serial number and enter it into the Serial Number field. Figure 25: Registration dialog Install as Tryout Choose this option if you want to install and test the shareware Favorites. There is no time limit for testing, but all projects using the tryout Favorites will be turned into Tryout presentations. Register Choose this option if you want to register (unlock) the shareware Favorites and enter a serial number. To obtain (purchase) a serial number, click the link at the bottom of the dialog. 51

56 WireFusion 4.1 Volume I: General Reference Delete Favorites To delete favorite objects from the Library: 1. Select one or several objects (or folders) in the Favorites category that you would like to delete. 2. In the Library menu, choose the option Delete selected Favorites. Rename Favorites To rename an object, or a folder, in Favorites: 1. In the Favorites category, right-click the object (or folder) you want to rename. 2. From the menu, select the option Rename In the Rename dialog, enter a new name and click the OK button. Rearrange Favorites To move an object, or a folder, in Favorites to a new location: 1. In the Favorites category, right-click the object (or folder) you want to move. 2. From the menu, select the option Move to Folder In the Move to dialog, choose a category to move your object (or folder) to and click the OK button. Alternatively, enter a new name to create a new category and click the OK button. Insert Objects To insert an object from the Library into your project, drag-and-drop the object into the Script Area (Figure 26). Figure 26: Inserting the Image object from the Library 52

57 Objects Or, equivalently: 1. Right-click the Script Area to open a menu containing the same objects found in the Library. 2. Select the object you want to insert (Figure 27). Figure 27: Inserting the Image object Or, equivalently: 1. Select the object you want to insert from the program menu Objects. 2. Position the mouse cursor in the Script Area where you would like to position the object icon, and then click the mouse to drop the object. Import Objects To load an already saved object or project into your project: 1. In the Library, drag-and-drop the Load Object... to the position in the Script Area you would like to position the object (Figure 28). 2. In the file dialog, browse for your object or project file (.wob or.wfp), and then click Open to load it. Figure 28: Load object 53

58 WireFusion 4.1 Volume I: General Reference For information about saving objects, see Object Menu below. Rename Objects To rename an object: 1. Click on the object name under the icon. 2. When the name label below the icon becomes editable, enter the new name. 3. Press Enter on the keyboard to finish the editing. Figure 29: Renaming the Image object Or, equivalently: 1. Select the object you want to rename. 2. In the Properties view, in the General tab, enter a new name into the Name field. Figure 30: Properties view Object Menu All WireFusion objects in a project have a drop-down menu (see Figure 31 and Figure 32). This menu can be opened by either clicking on the upper right corner of the object, or by right-clicking on the object. If the object has a Target Area (see Target Area, page 28), then you can also open the menu by right-clicking its Target Area or label in the Layers view (see Figure 33 and Figure 34). The items available in the object menu are not the same for all object, and depends on if the object can contain other objects, if it has an alpha channel or if it has special settings, such as the 3DScene and Motion Guide objects. 54

59 Objects Figure 31: Open the drop-down menu Figure 32: The drop-down menu opened Figure 33: Right-click an object in the Layer view 55

60 WireFusion 4.1 Volume I: General Reference Figure 34: Right-click a Target Area in the Work Area Out-ports Contains out-port options. In-ports Contains in-port options. Explore Opens the object's folder. Alternatively, use the Folders view for exploring the object structure. Explore Alpha Channel Opens the object's alpha channel. Alternatively, use the Folders view to navigate to the alpha channel. Export Ports... Opens the Port Exporter dialog. For more information, see The Port Exporter on page 88. Save... If you for example have configured an object in a specific way or if you have made a special function in a Folder or a Scene object, then you can save the object and load it again for later use in other projects. 56

61 Objects Add to Favorites... Adds your object to the Favorites category in the Library. Cut Removes the object and places it on the WireFusion clipboard. To paste the object, move your mouse pointer to the location in the Script Area where you want to place the object, then right-click to paste it. Copy Copies the objects to the WireFusion clipboard, from which you can paste. To paste the object, move your mouse pointer to a location in the Script Area where you want to place the object, then right-click to paste it. Delete Deletes the selected object from the current project. Configure... Opens a property dialog of the selected object. Password Protection... Adds a password to your object. Available for folder objects (such as, e.g. the Folder object and the Image object), and for objects having configuring dialogs (such as, e.g. the Java object and the 3DScene object). Prevents unauthorized users from exploring the folder object contents, i.e. from accessing child objects, and from configuring the Settings dialog of the objects. Help Shows a reference help for the selected object. Target Area Objects Target Area Certain objects have a rectangular area, a Target Area, which can be seen and modified in the Work Area. The Target Area mainly exists for objects that will have some visual appearance in your presentation, like the Image object. The rectangle is surrounded by a dashed border when the corresponding object is selected, and a continuous border when it is not selected (Figure 35). 57

62 WireFusion 4.1 Volume I: General Reference Figure 35: An object and its corresponding Target Area Some of the objects with Target Rectangles display graphics in the presentation, for example the Image object that displays an ordinary JPEG, GIF or PNG image (Figure 36), or the Text Window object, which displays text. Other objects do not display graphics but have some graphical result, as for example the filter objects Blur and Brightness, which both operates on graphics in layers beneath themselves. Finally, there are objects which neither contain graphics nor operate on underlying graphics, but still has a Target Area. An example is the Mouse Area object, which can be used to specify an area where special mouse events can be detected. The mouse area can for example sense when a mouse cursor is over it, and when a mouse is pressed. All objects in WireFusion having a Target Area are also listed in the Layers view, when inserted into a project. Read more about Layers on page 96. Figure 36: A Target Area of an Image object marked by a dashed rectangle 58

63 Objects The Target Area uses coordinates from the Stage for position and placement. The Stage has a coordinate system, which has its origin positioned at the top left corner. There is a positive increment in the value of x, in the x-direction towards the right. Likewise, the value of y has a positive increment downward in the y-direction (Figure 37). Figure 37: The Stage and its coordinate system. Moving and Resizing Target Areas You can change the size and position of a Target Area by using the mouse (Figure 38 and Figure 39). NOTE: To move small rectangles, you can press CTRL while dragging, to avoid unwanted resize operations. Figure 38: Changing the Target Area size by dragging the corners of the rectangle 59

64 WireFusion 4.1 Volume I: General Reference Figure 39: Changing the Target Area position by dragging the rectangle You can also use the arrow keys on your keyboard to move the Target Area in one-pixelsteps. To move a Target Area with the arrow keys: 1. In the Script Area, select the object which Target Area you want to move, or select the Target Area directly in the Work Area with the mouse. 2. Use the arrow keys to move the target area. This is very useful for fine adjustments. NOTE: When a Target Area is selected, its position and dimension are shown in the Information Bar (Figure 40). Figure 40: Target Area position and dimension information The Target Area size and dimension can also be specified in the object's Properties view (Target Area tab). Mouse Events All objects in WireFusion having a Target Area also have out-ports for mouse events (Figure 41). 60

65 Objects Figure 41: Mouse Event Out-ports of an Image object Mouse Move [2D Number] Sends out the mouse cursor position when the mouse has been moved within the Target Area. Mouse Drag [2D Number] Sends out the mouse cursor position when the mouse has been dragged within the Target Area. Mouse Roll Over [2D Number] Sends out the mouse cursor position when the mouse enters the Target Area. Mouse Roll Out [2D Number] Sends out the mouse cursor position when the mouse exits the Target Area. Mouse Press [2D Number] Sends out the mouse cursor position when the mouse button is pressed within the Target Area. Mouse Release [2D Number] Sends out the mouse cursor position when the mouse button is released within the Target Area. These are the same ports as the Mouse Area object has, which means that all Target Area objects have the same functionality as a Mouse Area object, i.e. they have a "built-in" mouse area. NOTE: Deactivated objects do not send out mouse events. 61

66 WireFusion 4.1 Volume I: General Reference NOTE: Mouse events are sensitive to layer orders. An object placed in a layer above other objects will block any mouse events to the objects below itself. However, if there are no connections to the object's mouse event ports, then it will generally not block mouse events to the underlying objects. Target Area In-ports An object having a Target Area also has a special set of in-ports (see Figure 42). These inports help you control some Target Area related properties dynamically in your presentation, i.e. you can change these parameters while the presentation is running. This makes it possible to for example make an image change size or move in a running presentation. The ports common to objects with Target Areas are described below. Figure 42: The Grayscale filter In-ports Activate See Active on page 66. Deactivate See Active on page 66. Stamp background See Stamp on page 66. Set Opacity [Number] See Opacity on page 66. Set Position [2D Number] This port requires a 2D Number as parameter. See X, Y on page

67 Objects TIP: The port Set Position [2D Number] is often used in conjunction with Mouse Events in order to move, for example, an image. Set Dimension [2D Number] This port requires a 2D Number as parameter. See Width, Height on page 65. Layer Controls the layer order. Bring to front Moves the layer to the top position in the layer hierarchy. Send to Back Moves the layer to the bottom position in the layer hierarchy. Bring Forward Moves the layer one step up in the layer hierarchy. Send Backward Moves the layer one step down in the layer hierarchy. Object Properties Properties Dialog All WireFusion objects have properties, which can be viewed and edited in the Properties view (Figure 43). To view the properties of certain object, select the object. 63

68 WireFusion 4.1 Volume I: General Reference Figure 43: Properties view The Properties view can contain three different tabs: General, Target Area and Info. General Tab All objects have a General tab in their Properties view (Figure 44). The General tab contains general properties of the selected object. If there are more advanced properties of the object, these can be reached by clicking the Configure... button, which then opens a specially designed dialog. Figure 44: General tab Target Area Tab All objects having a Target Area also have a Target Area tab in the Properties view (Figure 45). In this tab you can for example change the size and position of the Target Area. 64

69 Objects Figure 45: The Target Area tab for an Image object X, Y (number) Specifies the Target Area position in relation to the Stage. The Target Area will be positioned so that the Fixpoint (see below) is placed at the specified position. Width, Height (number) Specifies the Target Area dimension in pixels. Fixpoint (choice) When setting the position of a Target Area using the Set Position in-port, it is the location of the Fixpoint that is set. If, for example, Center is specified as the Fixpoint, and you send (10,10) as the argument to the Set Position in-port of an object, then the Target Area will be positioned so that its center is located at (10,10). If, instead, Top Left is selected, the top left corner of the image will be positioned at (10,10). Cursor (choice) Specifies what mouse cursor type should be used when the mouse is positioned above the Target Area. If there are multiple Target Areas under the mouse cursor, then the topmost Target Area (that has a cursor specified) decides the cursor type. The default is Unspecified Cursor, which means that the Target Area will have no influence over the cursor decision. The following cursor types are available: Default, Hand, Move, Crosshair, Text, Wait, SouthWest Resize, SouthEast Resize, North- West Resize, NorthEast Resize, North Resize, South Resize, West Resize, East Resize, Unspecified Cursor 65

70 WireFusion 4.1 Volume I: General Reference Opacity (number) Specifies the opacity (transparency) of a Target Area. Opacity is specified as a percentage value, where the default value is one hundred percent (totally opaque). Active (Boolean) True turns the object on at startup. For example, if the object is an Image object and False is specified, then it will not display the image, nor react to any mouse events (until activated by an event to the Activate in-port). All objects are initially activated by default. Stamp (Boolean) Leaves a permanent impression of the Target Area in the background. For example, an Image object, which is to be used as a background image only, can be deactivated and stamped instead of always being activated. This will make the presentation run faster since the presentation will not be as processor intensive. This property is not available for objects that do not display anything, like the Mouse Area. Visible on Stage (Boolean) True makes the Target Area visible on the Stage. It is useful when working on large projects with many overlapping Target Area objects. Note that this setting has no effect on the final presentation. Snap to grid (Boolean) True makes the object's Target Area snap to the grid when moved. Info Tab All objects have an Info tab in their Properties views (Figure 46). The Info tab contains general information about the object. 66

71 Objects Figure 46: Info tab Type Shows what type of object the selected object is. ID Shows the object ID. All objects have a unique identification number. Version Shows the object version number. Comment Contains a comment to the object. It is sometimes useful to comment on an object or its function while working. The comment is shown as a tooltip when the mouse cursor is placed over the object icon in the Script Area. A red corner down to the right on the object icon indicates that there is a comment (Figure 47). Figure 47: An object comment 67

72 WireFusion 4.1 Volume I: General Reference TextImage Editor The TextImage Editor lets you create texts with high quality (anti-aliased), which then are saved as images. The benefit of saving the texts as images is that the texts look the same on all platforms. The TextImage Editor also allows for more advanced text editing than the standard text display tools in WireFusion, such as mixing different styles, colors, types and sizes of fonts. The drawback is that you can not edit the text dynamically (i.e. you can not change the text during presentation runtime by sending Text parameters to objects) The TextImage Editor can be launched from the following WireFusion objects: Image, ToolTip, Button, CheckBox, RadioButton and all image file dialogs (by pressing the T icon). Figure 48: TextImage Editor launched from ToolTip Pane Dimension Click Change... to set a new dimension for your text image. Image name Choose a name for your text image. Useful e.g. when controlling streaming with Loading Manager, so that you easily can identify the image. Antialiased Text Mark this checkbox to get smooth edges on the characters. 68

73 TextImage Editor Background color Sets the background color of the text image pane. Background Opacity Specifies the opacity of the text image background. Does not affect the text. Top Margin (pixels) Sets the top margin (in pixels). Left Margin (pixels) Sets the left margin (in pixels). Right Margin (pixels) Sets the right margin (in pixels). Center Vertically Centers the text vertically. Border Optionally specify a border around the text image. The border types available are Line Border, Etched Border and Bevel Border. These can be configured by pressing the Settings button. Select None as border type if you do not want to use a border. 69

74 WireFusion 4.1 Volume I: General Reference Connections You program in WireFusion by visually connecting objects by wires. The connections provide a way to exchange information/parameters between the objects. Objects can have in-ports and out-ports. They can send messages to other objects through their out-ports, and can receive messages through their in-ports. The ports have names associated with them. An example is the Result out-port of the Math object (which sends out results from calculations done by the Math object). The name in bold, found after the port name, in this case the word Number, indicates the parameter type of the out-port, which in this case is a number value (Figure 49). Figure 49: Math Out-ports > Result [Number] Note that the parameter types are themselves WireFusion objects, and can be found in the Library view. There is one exception though, and that is the null parameter, which is the parameter of an empty message or pulse. An empty message is just a trigger to start some action. For example (Figure 50), the in-port Run of the Sequencer object requires no parameter, and hence accepts empty messages (as well as non empty messages). In the following, we will sometimes indicate the argument type of a port by including the argument type in brackets after the port name. Figure 50: Sequencer object's in-ports A simple example of an object sending a message would be a Progressor which sends out a sequence of numbers from its out-port Progress [Number], during a specified time interval. These numbers can be received, for example, by the in-port Set Brightness Level [Number] of 70

75 Connections the Brightness object. The numbers sent from the Progressor will then dynamically change the brightness level of the Brightness filter (Figure 51). Figure 51: A Progressor connected to a Brightness filter Port Constraints It is important to notice that in-ports can only receive messages that have the same parameter type as indicated after the in-port name (Figure 52). The only exception is when no argument type is indicated, which means that the in-port can receive all kinds of messages, including empty messages/triggers. Figure 52: A valid connection sending Number arguments between two objects If you select an out-port that you want to connect to an in-port, then only the in-ports with compatible arguments to the out-port will be selectable, preventing you from making invalid connections. For example, you will not be able to connect and send Color parameters to an in-port that requires a Number parameter (Figure 53). Figure 53: Invalid connection between two incompatible ports 71

76 WireFusion 4.1 Volume I: General Reference In-ports that do not require any parameters can be triggered by messages containing any parameter type (Figure 54). For example, you can send a number message to the Run in-port of a Sequencer to start the Sequencer (which does not require a parameter). Figure 54: Triggering in-ports with any type of message However, any of the semantics of the presentation, naturally, cannot be guaranteed to work as you plan. To get where you want, you will have to carefully study descriptions of the objects and continually test parts of the presentation while developing. Create Connections The whole presentation you will make in WireFusion is based on the objects you choose and configure and the connections between them. Each object has a specific function and by connecting the objects together they can communicate with each other. The actual programming and connecting is done visually either by selecting ports from the object drop-down menus or by using the Wire Creator (see Wire Creator on page 73). To make a connection between two objects: 1. In the Script Area, right-click the object icon you want to connect from. A drop-down menu is opened. 2. From the drop-down menu, select an out-port. The mouse cursor will change to connection mode. 3. If the object you want to connect to is located in a different Folder/Scene, then navigate to the Folder/Scene with the object. 4. In the Script Area, right-click the object icon you want to connect to. A drop-down menu is opened. 5. From the drop-down menu, select an in-port. A wire between the two objects will be shown. If the objects you connected were located in different folders, then the ports were automatically exported to objects located in a common parent folder, and a wire was created between these objects (see The Port Exporter on page 88). 72

77 Connections Cancel Connection Mode If you have selected, for example, one of the out-ports of an object, the program enters connection mode, and expects you to select an in-port in order to create the connection. After entering connection mode, the Cancel connection mode button ( ) will be visible in the Menu Bar. Click on it or anywhere in the Script Area to cancel the connection mode. Deleting Wires To delete a Wire, select the Wire and press the Delete key or select the delete menu item from the Edit menu (or its equivalent from the toolbar). If multiple wires have been selected when you select delete, all selected wires will be deleted. Wire Creator The Wire Creator (Figure 55) helps you to create multiple connects quickly. To make a connection between two objects using Wire Creator: 1. Press ALT on your keyboard and click on the object icon (in the Script Area) you want to connect from. The mouse cursor will change to the connection mode cursor. 2. Press ALT on your keyboard and click the object icon (in the Script Area) you want to connect to. The Wire Creator dialog opens. 3. In Wire Creator, in the Source object port list, select an out-port to connect from. 4. In the Destination object port list, select one or several in-ports to connect to. 5. Click the Connect or the Connect and Close button to create the connection(s). You can also start the Wire Creator from the Menu Bar or from the Windows menu without selecting any objects. 73

78 WireFusion 4.1 Volume I: General Reference Figure 55: Wire Creator Select new object [S] Click this button to select a new source object. When clicked, the Wire Creator window is closed and opens again after you have selected a new source object in the Script Area. Select new object [D] Click this button to select a new destination object. When clicked, the Wire Creator window is closed and opens again after you have selected a new destination object in the Script Area. Source object Lists the out-ports of the selected source object, i.e. the object you want to connect from. Only one out-port at a time can be selected. Destination object Lists the in-ports of the selected destination object, i.e. the object you want to connect to. Multiple in-ports can be selected simultaneously. Connect [C] Creates a connection between the source and destination objects. Note that you have to select an out-port and at least one in-port before a connection can be created. Disconnect [Del] Disconnects selected connections. 74

79 Connections Wires Displays connection information between the selected source and destination objects Connection Properties All connections have properties, which can be viewed and edited in the Properties view (Figure 56). The properties can also be specified/changed in the popup menu of the Wire, which is opened by right-clicking the Wire (Figure 57). Figure 56: Properties view Figure 57: Right-click to open the wire menu Wire Color Specifies the wire color of the selected connection. NOTE: To set a new default wire color, use View > Default Wire Color Enabled (Boolean) True enables the connection, while False disables it. Messages will no be sent through disabled connections. Breakpoint (Boolean) True sets a breakpoint on the connection. Breakpoints are used when debugging a presentation (Figure 10). Read more about Debugging on page 119. Enabled wires have tails that are blue and a black arrow in the other end (Figure 58). 75

80 WireFusion 4.1 Volume I: General Reference Figure 58: Enabled wire Disabled wires have tails that are red and a red arrow in the other end (Figure 59). Figure 59: Disabled wire Wires that have a Breakpoint have a small red dot close to the out-port as seen in Figure 60. Figure 60: Breakpoint enabled Connection Information There are different methods to see which ports are used for a connection. Tooltip The easiest way to see which ports a connection is connected to is to simply place the mouse cursor over the wire. A tooltip displays the out-port and in-port that was used, and the in-port argument is written in bold at the end of the tooltip information (Figure 61). NOTE: When placing the mouse cursor over the wire, the wire itself and the objects it connects get highlighted in red (Figure 61). 76

81 Connections Figure 61: Tooltip Information Bar The Information Bar displays both the objects and the ports that are used (Figure 62). Select the wire to have the information displayed. Figure 62: Information Bar Wire List The Wire List (Figure 63) shows all connections to and from a selected object. It lists the order in which the out-port connections will be executed and the arguments (if any). It also allows you to enable/disable connections and set breakpoints. To check the connections to and from a certain object: 1. In the Script Area, select the object you want to check the connections for. 2. Choose Window > Wire List. Figure 63: Wire List 77

82 WireFusion 4.1 Volume I: General Reference Out-port Shows the out-port names of connections made from the selected object. Destination Shows the destination for the outgoing connections.. The destination object name is written in bold text and its in-port name in plain text. In-port Shows the in-port names of connections made to the selected object. Source Shows the source for the incoming connections. The source object name is written in bold text and its out-port name in plain text. Argument Shows the argument (if any) that is sent or received. Move Up Moves selected out-port up in the execution order. Move Down Moves selected out-port down in the execution order. Delete Deletes selected connections. Enable/Disable Unmark this checkbox to disable the connection. Breakpoint Mark this checkbox to set a breakpoint on the connection (see Debugging on page 119). Select destination object Selects the object a connection goes to, or comes from. 78

83 Forwarding and Storing Data Forwarding and Storing Data In the chapter about Connections (see Connections on page 70), you learned about message parameters. A message parameter is data that can be sent through a connection, from an out-port of an object to an in-port of another object (or the same object). There are two important groups of ports in WireFusion, which we will cover in this chapter. The first group consists of in-port/out-port pairs, which are used to make objects send out object parameters. The other group consists of in-ports, used to set object parameters. Push Parameters In WireFusion, there is a large group of in-port/out-port pairs, used to forward object parameters to other objects. The in-ports do not require any parameters, and their purpose is to make the object to which they belong send out some parameter stored in the object (Figure 64). The name of these in-ports often start with the word Push, and the associated out-port, through which the data is sent, has a name that ends with the word Pushed. An example is the Number object. It has an in-port named Push Value, which, when triggered, makes the object send out the number value it contains through its Value Pushed out-port. Figure 64: Forwarding data through an object To display a number in the Console window, when the user clicks a button: 1. Drag and drop a Button (Widgets category) into the Script Area. The Button dialog opens automatically. Click OK to close it. 2. Drag and drop a Number (Data category) into the Script Area. In the Properties view of the Number object, change the Value to Drag and drop a System (Environment category) into the Script Area. 4. Connect Button Out-ports > Button Clicked to Number In-ports > Push Value 5. Connect Number Out-ports > Value Pushed to System In-ports > Console > Print Number 79

84 WireFusion 4.1 Volume I: General Reference Figure 65: Button, Number and System connected 6. Preview the presentation by choosing Project > Preview. In the preview window, mark the "Show console window" checkbox. 7. Press the button to print the value 10 in the console window (Figure 66). Figure 66: Preview of number shown when the user clicks the button Set Parameters In addition the group of ports described in the previous section, there is a related group of ports with the purpose to set/change object parameters. These in-ports require parameters (in opposite to the previous group of ports). The names of these in-ports often start with the word Set. An example is the Number object. It has an in-port named Set Value [Number]. When a Number parameter is sent to this port, the number parameter of the Number object will be set to the same value as the parameter sent to the in-port. To store a series of numbers in a Number object and display them in the Console window when a button is clicked: 1. Follow step 1 to 7 above in the Push Parameter example. 80

85 Forwarding and Storing Data 2. Drag and drop a Progressor object into your project. A property dialog is automatically opened for the Progressor. Change the At startup setting from Run to Loop. Click OK. 3. Connect Progressor Out-ports > Integer Number Passed [Number] to Number In-ports > Set Value Figure 67: Progressor sets the Number 4. Preview the presentation by choosing Project > Preview. In the preview window, mark the "Show console window" checkbox. 5. Press the button to print the number series in the console window. Figure 68: Console window with numbers displayed when button is clicked 81

86 WireFusion 4.1 Volume I: General Reference Grouping Objects Container Objects To help you organize your project and eliminate visual complexity, you can group objects into Container objects. In WireFusion there are two types of container objects, i.e. objects that can contain other objects; the Folder object and the Scene object. They are very much alike, but with the difference that the Scene object has a Stage while the Folder object does not. Generally, you group together a set of objects that perform a certain task. For example, if a part of your project is a visual display, like a mobile phone display, then you could group the set of objects that accomplishes this into a Scene object. Else, if you have a logic or mathematical function, something that does not have any visual contents, then you could group the objects into a Folder object instead. The grouping often implies exporting relevant ports to the container object, so that they are easily accessed by objects in the same level as the container object (Figure 69). Read more about exporting ports in the Port Exporter section. A container object can be saved and reused in other presentations or just cloned within the same presentation (copy/paste). As a container object is itself an object, container objects can be nested. That is, they can be 'inside' themselves. In fact a whole presentation can be inside another presentation, because the Scene object can be nested. Figure 69: A group of objects gathered in a Folder The Scene Object The Scene object is a Container object and has a special function in WireFusion, as it can be seen as the foundational object. When starting WireFusion, a new and empty project opens by default. It is in fact an empty Scene object that is opened. The root object of all presentations is always a Scene object and it contains all other objects in your presentations, and your final presentation will be displayed on its Stage. You develop your presentation by connecting objects together in the Script Area. They are all related to the root Scene object. The Scene object also has a Work Area, which contains the Stage, where the final presentation will be displayed. In the Work Area you can arrange, 82

87 Grouping Objects move or resize the Target Areas of your images, mouse areas etc (Figure 77). Read more about Target Area objects. Figure 70: The Script Area and Work Area of the root Scene object You can display presentations inside other presentations, i.e. a Scene object can contain and display other Scene objects. Scene objects that are loaded (or dragged) into your project can either have a Target Area, i.e. an area in which the contents of the Scene object will be displayed, or alternatively it can lack a Target Area. When you drag (or load) a Scene object into a project you will be prompted to choose between letting the Scene object have a Target Area, or not to have a Target Area (Figure 71). Figure 71: A Scene with or without Target Area? Well, when should I use a Scene with a Target Area and when should I use a Scene without a Target Area? 83

88 WireFusion 4.1 Volume I: General Reference When to use a Scene object with a Target Area Normally you use a Scene object, having a Target Area, if you want to group a visual function in it. For example, it could be a 2D product display, which contains all the graphics and all the functionality of the display (Figure 72). You can then easily turn the display on and off, by activating and deactivating the object. Figure 72: A Scene object used as a display Interactivity (mouse events) that you create in a Scene works even if you import the Scene into a project and uses it as a local scene. For example, this means that you can have the complete function of a touch sensor screen stored in a Scene and when you use it as a local scene, the touch sensor functionality is still working (Figure 73). Figure 73: A working touch sensor screen used as a local scene (marked with a red border) 84

89 Grouping Objects When to use a Scene object without a Target Area A Scene object without a Target Area is only useful if some other object is capable of receiving the Scene contents as data into one of its in-port. An example of this is the SlideShow object (included in the WF-SlideShow add-on), which has an in-port which lets you replace a slide image with a Scene object. This is a very powerful feature, which allows you to replace a static image in your slide show with, for example, a streaming video (using the WF-Video plug-in) or with an interactive 3D presentation. The Folder Object The Folder object is a Container object and is very much the same as the Scene object, except that it lacks the Work Area and the Stage. It is normally used when creating non-visual functions, like a logical function for example (Figure 74). Figure 74: A switch function stored in a Folder object A function created and stored in a Folder object can be saved on your hard disk or added as a favorite to the Library (Figure 75), just like any other WireFusion object, and reused in other projects or just cloned within the same project using copy/paste (see Object Menu on page 54). 85

90 WireFusion 4.1 Volume I: General Reference Figure 75: Saving an object NOTE: Objects having a Target Area (such as Image, Blur or Mouse Area) cannot function inside a Folder object (as the Folder object has no Stage) and their icons are therefore disabled both in the Library and in the Objects menu when you are located in a Folder. Moving Objects into a Container If you have connected a set of objects together that perform a certain task, then you could optionally group them in a container object, i.e. in a Folder or in a Scene object. One reason for grouping objects would be to clean up the Script Area and make your project easier to read. To group objects: 1. Insert an empty Folder object (or Scene object) that will be used to store the objects in. 2. Select the objects you want to group. 86

91 Grouping Objects Figure 76: Selecting several objects 3. Press SHIFT on the keyboard as you drag the selected objects and then drop them on the Folder object. Figure 77: Dropping the selected objects on the Folder object. 4. Click OK to approve the move. 87

92 WireFusion 4.1 Volume I: General Reference Figure 78: The selected objects grouped in the Folder object. NOTE: Objects having a Target Area (such as Image, Blur, Mouse Area etc) cannot function inside a Folder object (as the Folder object has no Stage). TIP: While pressing SHIFT and dragging the selected objects, you can alternatively move the cursor over the Folder view and drop the objects over a folder found there instead. The Port Exporter It is quite common in WireFusion to create functions that perform certain tasks. A function could for example be a Folder object containing (grouping) one or several objects. The function could either perform its task by itself or it needs to be connected to other objects in order to perform the task. If it needs to be connected to other objects, then a good idea is to use the Port Exporter. The Port Exporter is used to export ports from grouped objects so that they become visible in the container object, i.e. the object that contains the grouped objects. We illustrate this with an example: An object ('Object 1') is placed inside a Folder object (function). Another object ('Object 2') is placed beside the Folder object (see Figure 79), i.e. at the same hierarchical level. Instead of making a connection directly between 'Object 2' and port x in 'Object 1', it can be easier in the long term to export port x and make it visible in the Folder object's menu instead. You would then connect 'Object 2' with the Folder object instead. Figure 79: Exported port x from 'Object 1' makes it visible in the 'Folder' menu 88

93 Grouping Objects When the Port Exporter dialog is opened, you can choose to export in-ports by clicking the Inports tab or export out-ports by clicking the Out-ports tab (Figure 80). Figure 80: Port Exporter for an Image object The procedure of Exporting Ports The way you export ports will be explained through an example. We will create a simple function inside a Folder object. Then we want information from outside the Folder to enter an object located within the Folder. This trivial example will play a sound when a button is clicked. We will start with an overview of the steps we will perform: 1. Start a new project. Place a Folder and a Button in the Script Area. 2. Open the Folder object by double clicking it, and then place a Sound object in it. 3. Select the Export Ports... from the Sound object's menu. The Port Exporter dialog is opened. 4. In the Port Exporter dialog, click the In-ports tab, and then mark the Exported checkbox for the in-port named Start. 5. When prompted, rename the default name Start to Start Sound. Click OK. 6. Click OK to close the Port Exporter. 7. In the Menu Bar, click the Up button to move up in the hierarchy. 8. Connect Button Out-ports > Button Clicked with Folder In-ports > Start Sound. 9. Test and run the presentation. 89

94 WireFusion 4.1 Volume I: General Reference Step 1 Start a new project. Place a Folder (found in the Misc category) and a Button (found in the Widgets category) into the Script Area (Figure 81). If you open the Folder menu, you will see that there are no out-port or in-port options available (Figure 82). Figure 81: A Folder and a Button in a new project Figure 82: A Folder with neither out-ports nor in-ports Step 2 Double click the Folder icon to open it up, and then add a Sound object inside the Folder. The Sound object's dialog opens when dropped and by default it contains a sound (a ring signal), so there is no need to browse for a new sound file. Click OK to close the dialog (Figure 83). 90

95 Grouping Objects Figure 83: A Sound object inside the Folder Step 3 Open the Sound object menu and select Export Ports... (Figure 84). The Port Exporter dialog will now be opened. Figure 84: Opening the Port Exporter Step 4 In order to make the In-port Start of the Sound object visible in the Folder menu, we need to mark the Exported check box for the in-port named Start (Figure 85). Figure 85: Exporting the Start port Step 5 When the checkbox has been marked, you will be prompted to rename the port. Change the default name Start to Start Sound. When you are done, click OK (Figure 86). 91

96 WireFusion 4.1 Volume I: General Reference Figure 86: Changing the port name to Start Sound Step 6 Click OK to close the Port Exporter. Step 7 The in-port Start (now renamed to Start Sound ) now has been exported up one level, and is visible in the Folder menu. Click the Up button (found in the program Menu Bar) to move up in the object hierarchy. Now, the Folder and Button objects should be visible in the Script Area again. Open the object menu of the Folder to see that the Start Sound port is visible (Figure 87). Figure 87: The Start Sound In-port visible in the Folder menu Step 8 Now you can let the Button object trigger the Sound. Connect: 'Button 1' > Out-ports > Button Clicked to 'Folder 1' > In-ports > Start Sound Step 9 Done! A Button triggers a Sound, which resides in a Folder. Press F7 on your keyboard to preview your presentation. 92

97 Grouping Objects Exporting ports more than one level In the example above we exported a port one level up, from the Sound object placed in a Folder so that it became visible in the Folder menu. However, sometimes it's necessary to export several levels. For example, let's say that you have placed a Sound object ('Sound 1') in a Folder ('Folder 2'), which in turn is placed in yet another Folder ('Folder 1') (Figure 88). Figure 88: A Sound in a Folder, which is placed in yet another Folder Analogously with the example above, you just use the Port Exporter to export the Sound object Start port so that it becomes visible, first in the 'Folder 2' menu (Figure 89), then you enter the Port Exporter from the 'Folder 2' menu and export it again. Now it's visible in the 'Folder 1' menu too (Figure 90). Figure 89: The Start Sound In-port visible in the 'Folder 2' menu... Figure 90:... and then, after exporting again, also in the 'Folder 1' menu 93

98 WireFusion 4.1 Volume I: General Reference Sorting Ports The Port Exporter also helps you to sort the ports you have exported. To sort exported ports: 1. Open the Port Exporter from the object you have exported the ports to. 2. In the Port Exporter dialog, use the Move Up and Move Down buttons to sort the ports (Figure 91). Figure 91: Changing the port order TIP: You can also rename already exported ports in the Port Exporter (Figure 92). Figure 92: Changing the port name TIP: You can also create submenus when naming the exported ports. This is done by using a pipe ` ' character (Figure 93 and Figure 94). 94

99 Grouping Objects Figure 93: Creating submenus with a pipe character (' ') Figure 94: A submenu named Sound in the Folder menu 95

100 WireFusion 4.1 Volume I: General Reference Layers Layers View Layers are similar to sheets of acetate or transparent film, stacked on top of each other. The layers in WireFusion do not work exactly the same as in for example Adobe Photoshop or Macromedia Flash, but the concept is similar (Figure 95). Each object with a Target Area can be seen as a layer and it will be listed in the Layers view. The ordering of the objects in the Layers list will decide in which order the objects will be applied (drawn) on the Stage. The object at the bottom of the Layers list will be applied first. The topmost object in the Layers list will be applied last, and hence placed on top of all the other visible objects. For example, if you in a Stage have an image of a Car, a Grayscale filter and a Lens filter, with the same ordering of the layers as in Figure 95, then you will get the result seen in Figure 96. Figure 95: The Layers view in WireFusion Figure 96: The result 96

101 Layers When you select a layer in the Layers view, its associated Target Area will temporarily be moved to the front in the Work Area so that you can reposition and resize it with greater ease. TIP: You can use the Layers view for making connections between objects or entering their properties dialog. Right click on a layer to open its object menu (Figure 97). Figure 97: Right click to open object menu Reordering Layers Layers are created automatically whenever an object having a Target Area is dragged into the project. A new layer will then automatically pop up in the Layers view. New layers are always placed on top of the already existing layers. To change the order of layers: 1. In the Layers view, place the mouse cursor over a layer and press the mouse button (Figure 98). 2. Drag the layer up or down in the Layers view. When the red horizontal line appears in the position you want to place the layer, release the mouse button (Figure 99). 97

102 WireFusion 4.1 Volume I: General Reference Figure 98: Dragging of 'Fish' layer Figure 99: 'Fish' layer dragged below 'Bird' layer Layers Checkboxes Three checkboxes appear on the left side of the layer names: Active, Stamp and Visible on Stage (there are duplicate commands in the Properties view for each Target Area object). Active (left checkbox) When marked, it means that the object is "turned on" (Figure 100). The object will be active in the presentation and it will for example generate mouse events when mouse operations are performed above its Target Area. If it is a visible type of object, then it will be shown in the presentation. Visible objects will often update the graphics in their Target Areas once every frame, which will consume CPU. If an object will look the same as it did in the last frame, and the same goes for all other objects intersecting the objects target area, the object will not update its Target Area, which saves CPU. Figure 100: Bird' image activated 98

103 Layers When unmarked, it means that the object is "turned off". The object's Target Area is not updated at all and it will hence be invisible. Deactivated objects will not consume any CPU, no matter which object or Target Area size. Deactivated objects will not generate any Mouse events. NOTE: An object can be activated and deactivated during a presentation through the object's in-ports Activate and Deactivate. Stamp Background (middle checkbox) The background is a canvas area located behind the area that objects are normally drawn on/applied to. You can apply a graphical object to this special area by marking the Stamp Background checkbox (Figure 101), which will result in that the object is applied to the background in the first frame of the presentation. If you unmark the Active checkbox, and mark the Stamp Background checkbox, you might think the object will only be shown during the first frame. However, the background is never cleared, which means that anything you draw on the background will stick there. Figure 101: Background image stamped in the background at startup There is also another way to apply graphical objects to the background. By sending an event to the in-port Stamp Background of an object, it will be drawn instantly on the background. This can for example be used for creating presentations where users can draw on a canvas. TIP: Unmark the Activate checkbox and mark the Stamp Background checkbox if you want an image to work as a permanent background image without consuming any extra CPU. Visible on Stage (right checkbox) If you unmark this checkbox, the Target Area of the object will become invisible (Figure 102). This is useful when working on large projects with many overlapping Target Area objects. 99

104 WireFusion 4.1 Volume I: General Reference Figure 102: The Target Area for Grayscale 1 is invisible in the bottom image NOTE: This setting has no effect on the final presentation, only when working inside WireFusion. 100

105 Alpha Channels Alpha Channels Normally, image files store the colors in three channels, the RGB channels (Red, Green, and Blue). Every dot in a picture is then composed of a blend of varying values - these values signify 256 shades each of red, blue and green. Some bitmaps can also store 256 levels of transparency - they have the ability to incorporate an alpha channel. This channel is basically a selection or mask represented in 256 colors, normally of the grayscale spectrum. White stands for 100 percent opaque, black represents 100 percent transparent and the shades of gray in between, represent varying degrees of transparency. Alpha Channels in WireFusion Alpha channels in WireFusion essentially work as described earlier, but with the difference that a bluescale is used to represent the opacity, instead of a grayscale spectrum. The alpha channel has 256 levels (or 8 bits) of transparency. Parts of the alpha channel graphics having blue values equal to 0 are completely transparent, blue values equal to 255 are totally opaque and blue values between 0 and 255 represent shades of transparency. Generally, all objects in WireFusion having a Target Area, and a visual effect/graphics displayed in it, also have an alpha channel that can be used to shape the otherwise rectangular Target Area. Not all graphical objects in WireFusion have an alpha channel. If an object has an alpha channel, then it contains an Alpha Channel object, which you can navigate to using the Folders view (Figure 103). You can also reach the Alpha Channel object by right clicking the object, and choosing Explore Alpha Channel. Figure 103: An Invert object with its Alpha Channel As you can see, the Alpha Channel object has the same icon as a Scene object, and in fact, it is a Scene object. Everything you do in the Alpha Channel Scene, and on its Stage, will work as your alpha channel. This means that you can have animated and interactive alpha channels in WireFusion. The best way to learn and understand the alpha channels is by a step-by-step example. Example: To shape an invert filter as a star In this example, you will create a presentation where users can move a star-shaped invert filter above an image. 101

106 WireFusion 4.1 Volume I: General Reference Step 1 Insert an Image object in a new project. Step 2 Insert an Invert object. In the Properties view, change the Target Area dimensions to pixels. Make sure the Invert object is placed in a layer above the Image, as you want the invert filter to operate above the image (Figure 104). Figure 104: The Invert object in a layer above the Image Step 3 We want to use the alpha channel to shape the Invert Target Area. Navigate to the Invert object's Alpha Channel by right-clicking the Invert object and selecting Explore Alpha Channel (Figure 105). Figure 105: Jump to the Alpha Channel 102

107 Alpha Channels Step 4 You now see the Alpha Channel stage. Resize the stage by selecting the program menu option Scene > Scene Properties. Set the Stage dimension to 50x50 pixels. Step 5 Insert an Image object into the Script Area (of the Alpha Channel). Change the default image to a bluescale image (alpha channel image), shaped like a star. Place the image so that it covers the Stage (Figure 106). Figure 106: The alpha channel image on the alpha channel stage Step 6 To control the Invert filter using the mouse, use the built in mouse events of the Image object. Connect: 'Image 1' > Out-ports > Mouse Events > Mouse Move [2D Number] to 'Invert 1' > In-ports > Target Area > Set Position [2D Number] Figure 107: Image connected to Invert Step 7 Preview the presentation by pressing F7 on your keyboard. The normally rectangular invert filter is now shaped as a star. Use the mouse to move the star (Figure 108). 103

108 WireFusion 4.1 Volume I: General Reference Figure 108: The result of the invert filter shaped after the alpha channel image Mouse Map The Mouse Map of the Mouse Area object is similar to the Alpha Channel object explained in the previous section. The Mouse Map is however, as opposed to the Alpha Channel object, not used for any graphical purposes, but for specifying which parts of the Target Area should be considered as belonging to the mouse area. Parts of the mouse map graphics having blue values equal to 0 are outside of the mouse map and blue values equal to 255 are considered to be part of the mouse map. The default color of the Mouse Map pixels is white (i.e. blue component of all pixels is equal to 255), which means that the entire Target Area is considered as belonging to the mouse map. 104

109 Alpha Channels Figure 109: A Mouse Area In the figure above (Figure 109), the Target Area of the Mouse Area object is a rectangular shape. Perform the following tasks to give the mouse area a shape different from the rectangle: Navigate to the Alpha Map of the Mouse Area, using the Folders view, or alternatively, rightclick the Mouse Area object to open its menu and select Explore Mouse Map to jump there directly (Figure 110). Figure 110: Jump to the Mouse Area Place your map image in the Script Area (of the Mouse Map). See Figure

110 WireFusion 4.1 Volume I: General Reference NOTE: You do not have to have the same size on your Mouse Area Target Area as your Mouse Map stage. It will be resized to fit automatically. Figure 111: The map image The Mouse Area object's Target Area will now be shaped after the map image (Figure 112). Figure 112: The shaped mouse area 106

111 Alpha Channels As with the Alpha Channel, the Mouse Map is a Scene object. Everything you do in this Scene, and on its Stage, will work as your mouse map. This means that you can have both animated and interactive mouse maps in WireFusion, if you like. 107

112 WireFusion 4.1 Volume I: General Reference Optimizing your Presentations The performance of your WireFusion presentations can differ a lot, depending on how you optimize them. There are several aspects to think of while developing and we will enlighten the most important issues here. Frames per Second (FPS) Traditional animation involves a series of still images. As with movies, each image is called a frame. Other web authoring tools, like Macromedia Flash, are very well suited for creating animations, i.e. they normally create a sequence of still images (frames) displayed in a player (Figure 113). Figure 113: A frame-based animation With WireFusion, however, you generally do not create traditional animations. You create interactive real-time presentations. And when you create true interactivity, you cannot have ready-made frames, since you do not know what the user wants to do. Therefore, the frames have to be created "on the fly". WireFusion does this creation in real-time while the users interact with the presentation. When viewing a presentation created with WireFusion it will not display the next frame until it is finished creating (calculating) the current frame. This means that the presentation is dependent on the user's computer speed. This is something you, as developer, should have in mind when creating presentations. The rate at which each frame is displayed is measured in Frames Per Second (FPS). The movies you see at a theater usually displays 24 frames per second. Higher frame rates results in smoother animations, but sometimes 10 frames per second can be sufficient. Movies have a fixed frame rate throughout the whole movie, but with WireFusion the frame rate can differ, depending how complex the presentation is at the time. In WireFusion, you can specify the maximum number of frames per second that a presentation will display. The default value is 25. If you create a presentation that runs smoothly at a lower frame rate than this, it is a good idea to use the lower frame rate value. This will prevent the presentation from using more CPU than necessary to get a smooth presentation. To set the maximum number of frames per second: 1. Open Scene Properties, choose Project > Properties... (Figure 114). 2. In the Frame Rate (FPS) field, set the maximum number of frames your presentation should be allowed to display. 108

113 Optimizing your Presentations Figure 114: Scene Properties dialog Optimization tips TIP: Always try to set the Frame Rate (FPS) value to the lowest value possible, where you still get a smooth presentation. TIP: While developing and testing your presentations, you can test the frame rate. Click anywhere in the presentation window (to give focus to the presentation) and then write the invisible code word 'showf' (which is short for 'show FPS') on your keyboard. The current FPS value of your presentation will be displayed in the status window (Figure 115). Figure 115: Displaying the current FPS, which is set to a maximum of 25 FPS TIP: You can also benchmark your presentations. Click anywhere in the presentation and then write the invisible code word 'showb' (which stands for 'show benchmark') on your keyboard. Full CPU power will be given to your presentation and the FPS will be displayed in the status window (Figure 116). 109

114 WireFusion 4.1 Volume I: General Reference Figure 116: Benchmarking the presentation giving it full CPU power Image Processing One of the strengths of WireFusion is its ability to handle real-time image processing in the presentations. So, what does this mean? Basically, image processing means that the pixels in a bitmap image are manipulated. Normally this involves consumption of a lot of CPU power. A very simple image-processing filter is the grayscale filter. It just converts the pixel color values into a corresponding grayscale value (Figure 117). Figure 117: A grayscale filter using an alpha channel, converting the background to grayscale Several applications, such as Adobe Photoshop, have filter plug-ins, that can manipulate the image in a lot of different ways. What you do in Adobe Photoshop is that you select an area of an image and then apply a filter function to the selection. You normally also have the possibility of changing some filter parameters. All of this can be done in WireFusion too. WireFusion is delivered with twelve basic filter objects, which can be found under the Filter folder in the object Library. In WireFusion you insert your filter object, specify the filter Target Area and then activate it (is activated as default). When you start the presentation, the filter will be activated and it will manipulate all underlying pixels (graphics). 110

115 Optimizing your Presentations As your presentation probably will be presented on the web, you might want the users to interact with it. WireFusion was therefore created to handle image processing filters in realtime. So, what do we mean by real-time? With real-time we mean that the user can move a filter Target Area (a selection in Adobe Photoshop), resize it and even change its parameters in your presentation and it will be updated directly and automatically. Optimization tips Image processing consumes CPU and some objects consume more than others. TIP: Remember not to have too many image processing filters activated in your presentation at the same time. TIP: The least CPU intensive filter objects are Brightness, Grayscale, Invert, Mosaic and Noise. Target Area Optimization tips TIP: Try not to have too large Target Areas. Larger Target Area means more pixels to process. For example, a Target Area of pixels contains pixels. A pixel area contains pixels, i.e. four times more pixels to process than the area. TIP: All objects with a Target Area have in-ports for activating and deactivating the objects. Try to deactivate a Target Area object when it's not needed, and then re-activate it again if needed again. TIP: If you use a static image in the background of your presentation for a period of time, make sure to use the Stamp Background option instead of having them activated (i.e. unmark the Activate checkbox and mark the Stamp Background checkbox, or use the corresponding in-ports). This will save a lot of CPU! Scenes All active stages consume CPU. All presentations have at least one active stage, the root Scene object's stage. That is your presentation display. The larger display your presentation has, the more CPU it will consume (Figure 118). 111

116 WireFusion 4.1 Volume I: General Reference Figure 118: Presentation display size To change the Stage size of your presentation: 1. Choose Project > Properties Set Width and Height (in pixels) To change the size of a local Stage: 1. Navigate to the local Stage you want to change, using the Folder view. 2. Choose Scene > Scene properties 3. Set Width and Height (in pixels) Optimization tips TIP: Try not to make your presentation display too large. Resources WireFusion presentations use many externally made resources, such as 3D models, images, Flash animations, video clips, sounds etc. These resources are made with third party programs and they need to be optimized in their respective program before imported to WireFusion. This is important in order to receive small (in size) and bandwidth friendly presentations suited for the web. Another aspect is how and when the resources are loaded into the presentation. 112

117 Optimizing your Presentations Optimization tips TIP: 3D models are built of polygons. The number of polygons affects the performance a lot. Therefore, always make sure to create, or use, low-polygon models in your presentations. Alternatively, use a polygon reduction tool. TIP: If you use a 3D model with texture images, make sure to use as small dimensions as possible for the texture images. A texture image with, for example, the size 512x512 pixels, will use the following amount of RAM memory: 512x512x4 bytes = 1 MB. The general formula is: Memory usage = width*height*4 bytes. A presentation is usually not allowed to use more than 64 MB of RAM. TIP: If you intend to use an image in your presentation with for example the dimension pixels. Do not save it as in your image software and then resize it down to in WireFusion. This will only cost you unnecessary kilobytes in download and also in memory used by the presentation. Try to save it directly in the dimension you will use in WireFusion. The memory used by an image in for example an Image object is calculated in the same was as in the previous tip about texture sizes. TIP: Always try to optimize the size when saving your images in your image software. Use compression for JPEG images and minimize the colors for GIF and PNG images. Being careful at this stage will save you many kilobytes. TIP: Optimizing your MPEG movies will save you many kilobytes, and in same cases even megabytes. Make sure to optimize the dimension (width and height) so it fits your presentation. Do not include audio, unless you intend to use it. Experiment with different bit rates to get the smallest possible files, while keeping an acceptable level of quality (for both audio and image). TIP: When publishing your presentations to the Internet (i.e. as Java applets), you can speed up the startup time significantly for some presentations by loading selected resources after the presentation has started. Use the Loading Manager for this. Reuse of Objects WireFusion reuses the object code whenever it can. This means that you, for example, can have one or twenty Progressor objects in a presentation, and the final code will almost be the same. However, the size of your presentation depends on how many different types of objects you use in your presentation. For example, using twenty Progressor objects costs less in file size than if you use one Progressor object and one Math object. Optimization tips TIP: Try to use as few object types as possible, in order to obtain as small final presentations as possible. TIP: Check your project before publishing it to ensure that you have not kept any objects that will not be needed. 113

118 WireFusion 4.1 Volume I: General Reference Summary of Optimization Tips Here follows a summary of the most important issues to think of when optimizing your Wire- Fusion presentations. 1. Always try to set the (maximum) Frame Rate (fps) value to the lowest possible value. 2. Test the frame rate of your presentations with 'showf' and 'showb' while previewing your project. 3. Do not use too many filter objects in one and the same presentation. 4. Do not use too large Target Areas. 5. Temporarily deactivate non-needed Target Area objects. 6. Use the Stamp background option for background images (which you also deactivate). 7. Do not use too large Stage dimensions (presentations display). 8. Use low-polygon 3D models. 9. Save your images to the size dimension you will need in WireFusion. 10.Compress and optimize colors of images in your image software. 11.Optimize the encoding of your MPEG movies; video dimension and bit rate vs. quality. 12.Remove unused objects in your project before publishing. 13.Always test your presentations on the minimum required computer system. 114

119 Testing your Presentations Testing your Presentations It is very important that you test and preview your presentation along with the development of new functions, in order to achieve a well working presentation. It can be quite difficult to debug your presentation for errors if you have not tested every step of it in the creation process. There are two methods to preview your presentation while developing without leaving Wire- Fusion; in the internal viewer and in your favorite browser. Hierarchy There is a hierarchy of objects in your WireFusion projects similar to the schematic view seen in Figure 119. Figure 119: A schematic view of an object hierarchy in a project At the top there is the main Scene object of the project, which will display your presentation. No matter where you are located in the object hierarchy, you can always preview your project. To preview a presentation: 1. Choose Project > Preview to preview the project in the internal viewer, or choose Project > Preview in Browser to preview it in the browser. Duplicate commands reside in the Menu Bar (Figure 120). Figure 120: The project preview buttons 115

120 WireFusion 4.1 Volume I: General Reference All other objects in your project are grouped in the main Scene object. In some projects you might have local Scene objects (Figure 121). These local Scene objects can either display graphics directly on your main stage, or they can, for example, be alpha channels containing alpha map graphics. Figure 121: Located in a local Scene object down in the hierarchy To preview a local Scene: 1. Navigate your way down in the hierarchy to the local Scene you want to preview, using the Folders view. 2. Choose Scene > Preview Scene to preview the local Scene in the internal viewer, or choose Scene > Preview Scene in Browser to preview it in the browser. Duplicate commands reside in the Menu Bar (Figure 122). Figure 122: The Preview Scene buttons Viewer The internal viewer allows you to test your presentations directly inside WireFusion (Figure 123). It starts quickly and is normally used when you make small changes in your presentations, like changing a position or a value. You can also resize the internal viewer, making it larger than the preset size. This is useful for, for example, to examine details in your presentations. For larger and more detailed tests, it is recommended that you also preview your presentation in the browser. 116

121 Testing your Presentations Figure 123: Preview in the internal viewer To preview the project in the viewer: 1. Choose Project > Preview or press F7 on your keyboard. Alternatively, click the Preview button in the Menu Bar (Figure 124). Figure 124: Preview button in the Menu Bar To preview a local Scene in the viewer: 1. Choose Scene > Preview Scene or press F8 on your keyboard. Alternatively, click the Preview Scene button in the Menu Bar (Figure 125). Figure 125: Preview Scene button in the Menu Bar NOTE: If you leave the viewer up and running (without closing it) while developing and if your presentation is CPU intensive, then it will affect the WireFusion program performance. Therefore, close the viewer to ensure better performance. 117

122 WireFusion 4.1 Volume I: General Reference Browser To preview your presentation in the browser will give you a more accurate testing and closer to "real life"' and final experience. You can also test certain features in the browser, which you can not test in the internal viewer. For example, you cannot test the "Call presentation from JavaScript" functionality in the internal viewer, only in the browser. To choose a browser other than the default browser: 1. Choose File > Preferences (Figure 126). 2. In the Browser location field, enter the path to your browser, or browse for it clicking the "..."-button. Figure 126: Selecting browser in Preferences To preview the project in the browser: 1. Choose Project > Preview in browser or press CTRL+F7 on your keyboard. Alternatively, click the Preview in browser button in the Menu Bar (Figure 127 and Figure 128). Figure 127: Preview in browser button in the Menu Bar 118

123 Testing your Presentations Figure 128: Preview in browser To preview a local Scene in the browser: 1. Choose Scene > Preview Scene in browser or press CTRL+F8 on your keyboard. Alternatively, click the Preview Scene in browser button in the Menu Bar (Figure 129). Figure 129: Preview Scene in browser button in the Menu Bar NOTE: After deployment, it is important to test your presentation in all target browsers and on all target platforms before publishing it to your web site. NOTE: If you leave the browser up and running (without closing it) while developing, and if you presentation is CPU intensive, then it will affect the WireFusion program performance. Therefore, close the browser to ensure better performance. Debugging Sometimes when developing you will run into situations when your presentation does not perform what you would like it to perform. Then you need methods for debugging it, to know and understand what is happening in your code. WireFusion has a built-in debugger, which lets you analyze a presentation, or an individual function. The debugger can be used to step through the presentation, understanding the order connections are executed in and to inspect parameter values sent between objects. 119

124 WireFusion 4.1 Volume I: General Reference To debug a project: 1. Choose Debug > Debug to open the Debug Console (Figure 130). 2. In the Debug Console, click the Start button to start the debugger. 3. Click the Step button to jump to the next executed connection at the time. NOTE: It is also possible to debug a local scene (instead of the main project). Do this by selecting Debug > Debug Scene. NOTE: Debugging can be made in the internal viewer only, i.e. you cannot debug using the browser. Figure 130: An empty Debug Console For each executed connection, the wire in the Script Area will start blinking, and the Debug Console window will display the parameter value (or pulse) sent between the connected objects, and which in- and out-ports that are used (Figure 131). Figure 131: The Debug Console showing what is sent through a wire Start (button) The debugging is stopped at startup by default. Click the Start button to start the debugging. Step (button) Click the Step button to execute one connection at the time. You can click the Step button at any time; it will pause the debugger if running and display the next connection to be executed. 120

125 Testing your Presentations Resume (button) Click the Resume button to continue debugging from a stopped position. The information seen in Figure 131 has the following meaning: 1. Number (value=0.0) means that a number value of 0.0 is sent as a parameter through the connection wire. 2. Progressor 1.Progress means that the parameter is sent out from an object named 'Progressor 1', and from out-port option Progress. 3. Image 1.Set Opacity means that the parameter is sent to an object named 'Image 1', and to its in-port option Set Opacity. Add breakpoints Before debugging your presentation, you may want to add breakpoints to your code, or more accurately, add breakpoints on selected wires. A breakpoint will suspend the presentation automatically and display the connection information in the Debug Console window. To add a breakpoint: 1. Navigate to the object/connection you want the debugger to stop at. 2. Select the wire you want to set a breakpoint to, by clicking the wire. 3. In the Properties view, change the Breakpoint value to True. The out-port side of the wire will get a red dot (Figure 132) indicating a breakpoint is set, else the dot is white. Figure 132: Red dot indicating a breakpoint is set Alternatives to set a breakpoint are; right-click the wire to open the wire menu, then choose Breakpoint (Figure 133). You can use the Wire List to set the breakpoint (Figure 134). Figure 133: Add/remove a breakpoint in the wire menu 121

126 WireFusion 4.1 Volume I: General Reference Figure 134: Add/remove a breakpoint in the Wire List Remove breakpoints To remove a breakpoint: 1. Navigate to the object/connection you want to remove the breakpoint for. 2. Select the wire by clicking it. 3. In the Properties view, change the Breakpoint value to False. 122

127 Deployment Deployment The final stage of your WireFusion production is to publish it. Before you publish your presentation to the Internet as a Java Applet, it is often a good idea to use the Loading Manager, which helps you to control the streaming order of your presentation while loading it. Loading Manager If you intend to publish your presentation to the Internet as a Java Applet, then it is a good idea to use the Loading Manager. By using the Loading Manager, media resources such as images and sounds can be streamed into your WireFusion presentation after it has been started. This is very useful in order to decrease the loading time and hence increase the user experience. To start the Loading Manager: 1. Choose Project > Loading Manager (Figure 135). Figure 135: The Loading Manager Preloaded files 123

128 WireFusion 4.1 Volume I: General Reference By default, all resources are located in the right list of the Loading Manager, called Preloaded files. All resources placed here will be loaded before the presentation is started. Streamed files To have a resource streamed into the presentation after the startup, mark the resource and click the transfer button (left arrow) to place it in the Streamed files list. Resources placed here will be streamed, one by one, in the order they are listed. To change the order, use the up and down arrows. If a resource in the streaming list has not been loaded yet, but is requested by the presentation, then it will immediately start to download and is loaded simultaneously with the currently streamed resource. NOTE: Images or sounds that are activated or started directly at the presentation startup will be preloaded, even if they are placed in the Streaming files list. Some objects have built-in streaming settings, such as 3DScene, Video and MP3 Player. Publish Dialog In order to deliver your presentation to the audience, you have to publish it. To publish: 1. Choose File > Publish to open the publishing dialog (Figure 136). 2. Choose in which format you want to publish your presentation, and then click the Finish button to publish. 124

129 Deployment Figure 136: The Publish dialog Presentation Name Choose a name for you presentation (by default your project name is used). Publishing Folder Select the folder where you want to publish your presentation (C:\WireFusion_Presentations is default in Windows). Formats (choice) You can publish your presentation in different formats: as a (1) Java Applet, (2) Java Application, (3) Java Component, (4) Image Generator Servlet and (5) Animation. Finish When you are ready with the settings, click Finish to publish the presentation. Java Applets Presentations published as Java Applets can be inserted into web pages. Applets can also be used for Intranets, Extranets and offline purposes (CD-ROM, DVD). 125

130 WireFusion 4.1 Volume I: General Reference To publish as a Java Applet: 1. Choose File > Publish 2. Choose a Presentation Name and a Publishing Folder. 3. In the Formats drop-down menu, choose Java Applet. 4. Choose optional Format Settings and click Finish to publish. Figure 137: Publish dialog for Java Applets Download Java Plug-in if Java is missing (checkbox) Adds a JavaScript to the auto generated HTML code, which detects if Java is missing on the viewer's computer. If Java is missing, the viewer will automatically be prompted to download the latest Java Plug-in from Sun Microsystems. Encrypt resource file [Professional and Enterprise Edition] (checkbox) When publishing your presentation as a Java Applet, i.e. for the web, you have the option to encrypt the file containing the preloaded resources (preload.jar). This is done to prevent users from stealing your resources. Add loading progress JavaScript (checkbox) Select this checkbox to include a JavaScript function in the auto generated HTML code, which receives a loading progress number (0-100) as a parameter during the loading of 126

131 Deployment the Java Applet. The default behavior of this function is to display the progress in the status bar of the browser, but you can add your own code instead, that handles the progress value. Custom Loader Graphics [Professional and Enterprise Edition] (checkbox) If you select this checkbox, you can specify custom loading graphics, like the progress bar and background image displayed while the presentation is loaded (see below). Progress Bar Graphics Click the Change button to select a new loading bar image. The image is centered in the display window. It is invisible at first, and while the loading is progressing, more and more of the image will be displayed, from left to right. JPEG and transparent GIF images are supported. Background Graphics Click the Change button to select a new background image. The image will be centered in the display window and is placed behind the loading bar image. JPEG and transparent GIF images are supported. Screenshot Background Automatically makes a screenshot of the first frame of your presentation and uses it as background graphics. The Screenshot Background can be used together with the progress bar and background images. If you want the screenshot only to be displayed during loading, then you can select transparent 1 1 GIF images as progress bar and background graphics. Background color Specifies the background color of the loading screen. What is published? When clicking the Finish button, your presentation will be published to a folder called 'java applets', located in your Publishing Folder (specified in the Publish dialog). The presentation will be published as a folder, containing an HTML file and two folders (Figure 138): 1. The HTML file contains a Java Script (or the Java Applet tag if Add loading progress JavaScript was not selected). 2. One of the folders, the 'wf-player' folder contains the WireFusion player files. 3. The other folder, named after the Presentation Name (which is specified in the Publish dialog), contains all the resources of your presentation (i.e. 3D model, images, sounds, logic etc). 127

132 WireFusion 4.1 Volume I: General Reference Figure 138: HTML presentation 'Mity3' published to D:\WireFusion_Presentations\Cateye In order for the presentation to work and for the users to see it on the web, all the contents stored in the 'java_applets' folder have to be uploaded to your web server, and the users must have a Java 1.1 (or higher) enabled browser. It is important that you always upload the 'wfplayer' when you upload a new or updated presentation, since files in this folder may have been added or modified since the last time you uploaded a presentation. WireFusion publishes your presentation to a default HTML document, which can be edited later with a third party HTML authoring program, like for example Macromedia Dreamweaver or Adobe GoLive. If you want to place the presentation in another HTML document, then you have to copy the HTML code between the following two lines: and <!- BEGIN WIREFUSION PRESENTATION CODE > <!- END WIREFUSION PRESENTATION CODE > and paste it into your own HTML document. If this other HTML document is located elsewhere on the web server, then you have to change the CODEBASE attribute in the HTML code to point at the folder where the original HTML document was located, otherwise your presentation will not work. 128

133 Deployment Figure 139: WireFusion presentation 'Mity3' running on the web TIP: If you intend to publish several presentations to one and the same web site, then you can beneficially publish them to the same directory (Publishing Folder). All presentations on this site will then use the same 'wf-player' directory, which will be cached by most browsers/systems, and hence speed up the loading (and re-loading) time. The default HTML document has two information links, one that briefly explains how to install the presentation into another HTML document, and another that shows a size report (Figure 140). The total presentation size is reported, as well as the size of its individual parts (2D Engine, 3D Engine, Preloaded files and Streamed files). Estimated download times are also shown. Figure 140: Size report 129

134 WireFusion 4.1 Volume I: General Reference TIP: Preloaded resources will automatically be cached by the client computer, allowing for faster re-loading of the applet when returning to the same presentation. The default cache size is 2048 KB, but can be changed by adding an applet parameter to your HTML code: <param name="cachesize" value="4096"> // 4 MB Cache Java Applications [Professional and Enterprise Edition] Presentations published as Java Application will run as stand-alone offline applications. You can choose to run the application in a resizable window or in full screen mode. To publish as a resizable Java Application: 1. Choose File > Publish 2. Choose a Presentation Name and a Publishing Folder. 3. In the Format drop-down menu, choose Java Application. 4. Select Fullscreen Application if you want to publish as a fullscreen application. 5. Click Finish to publish. Figure 141: Publish dialog for Java Application Fullscreen Application Mark this checkbox to publish as a fullscreen application. Frame Icon Click the Change button to load and replace the default application window icon (only applicable to non fullscreen applications). 130

135 Deployment What is published? When clicking the Finish button, a single compressed JAR (Java ARchive) file named '<Presentation Name>_Window' or <Presentation Name>_Fullscreen, will be stored in a folder called 'java_applications', located in your Publishing Folder (Figure 142). Figure 142: Java application 'Mity3' published to D:\WireFusion_Presentations\Cateye\ To run a Java Application: There are two ways to run the application. The first method requires that you have at least Java 1.1 installed on your system (Java 1.4 for fullscreen applications): 1. Start a Command prompt if running Windows, or a Terminal window if running OS X. 2. Navigate to the directory where you published your application, using the cd command. 3. Enter the following command and press Enter: java -cp <presentation jar file> WFPlayerFrame The second method requires that you have at least Java 1.3 installed on your system (Java 1.4 for fullscreen applications): 1. Navigate to the directory where you published your application, using Explorer if running Windows, or Finder if running OS X. 2. Simply double-click the presentation JAR file to run it. NOTE: You can download the latest Java Virtual Machine from Sun at 131

136 WireFusion 4.1 Volume I: General Reference Figure 143: WireFusion presentation running in a resizable window PDA Support (beta) To run the presentation on an embedded system, like a handheld computer or a mobile phone, create a shortcut file with the following information: <java virtual machine> -cp <presentation jar file> WFPlayerFrame -pdamode where the "-pdamode"-switch stretches the window (not the presentation) to the screen display size. For example, on a Compaq ipaq with the Insignia Jeode PDA Edition VM installed, the shortcut file could look like this: 56#\windows\evm.exe -cp windows\lib\mity3_window.jar WFPlayerFrame -pdamode Figure 144: WireFusion presentation running on a Compaq ipaq 132

137 Deployment Java Components [Enterprise Edition] You can publish your presentation as a Java Component (a JavaBean), which is used as a building block for user interfaces in Java. This feature allows more advanced Java developers to include WireFusion presentations in their own Java applications. To publish as a Java Component: 1. Choose File > Publish 2. Choose a Presentation Name and a Publishing Folder. 3. In the Formats drop-down menu, choose Java Component, and then click Finish to publish. Figure 145: Publish dialog for Java Component What is published? When clicking the Finish button, a single compressed JAR (Java ARchive) file, named '<Presentation Name>_Component', will be stored in a folder called 'java_components' located in your Publishing Folder (Figure 146). 133

138 WireFusion 4.1 Volume I: General Reference Figure 146: Java component 'Mity3' published to D:\WireFusion_Presentations\Cateye\ Explanations of how to load and start a WireFusion Java Component, as well as how to send and receive data can be found in the Readme.txt file accompanying the published component. Image Generator Servlet [Enterprise Edition] You can publish your presentations as Image Generator Servlets, which can run on web servers and generate images (screenshots) or GIF animations from the presentation. The images are returned when the Servlet URL is requested. The generated images/animations can be based on values of parameters in the URL. NOTE: When publishing an Image Generator Servlet from a Tryout version, watermarks are added to the generated images/animations. To publish as an Image Generator Servlet: 1. Choose File > Publish 2. Choose a Presentation Name and a Publishing Folder. 3. In the Format drop-down menu, choose Image Generator Servlet. 4. Choose optional Format Settings and click Finish to publish. 134

139 Deployment Figure 147: Publish dialog for Java Component Resource Base URL Specifies the path to a folder containing resources, such as images, 3D files etc, which can be loaded into the servlet. What is published? When clicking the Finish button, a single compressed WAR (Web ARchive) file, named '<Presentation Name>.war', will be stored in a folder called 'image_generator_servlets', located in your Publishing Folder (Figure 148). Figure 148: Image Generator Servlet 'box' published to D:\WireFusion_Presentations\DVD\ Explanations of how to install and use the Image Generator Servlet can be found in the Readme.txt file accompanying the published component. 135

140 WireFusion 4.1 Volume I: General Reference Examples of how to use the Image Generator Servlet There are many different and powerful applications you can create with Image Generator Servlets. For example, let's say you have a large library of high-resolution photos on a web site and that you want to display these photos on the web. But first you have to resize the photos to a more reasonable dimension and file size. Then you may want to for example add a white border and finally add a watermark to the photos. Normally, you would have done this rather tedious task in a photo-editing tool, such as Adobe PhotoShop, for each image. However, with the Image Generator Servlet this can be done automatically, directly on the web server. Instead of linking to an image in the HTML code, you link to the Image Generator Servlet with the original high-resolution image as a parameter. Instantly, you will get back a resized image, with a white border and a watermark added (Figure 149). Figure 149: Image Generator Example As another example, let's say you want to display a great number of DVD movies as box shots on a web site, rather than just showing the front covers. Normally, you would have done this rather tedious task in a 3D tool, such as 3ds max, for each image. With the Image Generator Servlet this can be done automatically, directly on the web server. Instead of linking to a cover front image in the HTML code, you link to the Image Generator Servlet with the original high-resolution DVD cover image as a parameter. Instantly, you will get back a realistically looking DVD box (Figure 150). You can also create a GIF animation of a rotating DVD box using an Image Generator Servlet. Figure 150: Image Generator Servlet Example 136

141 Deployment Animation [Professional and Enterprise Edition] You can publish your presentation as a sequence of (JPEG) images or as a GIF animation. For this feature to have a meaning, your presentation must contain some kind of animation that is automatically started. NOTE: When publishing an Animation from a Tryout version, watermarks are added to the generated images. To publish as an Image Sequence: 1. Choose File > Publish 2. Choose a Presentation Name and a Publishing Folder. 3. In the Format drop-down menu, choose Animation. 4. In the Animation Type drop-down menu, choose JPEG Image Sequence. 5. Choose optional Format Settings and click Finish to publish. Figure 151: Publish dialog for JPEG Image Sequence Frames/sec (number) Specifies the number of image frames that should be generated for each second of your animation. Start Time (sec) (number) Specifies the number of seconds, counted from the time the presentation is started, to the time at which the image sequence generation should start. 137

142 WireFusion 4.1 Volume I: General Reference Stop Time (sec) (number) Specifies the number of seconds, counted from the time the presentation is started, to the time at which the image sequence generation should stop. This value has to be larger than the Start Time value. Scale (number) Specifies a scale value for the dimension of the generated images. A value of 50 will result in images that have half the width and height of the presentation. Can be useful for enhancing the quality of the generated images (by using a large presentation size, and then scaling down the images being generated). What is published? When clicking the Finish button, a series of images ('imgx.jpg') will be stored in a folder called 'image_sequences' located in your Publishing Folder (Figure 152). Figure 152: Image Sequence published to D:\WireFusion_Presentations\DVD\boxrotation\ How to create movies? You need a third party tool in order to create movies from your image sequence, such as Camtasia Studio, which is capable of producing AVI, QuickTime (MOV), Flash (SWF), RealMedia (RM), Windows Media (WMV) and GIF animations. To publish as a GIF animation: 1. Choose File > Publish 2. Choose a Presentation Name and a Publishing Folder. 3. In the Format drop-down menu, choose Animation. 138

143 Deployment 4. In the Animation Type drop-down menu, choose GIF Animation. 5. Choose optional Format Settings and click Finish to publish. Figure 153: Publish dialog for GIF Animation Frames/sec (number) Specifies the number of frames that should be generated for each second of your animation. Start Time (sec) (number) Specifies the number of seconds, counted from the time at which the presentation is started to the time at which the generation should start. Stop Time (sec) (number) Specifies the number of seconds, counted from the time at which the presentation is started, to the time at which the animation generation should be stopped. The Stop Time value must be larger than the Start Time value. Scale (number) Specifies a scale value for the dimension of the generated GIF animation. 139

144 WireFusion 4.1 Volume I: General Reference Use Transparency (checkbox) Select this checkbox if you want to create a transparent GIF animation. Note: You need to set a Transparency Color (see below). Transparency Color (color) Specifies the color of the animation that should be transparent. Loop Mode (checbox) Select to generate a GIF animation that loop indefinitely. No of Repeats (number) Specifies the number of times the GIF animation should repeat/loop. Colors (number) Specifies the number of colors the GIF animation should consist of. What is published? When clicking the Finish button the GIF animation will be stored in a folder called 'animations' (Figure 154). Figure 154: GIF animation published to D:\WireFusion_Presentations\DVD\animations 140