Fusion:Example:Corporate

From SpinetiX Support Wiki

Jump to: navigation, search

Introduction

Project preview

This example shows how to create and use some slide do display corporate communication and employee information a screen using Fusion.

After following this example, the user will be able to:

  • Configure text and images to be displayed on the screen. Different content can be displayed at different time of the day.
  • Display information about the employee of the day/week/month
  • Switch between programs with different type of information with a simple click in Fusion.
  • Mix video and corporate communication

The process is divided in two steps:

  1. Administrator actions - Creates the template and setup Fusion.
  2. User actions - Use Fusion to enter the information and show it in the screen.

The Template created in this example can be downloaded here. The Fusion Backup of this example can be downloaded here.

Administrator actions

Design slide templates

Duration: 10 min

The administrator must first create some slide template using HMD.

  • Open HMD and go to "My Fusion Elements"
The first template lets the user show some media (image or video) together with a description. It uses the layer approach to control the Fusion Layout.
Communication template
  • Create a "New Slide Template"
    • Enter the name of the template (Communication) and the format (16:9)
  • Create a New Collection and rename it to media
    This collection will be used to put all file that are not editable in Fusion. In this example it will be used to store the background and a placeholder for the media.
    • Copy "Diagonal Gradient 1.svg" and "Bliss.svg" from "My Templates/Backgrounds/16_9" to the "media" collection
  • Start editing the template
  • Configure the Background:
    • Drag and drop the "Diagonal Gradient 1.svg" from the media collection to the preview window.
    • Right-click on the background and make it full-screen.
    • Double-click on the background. This will modify the Properties tab on the right and let you choose the colors of the gradients.
    • Press the back arrow and save your work.
  • Add the media placeholder:
    • Drag and drop the "Bliss.svg" from the media collection to the preview window.
    • Change the size and position of the media using the preview window.
  • Add text area:
    • Press the "New text layer" button on top of the preview area
    • Change the size and position of the text area using the preview window.
    • Double click on the text area to modify the text.
    • Edit the text to type "Enter a description". This text will only be used for the preview.
    • Change the fonts, the size and/or the color of the text using the button on top of the editing area.
Make the media Fusion editable
  • Make the media and the text area editable with Fusion
    • Click on the media and select Properties
    • Check the box "Fusion editable"
    • Fill up the "Fusion label". Use for instance "Select a media" for the media and "Enter a description" for the text area.
    • A Fusion icon will be shown on top of the preview in the Layer view.
  • Set the duration of the Slide
    • Go to the properties view
    • Change the "Duration" to 10s
      This will insure that the slide is shown at least for 10s when used in Fusion.
  • Save your work
The second template lets the user enter some information about the employee of the day/week/month. It uses the XML-Tree approach to control the Fusion Layout.
Employee template
  • Create a "New Slide Template"
    • Enter the name of the template (Employee) and the format (16:9)
  • Create a New Collection and rename it to media
    This collection will be used to put all file that are not editable in Fusion. In this example it will be used to store the background and a placeholder for the employee picture.
    • Copy "Diagonal Gradient 1.svg" and "Bliss.svg" from "My Templates/Backgrounds/16_9" to the "media" collection
    • Create a new SVG document using a custom format of 160x224 (the size of the portraits)
  • Start editing the template
  • Configure the Layout:
    Advanced editable options
    • Add and configure the background
    • Add the picture placeholder
    • Add two text area, one for the name, and one for the description of the employee. Configure the size and color of the text like in the previous examples.
  • Make the media and the text area editable with Fusion using the XML tree
    • Open the XML Tree View
    • Find the layer corresponding to the picture (will be called <animation> or <image>)
    • Right-click on the <animation> and select "Make media editable with Fusion".
    • Find the layer corresponding to the text area (will be called <textArea>)
    • Right-click on the <textArea> and select "Make unformatted text editable with Fusion" for the name and "Make content editable with Fusion" for the event description.
  • Save your work. A new Fusion tab will be created
    Configuring Fusion names
  • Open the Fusion tab
    • Click on the left column of each line to set the name to be displayed in Fusion
    • The order can be modified using the right-click menu
  • Set the duration of the Slide
    • Go to the properties view
    • Change the "Duration" to 10s
  • Save your work

The final step it to archive the templates to be ready to be used in Fusion.

Import the template in Fusion

Uploading the templates

Duration: 1 min

Make sure Fusion is activated before starting.

  • Log into Fusion using an "Administrator" account.
  • Upload the template in Fusion
    • Go to the Settings pages and select the "Templates" tab.
    • Press the "Add" button and select the "Corporate.7z" file previously exported from HMD.
    • A new icon will be shown in the list of available Templates.

Uploading media

Creating media pack using HMD

Duration: 2 min

Media file can be uploaded one by one inside Fusion using the "Add" button in the "Media" menu. However, using HMD it is possible to group all the media in a single 7z file and add previews to the video.

  • Open HMD and go to "My Project"
  • Create a New Collection and name it media
  • Drag and drop all the images and video needed by Fusion
    • The snapshot button can be used to control the preview for video files
  • Select all the files in this folder, and select "Archive" using the right-click menu.
    • Save the file under "Media.7z"
Uploading media

Once the media pack has been created it can be uploaded into Fusion

  • Go to the "Media" menu
  • Press the "Add" button
  • Select the "media.7z" created by HMD
    • All the files will be uploaded at once.
    • The video will have the same preview as shown in HMD

Creating content

Duration: 5 min

In this example a set of communication and an employee description will be prepared. The communication will be displayed at predefined time during the day. Different Programs will be created so that the final user can switch between them depending on the content that needs to be shown.

  • Create a new Slide:
    • Go to the Slides menu
    • Press the "New button"
    • Select the Employee template using the FusionNewIcon.gif icon.
    • Save the Slide using the "Save" button and name it "Employee".
      New communication slide
      As the content is been prepared from an administrative point of view, the text content is not important. This will be managed by the user.
    • An empty slide called "Employee" is now available in the Slide menu.
  • Create the communication slides
    • Press the new button and select the Communication template using the FusionNewIcon.gif icon.
    • Select an image from the set of uploaded media
    • Enter the text to be displayed under the image
    • Save the slide
      Available Slides
  • Repeat the procedure above
    In this example 3 fully defined communication slides are prepared. A fourth slide for custom communications is also created.
  • Create new Programs
    New Program
    • Go to the "Programs" menu
  • Create the Base program
    • Press the "New" button
    • Add the images and or video
    • Add the Communication slides
    • Press the "Scheduling" button
    • For each communication slide, select the time for which it should be shown.
      Note that in this example the first communication is shown in the moring, the second around midday, and the last one only the afternoon. The other media are shown all the time.
    • Save your work, calling the program "Base".
  • Create the "Employee" program
    • Open the "Base" program
    • Press the "Copy" button to duplicate the program
    • Add the Employee slide to the program
    • Save your work
  • Additional Programs can bee created to display different combination of the media.

Creating Users

Creating new Users

Duration: 1 min

The final step of the process is to create an user with limited right to manage the content shown by the player on a daily basis.

  • Create a new User
    • Go to the "Settings" menu
    • Open the "Users" tab
    • Enter the username and password for the new user (e.g. "Assistant" )
    • Select the "Editor" set of rights
      This will let the user change the text of the Slides and select to Program to be shown.
    • Press the Add button.

User actions

The user should login with the "Assistant' account created by the administrator.

The user can do two types of actions:

  • Modify the Slide content
  • Select one of the Program created by the administrator

Editing Slides

Editing a Slide

To modify the content of one or more Slides:

  • Go to the "Slides" menu
  • Select the Slide to modify using the FusionEditIcon.gif icon.
  • Edit the Slide content
    • Drag and drop the picture to the preview
    • Enter the text in the text area
    • Leaving the mouse on top of an area shows some tips.
    • Press the Preview button to have a preview of your content.
  • Save your work
    If the content correspond to the content currently being displayed it may take a few seconds to be updated in the screen.

The preview of the Slide in the "Slides" menu will be adapted to reflect the changes done by the user.

Active Program

Switch between Programs

The user can switch between the different preset programs.

To switch between programs:

  • Go to the "Programs" menu
  • The program on the top is the Program currently active.
  • Use the FusionActivateIcon.gif to activate any other program.
  • The user may check the content of any program using the FusionViewIcon.gif.
This page was last modified on 29 September 2014, at 12:43.