See section 1.1 for a general description of components.
The Clip Component is the most important Component in ClipFlair Studio since its main aim is learning through captioning and revoicing of clips. The Clip Component is basically a media player where a clip can be added.
3.1.1. Main View
In a Clip Component you will notice the
(1) Clip Component title bar, the (2) playback area, where the video is displayed and the (3) playback buttons.With the Play/Pause button you can handle the clip. Slide the navigation bar to move to a different time in the clip. The CC button enables or disables the captions (if any) over the clip. With the Volume slider you can change the sound level of the clip and mute/unmute.
3.1.2. Adding a clip
Simply go to Studio to see the Home screen(see section 1.2). Click on Open Video and choose the source: a, b or c below.
a) From the Video Gallery:
Use the filters to find a video clip and click on “open”. A new activity will open with the clip as its only component. Resize and/or move the clip component to add more components. If you would like to add a clip to the Gallery, you are welcome to go to ClipFlair Social / Feedback Forum / Suggest Material / Video, and follow the instructions in the first post. Have in mind that only video files suitable for educational or free use can be added in the Gallery.
b) From a URL:
Click on the options button to see the Content Options at the Back panel of the Clip Component (see section 3.1.4). Write the video URL in the Media Source field. Click on the For more information about the kind of online media sources accepted, go to ClipFlair Social / Help / Hints and Tips
c) From your computer:
Click on the options button to see the Content Options at the Back panel of the Clip Component (see section 3.1.4). Click on the folder icon next to the Media Source field to browse your local files. Only .wmv. and mp4 video files are accepted, as well as.mp3 and .wma audio files.
TIP: Alternatively you can go to Studio, start a new activity and drag and drop a video or audio file in the activity container. A new clip component will be created, containing this video or audio file. If you drop the file onto an empty area of the activity, a new component will be created. If you drop the file in an existing component, its content will be replaced. ATTENTION: clip files that you import from your computer will be saved in the activity possibly resulting in a large .clipflair file. If you want to share a ready-made activity, we recommend using a clip in the Gallery.
In order to view and edit the Component’s Options click the Component Options button (wrench icon) at the top-right corner of the Component. This action will flip the Component and you will see the Options back panel. If you cannot see the Window Options click the Window Options label to expand and show the available options:
- Title field:for setting the Component Title as shown at the Title bar
- X and Y field: for setting the component’s position in the activity. A high number in X moves the component window to the right. A high number in Y moves it down. the coordinate system of the activity uses a horizontal X axis increasing from left to right and a vertical Y axis increasing from top to bottom, with (0,0) being the top-left corner
- Widthand Height field:You can change the Component dimensions (Width and Height) by editing the Width and Height fields. You can also change a Component’s dimensions by dragging its edges. Move the cursor to the edge and once it turns into double-pointed arrow click and drag the edge. Please note that you can resize the
- Zoom field:Values greater than “1” would zoom in the Component and values between “1” and “0” would zoom out the Component. Always keep in mind that default zoom value is “1”
- Z-order layer index: determines which component will appear on top. Components are stacked vertically in a conceptual Z-axis, with the components having higher Z-index value being on top and those having lower values being displayed under them. This setting is useful for overlapping components
- Opacity slider: where you set the Component’s opacity. Move the slider and set the Component’s opacity (left end being most transparent)
- Title Foreground/Background color: Use this button to change the color of the Foreground/Background of the component Title
- Background/Border color: Changes the color of the Background/Border of the component
- Border thickness: Increasing the number makes the border thicker. There are four numbers for the four borders
- Corner radius: Increasing the numbers makes the corners curvier
- Movable property: if checked you can change the Component’s position in the Activity, else Component’s movement is disabled. You can move each Component anywhere you want inside the . Move the cursor to the Title Bar and drag and drop the Component around the Activity
- Resizable property: if checked you can change the Component’s dimensions by dragging the Component’s edges, otherwise the component is not resizable.
- Zoomable property: if checked, you can use the Zoom shortcuts, else they are disabled
- Warn on closing property: if checked a Confirmation window will be shown when
you want to close the Component
In the Window Options Examples section (section 6.1) you can see examples of the above
fields and properties.
3.1.4. Content Options
In order to view and edit the Component’s Options click the Component Options button (wrench icon) at the top-right corner of the Component. This action will flip the Component and you will see the Options back panel.
- Media Sourcefield: Here you can set the URL of the clip or click on the folder icon to load a clip from your computer
- Time field: shows the clip’s current time. You can edit the field to make the clip jump to the specified time
- Replay Offset field: Replay Offset defines how many seconds the Replay button rolls-back the video playback.
- Automatic playback property: if the property is checked then the clip will play automatically when the user opens the activity.
- Looping property: if checked then the Clip Component will replay the clip when the playback finishes
- Volume slider: set the sound level of the Clip Component, left end being mute (lowest level). This property is saved with the activity, which means that when the activity is loaded, the volume will be as it was set when saved.
- Video visible property: when checked the Clip Component shows the video of the clip, else only sound will be played
- Controller visible property: when checked the Previous, Play/Pause, Next, CC (Closed Captions) and Mute/Unmute buttons as well as the Seek bar will be visible. If unchecked the buttons described are hidden
The Troubleshooting properties, if checked, display messages for the developers.
You can save and load a Component by clicking the wrench icon to view the Component Options.
Then click the “Save” button 
, choose destination folder, type file name and click “Save”.
To load a component, you can follow one of the following procedures:
TIP: Go to Studio, start a new activity and drag and drop a component file in the activity container. A new component will be created with the properties of the saved component you dragged (position, color, content, etc). If you drop the file onto an empty area of the activity, a new component will be created. If you drop the file in an existing component, its content will be replaced.
You can also load a Component by adding an empty Component of the same type, e.g. if you want to load a Clip Component add an empty Clip Component by pressing the “Add Clip” button. Then click the wrench icon to flip the Component and view its options. Now click the Load options button to load a file from your computer. Choose destination folder and file and finally click Open. You can also load a Component stored in a web server. To achieve this, click the Load options from URL, type the url and click OK.
In the Save and Load Examples section (section 6.2) you can see examples of the above procedure.
3.2.1. Main view
The Captions/Revoicing Component is important because you can add captions or voice recordings to your clip. The Captions/Revoicing Component is synchronized with the Clip Component. This Component consists of the titlebar, the toolbar, the column titles and the main area, which is a table where you can see and edit the captions or voice recordings.
The toolbar contains the following buttons:
- Add caption at current time. Pause the video at the time you want your caption to appear and click on this button to add a new caption row
- Remove selected caption. Click on the caption you want to delete and then click on this button to remove it
- Set selected caption’s start time. If you want to change the start time of a caption, pause the video at the time you want the specific caption to start and then click on this button. The start time of the selected caption will be set to match the clip’s time
- Set selected caption’s end time. If you want to change the end time of a caption, pause the video at the time you want the specific caption to end and then click on this button. The end time of the selected caption will be set to match the clip’s time
- Text direction. Use this button to change the direction of the text: right-to-left or left-to-right, depending on the language of the captions (e.g. English is left-to-right and Arabic is right-to-left)
- Import captions from TTS, SRT and other file formats. If you already have a subtitles file (.srt, .tts etc) you can import from TTS, SRT and other caption formats files.
- Export captions to TTS, SRT and other file formats: You can use the captions you have created with ClipFlair in other subtitling programs (Subtitle Workshop) where you can export the captions in TTS, SRT and other caption formats
- Save all audio in a single .WAV file. This button is visible when the “audio visible” option is selected in the Back Panel of the component
With the available buttons you can handle the captions referring to the clip on the Clip Component. When you click a caption the caption is highlighted (light blue background). From the Options back panel you can set the columns shown in the Captions Component.
When a clip is played on the Clip Component you will notice that when a caption is shown over the clip the same caption is highlighted on the Captions Component.
3.2.2. Window Options
See section 3.1.3
In order to view and edit the Component’s Options click the Component Options button (wrench icon) at the top-right corner of the Component. This action will flip the Component and you will see the Options back panel. With the Content Options you can set unique options of the Component, for example you can set which columns to show.
Specifically a Captions Component has the following Content Options:
- Title: Edit this field to change the title of the component on the title bar
- Toolbar visible: uncheck this property to hide the component toolbar
- Start Time visible: uncheck this property to hide the Start column
- End Time visible: uncheck this property to hide the End column
- Duration visible: check this property to display the Duration column
- Role visible: uncheck this property to hide the Role column
- Caption visible: if the property is checked then the Caption column is displayed. Captioning is enabled
- Right to Left (RTL Text Direction: check this property to change the text direction to Right-to-Left
- RTL visible: check this property to display an option next to each caption from where you can select the text direction per caption.
- CPL (Characters Per Line) visible: Check this property to display the number of characters per line next to each caption line
- CPS (Characters Per Second) visible: Check this property to display the number of characters per second next to each caption
- WPM (Words per minute) visible: Check this property to display the number of words per minute next to each caption
- Audio visible property: if the property is checked then the Audio column will be displayed. Revoicing is enabled
- Comments visible: if the property is checked then the Comments column will be displayed
- Comments (Audio) visible: if the property is checked then the Comments (Audio) column will be displayed
3.2.4. Adding new Captions or Voice recordings
In order to add a new caption pause the playback from the Clip Component. Then press the Add caption at current time button placed at the top-left corner of the Captions Component. You will notice a new line added in the Captions Component. This line is your caption and it will appear at the moment of the clip specified by the Start value. The caption’s start and end time define the time the caption will appear and the duration of it. The default duration is set to two seconds.
Double-click in the Caption field and write your text. Repeat the procedure to add more captions. You can also edit every field of the caption if you double-click it, e.g. you can edit the Role field if you double-click that field and then write the role (person talking) for the caption.
3.2.5. Removing a caption or voice recording
If you want to remove a caption or voice recording, first you have to select the respective grid row. Once it is highlighted press the Remove selected caption button.
3.2.6. Import/Export captions from file
ClipFlair Studio supportsSRT, TTS, FAB and ADOBE ENCORE files for the Captions Component. To import captions from, say, an srt file press the Import button, select the file and press Open. The Captions Component will be updated with the contents of the file.
You can also save the captions in a file: click the Export button, write the File name and click Save.
3.2.7. Captioning and Revoicing tasks
To add a captioning task in an activity, click on the “Add captions” button 
in the Activity Toolbar (see section 2.3) .To add a revoicing task in an activity, click on the “Add revoicing” button 
in the Activity Toolbar. These two buttons add the same kind of component with different options enabled at the back panel: only “caption visible” for the captioning component, only “audio visible”, or both options if both captioning and revoicing tasks are required (see “Content Options”, section 3.2.3.)
3.2.8. Recording your voice
By pressing the Record audio button you can record your voice. While recording the clip the button’s state changes to a Stop button 
. When finished, press the Stop button. Then a set of buttons appears: Play audio, Load Audio from WAV file and Save audio from WAV file
The Play audio button plays the recording
You can load a saved revoicing clip by pressing the Load audio from .WAV file button.
With the Save audio to .WAV file button you can save the recording so you can reuse it in the future
3.2.9. The components are synchronized
The Captions/Revoicing Component is synchronized with the Clip Component, as they share the same time dimension. If there are multiple Captions/Revoicing components, users will notice that each Component will be filled with the same lines and with the same Start and End times for each caption (see Figure 6). Moreover, if you add, edit or delete a line in one component the change will automatically apply to the other, e.g. if you add a new captions line in the Captions Component a new line also will be added in the Revoicing Component with the same Start and End times and vice versa, or if you delete a line in the Revoicing Component the line for the corresponding times will be deleted from the Captions Component.
When a clip is played on the Clip Component you will notice that when a caption is shown over the clip the same caption is highlighted on the Captions Component and the corresponding line is also highlighted in the Revoicing Component.
3.2.10. Save and Load
See section 3.1.5.
With the Text Component activity authors can write instructions, notes, descriptions, etc. and they can also provide a text area for the learners to write their answers. The Text Component is a text editor where you can write and edit any text.
3.3.1. Main view
The Text Component consists of Titlebar, the Toolbar, where text formatting tools are provided, and the Text Area, where you write and edit the text.
The Toolbar offers the following buttons:
- Open existing document: Click to browse your ClipFlair text files (.text), Office OpenXML files (.docx) Unicode Text files (.txt).
TIP: Alternatively you can drag and drop a file in the text component. This action replaces the content of the text component. If you drag and drop a text file (.docx, .txt) in the activity area, a new text component will be created
- Save to external file: Click to save your text component as a ClipFlair Text file (.text) or Unicode Text file (.txt)
- Clear contents
- Print document
- Paste text
- Cut text
- Copy text
- Font, Font Size, Font Color and Font Style
- Insert Hyperlink: NB, hyperlinks will only function if the text component is in View Mode
- Text direction
- Edit / View mode. In view mode, the user cannot modify the text. Click on the edit button to make the text editable.
3.3.2. Window options
See section 3.1.3
3.3.3. Content options
In order to view and edit the Component’s Options click the Component Options button (wrench icon) at the top-right corner of the Component. This action will flip the Component and you will see the Options back panel with the following options:
- Toolbar visible property: if checked then the Toolbar at the top of the Component will be available. Else the Toolbar will not be accessible.
- Editable property: if checked then the Text Component will be available for edit, else you will not be able to edit or make any change in any way
- Right to Left (RTL) text Direction property: if checked then the text’s direction inside the Text Component will be from right to left else it is set to the default left to right direction
- Time field:changes the current time in the clip (all components are synchronized with their activity container)
3.3.4. Save and Load
See section 3.1.5
3.4.1. Main view
With the Image Component you can add one or more images in your Activity. The Image Component displays the image and you can handle the image as any other Component.
3.4.2. Adding an image
Adding an image requires the use of an Image Component.
In an Image Component, press the Options button (wrench icon at the top-right corner of the Component) to flip
and view its options.
Then either fill the Image Source (URL) field with the link of the image you want to display or click on the folder icon to choose an image file .png or .jpg from your computer.
3.4.3. Window options
See section 3.1.3
3.4.4. Content options
In order to view and edit the Component’s Options click theComponent Optionsbutton (wrench icon) at the top-right corner of theComponent. This action will flip theComponentand you will see the Options back panel. With theContent Optionsyou can set the following:
- Image Source (URL) field: where you set the url of the image
- Use Camera for Source: If there is a camera available, check this box to activate it. Click on the wrench icon again to see the camera source
- Right to Left (RTL) Direction property: Check this box to change the direction of the image
- Action URL field: Write a link here to add a link to the image
- Action Time field: When the image is clicked, the current time in the activity is set to this time value if one is given (note: all components are synchronized with their activity container)
- Time field: changes the current time in the clip (all components are synchronized with their activity container).
3.4.5. Save and Load
See section 3.1.5
3.5.1. Main view
The Map Component adds a map to the Activity. You can see every place you like through the map. Drag and drop the map to explore the world. Zoom and choose between Road or Aerial view for the Map Component.
3.5.2. Window options
See section 3.1.3
3.5.3. Content options
In order to view and edit the Component’s Options click the Component Options button (wrench icon) at the top-right corner of the Component. This action will flip the Component and you will see the Options back panel. With the Content Options you can set unique options of the Component. Specifically a Map Component has the following Content Options:
- Navigation Visible property: where you set whether you want the navigation buttons (top-left corner) to be visible or not
- Scale Visible field: where you set whether you want the scale bar (bottom-right corner) to be visible or not
- Language-Culture field
- Mode field: where you choose whether you want Aerial or Road map style
- Labels Visible field: where you choose whether you want the map’s labels to be visible or not
- Labels Fading field: where you choose whether you want the map’s labels to fade when you change the zoom level or not
- Latitude and Longitude fields: where you can set the latitude and longitude of the map’s center
- Map Zoom slider: where you can adjust the map’s zoom level
3.5.4. Save and Load
See section 3.1.5
3.6.1. Main view
With the News Component users can place a list of Atom / RSS news. It consists of the (1)
News Component title bar and the (2) News Area, where a list of links is displayed.
3.6.2. Window options
See section 3.1.3
3.6.3. Content options
In order to view and edit the Component’s Options click theComponent Optionsbutton (wrench icon) at the top-right corner of theComponent. This action will flip theComponentand you will see theOptionsback panel. With theContent Optionsyou can set unique options of theComponent. Specifically anews Componenthas the following Content Options:
- News Source URL(Atom/RSS feed) field: where the url of the news feed is set
3.6.4. Save and Load
See section 3.1.5
3.7.1. Main view
The Gallery Component displays all available ClipFlair activities in a grid format. It consists of the (1) Gallery Component title bar, the (2) Gallery Area, where the ClipFlair activities are displayed, and the (3) Filters Area, where users can refine their search / sorting criteria.
3.7.2. Filters Area
The Gallery Component Filters Area is the area located under the title bar on the left side of the component and contains a search box, as well as a list of dropdown buttons providing checkbox items that enable users to define their sorting criteria.
3.7.3. Window options
See section 3.1.3
3.7.4. Content options
In order to view and edit the Component’s Options click theComponent Optionsbutton (wrench icon) at the top-right corner of theComponent. This action will flip theComponentand you will see theOptionsback panel. With theContent Optionsyou can set unique options of theComponent.Specifically aMap Componenthas the following Content Options:
- Gallery Source (URL) field
- Filter
3.7.5. Save and Load
See section 3.1.5
3.8.1. Main view
The nested Activity Component is a component similar to the original Container. It’s Main Area can display any previously loaded activity, pretty much the same way as the original ClipFlair Container does. This way, users can create activities that display secondary / nested activities in them.
3.8.2. Window options
See section 3.1.3
3.8.3. Save and Load
See section 3.1.5