Page 1 of 1

Ideas for Tour Titles

Posted: Mon Dec 23, 2019 10:58 pm
by Hopki
Attached is a project with six skins, each with a slightly different twist on a title text box for a tour.
This project is mainly for inspiration but you are welcome to use any parts for your own projects.

Skin Title One
This skin uses a variable and a timer for animating the opening sequence of the text box.
The Variable:

1.png (19.23 KiB) Viewed 4153 times

The Timers settings:

2.png (13.12 KiB) Viewed 4153 times

The Timer has the actions:

3.png (36.85 KiB) Viewed 4153 times

The next action will stop the timer:

4.png (32.59 KiB) Viewed 4153 times

To stop the Set Value action from stopping the timer on open it uses an action filter:

5.png (15.68 KiB) Viewed 4153 times

So when the variable reaches the number 6 the Set Value action will stop the timer.

The container Title1 Con1 is set to Masking so elements outside of the container will be masked and only visible when inside the area of the container.
It also has CSS formatting that gives the text the skew. Under the CSS Styles you will see:

Code: Select all

transform: skewX(-15deg);
With this in the container, all child elements will also have the same skew.

The Element Title1 Rec Background is positioned outside of the masking container and has a Position Logic block:

6.png (18.03 KiB) Viewed 4153 times

When the variable gets to the count of 1 the element Title1 Rec Background will slide down into view.
The text box Title1 Text1 is also positioned outside of the masking container to the right, it also has a position logic block:

7.png (18.87 KiB) Viewed 4153 times

This will slide in the text box from the left when the variable count is 2.
The rectangles, Title1 Rec1 to Title1 Rec4 all have position logic blocks to slide them down into view when they each get the right variable number, 3, 4, 5 and 6. As already mentioned when the variable number gets to 6, the Set Value action will stop the timer by setting the time out to 0 seconds.

The Text box formatting can be found under the CSS Styles Inner Element:

Code: Select all

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
This is what gives the black border around the text:

8.png (6.21 KiB) Viewed 4153 times

Skin Title Two:
This skin is basically the same but now the element Title2 Rec Background has a radius of 5.
The Text box has the CSS Styles Inner Element of:

Code: Select all

text-shadow: -1.5px -1.5px #888888;
This creates a deboss text effect:

9.png (6.24 KiB) Viewed 4153 times

Skin Title Three:
This skin is again similar but the animation rectangles now expand from the centre and also animate with every node change. This is done by setting the rectangles Scaling Y: 0% and then the logic block sets them back to 1.00. The actions to repeat the animation on node change are:

10.png (39.96 KiB) Viewed 4153 times

The above action sets the variable to 1, so it skips the text slide in animation as this would probably be too much for each node change. So the text remains in view and only animates the end rectangles.
The below action sets the timer from 0 to 0.125 so starting the timer.

11.png (34.74 KiB) Viewed 4153 times

Skin Title Four:
This skin uses a "paper texture", paper.gif which is found in the project folder.
This is added to the project by using the "Assets" as found in the HTML5 output and at the bottom of the Advanced tab.
When you build the project it adds the paper.gif to the assets folder.

In the element Title4 Rec Background, it has the CSS Styles:

Code: Select all

background-image: url(img_flwr.gif), url(assets/paper.gif);
background-position: right bottom, left top;
The same CSS is in all the rectangles.
You can make your own textures or Google them.

Skin Title Five:
This skin uses CSS Styles that gives the rectangles the red and yellow background linear gradient:

Code: Select all

background-image: linear-gradient(red, yellow);

Skin Title Six:
This skin uses two textboxes but the skew is set 15 for the top test box and -15 for the bottom one making an arrow effect.

To further enhance this project check out the using Google Fonts video:

Of course, you can use the same CSS in Tooltips for Hotspots.