Mac SEO Blog

The new EverWeb 4.5 release, for macOS and Windows, brings a whole host of new features such as Object Pinning, the Carousel Widget, Overlay Effects and Background Masks. In addition to these new EverWeb features we also introduced On Click Actions. This new feature gives you the ability to control what happens when a visitor to your site clicks on an object. Use On Click Actions when you want to add one, or more, step by step actions that are activated on the click of a mouse. On Click Actions help you control where you want your visitor to go in your site, or activate Call To Actions.

The following is an example of an On Click Action that is used to facilitate a video playback button for a video fill on the page,. During this process we will explain how the On Click Action is used.

1. Start by adding a Video Fill to the page. This will contain the video that our video playback button will play when it is pressed. To add a Video Fill click on the Shapes button in the Toolbar, then click on the first shape in the list – the rectangle shape. We sometimes also refer to this button as ‘referred to as the ‘default shape’.
2. Next, click on the Shape Options button in the Inspector Window on the right hand side of the screen. In the Fill section, change the Fill Type for the rectangle shape from ‘Color Fill’ to ‘Video Fill’.
3. You now have some choices about where the video you want to use is located. From the dropdown menu, choose the option that fits where your video is located which will be either External Video URL, Local Video File (if your video is stored in the project’s Assets List), YouTube Video, or Vimeo Video.
4. After the Video Fill has been added to the page, name the Video Fill. This will make it easy to locate when the On Click Action is created later on. To change the name of the Video Fill, double-click on the ‘Video Fill’ name label that is displayed at the top of the Video Fill. In this example I have renamed the Video Fill as ‘My Video’.
5. The next step is to add a Video Playback button to the page. In this example, I am going to use a Triangle shape. Click on the Shapes button in the Toolbar again. This time choose the Triangle shape. 
6. Position the triangle where you want it on the page. To rotate the triangle so that it looks like a play button, go to the Metrics Inspector. In the Rotation section, set the angle to 270 degrees. This will result in rotating the triangle so that it looks like a Play button. You can style the triangle if you want, by adding a shadow to it.
7. If you prefer, you can use a Background Mask as the Playback button instead of a triangle. In this case, add a default shape or rectangle shape to the page, then check the box to activate Background Mask in the Shape Options tab. Click on the SVG button then select, for example, an arrow shape. Once added, the SVG file will retain its sharpness at any resolution. You can add effects to it as well such as color and Overly Effects if you want.
8. After adding your Playback button, keep it selected, then click on the Hyperlinks Inspector button in the Inspector Window. If the On Click Actions section is not open, click on the triangle to the left of ‘On Click Actions’. The section will open. 
9. Click on ‘Select an Option’ in the ‘Action’ field. Choose the ‘Play’ option. 
10. The Element field will now become active, and this is where we add the Video Fill to be played. Click in the Element field and select ‘My Video’. 
11. The ‘Add’ button is now activated, so click on it to add the new On Click Action to the On Click Action list. A dashed line will appear, connecting the Play button to the ‘My Video’ Video Fill.
12. We have now finished our Video Playback button.
13. Click on the Preview button in the Toolbar to preview and test out the On Click Action. Click on the Play button that you created and you should see the video play. 

What Next? Exploring On-Click Actions

In our example, the next step would probably be to create other buttons in the same way, such as pause, stop and toggle playback, and mute and un-mute. You can even daisy-chain actions together to make a sequence of events. You may find when running a series of On Click Actions one after the other that in that the Delay feature comes in handy. And don’t forget that On-Click Actions are great to trigger Popup Windows for example, as well as hiding objects once their actions have been completed.

We have only explored one example of the uses of On-Click Actions. The rest is down to your imagination!