Making an intro video

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

Sat Feb 22, 2020 10:37 pm

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 4123 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 4123 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 4123 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 4123 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 4123 times

The Action Filter is:

5.png
5.png (43.2 KiB) Viewed 4123 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 4123 times

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

7.png
7.png (35.03 KiB) Viewed 4123 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 4123 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 4123 times

This stops the video playing.
The next action:

10.png
10.png (34.13 KiB) Viewed 4123 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 101 times
Hopki
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: 359
Joined: Thu Mar 19, 2009 1:26 pm
Location: RU/CZ
Contact:

Fri Apr 17, 2020 5:47 pm

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: 202
Joined: Wed Oct 26, 2016 6:52 pm

Thu Jul 23, 2020 10:51 am

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: 11119
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Thu Jul 23, 2020 8:52 pm

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,
Hopki
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: 202
Joined: Wed Oct 26, 2016 6:52 pm

Thu Jul 23, 2020 10:12 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
Post Reply