Making an intro video

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
This project will show you how to create an intro video, please see this example.
In this project less is more, so each video clip is just a short three-second clip of a simple zoon or pan/tilt.

The skin is also attached at the bottom of this post.

Select up to four nodes in the tour to create clips from, the idea is to keep the video file size down so it loads quickly.
For a Pano2VR light project, you can add video clips of different areas of the same panorama.

Note this has no sound so the Autoplay function will work as browsers only prevent media with audio from auto-playing.
Of course, you can add a sound if you want using the sound editor.

Using the Animation Editor create a three-second video clip for each node, as a tip the focus should be in the centre of the video so it does not matter if the video gets cropped vertically or horizontally which will happen depending on the screen size.

Add an Animation output, do not use any transitions, the settings are:

1.png
1.png (104.22 KiB) Viewed 17864 times

This will make a twelve-second video which should be close to or under 1.5MB.
The reason why you would not use a video transition is that this will make the loop very noticeable.


The Skin.
The video is displayed using a video element, Intro Video Display.
This is set to 100% in size so it fills the screen. The video source is set to File and select the video created by the Animation output.
Select Autoplay and Loop.

The video is set to monochrome using a CSS filer.
Under the video elements CSS Styles enter:

Code: Select all

filter: grayscale(100%);

Then to set the video to fill the screen, use CSS Styles Inner Element:

Code: Select all

object-fit: cover; overflow: hidden;

The video has a paper effect covering to help with the effect.
This is created by using a paper texture GIF added to a container which covers the video element.
Right button click and save the following file:

paper.gif
paper.gif (2.75 KiB) Viewed 17864 times

Experiment with different textures.

The paper texture file, paper.gif, is added to the project using the HTML5 output's, Advanced tab and Assets.
This will place it in a subfolder called "assets" in the output folder.
The container, Texture Overlay, also has a size of 100% and an Alpha of 0.6.
Under the CSS Styles it is using the CSS:

Code: Select all

background-image: url(assets/paper.gif);

Use the containers Alpha to increase or reduce the overlay effect.

The text uses three text boxes that fade in and out using a variable and timer.
The skins variable has the name, "var_intro", this is a numbered variable starting at 0.
The timer is the parent element so its size is also set to 100%.
The timers setting is:

2.png
2.png (14.07 KiB) Viewed 17864 times

So the timer will start when the project loads and will toggle between Activate and Deactivate stats.
It has the actions:

3.png
3.png (36.61 KiB) Viewed 17864 times

So every time the timer state changes to Deactivate it adds 1 to the variable value counting up.
The next action will set the variable number to 4 when the action filter is triggered.

4.png
4.png (37.32 KiB) Viewed 17864 times

The Action Filter is:

5.png
5.png (43.2 KiB) Viewed 17864 times

So when the variable number reaches 6, the action can set it back to 4 so creating a loop, counting 4,5 and 6 then back to 4.
What will happen is on output open, the timer starts first being Active.
Then it Deactivates adding 1 to the variable number.
The timer is set to toggle so every time the timer's state is Deactivate it adds another 1 to the variable counting up.

The skin has three text boxes that have logic blocks that fade them in and out depending on the variable number.
As an example, for the first text box, "Title Text 1".
It has the Alpha logic block:

6.png
6.png (35.82 KiB) Viewed 17864 times

The last text box: Title Text 3 also has a text colour logic block:

7.png
7.png (35.03 KiB) Viewed 17864 times

What this does is change the text colour to bring attention to the text, "Click to Enter".
Now as the variable now loops between 4, 5 and 6, the text box colour toggles.

The text box "Title Text 3" has three actions, the first action:

8.png
8.png (40.66 KiB) Viewed 17864 times

This fads out the video by setting the parent timer to alpha 0.
The next action:

9.png
9.png (31.34 KiB) Viewed 17864 times

This stops the video playing.
The next action:

10.png
10.png (34.13 KiB) Viewed 17864 times

This sets the timer's timeout to 0 so stopping it from running.

To finish off the project I used Google Fonts, please see this LINK.

If you added a sound then you will need to add a stop media action to the text box "Title Text 3".

Regards,
Hopki
Attachments
video_intro.ggsk
(2.05 KiB) Downloaded 554 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
jare
Posts: 365
Joined: Thu Mar 19, 2009 1:26 pm
Location: RU/CZ
Contact:

Hi Martin,

the intro video does not work in Chrome and Opera Is it a bug or because of the browser's security policy?
wiso
Posts: 281
Joined: Wed Oct 26, 2016 6:52 pm

works great in firefox, thank you!

is there in the meantime a solution that it also works in chrome and opera?

thank you,
wiso
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Guys,
I have updated the skin, but all you have to do is select mute in the video element.
It used to be media without audio would work, but now the video element has to have mute selected.
Mind you Firefox is not good :-(
##EDIT##
If you remove the monochrome filter then Firefox plays nicely.
Regards,
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
wiso
Posts: 281
Joined: Wed Oct 26, 2016 6:52 pm

thank you hopki!

made a demo, with your video intro and a "automatic tour", e.g. an animation which plays afterwards.(in german)

https://www.wisocast.at/muellers/animat ... index.html

i am trying animations only for a short time - but i am more and more excited ...

best regards,
wiso
Idocio
Posts: 52
Joined: Wed Apr 15, 2020 9:26 pm

Is there a way to make a background sound of an intro, created with the skin editor, and that once a button is pressed, the background sound decreases in volume (fade out effect) while loading the first panorama of the virtual tour?
Once the panorama is loaded, the background sound will stop definitively.

An example would be, a background covering 100%, with a presentation image and background music. When you click on the image, it and the image gradually disappear, while the music is lowered in volume until it disappears and then turns off, once the first panorama is fully loaded.
wiso
Posts: 281
Joined: Wed Oct 26, 2016 6:52 pm

sorry i know only the general "problems" with browsers, that they do not start sound before the first klick.

that is not usal for this application,

greatings,
wiso
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
If you want a controlled way to lower the volume then it will be with a timer.
The attached project has an mp3 added for background sound but of course, can be any sound.

In the skin, there is a text box acting as a button Text 1, and a timer Timer 1, there is also a helper text box that can be deleted after so you can see what's happing.
The timer is set to manual and toggle.
The skin has a number variable, vol_adj set to 0.

How it works, OnClick of the button, Text 1, this set a value for the timer of 0.10s, not forgetting the timer will toggle so it will be 0.20 for every time the timer is active.

Timer 1has three actions, the first is to "change" the volume by -0.05 targeting the sound, in this case, the background when it is active.
The next is to Set the Variable by adding 1 to the variable when it is active.
The last is to Set the Value of 0 to the timer to stop it. But has an action filter to only do this when the variable vol_adj = 20.

In summary, when clicked the volume is decreased by 0.05% every 20 milliseconds until it reaches 0 at which point the variable will be at 20 and the timer is stopped.

You can adjust the speed of the timer to change the fade duration.
Regards,
Attachments
vol.zip
(308.54 KiB) Downloaded 319 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Idocio
Posts: 52
Joined: Wed Apr 15, 2020 9:26 pm

Great! Thank You @Hopki

A doubt. There is no way for the sound file to start playing by itself, once the panorama or the start screen defined in the skin editor is loaded?
In your example, the music doesn't start until you click on the screen with the mouse.
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Idocio,
This is browser security, you can not autostart media with audio, so you start muted.
Ten on the first touch/click you hear sound.
Regards,
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Idocio
Posts: 52
Joined: Wed Apr 15, 2020 9:26 pm

What is the difference between adding a background file from the properties editor or adding it from the skin editor?
wiso
Posts: 281
Joined: Wed Oct 26, 2016 6:52 pm

hallo martin,

made a intro video on the basis of your post. changed it a little. but what i want to have now is, that in the end there is no "click to enter" but the tint screen goes away (fades out autonomously) and it is ready for looking around.

https://www.wisocast.at/exhibition/klassik22/index.html

(should be at least: white tint screen hides, info&navigation menue pops up and closes one time, panorama spins short left and right, than it stands still again)

thanks for hints,
wiso

p.s.: tried it with changing variables and player status... but was not successful
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi wiso,
In the video element add the action, Media Ended, change variable value or visible hide xxxx.
When the video ends it will trigger the action, so the action could be a simple hide self and hide screen tint, or change a variable.
Regards,
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
wiso
Posts: 281
Joined: Wed Oct 26, 2016 6:52 pm

thx martin, but in my case i have no media/video thats running and ending for trigger the action. i have only the tint screen with the text and timer. do you know another possibility to attach an action to the end of the timer (when it counted 6 (or 7) i think) ?

thank yo,
wiso
Post Reply