Making more interesting Intros

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

Making more interesting Intros

Post by Hopki » Sun Dec 30, 2018 11:23 pm

Hi,
If you want to have some more interesting intros to your tours here is a couple of ideas.

Firstly video.
The problems normally associated with video is this has a fixed size so when you open using different sized devices and in landscape or portrait you may see borders top and bottom or at the sides.

To overcome this you can use CSS in the video elements CSS Styles Inner Element:

Code: Select all

object-fit: cover; overflow: hidden;
What this will do is fit the video to the widest edge be it top, bottom or the sides.
This does mean part of the video will be clipped, example a square video in a letter box frame will fit side to side but clip the top and bottom.

As long as the focal point of the video is in the middle than it won’t matter.

The downside to using video is not all browsers allow auto play so some interaction is required by the viewer before it will start.
Selecting Mute in the video element does mean it will auto start in Safari but Chrome will still not auto start.
So with this in mind there still needs to be a button to start the video playing to keep consistency across all browsers and platforms deselect Auto Start, then the button will have the action to start the video.

The actions in the start button are:
Mouse Click, Visibility, Hide Element, _self
Mouse Click, Media, Play Media, 1, Video1
Mouse Click, Visibility, Show Element, Skip Intro

There is also a Skip Intro button that has the actions:
Mouse Click, Media, Stop Media, Video1
Mouse Click, Alpha, Change Element Alpha, 0.00, 0.500s, Video1

The Video element has the actions:
Media Ended, Alpha, Change Element Alpha, 0.00, 0.500s, _self
Media Ended, Visibility, Hide Element, Skip Intro
Deactivated, Visibility, Hide Element, Skip Intro

Note: there is a big difference between Media Ended and the Deactivate source action.

Example, if you stop the video before the end, this will use the Deactivate source.


intro_video.zip
(3.14 MiB) Downloaded 61 times


The Second project uses a numbered variable and a timer.

Each element uses a logic block using the variable and as the timer counts up each number triggers a difference element to do something.

 In this case the pano opens with a screen tint showing, then the title text changes and an image fades in. Then the image of the spaceship then fly’s off the screen, again the title text changes and then changes colours.


The main thing here is to stop the timer when the sequence is finished.
To do this there is the action in the timer:

Activate, Set Value, 0, _self

There is also an Action Filter to stop this action until the variable number is 4.

intro.zip
(1.92 MiB) Downloaded 56 times

I hope this offers some inspiration for 2019 :-)
Happy new year,
Hopki

User avatar
Tony
Posts: 649
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Making more interesting Intros

Post by Tony » Mon Dec 31, 2018 10:08 pm

Hi Hopki,

Happy New Year and thanks for some more great inspirational projects :D

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

Lou
Posts: 31
Joined: Wed Oct 04, 2017 4:54 pm

Re: Making more interesting Intros

Post by Lou » Wed Jan 02, 2019 10:05 pm

Hi Hopki,

Happy New Year :)

I'm trying to create an intro 'splash screen'...

I have the intro image set to 'visible', so when the tour opens up, the intro image popups up. I have a 'close button' to hide the intro image and begin viewing the panorama.

This works great until I start viewing different browser screens - where I've set the logic blocks to make it responsive, I'm finding that even after I 'close' the intro box and move to a different screen size & back, it remains in the window (I'm guessing becasue I have visible ticked??)

Is there a way to make a responsive 'splash screen', so the image will always appear once (in which ever browser size is opened) but then remain hidden, once an action is set to close it?

Many thanks

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

Re: Making more interesting Intros

Post by Hopki » Wed Jan 02, 2019 10:59 pm

Hi,
Can you show your logic block, screen shot should do.
Regards,
Hopki

Lou
Posts: 31
Joined: Wed Oct 04, 2017 4:54 pm

Re: Making more interesting Intros

Post by Lou » Wed Jan 02, 2019 11:34 pm

Sure, no probs:
Attachments
Screenshot 2019-01-02 at 22.31.55.png
Screenshot 2019-01-02 at 22.31.55.png (249.62 KiB) Viewed 325 times

User avatar
soulbrother
Posts: 328
Joined: Tue Apr 08, 2008 7:01 pm
Location: München
Contact:

Re: Making more interesting Intros

Post by soulbrother » Fri Jan 04, 2019 4:47 pm

Hopki wrote:
Sun Dec 30, 2018 11:23 pm
The Second project uses a numbered variable and a timer.
intro.zip
Many thanks for your ideas, very helpful!

But one thing:
I setup the timer to 10 seconds instead of 5s and the animation- and countup-time in the browser does not change.
I tried to relaod and to delete the chache of the browser, what do I miss?

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

Re: Making more interesting Intros

Post by Hopki » Sat Jan 05, 2019 1:26 pm

Hi,
The Variable Counter was just a helper and I only set it up to count to 5.
If you look in the text box, text logic block you need to add 5 more expressions.
So:
*test_fx, = 6 Text: 6
*test_fx, = 7 Text: 7
*test_fx, = 8 Text: 8
*test_fx, = 9 Text: 9
*test_fx, = 10 Text: 10
Regards,
Hopki

Post Reply

Who is online

Users browsing this forum: No registered users and 5 guests