Object dimensions in % instead of px

(Leon Huisman) #1


I’ve seen this request before but I can’t seem to find a practical answer.
Would it be possible to scale objects in percentages, relative from their document size in pixels?
Both Google Webdesigner and Adobe Edge support this feature tho I prefer the workflow of Hype and would like to switch since Edge is no longer supported. For the user it should be as easy as a toggle option between pixels / percentages per object.

I work in a relatively large media company dependent on the percentages workflow. If this feature would become available, we will definitely buy a large chunk of licences. For now; the pro’s of Hype don’t outweigh the current workflow we are working with.



(Mark Hunte) #2

I originally thought you meant

http://tumult.com/hype/documentation/3.0/#metrics-inspector Scale

But reading again I see you mean an element scaled by percentage of it’s container rather than scaled from it’s own original size

(Leon Huisman) #3

Exactly! Thanks for your reply :slight_smile:

(Jonathan Deutsch) #4

To better understand the request, is the workflow issue more on the creation side, or the display side?

I can understand that it might be easier to specify “50%” in an inspector box to create elements that are half width than doing the math manually or adjusting if you change the scene size.

From a display side, the flexible layout options effectively allow percentage positioning and scaling. If the pins are disabled, the position will be based on its percentage relative to the container. Width/height also are percentage based (unless all pins are enabled which is margin mode or special scaling behavior modes are set).

Let me know if there’s some other case I’m not considering that is integral to your workflow.

(Leon Huisman) #5

Hi Jonathan,

Thanks for your reply! It is purely related to the creation side of projects.
We build lots of html5 banners in our company, and we use the following workflow for the fastest results:

  1. Design a banner in Photoshop on an individual artboard per banner size.
  2. Export the individual assets of a banner to for example .png images with the Generate function. The images are always the dimensions of the banner size. In some cases this for example results in a button with a transparent box around it the size of the banner.
  3. Bring all assets together in Adobe Edge / Google Webdesigner and set the right banner size in the scene settings (f.e. 336x280px)
  4. Set the dimensions of all image assets to 100% by 100% (the images are exactly the size of the banner). layer them in the correct order of appearance.
  5. Animate all the image assets and complete the first banner.
  6. Clone the project file, replace the image assets with all assets from for example the 160x600px banner exported from Photoshop.
  7. Now the only thing you have to do in Edge / Google Webdesigner is change the Scene / Canvas size to 160x600px. Since all the images are 100% x 100% they will automatically scale accordingly, containing the exact same animation as the original banner had.

This is by far the fastest way we know to produce banners (hell we tried a lot of methods) and as said before, we would love to integrate Hype into this workflow!

Kind regards,


Reverse transition
Option to replace all assets on dragging and dropping
(Jonathan Deutsch) #6

Thanks for the detailed notes on your workflow! I can definitely see how time saving this could be. I’ll brainstorm more on this; already I’ve at least been wanting to apply flexible layout options when changing scene sizes or adding responsive layouts.

(Leon Huisman) #7

Hi Jonathan,

That definitely sounds promising, our team is really curious to see what you guys can come up with : )




I mostly just link the Width and Height value and change the first number to the correct banner size and do that to all newly imported assets. But yeah that can get a little crazy when working with an campaign over 120 Banners.

So yeah adding the feature to switch between px/%/em would be welcome. I would like to add my yes. :slight_smile:

(Leon Huisman) #9

Hello Jonathan,

Did you have a brainstorm yet on the feature request? :slight_smile:
If you could implement this in a beta or something we would be happy to participate and test for you guys!

Kind regards,