Links on web pages do not only have to link to other webpages, they can link to show hidden layers within the same page, for example to show a layer which contains a video, photo, iframe or any other content.
Please download the accompanying Example.web file that demonstrates the end result of this guide.
In this example we'll give instructions to create 4 layers, with videos on each and show how to switch between them:
1. Open Page & Layer Gallery, select the Layers button, then New. Call this layer Video 1 (lock) (fade-in 5) (fade-out 5)
2. In the Video 1 layer import a video onto the page and position it as required.
3. Follow steps 1 - 3 to create the next 3 layers, calling them Video 2 (lock) (fade-in 5) (fade-out 5) , Video 3 (lock) (fade-in 5) (fade-out 5) and Video 4 (lock) (fade-in 5) (fade-out 5)
4. Hide all 4 Video layers and make the MouseOff layer visible.
5. Insert 4 text lines Video 1, Video 2, Video 3 and Video 4
6. Select Video 1 text line and press Ctrl + Shift + W to open Web Properties
7. In the Link to Web or Email Address field type the following:-
popup: open "Video 1 (lock) (fade-in5) (fade-out5)" close "Video 2 (lock) (fade-in5) (fade-out5)" , "Video 3 (lock) (fade-in5) (fade-out5)" , "Video 4 (lock) (fade-in5) (fade-out5)"
8. Do the same for the text lines Video 2, Video 3 and Video 4 changing the popup layer names appropriately to open and close the correct layers.
9. You may also want to close the popup that you have open without opening another popup. To do this make the Video 1 layer visible and editable and create a text line called Close. (in the example provided we have created a close icon which performs this function)
10. Select it and press Ctrl + Shift + W and enter the following into the Link to Web or Email Address field:-
popup: close
11. Select OK, then copy the text object and paste it on the other 3 pop up layers.
If you want your imported video to autoplay when the pop-up layer is opened:
1. Select the video and press Ctrl + Shift + W and go to the Placeholder tab.
2. Scroll through the HTML text and you will find 2 entries for autoplay=
3. Change both entries to read autoplay=true
4. Click OK
The layer properties:
These add properties and attributes to the layer which can alter its behaviour
(lock) makes the rest of the page (apart from the other hyperlinks) unclickable when the layer is open.
This property is more essential in some scenarios rather than others depending on how the popup layer is invoked. In the example we've provided we require (lock) to be applied so that by clicking outside of the pop-up layer does not cause the pop-up layer to close. In other scenarios you may not need to close other layers, so the pop-up layer can be invoked by using the Link to Pop-up layer drop down box to open the layer.
This was replaced by built in options within the program in version 8
(fade-in 5) This attribute is optional, it gives the layer a fading in transition when it's loading. If it is not applied then the video will open immediately without a transition. The number represents the fade in speed and can be changed to suit individual requirements between 1 and 5. (1 is slowest - 5 is fastest)
(fade-out 5) This attribute is optional, it gives the layer a fading out transition when it's closing. If it is not applied then the video will close immediately without a transition. The number represents the fade out speed and can be changed to suit individual requirements between 1 and 5. (1 is slowest - 5 is fastest)
Please note that (fade-in ) and (fade-out ) do not have to be used together. A layer can fade in with transition and close immediately without one and vice-versa.
This was replaced by built in options within the program in version 7.
Robert Turner
Comments