Watch a demo on YouTube:
Click on a tab below to read the instructions.
01. Before you start!
1. BiBiKit is still under development. You need an invitation by one of the BiBiKit partners, before you can use the BiBiKit Editor.
2. BiBiKit is a web-based Editor. You need Google's Chrome browser for all features to work.
You can download Chrome here: https://www.google.com/intl/en/chrome/browser/
Finished projects can be viewed in other browsers, too!
04. User name and password?
You can get a user name and a password, from one of the BiBiKit partners.
During the pilot phase (the first half of 2013), only associated partners will be able to use the BiBiKit Editor.
05. Start a new project?
06. Edit a project?
Click on Open Project to work on a project that you started in an earlier session.
07. Select a project?
When you choose Open project, you will see a list of all your projects.
You can use this list to Copy a project, Edit a project, or Delete a project.
08. Add a new slide?
Click on the New Blank Slide button (at the bottom of the page) to add a new slide.
09. Copy a slide?
At the bottom of the page, you can see all slides of your project. You can select a slide, by clicking on it. The selected slide has a green border.
If you want to make an exact copy of a slide: Select that slide and click on the button that says: Duplicate Current Slide.
10. Delete a slide?
If you want to delete a slide: click on a slide at the bottom of the page (selected slides have a green border), and click on the button that says Delete Current Slide.
11. Reorder slides?
Select a slide with your mouse, and move it to the new location.
NB: at first, the relocated slides keep their 'old' numbers. Later, when you publish the project, all slides will be renumbered to match their new positions.
When you start a new project or a new slide, you see a blank slide.
On the right, you see two lists of Assets:
- Active Assets: here you can see all the texts, pictures and videos that are on the slide that you are working on. In the picture, the slide is blank: there are items in the Active Assets list.
- All Assets: here, you can see all the pictures and texts that you have uploaded for the current project, but also for all your previous projects. In the All Assets list you see ALL the files that you have ever uploaded to the BiBiKit server.
NB: The Active Assets list does NOT include text files, only pictures and videos.
13. Upload a new picture?
Click on the New Image button to add a new picture to your Assets.
A pop-up window opens: click on Add Files.
You can now browse your hard-disk, Google Drive, or other media to locate the picture.
Click on it to select it. If you want to upload more pictures, select the other pictures, and add them to the upload list.
Click on Start upload. All files will be uploaded.
When the upload is finished, the pop-up window will close automatically.
14. Preview a picture?
In the All Assets list, you see the names of all your files. Move your mouse over the file-names, to preview the files.
NB: Don't click if you only want to preview the files! If you click on a file-name, you add the file to the slide.
NB2: Sometimes, the preview pictures 'stick' to the list, they remain visible. Reload the page in your browser, to remove 'sticky' pictures.
15. Add a picture to the slide?
Find the picture in the All Assets list. Use the mouse to drag and drop it on the slide.
You will now see the picture in the top-left corner of the slide. The name of the file will be added to the Active Assets list.
16. Move and resize a picture?
All new pictures first appear in the top left corner of the slide.
Click and hold the move button to move the picture to a new location on the slide.
Click and hold the resize button, to make the picture smaller or larger.
NB: If you want to move the picture to an exact location, or if you want to resize it to an exactly specified size: go to the Active Assets list, and click on the Edit button (the yellow pencil) for that picture.
You can then specify the exact location and size of the picture, by entering the numbers.
17. Delete a picture?
1. Delete a picture from a slide:
Go to the Active Assets list, and click on the delete button (Garbage can) behind the picture that you want to delete.
You will see a pop-up window that asks you to confirm your choice. READ THIS CAREFULLY! Sometimes, it says: Delete the asset from the curent slide. If this is what you want, you can click on the red Delete button.
However, there is a bug in the system. Sometimes the pop-up window will say: delete the asset from the system. If you click on the Delete button, the file will be removed also from the All Assets list! If you want to use it again, you will have to upload it again!
2. Delete a picture from the system. Be careful: if you choose this, the picture is no longer available for any of your projects!
Go to the All Assets list. Select the file that you want to delete, and click on the Delete button (Garbage can).
Read the pop-up message carefully. Does it say: remove from the system? Is this really what you want? If yes: click on the red Delete button.
18. Upload a video?
Before you can add a new video to a slide, you have to upload it to the BiBiKit server.
In the All Assets list, click on the New Video button.
A pop-up window opens. You can locate the video on your hard-disk, in Google Drive, or another location.
Click on the video to select it. You can add several video-files to the upload-list.
When you have added all the videos that you want, click on upload. The green bar at the bottom shows the progress.
Do NOT close the upload window, during the upload!
The upload-window does not close automatically when all files have been uploaded.
You can close the upload-window when the indicator says 100%.
The uploaded video-file should now be included in your All Assets list.
If they are not: reload the webpage.
19. Add a video to the slide?
In the All Assets list, find the video that you want. Drag and drop it on the slide.
It will now appear in the top-left corner of the slide. You can add 1, 2 or even more videos to each slide.
BUT: before you can use a video an a slide, the video has to be converted to the BiBiKit format!
This may take a long time. The blue progress bar shows the progress.
NB: Some video-formats cannot be converted. Formats that can be converted include .flv, .mov, .avi, .mp4.
NB2: You only have to convert the video, once. If you want to use the same video again, on another slide, you do not have to convert it, again.
NB3: For BiBiKit, we want 'frame perfect' links. Editors must be able to specify EXACTLY at what point the video starts playing, and at what point it stops. This is necessary for sign language links. You do not want the video to start playing in the middle of a sign. Or: to stop, before the sign is finished.
During the video conversion, many 'key-points' are added to the video, to allow for 'frame perfect' links.
20. Move and resize a video?
(picture still missing)
Use the relocate button, to move the video to another location on the slide.
Use the resize button, to make the video-frame bigger or smaller.
If you want the location and size to be exact, go to the Active Assets list, and click on the Edit button (the yellow pencil) for the video file. A pop-up window will open. Here you can enter the exact numbers for the size and the location of the video.
21. Delete a video?
1. Delete a video from a slide:
Go to the Active Assets list, and click on the delete button (Garbage can) behind the video that you want to delete.
You will see a pop-up window that asks you to confirm your choice. READ THIS CAREFULLY! Sometimes, it says: Delete the asset from the current slide. If this is what you want, you can click on the red Delete button.
Be careful: there is a bug in the system! Sometimes the pop-up window will say: delete the asset from the system. If you click on the Delete button, the videofile will be removed also from the All Assets list! If you want to use it again, you will have to upload and convert it again!
2. Delete a video from the system. Be careful: if you choose this, the video is no longer available for any of your projects!
Go to the All Assets list. Select the video-file that you want to delete, and click on the Delete button (Garbage can).
Read the pop-up message carefully. Does it say: remove from the system? Is this really what you want? If yes: click on the red Delete button.
22. Add text to the slide?
In the All Assets list, click on the New Text button.
A tText-editor opens in a pop-up window. Enter a name for this text file.
Then, type your text or copy and paste a text from a text file or Word document.
Do not forget to click on Save changes, before you close the text-editor.
The text will appear in the top-left corner of the slide. It will be included in your Active Assets list for this slide.
NB: if you want to remove the Word formatting, click on the Remove formatting button (eraser, top row, 4th button).
23. Move or resize a text?
On the side, use the relocate button, to move the text to a new location.
Use the resize button, to make the text-frame larger of smaller.
24. Correct or edit a text?
You cannot make changes in a text, by typing on the slide!
Go to the Active Assets list and click on the Edit button (the yellow pencil) for the text that you want to change.
The Text-editor will open in a pop-up window. In the Text- editor, you can correct or rewrite the text.
Don't forget to click on Save changes, before you close the Text-editor!
25. Delete a text?
If you want to delete a text from a slide: go to the Active Assets list, find the text, and click on the Delete button.
Be careful: Texts are NEVER saved in the All Assets list. If you delete a text from a slide, the text is deleted from the system!
If you don't want to use the text on the current slide, but you may want to use it later, on some other slide:
make a copy of the slide (see 09. Copy a slide), BEFORE you delete the text from the current slide!
The text will be deleted from the current slide, but it will still be available on the copy of the slide. You can either edit the backup-copy of the slide, or use the backup-copy of the slide to 'copy and paste' the text to a new slide
26. Fix lay-out and overlaps?
Sometimes, pictures, videos and/or texts overlap on the slide. Some texts or pictures may even be invisible on the slide, because they are hidden behind a large picture or video.
Each asset is on a separate layer. In the Active Assets list, you can re-order the layers. The asset at the top of the list is the top layer: it is always visible. The second asset is behind (or below) the top layer, etc.
In the Active Assets list, you can re-order the layers. Use your mouse, to move a layer up or down in the list.
For instance, if you want the slide to have a blue background, you have to move the background image in the Active Assets list, to the very last position on the list (= the bottom layer).
Try and move the layers in the Active Assets list, to see the results in the slide.
NB: sometimes, moving a layer in the Active Assets list will make the preview picture 'stick' to the list. Reload the web-page, to 'unstick' it.
27. Link text to video?
You need the Text-editor, to add links to a slide.
In the Active Assets list, select the text that you want to link to a video. Click on Edit (the yellow pencil).
In a pop-up window, the Text-editor will open.
Select the text, that you want to link to the video. Then click on the Add link button.
Select the video that you want to link to. If you have more than 1 video on your slide, the names of the videos will be in a drop-down list.
The selected video will appear in the video-window.
Set the starting and end points of the link (see 26).
NB: At the moment, you can only link 'normal' text to a video. If you change the colour, size or style of the text, the link may not work!
If this happens, you can either use the HTML editor (source) to correct the mistake: first the formatting information, then the link information.
Or: remove the formatting information: Select the text, and click on the Eraser button in the top bar of the Text-editor. Hopefully, the link will now work.
28. Link picture to video?
You can only add links, in the Text-editor.
Open a text in your Active Assets list, or click on the New Text button in the All Assets list.
In the Text-editor, click on the Image button (see picture). The picture browser will open in a pop-up window.
Click on the green Browse Server button.
You will now see all pictures that you have uploaded to the BiBiKit server. Click on the picture that you want to insert in the text.
Now, you can specify the size of the picture, in pixels. You can also add a text description.
Click on OK, when you are done (you can always make changes, later!).
The picture is now included in your text. Or: there is only the picture in your Text-editor, and no text at all.
Select the picture with your mouse. Click on the add link button. Set the starting and end-points for the link (see 29: Starting and ending points). Click on save.
In the slide: when you click on the picture, the linked video will play.
29. Links: Starting and ending points?
In the video-window, use the video-controls to find the starting point of your link.
You can use the video control buttons play and pause, move 1 second forwards or backwards, and move 1 frame forwards or backwards.
If you need a starting point that is far away from your current location in the video, you can use the scroll bar to move to a location that is far forward or backwards:
Use your mouse to drag the bar at the bottom to the correct location. Time indicators tell you your location in the video. When you have found the location, click on the timebar so that the green marker becomes a red marker. The video will start playing at the red marker. You can now use the 1 frame, or 1 second buttons to find your exact starting point.
When you have found the correct starting point, click on the starting point button (see picture on the left).
Use the video controls, to find the correct end point for your link. Click on the end-point button.
Check your link: click on the Play link button, to play the linked video.
Click on the blue OK button (in the bottom right corner of the video window).
You can now add more links in the same way; select text, click on Add link, select video, set starting and end points.
Or you can close the text-editor and check the link on the slide. Click on the linked text (underlined) on the slide, and the linked video will play.
NB: When you add a second, third, etc. link: the video in the video-window will open at the end-point of your last made link. Click on starting point to make the new link start at the end-point of the previous link.
30. Links: Edit or delete?
You cannot make changes to links, directly on the slide. You first have to open the Text-editor.
In the Active Assets list, select the text or the picture with the link that you want to edit.
Select the link that you want to edit. Click on the Delete link button, to delete a link.
Click on the Add link button, to add a new link.
Click on Save Changes, before you exit the Text-editor
31. Save a project?
The project is automatically saved to the BiBiKit server, every time that you make a change.
There is no Save project button. If the system crashes, you may lose the very last thing that you did. But you will never lose your project!
NB: When you are using the Text-editor, the Link-editor, or the Image-editor, you DO have to click on the Save or OK buttons, to save your work!
32. Preview a project?
Click on the Preview button (in the top right corner of the screen) to see what your project will look like, when you publish it.
The Preview of your project will open in a new tab in your browser.
NB: The Preview tab does not close automatically. If you click on Preview often, it may be difficult to see which preview-tab shows your last changes.
So before you click on 'preview' again, it is better to close earlier 'preview' windows.
33. Export a project?
Click on the Export Project (top right corner of the screen) to export your project.
The project (slides, videos, texts, pictures, links) will be zipped into one file that you can download.
You can unzip the file on your hard-disk, on a CD or memory stick, or on an internet server.
Users can open the project with their own browser (Chrome is the preferred option). The opening page of each project is called index.
Open index.html in your browser and the project will open.
NB: If you make changes and corrections to your project, AFTER you have exported the project, the changes will NOT be included in your exported files. You will have to export the project again, and use the updated files to over-write the old project.
34. Publish a project?
When you click on Publish Project (top right corner of the screen), your project will be saved on the BiBiKit server.
You can indicate wether your project is private or public.
At the top of the screen, you will see the address of your project. Copy this address to your website or document. Clicking on this address will open the project.
NB: If you make changes and corrections to your project, AFTER you have published it, click on Publish Project again to update the published project. The changes will now be included in the on-line project.
Click on the Log Out button (top right corner of the screen).
Your project was automatically saved, after each change that you made. You don't have to save your project, before you log out.
36. Protect your project?
Only people who have your BiBiKit log-in name and password, can make changes to your projects.
The videos and pictures that you use in a project, however, are not protected. They can be copied and downloaded by others.
If you want to protect your videos and pictures: add your name, website, or watermark to your pictures or videos BEFORE you upload these to the BiBiKit server.
37. Market your project?
to advertise your projects, you can register at the www.bibikit.net website and add your projects to the BiBiKit Catalogue.
All entries will be checked by us, before they are put on-line.
We do not accept entries that are in any way abusive, discriminatory, inappropriate, pornographic, or in breach of copyright legislation.
We will send you a mail, when your project has been added to the Catalogue.
If you want people to pay for your projects, you will have to redirect them to your own web-shop. The BiBiKit Catalogue is a catalogue only, it is not a web-shop and does not include payment options.