Making an intro video

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Hopki
Gnome
Posts: 9924
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 1861 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 1861 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 1861 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 1861 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 1861 times

The Action Filter is:

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

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

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

This stops the video playing.
The next action:

10.png
10.png (34.13 KiB) Viewed 1861 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 35 times
Post Reply