Developer - Object Link

HelpXplain is the exciting new animated infographics and screencast tool that integrates with Help+Manual.

Moderators: Alexander Halser, Tim Green

Post Reply
Terry McMorrow
Posts: 14
Joined: Tue Jul 23, 2019 2:22 am

Developer - Object Link

Unread post by Terry McMorrow »

HelpXplain is an unbelievable program! The power it brings and the potential for much more is really exciting! I think there should be a separate forum for Developer (similar to program in H&M) because as we all learn tricks to manipulate our Help or tutorials that cut down on slides needed this program is going to take off.

I will share a new trick I learned using object link. My issue was creating tutorials that my employees can see on their mobile devices. I wanted to show a graph but not have to use 2 pages each time - 1 to explain graph and another to show graph. Using the help and a couple of sample projects I was able to create the solution needed. Show graph on page smaller but when pressed on it would move and double in size, press again and it would go back to position. I could actually have multiple graphs on one page with this technique

Here is the objectLinks to make that happen

Step 1
xplain.animateTo(this, 1, {scale: (this.expanded)?1:2}, 0);
This will grow your object - the scale here is 2x -
(this.expanded)?1:2 -- If object is expanded then Scale is 1, if object not expanded then Scale is 2
** Note ** Scaling is not expanding - keep that in mind for step 2
Step 2
this.expanded=!this.expanded;
Here we put object in expanded mode or remove from expanded mode

These 2 steps will work to expand the object - Step 3 is to move object

Step 3
xplain.set(this,{x:(this.expanded)?0:-175,y:(this.expanded)?0:75});
{x:(this.expanded)?0:-175 //If box is expanded X=0 otherwise x=-175 (move left)
**Note** Anytime we change x or y it is always an offset from the original point! So when I set X to 0 it brings it back to original X position.

Here it is all together and you can put this on any object and it will work!

xplain.animateTo(this, 1, {scale: (this.expanded)?1:1.75}, 0);xplain.set(this,{x:(this.expanded)?0:-175,y:(this.expanded)?0:75});this.expanded=!this.expanded

Hopefully this will inspire you to work with object links

Please share anything you learn so we can all make great presentations!
User avatar
Martin Wynne
Posts: 2656
Joined: Mon May 12, 2003 3:21 pm
Location: West of the Severn, UK

Re: Developer - Object Link

Unread post by Martin Wynne »

Terry McMorrow wrote:HelpXplain is an unbelievable program! The power it brings and the potential for much more is really exciting! ... ... Please share anything you learn so we can all make great presentations!
Hi Terry,

I agree, HX is amazing. There are lots of tricks to explore. I haven't done anything yet with custom scripts, but I have been playing with the HTML editor.

For example, it's possible to embed one Xplain inside another. So for example a callout could have several pages -- a basic explanation and then slide pages of more detailed information which a user could access if desired. It's best if the embedded Xplain uses a different skin from the main Xplain, different player controls, colours, etc., to avoid confusing the user. Here is the basic HTML needed:

Code: Select all

***<div style="position:absolute; left:0px; top:0px; width:100%; height:0px; padding:0px 0px 62.5% 0px; overflow:hidden;"><iframe src="my_embedded_xplain.html" style="position:absolute; left:0px; top:0px; width:100%; height:100%; border:none;"></iframe></div>
A few points I've discovered:

a. The *** can be any text, it gets hidden by the outer div. But there must be some rendered text, otherwise it won't work. I think that is related to the HTML clientWidth and clientHeight functions, which require some CSS styled content to return a meaningful value.

b. The dimensions must have "px" units added even when 0. I suspect HX is parsing them and expects units in the string.

c. Adjust the 62.5% to suit, according to the aspect ratio of your embedded Xplain -- allowing for the player controls if not overlaid (be aware that the player controls height in the customizing is in pt values, but you need px values to calculate the aspect ratio. 24pt = 32px).

d. If there are any movement animations in the child Xplain (except spotlights), then you can't have any animations on the parent object. The child movements get corrupted. However, I would think that the child Xplain is probably better without animations, just a series of static slides and maybe moving spotlights. Perhaps some scripted toggles, etc.

You can put anything else in the iframe, such as YouTube videos, etc. (they won't work locally, it needs to be uploaded to the server).

Some of the above may change as Alexander upgrades each HX version.

cheers,

Martin.
Terry McMorrow
Posts: 14
Joined: Tue Jul 23, 2019 2:22 am

Re: Developer - Object Link

Unread post by Terry McMorrow »

Hi Martin
Embedding of one xPlain inside another is intriguing! Do you embed this after the HTML is created?
If this is true can you send an example HTML file


Do you embed from the Edit HTML source code option from the PopUp menu on right click of an object?
The edit HTML source code starts like this
<p style="text-align:center">Enter Text</p>
How would you embed with this?

Thanks For Sharing
Terry
User avatar
Martin Wynne
Posts: 2656
Joined: Mon May 12, 2003 3:21 pm
Location: West of the Severn, UK

Re: Developer - Object Link

Unread post by Martin Wynne »

Terry McMorrow wrote:Do you embed from the Edit HTML source code option from the PopUp menu on right click of an object?
The edit HTML source code starts like this
<p style="text-align:center">Enter Text</p>
How would you embed with this?
Hi Terry,

Yes. Delete that and replace it with the code I posted. You need another Xplain to test with, of course. That child Xplain needs to have been previously compiled, and the files need to be accessible from the compiled parent Xplain (i.e. in the same folder). It probably won't work in the Preview in HX, try publishing the parent to see the result.

p.s. I have tested only with a rectangle object and a callout object as the parent. Other objects may not work as parents for a child Xplain.

I will see if I can put something on the server as a demo.

cheers,

Martin.
Terry McMorrow
Posts: 14
Joined: Tue Jul 23, 2019 2:22 am

Re: Developer - Object Link

Unread post by Terry McMorrow »

Hi Martin

Wow - how did you ever figure that one out? I did get it to work, You do need to compile to see it show up.
How would you use this technique to solve an issue? I see you mentioned you could put a you tube video in there any other thoughts on how to use this.

Terry
User avatar
Martin Wynne
Posts: 2656
Joined: Mon May 12, 2003 3:21 pm
Location: West of the Severn, UK

Re: Developer - Object Link

Unread post by Martin Wynne »

Terry McMorrow wrote:I did get it to work, You do need to compile to see it show up.
How would you use this technique to solve an issue?
Hi Terry,

Glad you got it to work.

What you use it for is down to your imagination. :) In effect it's the Xplain equivalent of having a toggle in an H&M topic. You could also use the embedded Xplain in a similar way to a snippet in H&M -- the same separately editable content inserted in several places in the parent Xplain, or elsewhere on your web site.

The issue I have constantly in "How To" topics is -- how much information to include in a callout? Too much and the callout takes up half the screenshot and becomes a mini-web page in its own right. Too little and you then need a "for more info click here" link in the callout which takes the user to a different topic or to a different part of the page. From which they might not return. Too many such screenshot links in a topic and the user is dragged every which way and back in trying to follow the logic. That's why toggles are used in a topic page instead.

With a child Xplain embedded in a parent Xplain's callout, the first child slide can be a simple "Click this button to do X". Which might be all an established user needs as a reminder. You can then add "For more about X, click the Play button on the right." You can then provide as many further child slides and info as the subject requires -- while the user is still in the original parent Xplain, and can't get lost. There is an option in HX to enlarge an object while the mouse is over it -- that will obviously be useful if a callout contains a child Xplain, I intend to look further into the scripting on that.

There might be other ways of solving the issue other than an embedded Xplain. For example you could use scripting to show or move in additional objects. Those objects could have nested animated objects within them. Lots of stuff to explore.

Clearly there are going to be different requirements for a stand-alone Xplain, and one inserted in an H&M topic.

cheers,

Martin.
Post Reply