Automatically create a 1px border in all exported scenes

Feature Requests
1

I’ve been searching for this feature and it doesn’t seem to exist or have been requested, so I’m creating it. I understand it may be not super interesting but it always helps to avoid this little repetitive tasks that perhaps are easy to automate.

My main task is to create banner ads and almost every network always requires 1 px border in every banner. So I create the border by hand. I wish there was an option to export the materials with a border automatically. Or maybe, a new kind of object “Border” that is a rectangle with no fill and customizable color and width that expands to the scene edges automatically.

2

This can be accomplished with CSS in the HTML Header.

<style>
#index_hype_container {
border: 10px black solid;
box-sizing: border-box;
}
</style>

You could also use JavaScript to add the style.

document.getElementById("index_hype_container").style.border = "10px black solid";
document.getElementById("index_hype_container").style.boxSizing = "border-box";
3 Likes
3

You’re so right! That’s so easy! I still have to let it kick in, in my head, that I can use CSS in the HTML header :smiley:

Thank you!

4

Hi there! Don't know why but on export, the border is lost. I can see it fine in the preview in all my three browsers, but after I export the scenes as HTML5, then, the border is no more.

My document head only contains this code right now:

<head>
<meta name="viewport" content="user-scalable=yes, width=120" />
<!-- Custom Fonts -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300&subset=latin' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700&subset=latin' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:600&subset=latin' rel='stylesheet' type='text/css'>

<style>

/*Border 1px*/
#index_hype_container {
border: 1px black solid;
box-sizing: border-box;
}

/*Superscript*/
.HYPE_scene sup {
line-height:0;vertical-align:text-top;
}
</style>
</head>
5

I actually had a play with creating a export script that put the border there for you. You could set it up in the UI of Hype.

It was a bit rough and ready and I did not post it because you had this solution in the end.

I remember I got the same issue. If I remember correctly it was because of the border cs was pointing to the wrong thing… ( cannot remember the details)

I will post my export script when I get back…

( p.s did you see the example I posted about your timeline issue)

6

Hi there! Saw it but couldn’t find the time to study the document. Much much appreciated, big thanks :slight_smile:

1 Like
7

That’s the problem with adding custom styles to the HTML header. If the export doesn’t use the HTML file, if you embed the Hype project directly on a different HTML page, then the styles aren’t loaded / used.

This is one of the reasons I tend to use “iFrame” as the way to add a project to a page.

But if don’t want to use iFrame, or you can’t use iFrame, then just use inline styles to add a border to the element containing the Hype project... or use custom JavaScript (that’s the second option in the solution) to add a border... or just add four line shaped elements (as persistent symbols) to your project that look like a border. (If you simply add a box, it might block clicks, so the four separate elements prevents that problem.)

There are lots of ways to solve this problem.

8

The problem is that, if I use the DCM export to make banners, how can I use a second export script? Or can I?

9

I cannot look at it at the mo. But PM me the DCM version of you use and I will see if I can transplant my code to it.

10

Thank you. Definitely adding four elements per scene is not my solution since that means a crazy amount of work for something so simple as adding a black border. I just set a border to the tap-area rectangle, I hope the agency will accept this. Otherwise I'll create a rectangle under it since the whole ad has to be clickable, not just the button. Hopefully I'll sort it out for the time being :stuck_out_tongue:

11

So here is the DCM version I wrote for inserting a border.

python is not a language I am massively up on, so hence me saying this is rough and ready.
Maybe @Daniel can have a quick look and give me some pointers on anything in it that could be changed.

Any way. The arguments are normal border arguments.

Updated to version2 (05 Jan /2018) - fix for css id issues and a couple of other bugs.

Updated to version 2.0.1 (17 Jan /2018) added css box-sizing to account for any padding being added for Layouts

DCM.hype-export border_201.zip (4.7 KB)

3 Likes
12

Did this work for you.?

2 Likes
13

Hi there! It worked wonders! Thank you :smiley:

I did install the script from the export options in the Hype Preferences, and now I can see the border. This solved my problem definitely. Big thank you!

2 Likes
14

Looking good to me :slight_smile:

But I'm also no Python expert -- Jonathan is the mind behind the export scripts.

1 Like
15

Thanks,
If there is a demand for this and @jonathan is good with the py whats the situ about these scripts being place on the export scripts page as a resource?

16

This would be a timesaver for anyone creating ads for networks that require always a border! If it can be shared amongst the other resources, I’m sure many would appreciate it. And thanks again!

1 Like
17

Hello again!

I was trying to use the script with some ads and I cannot export all of them with Advanced export options. If I export the first scene directly, from File > Export as HTML5 it works. But if I choose File > Advanced export to select more than one individual scene, the resulting files will miss the border. Can I export all of the scenes with a border automatically?

By the time being as I have to set up a tap area rectangle for each ad, I'm using a border in that element :slight_smile:

18

I do remember testing on slices and it working the way I tested.

Can you maybe pist a small example project and a screen grab of the advance settings you are trying…

19

It is the same project I was working on today earlier :slight_smile:
This is how the export options look (in Spanish but you can get the idea, I hope):

Captura de pantalla 2018-01-04 a las 17.45.08.png1922×1484 704 KB

This is my project:
LATAM SemanaSanta sin CTA_v2.hype.zip (260,0 KB)

20

Ok so a quick fix until I find where the clash is…

It seems if your scene name begin with a number there is a a bug somewhere in the exported js. that does not like it??!
This is also the case if we do a normal export and name the zip starting with a number…

So the quick fix is to rename the scenes.

i.e

L300x250