Reference Manual. WireFusion 5. Volume I: General Reference

Transcription

1 Reference Manual WireFusion 5 Volume I: General Reference

2

3 Contents WHAT IS NEW... H1 What is New in WireFusion 5... H1 WIREFUSION FEATURES... H4 3D FEATURES... H9 SYSTEM REQUIREMENTS... H12 Windows Systems... H12 SHORTCUTS... H13 FILE FORMATS... H16 FILES AND DIRECTORIES... H17 FOR MACINTOSH USERS... H18 INTRODUCTION TO WIREFUSION... H19 THE CONCEPT... H19 HOW, WHAT AND WHO?... H21 How you work with WireFusion... H21 What to create with WireFusion... H21 Who uses WireFusion... H22 JAVA... H23 History... H23 Java Technologies... H23 Java Virtual Machine... H24 Security... H24 WORKING IN WIREFUSION... H25 HOW TO WORK WITH WIREFUSION... H25 PRINCIPLES OF WORKING WITH WIREFUSION... H25 LAYOUT... H27 MENUS... H30 File... H30 Edit... H31 View... H32 Objects... H33 Project... H33 Scene... H34 Debug... H35 Profile... H35 Window... H35 Help... H36 Toolbar... H37 PREFERENCES... H39 General tab... H39 Defaults tab... H40 Workbench tab... H40 PROJECTS... H41 Steps in Creating a WireFusion Presentation... H41 Saving and loading projects... H42 Navigating Projects... H42 Navigating the Script Area and Work Area... H44 Project Properties... H45 OBJECTS... H47 Predefined Objects... H47 Object Categories... H48 Library... H48 Insert Objects... H53 Import Objects... H54

4 Rename Objects... H55 Object Menu... H55 Target Area Objects... H58 Object Properties... H65 TEXTIMAGE EDITOR... H69 CONNECTIONS... H71 Port Constraints... H72 Create Connections... H73 Wire Creator... H74 Wire Parameters... H76 Cancel Connection Mode... H77 Deleting Wires... H77 Connection Properties... H77 Connection Information... H79 Wire List... H80 FORWARDING AND STORING DATA... H82 Push Parameters... H82 Set Parameters... H83 GROUPING OBJECTS... H85 Container Objects... H85 The Scene Object... H85 The Folder Object... H88 Moving Objects into a Container... H89 The Port Exporter... H91 LAYERS... H99 Layers View... H99 Reordering Layers... H100 Layers Checkboxes... H101 ALPHA CHANNELS... H104 Alpha Channels in WireFusion... H104 Mouse Map... H107 OPTIMIZING YOUR PRESENTATIONS... H110 Frames per Second (FPS)... H110 Image Processing... H112 Target Area... H112 Scenes... H113 Resources... H114 Reuse of Objects... H115 Organizing... H115 Summary of Optimization Tips... H116 TESTING YOUR PRESENTATIONS... H118 Hierarchy... H118 Viewer... H119 Browser... H121 CPU Profiling... H122 Memory Profiling... H124 Debugging... H126 DEPLOYMENT... H130 Loading Manager... H130 Publish Dialog... H131 Java Applets... H132 Java Applications... H137 Java Web Start Applications... H140 Java Components... H143 Animation... H144 INDEX... H150

5 What is New What is New BWhat is New in WireFusion 5 OpenGL Presentations can optionally be published using OpenGL hardware acceleration, which gives higher frame rate and allows for high polygon models and larger scenes (width and height). WireFusion SDK A WireFusion SDK allows for third party development of WireFusion objects and for new WireFusion features. WireFusion API The engine API has been enhanced and has been opened up so that it can be accessed from the Java object and the new WireFusion SDK. Enhanced Java object The Java object can now optionally have a Target Area and can display graphics in it, and together with the SDK, it can be used for creating graphical objects. Bump mapping A technique to simulate more details in a 3D model by using a bluescale heightmap. Glossiness mapping A technique to achieve partial glossiness on a 3D model by using a bluescale map. CPU & Memory profiling Support for memory and CPU profiling has been added, making it possible to quickly find bottlenecks in your presentations. Improved performance Enhanced calculation of what areas of the screen needing to be updated, resulting in better performance for many presentations. Better performance of objects using alpha channels. Improved anti-aliasing A new improved 3D edge anti-aliasing algorithm covers now also internal edges. 1

6 WireFusion 5 Volume I: General Reference Improved memory handling Pixels of images are shared between objects using the same image, resulting in lower memory usage. Improved memory management of textures. 3D Measurement Measure point-to-point distances on 3D models. 3D Grouping Grouping of 3D objects makes it possible to change settings on multiple objects with only one connection, instead of making individual connections to each object. Renaming and Removing Removing of 3D objects, and renaming of objects, cameras, lights and animations can now be done directly from the 3DScene dialog. Pause and Resume 3D Possibility to pause and resume a running 3D scene using in-ports. Cleaner projects Using fewer objects and wires now makes projects cleaner and easier to read and understand. It is now possible to bundle multiple wires between two objects into one single wire, and parameter values such as Numbers, Colors, Boolean etc can now be sent directly within wires, reducing the need of Data objects in the projects. The Folder View is also cleaner and easier to navigate as only Folder and Scene objects can now work as container objects. Improved grouping Objects placed in a Scene object will now be applied directly to the parent Scene. This results in much better performance and with the possibility to have a "transparent background". Publish as Java Web Start Presentations can be published as Java Web Start Applications, using adjustable memory limit. Replaceable Alpha Channels Objects with Alpha Channels, such as e.g. Image, are now set using in-ports, making them replaceable during presentation runtime. 2

7 What is New Transparent animations Animation image sequences, published as PNG images, can now optionally be transparent. Improved mouse handling Right mouse button and the Scroll Wheel are supported. Mouse event are now only absorbed by objects listening for mouse events, even in Scenes used within other graphical objects. For example, if you click a Button in a Scene used as a 3D texture, the button will be pressed. Any mouse events occurring outside of the button will be absorbed by the 3D Scene instead, and used for rotating the 3D object for example. Improved transparency Multiple transparent 3D layers are better handled. Improved Contour and Wireframe Improved filled Wireframe and Contour rendering. Added interactivity on filled Wireframe and Contour rendered models. Touchsensors now work with Wireframe and Contour rendered models. 3

8 WireFusion 5 Volume I: General Reference 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. Java A Java object allows Java programmers to write and compile advanced Java code directly from inside WireFusion. The Java object is also used for the APIs and SDK. 4

9 WireFusion Features API A WireFusion API and a 3D API allows programmers to create more advanced functions and logics, using the Java language. SDK A Software Development Kit allows programmers allows programmers to create fully integrated WireFusion objects and add-ons, and share them with other users. JavaScript 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. MPEG video Support for MPEG-1 video with MPEG-1 Audio Layer I&II, when extending WireFusion with the free WF-AV add-on. MP3 audio Support for high quality MP3 audio, when expanding WireFusion with the free WF-AV add-on. Adobe Flash Support for playback of Adobe Flash animations within WireFusion presentations. 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. 5

10 WireFusion 5 Volume I: General Reference 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. 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. 6

11 WireFusion Features 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. Java Applications Presentations can be published as stand-alone Java Applications, which can run in both window mode and full screen mode. Java Web Start Application Publishes a WireFusion presentation as a Java Web Start application, which allows the presentation to be started directly from the Internet using a web browser. Unlike Java applets, Web Start applications do not run inside the browser, and the sandbox in which they run does not have to be as restricted, although this can be configured. 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). Animations Exports a WireFusion presentation as an image sequence (JPEG), with adjustable frame rate. Use third party tools to create e.g. AVI, QuickTime (MOV), Flash (SWF), RealMedia (RM), Windows Media (WMV) and GIF animations. 7

12 WireFusion 5 Volume I: General Reference Import 3D (X3D/VRML2/VRML97) Image (JPEG, GIF, PNG) Video (MPEG-1) Sound (MP3, WAV, AIFF, GSM, AU) Flash (SWF) Logic and Scripts (Java code, JavaScript code) WireFusion projects Export Java Applets Java Applications Java Components Java Web Start Application Animation Server Renderer 8

13 3D Features 3D Features 3D Support Supports a subset of the ISO standard 3D formats X3D and VRML 97/2.0. Hardware and Software Publish either as OpenGL hardware accelerated presentations or as software presentations. 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 Bump Mapping Glossiness Mapping 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 9

14 WireFusion 5 Volume I: General Reference Textures UV Texture Mapping Bilinear Filtering MIP Mapping 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) 10

15 3D Features Walk Mode (3D World) Collision Detection (Walk Mode) Multi-level Support (stairs) 5 different modes of user interaction Configurable Mouse Navigation 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. 3D Measurement Measure point-to-point distances on 3D models. Encryption Encrypt 3D models to protect them from unauthorized use/alterations. 11

16 WireFusion 5 Volume I: General Reference System Requirements The following minimum hardware and software requirements are needed to author WireFusion presentations: BWindows Systems Intel Pentium IV or AMD Athlon XP (or higher processor) Microsoft Windows 2000/XP/Vista Hardware-accelerated OpenGL 1.5 (or higher) (*) 512 MB of available RAM (or more) 200 MB available hard-disk space 1024x768 resolution (or higher) DVD-ROM drive (*) Only required when presentations are published with OpenGL acceleration. 12

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 Wire Bundling ALT + B Command + B 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 5 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 Wire Creator PC/Linux Mac Select new source object S S Select new destination object D D Connect C C Disconnect DELETE Command + Backspace 14

19 Shortcuts Other shortcuts PC/Linux Mac Copy object wires CTRL + SHIFT + N CTRL + SHIFT + N Paste object wires CTRL + SHIFT + M CTRL + SHIFT + M Copy Target Area position CTRL + SHIFT + C CTRL + SHIFT + C Paste Target Area position CTRL + SHIFT + V CTRL + SHIFT + V Copy Target Area dimension CTRL + ALT + C CTRL + ALT + C Paste Target Area dimension CTRL + ALT + V CTRL + ALT + V Copy Target Area bounds CTRL + SHIFT+ ALT + C CTRL + SHIFT+ ALT + C Paste Target Area bounds CTRL + SHIFT+ ALT + V CTRL + SHIFT+ ALT + V Set Target Area to Stage dimension ALT + S ALT + S Move Target Areas SHIFT + Mouse drag SHIFT + Mouse drag 15

20 WireFusion 5 Volume I: General Reference File Formats Below are descriptions of some of the most common file formats used in WireFusion..au.class.jar.jnlp.mp3.mpg.png.swf.w3f.wad.wao.wfp.wlf.wob.wrl.wrz.x3d,.x3dv 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. JNLP (Network Launching Protocol) is the protocol, defined as an XML file format, that specifies how Java Web Start applications are launched. 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 Adobe Flash animations. WireFusion supports Flash version 2 animation. The filename extension for the WireFusion 3D format. 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... The filename extension for WireFusion Add-on objects. Can be installed by choosing File > Install Add-on... 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. 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 files created and used by WireFusion are described here. The executable files are installed under: [Path]/Demicron/WireFusion 5/ Resource files and demo projects are installed under: [Path]/My Documents/WireFusion/ Log files are created in: [Path]/Documents and Settings/[User]/.wirefusion/5/logfiles/ By default, the installation adds WireFusion to the Windows Start menu. WireFusion can be uninstalled through Start > Control Panel > Add/Remove Programs. 17

22 WireFusion 5 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 BIntroduction to WireFusion The Concept WireFusion is a drag-and-drop visual-programming tool developed for creating advanced and interactive 3D visualization, either for the web or as standalone off-line presentations. With the visual interface you can easily add advanced functionality and interactivity to your presentations, even without any prior programming or scripting skills. WireFusion is typically used by industrial designers, product companies, architects and web designers, mostly for visualizing concept designs, architectural designs, creating digital prototypes and product configurators. Many times it is used throughout the entire product lifecycle, from the beginning to the end. WireFusion presentations are also used for computer based training (CBT), for training of sales forces, support team and for customer support. WireFusion is a rich-media platform that visually integrates several different media types into a single player. It supports 3D, 2D, MPEG video, MP3 audio and Adobe Flash. It is also capable of creating 360 degrees panoramas, slide shows and zoomable images. Figure 1: 3D visualizations 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 your presentations. WireFusion works with pre-programmed functions and operations. The ready-made set is known as WireFusion Objects, or just Objects. The use and reuse of already made and tested code, 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 together by purely visual means. When new or updated objects become available, either from Demicron or a third party, they can easily be installed to 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 5 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, movies, sound etc. in other programs, such as Autodesk 3ds Max, Adobe Photoshop, or similar. 2. The second step is to import the resources to 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 or JScript (scripting implemented in browsers), can use WireFusion for interacting within web pages in which the WireFusion presentations are published. 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 WireFusion APIs, which allows for advanced programming of functions and 3D scenes. 20

25 How, What and Who? How, What and Who? BHow 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. Save your project. 8. 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. BWhat to create with WireFusion Presentations of many different kinds can be produced with WireFusion. With WireFusion you create high quality and interactive visualizations, and without the requirement of any programming or scripting skills. Some ideas on what you will be able to do: Create interactive product concept designs. Create digital prototypes of products. Visualize architectural designs. Create product configurators. Create interactive user manuls and support manuals. Create interactive 3D worlds. Create 360 degrees panorama presentations. Create professional slide shows. Create intertactive zoomable images Present and visualize scientific data. And much more 21

26 WireFusion 5 Volume I: General Reference BWho uses WireFusion WireFusion is a tool for anyone who wants to create advanced and interactive 3D visualizations quickly. Some users of WireFusion will have experiences from using common 3D and CAD tools, others from using web design, multimedia or authoring tools. Yet another group will have knowledge in programming and in using professional development tools. 3D artists, CAD engineers, architects, designers and modelers For this group of users, WireFusion gives them a virtual programmer in their hands. Without knowing anything about programming they will be able to create advanced product visualizations and presentations, logics, menus and spectacular graphics effects. Producers of educational materials For producers of educational material, WireFusion makes it possible to quickly create computer based training (CBT) material, giving their audience the opportunity to gain understanding through interactivity. Teachers and students Interactive 3D visualizations become more and more important for tomorrow's industrial designers, architects and product companies. For teachers and students, WireFusion is the perfect tool for learning. It is easy to use, yet very powerful, and widely used in the industry. Scientist For scientists, WireFusion is a very powerful tool giving them the flexibility to visualize their scientific work and data. Programmers and developers For Java programmers and developers, WireFusion becomes even more powerful. Giving them the possibility to easily create more advanced logics and to extend WireFusion with more tools using APIs and SDK. 22

27 Java Java BHistory 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''. BJava 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 5 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. BJava 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'). BSecurity 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 BWorking in WireFusion How to Work with WireFusion The way you work in WireFusion differs from other 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 specific area where you work with them ( HFigure 2). 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 ( HFigure 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 5 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 HFigure 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 5 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 5 Volume I: General Reference Menus The WireFusion main program has nine menus: File, Edit, View, Objects, Project, Scene, Debug, Window and Help ( HFigure 6). Figure 6: The WireFusion program menus BFile The File menu contains menu items related to projects and their properties ( HFigure 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 HObject Menu on page H55. 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 HDeployment on page H130. 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 H39. Exit Prompts you to save any open projects, then exits WireFusion. BEdit 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 5 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. BView 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 Wire Bundling Toggle wire bundling on and off. 32

37 Menus Toggle Stage Magnifier Toggle the Stage Magnifier on and off. 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 BObjects The Objects menu contains all the available WireFusion objects. These objects are the same as those found in the Library view. BProject The Project menu contains menu items related to projects ( HFigure 8). Figure 8: The Project menu 33

38 WireFusion 5 Volume I: General Reference Preview Preview the current project in the internal viewer. 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 HLoading Manager on page H130. BScene 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 BDebug Figure 10: The Debug menu Debug Run the current project through the Debugger. Debug Scene Run the current Scene through the Debugger. BProfile Figure 11: The Profile menu CPU Profile Project Run the current project through the CPU Profiler. CPU Profile Scene Run the current Scene through the CPU Profiler. BWindow 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. 35

40 WireFusion 5 Volume I: General Reference 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. BHelp Figure 12: 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. Welcome Dialog Displays a Welcome dialog with usefule links. Software Updates Live Update... Looks for WireFusion and add-on updates. Updates can be downloaded and installed automatically. 36

41 Menus Manual Update... Lets you download and install WireFusion and add-on updates manually. Useful if you cannot connect to the Update Server using the Live Update function. WireFusion on the Web Links to services found on the Demicron web site. WireFusion Forum: (online) Exchange experiences in the WireFusion Forum. Introduction Videos: (online) Learn the basics by watching video tutorials. Manuals & Tutorials: (online) Download the latest manuals and tutorials. Support Center: (online) Connect to the Support Center to get help. Purchase: (online) Purchase through our reseller network or through our secure online store. Installed Add-ons Contains menu items related to installed add-ons (only visible if add-ons have been installed). About WIreFusion... Displays the splash screen and user license information. BToolbar 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 13: The Toolbar 37

42 WireFusion 5 Volume I: General Reference The Cancel connection mode button ( ) in the toolbar has no equivalent in the menu. For more information, see Cancel Connection Mode on page H77. 38

43 Preferences Preferences General WireFusion settings are configured in the Preferences dialog, which is accessed from the File menu. Figure 14: The Preferences dialog BGeneral 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. 39

44 WireFusion 5 Volume I: General Reference 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 Welcome Dialog at startup (checkbox) By default, this option shows a welcome dialog at startup. Check for Updates Automatically (Live Update) (checkbox) Select this checkbox to let WireFusion automatically check for updates. Wires are bundles as default (checkbox) Bundles multiple wires between two objects into one wire. BDefaults 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. BWorkbench tab Highlight connected Objects when mouse is over Wire/Object (checkbox) Select this checkbox to have objects and wires highlighted when the mouse cursor is over an object or wire. 40

45 Projects Projects BSteps 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 HConnections on page H 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- 41

46 WireFusion 5 Volume I: General Reference 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. BSaving 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. BNavigating Projects In WireFusion, there are two objects that can contain other objects, namely the Scene object and the Folder object. These objects are also known as Container objects and can be seen as folders, which their icon headers also indicate ( HFigure 15). When dragged into your project they become visible in the Folders view ( HFigure 1). Figure 15: The Scene and Folder object icons Figure 16: The Folders view 42

47 Projects 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. HFigure 17 and HFigure 18 shows the resemblance between Explorer and WireFusion. Figure 17: Navigation in Windows Explorer Figure 18: 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 but- 43

48 WireFusion 5 Volume I: General Reference tons to find recently visited folders. TIP: You can also open a folder by double-clicking its object icon in the Script Area. 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. BNavigating 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 19: 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). 44

49 Projects BProject Properties Scene properties can be set through the Scene Properties dialog ( HFigure 20). 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 20: 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. 45

50 WireFusion 5 Volume I: General Reference 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. 46

51 Objects Objects BPredefined Objects There are encapsulations of preprogrammed functions and operations in WireFusion known as objects. They are located in the Library ( HFigure 21) and in the Objects menu ( HFigure 22). Figure 21: The Object Library Figure 22: 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- 47

52 WireFusion 5 Volume I: General Reference 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 BObject Categories The object categories below are predefined in WireFusion. The default objects delivered with WireFusion are also listed under each category. 3D 3DScene, 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, Grayscale, Invert, Mosaic, RGB Filter Logic Boolean Operations, If, Math, Progressor, Relational, Sequencer, Tree, Tree Node Misc Dummy, Folder, Java (*), Painter, Scene, Scene Window, Screenshot (*), Tooltip Multimedia Flash (*), GIF Animation, 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. BLibrary 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. 48

53 Objects The Library Menu The Library view has a menu, which controls the Library tree behavior and the Favorites ( HFigure 23). Figure 23: 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 ( HFigure 24). 49

54 WireFusion 5 Volume I: General Reference Figure 24: 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 ( HFigure 25). 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). 50

55 Objects Figure 25: 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. Registration URL If you have selected to export as shareware, you can specify a URL where a user can register (purchase) your objects. 51

56 WireFusion 5 Volume I: General Reference 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 ( HFigure 26). Purchase a serial number and enter it into the Serial Number field. Figure 26: 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. 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. 52

57 Objects 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. BInsert Objects To insert an object from the Library into your project, drag-and-drop the object into the Script Area ( HFigure 27). Figure 27: Inserting the Image object from the Library Or, equivalently: 1. Right-click the Script Area to open a menu containing the same objects found in the Library. 53

58 WireFusion 5 Volume I: General Reference 2. Select the object you want to insert ( HFigure 28). Figure 28: 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. BImport 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 ( HFigure 29). 2. In the file dialog, browse for your object or project file (.wob or.wfp), and then click Open to load it. Figure 29: Load object For information about saving objects, see HObject Menu on page H55. 54

59 Objects BRename 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 30: 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 31: Properties view BObject Menu All WireFusion objects in a project have a drop-down menu (see HFigure 32 and HFigure 33). 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 HTarget Area, page H58), then you can also open the menu by right-clicking its Target Area or label in the Layers view (see HFigure 34 and HFigure 35). 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. 55

60 WireFusion 5 Volume I: General Reference Figure 32: Open the drop-down menu Figure 33: The drop-down menu opened Figure 34: Right-click an object in the Layer view 56

61 Objects Figure 35: 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. Only available for Folder object and Scene object. Export Ports... Opens the Port Exporter dialog. For more information, see HThe Port Exporter on page H91. 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. Add to Favorites... Adds your object to the Favorites category in the Library. 57

62 WireFusion 5 Volume I: General Reference 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. BTarget 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 ( HFigure 36). 58

63 Objects Figure 36: 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 ( HFigure 37), 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 HLayers on page H99. Figure 37: A Target Area of an Image object marked by a dashed rectangle 59

64 WireFusion 5 Volume I: General Reference 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 ( HFigure 38). Figure 38: 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 ( HFigure 39 and HFigure 40). NOTE: To move small rectangles, you can press CTRL while dragging, to avoid unwanted resize operations. Figure 39: Changing the Target Area size by dragging the corners of the rectangle 60

65 Objects Figure 40: 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 ( HFigure 41). Figure 41: 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 ( HFigure 42). 61

66 WireFusion 5 Volume I: General Reference Figure 42: 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 left mouse button is pressed within the Target Area. Mouse Release [2D Number] Sends out the mouse cursor position when the left mouse button is released within the Target Area. Right Mouse Press [2D Number] Sends out the mouse cursor position when the right mouse button is pressed within the Target Area. 62

67 Objects Right Mouse Release [2D Number] Sends out the mouse cursor position when the right mouse button is released within the Target Area. Mouse Wheel (Java 1.4+) [Number] Sends out numbers when mouse wheel is rotated, positive numbers when scrolling down, and negative numbers when scrolling up. 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. 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 HFigure 43). 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 43: The Grayscale filter In-ports Activate Trigger this port to turn the object on. See HActive on page H67. 63

68 WireFusion 5 Volume I: General Reference Deactivate Trigger this port to turn the object off. See HActive on page H67. Set Position [2D Number] This port requires a 2D Number as parameter. See HX, Y on page H66. 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 HWidth, Height on page H66. 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. Stamp background Leaves a permanent impression of the Target Area in the background. See HStamp on page H67. Set Opacity [Number] Sets transparency of the Target Areas dynamically. See HOpacity on page H67. Set Alpha Channels [Scene] Sets a dynamic alpha channel for the Target Area by sending in a Scene object. See Alpha Channels on page H

69 Objects BObject Properties Properties Dialog All WireFusion objects have properties, which can be viewed and edited in the Properties view ( HFigure 44). To view the properties of certain object, select the object. Figure 44: 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 ( HFigure 45). 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 45: General tab Target Area Tab All objects having a Target Area also have a Target Area tab in the Properties view ( HFigure 46). In this tab you can for example change the size and position of the Target Area. 65

70 WireFusion 5 Volume I: General Reference Figure 46: 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. 66

71 Objects 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 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 ( HFigure 47). The Info tab contains general information about the object. 67

72 WireFusion 5 Volume I: General Reference Figure 47: 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 ( HFigure 48). Figure 48: An object comment 68

73 TextImage Editor 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, by pressing the "T" icon from their image file dialogs. Figure 49: 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. 69

74 WireFusion 5 Volume I: General Reference Antialiased Text Select this checkbox to get smooth edges on the characters. 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. 70

75 Connections 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 ( HFigure 50). Figure 50: 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 ( HFigure 51), 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 51: 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 71

76 WireFusion 5 Volume I: General Reference the Brightness object. The numbers sent from the Progressor will then dynamically change the brightness level of the Brightness filter ( HFigure 52). Figure 52: A Progressor connected to a Brightness filter BPort 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 ( HFigure 53). The only exception is when no argument type is indicated after the in-port name, which means that the in-port can receive all kinds of messages, including empty messages/triggers. Figure 53: A valid connection sending Number arguments between two objects Some restrictions between valid in-ports and out-ports are automatically detected, the in-port menu options become inactive, and forbidden connections cannot therefore be established ( HFigure 54). For example, you will not be able to connect and send color information [Color] into an object with an in-port that requires a scene [Scene]. Figure 54: Invalid connection between two incompatible ports 72

77 Connections In-ports that do not require any parameters can be triggered by messages containing any parameter type ( HFigure 55). 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 55: Triggering in-ports with any type of message For some in-port parameter types, such as Number, 2D Number, Color, Boolean and Text, you can send parameters from any out-port having a parameter type that is different than from the in-port parameter type. For example, you will be able to connect an out-port with a [Color] parameter with an in-port with a [Number] parameter, but first after setting a constant parameter that will be sent through the wire when the out-port is fired. To better understand this, one could picture it as a third object that is placed in between the two connected objects, containing the constant parameter, and that the first object pushes the parameter from the (virtual) third object into the second object ( HFigure 56). Figure 56: A connection between two objects were a parameter is stored in the wire 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. BCreate 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 HWire Creator on page H74). 73

78 WireFusion 5 Volume I: General Reference 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 HThe Port Exporter on page H91). BWire Creator The Wire Creator ( HFigure 57) 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. 74

79 Connections Figure 57: 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. 75

80 WireFusion 5 Volume I: General Reference Disconnect [Del] Disconnects selected connections. Switch Objects Switches the selected source object with the selected destination object. Wires Displays connection information between the selected source and destination objects BWire Parameters When making a connection to an in-port having a parameter type of either Number, 2D Number, Color, Boolean or Text, and the out-port parameter type does not match the in-port type, then you have to set a new parameter that matches the in-port parameter type. You set the parameter in the Wire Paramater dialog ( HFigure 58), which automatically opens when making such a connection. Figure 58: Setting a wire parameter Wires having wire parameters have blue dots along the entire wire, as seen in HFigure 59. To change an already set wire parameter, select the wire and change the value in the Wire Properties view. Figure 59: Wire with parameter 76

81 Connections BCancel Connection Mode If you have selected, for example, one of the out-ports of an object, the program enters a 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. BDeleting 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, then all selected wires will be deleted. BConnection Properties All connections have properties, which can be viewed and edited in the Properties view ( HFigure 60). The properties can also be specified/changed in the popup menu of the Wire, which is opened by right-clicking the Wire ( HFigure 61). Figure 60: Properties view Figure 61: Right-click to open the wire menu Wire Color Specifies the wire color of the selected connection. 77

82 WireFusion 5 Volume I: General Reference 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. Read more about Debugging on page H126. Enabled wires have tails that are blue and a black arrow in the other end ( HFigure 62). Figure 62: Enabled wire Disabled wires have tails that are red and a red arrow in the other end ( HFigure 63). Figure 63: Disabled wire Wires that stores a wire parameter have blue dots along the entire wire, as seen in HFigure 64. Figure 64: Wire with parameter 78

83 Connections Wires that are bundled are thicker than normal wires and have blue dots, as seen in HFigure 65. Figure 65: Multiple wires bundled into one wire Wires that have a Breakpoint have a small red dot close to the out-port as seen in HFigure 66. Figure 66: Breakpoint enabled BConnection 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 ( HFigure 67). NOTE: When placing the mouse cursor over the wire, the wire itself and the objects it connects get highlighted in red ( HFigure 67). Figure 67: Tooltip 79

84 WireFusion 5 Volume I: General Reference Information Bar The Information Bar displays both the objects and the ports that are used ( HFigure 68). Select the wire to have the information displayed. Figure 68: Information Bar BWire List The Wire List ( HFigure 69) 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 69: Wire List 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. 80

85 Connections 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 Deselect this checkbox to disable the connection. Breakpoint Select this checkbox to set a breakpoint on the connection (see Debugging on page H126). Select destination object Selects the object a connection goes to, or comes from. 81

86 WireFusion 5 Volume I: General Reference Forwarding and Storing Data In the chapter about Connections (see HConnections on page H71), 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. BPush 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 ( HFigure 70). 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 70: 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 82

87 Forwarding and Storing Data Figure 71: Button, Number and System connected 6. Preview the presentation by choosing Project > Preview. In the preview window, click the Open Consol button. 7. Press the button to print the value 10 in the console window ( HFigure 72). Figure 72: Preview of number shown when the user clicks the button BSet 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. 83

88 WireFusion 5 Volume I: General Reference 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. 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 73: Progressor sets the Number 4. Preview the presentation by choosing Project > Preview. In the preview window, click the Open Console button in the toolbar. 5. Press the button to print the number series in the console window. Figure 74: Console window with numbers displayed when button is clicked 84

89 Grouping Objects Grouping Objects BContainer 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 ( HFigure 75). 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 75: A group of objects gathered in a Folder BThe 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, 85

90 WireFusion 5 Volume I: General Reference move or resize the Target Areas of your images, mouse areas etc ( HFigure 76). Read more about Target Area objects. Figure 76: 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 ( HFigure 77). Figure 77: 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? 86

91 Grouping Objects 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 navigation panel for a 3D presentation, which contains all the graphics and buttons ( HFigure 78 and HFigure 79). Figure 78: A Scene object used to store a navigation panel Figure 79: The navigation panel in running presentation 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 as data into one of its in-port. An example of this is the Image object, which can take a Scene object and use it as alpha channel (read more about Alpha Channels on page H104). Another example is the 3D Scene object, which can take a Scene object and replace a static texture with it. Interactivity (mouse events) that you have created in the Scene works even after you have applied it as a texture on a 3D object. 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 texture, the touch sensor functionality is still working ( HFigure 80). 87

92 WireFusion 5 Volume I: General Reference Figure 80: A working touch sensor screen used as a local scene (marked with a red border) BThe 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 ( HFigure 81). Figure 81: 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 ( HFigure 82), just like any other WireFusion object, and reused in other projects or just cloned within the same project using copy/paste (see HObject Menu on page H55). 88

93 Grouping Objects Figure 82: 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. BMoving 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. 89

94 WireFusion 5 Volume I: General Reference Figure 83: Selecting several objects 3. Press SHIFT on the keyboard as you drag the selected objects and then drop them on the Folder object. Figure 84: Dropping the selected objects on the Folder object. 4. Click OK to approve the move. 90

95 Grouping Objects Figure 85: 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. BThe 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 HFigure 86), 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 86: Exported port x from 'Object 1' makes it visible in the 'Folder' menu 91

96 WireFusion 5 Volume I: General Reference 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 ( HFigure 87). Figure 87: 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. Overview of the steps: 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 select 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. 92

97 Grouping Objects 9. Test and run the presentation. 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 ( HFigure 88). If you open the Folder menu, you will see that there are no out-port or in-port options available ( HFigure 89). Figure 88: A Folder and a Button in a new project Figure 89: A Folder with neither out-ports nor in-ports 93

98 WireFusion 5 Volume I: General Reference 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 ( HFigure 90). Figure 90: A Sound object inside the Folder Step 3 Open the Sound object menu and select Export Ports... ( HFigure 91). The Port Exporter dialog will now be opened. Figure 91: 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 select the Exported check box for the in-port named Start ( HFigure 92). 94

99 Grouping Objects Figure 92: Exporting the Start port Step 5 When the checkbox has been selected, you will be prompted to rename the port. Change the default name Start to Start Sound. When you are done, click OK ( HFigure 93). Figure 93: 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 ( HFigure 94). 95

100 WireFusion 5 Volume I: General Reference Figure 94: 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. 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') ( HFigure 95). Figure 95: 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 ( HFigure 96), 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 ( HFigure 97). 96

101 Grouping Objects Figure 96: The Start Sound In-port visible in the 'Folder 2' menu... Figure 97:... and then, after exporting again, also in the 'Folder 1' menu 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 ( HFigure 98). Figure 98: Changing the port order 97

102 WireFusion 5 Volume I: General Reference TIP: You can also rename already exported ports in the Port Exporter ( HFigure 99). Figure 99: Changing the port name TIP: You can also create submenus when naming the exported ports. This is done by using a pipe ` ' character ( HFigure 100 and HFigure 101). Figure 100: Creating submenus with a pipe character (' ') Figure 101: A submenu named Sound in the Folder menu 98

103 Layers Layers BLayers 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 Adobe Flash, but the concept is similar ( HFigure 102). 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 HFigure 102, then you will get the result seen in HFigure 103. Figure 102: The Layers view in WireFusion Figure 103: The result 99

104 WireFusion 5 Volume I: General Reference 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 ( HFigure 104). Figure 104: Right click to open object menu BReordering 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 ( HFigure 105). 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 ( HFigure 106). 100

105 Layers Figure 105: Dragging of 'Fish' layer Figure 106: 'Fish' layer dragged below 'Bird' layer BLayers 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 selected, it means that the object is "turned on" ( HFigure 107). 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 displayed in the presentation. An active visible object is automatically updating its graphics in every frame if there is a change in the graphics, or if the Target Area is displaced or resized. It will also be updated if other objects with intersecting Target Areas are updated. Updated Target Areas will consume CPU. Figure 107: Bird' image activated 101

106 WireFusion 5 Volume I: General Reference When deselected, 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 selecting the Stamp Background checkbox ( HFigure 108), which will result in that the object is applied to the background in the first frame of the presentation. If you deselect the Active checkbox, and select 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 108: 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: Deselect the Activate checkbox and select 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 deselect this checkbox, the Target Area of the object will become invisible ( HFigure 109). This is useful when working on large projects with many overlapping Target Area objects. 102

107 Layers Figure 109: 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. 103

108 WireFusion 5 Volume I: General Reference 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. BAlpha 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 displayed in it, also have an alpha channel in-port that can be used to shape the otherwise rectangular Target Area. The way to apply an alpha channel to e.g. an image or filter is to connect a Scene object to the Alpha Channel in-port ( HFigure 110). Everything you do in this Scene, and on its Stage, will work as your alpha channel. This means that you can have animated and interactive alpha channels in WireFusion. Figure 110: An Invert object with its alpha channel in-port The best way to learn and understand the alpha channels is by a step-by-step example. 104

109 Alpha Channels 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. 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 ( HFigure 111). Figure 111: The Invert object in a layer above the Image Step 3 Insert a Scene object and when prompted, choose not to have a Target Area for the Scene object ( HFigure 112). Figure 112: Choose Target Area mode for the Scene object 105

110 WireFusion 5 Volume I: General Reference Step 4 Connect the Scene object with the Invert filter's Alpha Channels in-port. Connect: Scene 1 > Out-ports -> Scene Pushed to Invert 1 > In-ports -> Set Alpha Channels Step 5 Double click the Scene object in order to open it (or navigate to it using the Folders view), then change its Stage size by selecting the program menu option Scene > Scene Properties. Set width to 50 pixels and height to 50 pixels (50 50 pixels). Step 6 Insert an Image object in the Script Area (for 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 ( HFigure 113). Figure 113: The alpha channel image on the alpha channel stage Step 7 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] 106

111 Alpha Channels Figure 114: 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 ( HFigure 115). Figure 115: The result of the invert filter shaped after the alpha channel image BMouse 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. 107

112 WireFusion 5 Volume I: General Reference Figure 116: A Mouse Area In the figure above ( HFigure 116), 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: Connect a Scene object (with no Target Area) to the Mouse Area object's in-port Set Mouse Map ( HFigure 117). Figure 117: Scene connected to Mouse Area Then place your map image on the Scene object's Script Area. See HFigure 118. 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. 108

113 Alpha Channels Figure 118: The map image The Mouse Area object's Target Area will now be shaped after the map image ( HFigure 119). Figure 119: The shaped mouse area 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. 109

114 WireFusion 5 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. BFrames 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 Adobe Flash, are very well suited for creating animations, i.e. they normally create a sequence of still images (frames) displayed in a player ( HFigure 120). Figure 120: A frame-based animation With WireFusion, however, you generally do not create animations - you create interactive real-time presentations. When creating 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 simultaneously as one interacts 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 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 a give 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... ( HFigure 121). 2. In the Frame Rate (FPS) field, set the maximum number of frames your presentation should be allowed to display. 110

115 Optimizing your Presentations Figure 121: 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 the 'Show Frame Rate' button, or click anywhere in the presentation window (to give focus to the presentation) and then write the invisible code word 'showf' (which stands for 'show FPS') on your keyboard. The present FPS value of your presentation will be displayed in the top left corner ( HFigure 122). Figure 122: Displaying the current FPS, which is set to a maximum of 25 FPS 111

116 WireFusion 5 Volume I: General Reference BImage 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 ( HFigure 123). Figure 123: 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 six 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). 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. BTarget Area All objects having a Target Area with some visual effect (3D Scene, Image, Image Array, Flash, Scene, Scene Window, all widget objects and all filter objects) consume CPU when 112

117 Optimizing your Presentations they are activated (and not stamped in the background). Some objects consume more than others, as explained in the pmage processing section above. But another important cause of consuming CPU is the size of the Target Area. The larger area, the more CPU is consumed. 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 is 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. deselect the Activate checkbox and select the Stamp Background checkbox, or use the corresponding in-ports). This will save a lot of CPU! BScenes 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 ( HFigure 124). Figure 124: Presentation display size To change the Stage size of your presentation: 1. Choose Project > Properties Set Width and Height (in pixels) 113

118 WireFusion 5 Volume I: General Reference 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. BResources 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. 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: The 3D engine uses power-of-2 texture maps meaning that a 300 x 300 map will end up using just as much memory as a 512x512 map. And a 512x513 map will end up using as much memory as a 512x1024 map. Therefore, make sure to create your maps with 'power-of-2' in mind. 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). 114

119 Optimizing your Presentations 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. BReuse 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. BOrganizing It is important to organize your objects and wires well when developing, else you will quickly get lost when trying to "read" and understand your project ( HFigure 125 and HFigure 126). Group non-visual logic into Folder objects and visual parts of your presentation into Scene objects. Make a habit to name your objects so they mean something to you. For example, it is better to name an Image object that is meant to work as a background image to 'Background" rather than using its default name 'Image 1'. Add comments to your objects, explaining what they do. Switch to Wire Bundling mode to minimize the number of wires in the Script Area. Figure 125: A well organized project 115

120 WireFusion 5 Volume I: General Reference Figure 126: A not so well organized project Optimization tips TIP: Name your objects well. TIP: Add comments to your objects. TIP: Group logic into Folder and Scene objects. TIP: Switch to Wire Bundling mode (CTRL+B). BSummary 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 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. 116

121 Optimizing your Presentations 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.Organize your project well. 14.Always test your presentations on the minimum required computer system. 117

122 WireFusion 5 Volume I: General Reference 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. BHierarchy There is a hierarchy of objects in your WireFusion projects similar to the schematic view seen in HFigure 127. Figure 127: 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 ( HFigure 128). Figure 128: The project preview buttons 118

123 Testing your Presentations All other objects in your project are grouped in the main Scene object. In some projects you might have local Scene objects ( HFigure 129). 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 129: 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 ( HFigure 130). Figure 130: The Preview Scene buttons BViewer The internal viewer allows you to test your presentations directly inside WireFusion ( HFigure 131). 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. 119

124 WireFusion 5 Volume I: General Reference Figure 131: 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 ( HFigure 132). Figure 132: 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 ( HFigure 133). Figure 133: 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. 120

125 Testing your Presentations 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 ( HFigure 134). 2. In the Browser location field, enter the path to your browser, or browse for it clicking the "..."-button. Figure 134: 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 ( HFigure 135 and HFigure 136). Figure 135: Preview in browser button in the Menu Bar 121

126 WireFusion 5 Volume I: General Reference Figure 136: 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 ( HFigure 137). Figure 137: 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. BCPU Profiling Often when developing complex presentations you will run into situations when the performance of your presentation is low (low frame rate). Then you need methods to analyze the presentation in order to find the bottlenecks. WireFusion has a built-in CPU profiler that helps you track CPU demanding objects and functions in your projects. You can choose to analyze the complete project or only a local scene by pressing the CPU Profile buttons in the Menu Bar ( HFigure 138). 122

127 Testing your Presentations Figure 138: The CPU Profiler buttons To CPU profile a project: 1. Choose Profile > CPU Profile Project to open the CPU Profiler dialog ( HFigure 139). 2. In the CPU Profiler dialog, click the Start Sampling button to start analyzing the project. 3. A Preview window with your presentation is started. Interact with your presentation so it enters the CPU demanding parts you want to analyze. 4. When ready profiling, click the Show Result button to see the results ( HFigure 140) NOTE: It is very important to run the CPU Profiler at least 60 seconds in order to get as accurate results as possible. The longer you wait the more accurate results you will get. Figure 139: The CPU Profiler dialog Start Sampling (button) Click to start the CPU Profiler. Show Result (button) Click to stop the CPU Profiler and show the result window. Duration Shows for how long time the profiling has been running. hh=hours, mm=minutes, ss=seconds. In HFigure 140 we see the result from a profile, where an Image object has been rotated and a Mosaic filter object has been applied on top of the image. We can see that the filter object has consumed about 70% of the CPU, while the rotation of the image only consumed about 30%. The [Root Scene] is the top-most Scene object in your presentation that contains the visible 123

128 WireFusion 5 Volume I: General Reference Stage and the rest of the objects in your project. In this example the [Root Scene] did not consume any CPU at all. Figure 140: The CPU Profiler result BMemory Profiling Except for trying to optimize the file size for resources, such as images etc, with the purpose to minimize loading and startup time, you also have to think about how much system memory your presentation consumes during runtime (or actually Java memory, aka Java Heap Space). The Java memory is limited to 64 MB in most web browsers, which means that if your presentation exceeds this limit, at any time during the presentation is running or during startup, then your presentation will not work. Using the Java Console window in the browser will help you to maybe see when the presentation stops working and how much memory it consumes, but you do not see the details for what actually consumes memory. WireFusion has a built-in method for analyzing the memory usage during runtime. When previewing the presentation in the internal viewer, you click the Memory Profiler button in the toolbar ( HFigure 141). Figure 141: Printing the current memory status in the Console window You will then get information about: 1. Memory used by player engine 2. Memory used by resource files (file size) 3. Memory used by cached images 4. Memory used by objects 124

129 Testing your Presentations 5. Total memory used by presentation Figure 142: Console window with printed memory usage You also have the option to analyze details of individual objects. This is done by writing the code seen below each individual object and after pressing Return on your keyboard ( HFigure 142). 125

130 WireFusion 5 Volume I: General Reference Figure 143: Console window showing code word for displaying detailed information TIP: You can also analyze a presentation running in a web browser by opening the Java Console window and writing the invisible code word 'showxm' on your keyboard, after clicking anywhere in the presentation window (to give focus to the presentation). BDebugging 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. To debug a project: 1. Choose Debug > Debug to open the Debug Console ( HFigure 144). 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 144: An empty Debug Console 126

131 Testing your Presentations 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 ( HFigure 145). Figure 145: 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. Resume (button) Click the Resume button to continue debugging from a stopped position. The information seen in HFigure 145 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. 127

132 WireFusion 5 Volume I: General Reference 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 ( HFigure 146) indicating a breakpoint is set, else the dot is white. Figure 146: 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 ( HFigure 147). You can use the Wire List to set the breakpoint ( HFigure 148). Figure 147: Add/remove a breakpoint in the wire menu Figure 148: Add/remove a breakpoint in the Wire List 128

133 Testing your Presentations 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. 129

134 WireFusion 5 Volume I: General Reference 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. BLoading 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 ( HFigure 149). Figure 149: The Loading Manager 130

135 Deployment Preloaded files 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, select 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. BPublish 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 ( HFigure 150). 2. Choose in which format you want to publish your presentation, and then click the Finish button to publish. 131

136 WireFusion 5 Volume I: General Reference Figure 150: 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. BJava 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). 132

137 Deployment 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 151: 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 133

138 WireFusion 5 Volume I: General Reference 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 ( HFigure 152): 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). 134

139 Deployment Figure 152: 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 Adobe 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. 135

140 WireFusion 5 Volume I: General Reference Figure 153: 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 ( HFigure 154). 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. 136

141 Deployment Figure 154: Size report 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 BJava 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. 137

142 WireFusion 5 Volume I: General Reference Figure 155: Publish dialog for Java Application Fullscreen Application Select this checkbox to publish as a fullscreen application. OpenGL Select this checkbox to publish as OpenGL hardware accelerated presentation. Frame Icon Click the Change button to load and replace the default application window icon (only applicable to non fullscreen applications). 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 ( HFigure 156). 138

143 Deployment Figure 156: 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 -Xmx256M -cp <presentation jar file> com.wirefusion.player.componentplayerframe 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. 3. Or, optionally, from the Command prompt or a Terminal window: java -Xmx256M -jar <presentation jar file> NOTE: You can download the latest Java Virtual Machine from Sun at 139

144 WireFusion 5 Volume I: General Reference Figure 157: WireFusion presentation running in a resizable window BJava Web Start Applications [Professional and Enterprise Edition] Publishing your presentation as a Java Web Start application allows your presentation to be started directly from the Internet using a web browser. Unlike Java applets, Web Start applications do not run inside the browser, and the sandbox in which they run does not have to be as restricted, although this can be configured. One chief advantage of Web Start over applets is that they overcome many compatibility problems with browsers' Java plugins and different JVM versions. On the other hand, Web Start programs cannot communicate with the browser as easily as applets. To publish as a Java Web Start Applicaion: 1. Choose File > Publish 2. Choose a Presentation Name and a Publishing Folder. 3. In the Formats drop-down menu, choose Java Web Start Application. 4. Choose optional Format Settings and click Finish to publish. 140

145 Deployment Figure 158: Publish dialog for Java Web Start Application OpenGL Select this checkbox to publish as OpenGL hardware accelerated presentation. Base URL Specify the location on your web server where the presentation will reside. Title Choose a title for your presentation that will be shown in the window title bar. Vendor Choose a publisher name that will be shown in the loading dialog. Frame Icon: Click the Change button to load and replace the default application window icon. 141

146 WireFusion 5 Volume I: General Reference Figure 159: Loading dialog What is published? When clicking the Finish button, four files will be generated; the application file (JAR), the Java Network Launching Protocol file (JNLP), an example html file with a "Launch Application" link in it and a readme file containing detailed information how to publish. All files will be stored in a folder called 'java_web_start_applications' located in your Publishing Folder ( HFigure 160). Figure 160: Java Web Start application '3D House Configuration' published to C:\WireFusion_Presentations\java_web_start_applications\3DHouseConfigurator 142

147 Deployment BJava 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 161: 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 ( HFigure 162). 143

148 WireFusion 5 Volume I: General Reference Figure 162: 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. BAnimation [Professional and Enterprise Edition] You can publish your presentation as a sequence of JPEG or PNG 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 Formats drop-down menu, choose Animation. 4. In the Animation Type drop-down menu, choose Image Sequence. 5. Choose optional Format Settings and click Finish to publish. 144

149 Deployment Figure 163: Publish dialog for Image Sequence File Format (choice) Choose to publish as a seqence of PNG images or JPEG images. 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. 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). 145

150 WireFusion 5 Volume I: General Reference Use Transparency (checkbox) Set Enable gives you the option to create transparent PNG images. 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 ( HFigure 164). Figure 164: 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. 4. In the Animation Type drop-down menu, choose GIF Animation. 5. Choose optional Format Settings and click Finish to publish. 146

151 Deployment Figure 165: 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. 147

152 WireFusion 5 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) Sets a color that will be transparent in the GIF animation. Loop Mode (checbox) Select this checkbox 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' ( HFigure 166). Figure 166: GIF animation published to D:\WireFusion_Presentations\DVD\animations 148