Making more interesting Intros
Posted: 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:
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.
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.
I hope this offers some inspiration for 2019
Happy new year,
Hopki
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;
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.
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.
I hope this offers some inspiration for 2019
Happy new year,
Hopki