Scalable Symbols?


(David Montague) #1

I am a new user to Hype and I am wondering are symbols scalable? I am creating an ad that I will place in Adobe Muse but it needs to be scalable. When I try and set a rotating object to scale the rotating object get all skewed. Any suggestions?


(David Guillermo Escalante Trinidad) #2

Depending on how you want to modify the scale, you can use the responsive layouts or the “Scale” propriety inside he Metrics tabs of each symbol you want to modify.


(Lucky) #3

Hold down command while changing the symbol size box and it should do it


(Ken Heins) #4

Groups with lots of elements are a pain to scale. Ungroup, select the items to make a symbol and it becomes a very easy task.


(David Montague) #5

Ok maybe I am using the wrong terminology. I want to know if symbols will scale in a responsive website.


#6

@DaveMan

Short answer to your question: “Yes”.

Your question has been answered in different manners by others, each containing useful information. Here’s my attempt, synthesizing & expanding on the foregoing posts. For simplicity here I will not be going into a Hype document used in an iFrame on another web page, placed in Muse, etc. - just a Hype page on its own. This way if there is a problem with another environment you will know it is not because the Hype animation itself is failing - rather there are other issues involving the placement in another document.

The scaling aspect involves Flexible Layouts where elements can scale based on the settings in the “Flexible Layout” area of the “Metrics” panel.



Note: The “Layout Size” in the “Scene” panel needs to have the corresponding “Width” & “Height” Scale checkboxes checked for flexible scaling to function.





Responsive uses Hype’s “Layouts” which are “scenes in a scene” and are configured discretely.

So we have “Scene 1” which has separate layouts “iPhone” & “Default” which have separate settings for each layout. Elements, including Symbols, are not automatically shrunk~enlarged simply by adding a new, different sized layout. You manually make these sorts of adjustments to the elements.




Attached is an example of Responsive & Flexible working together - one Scene with two layouts. The Symbol scales in both layouts, but only because I set the Symbol to respond that way.

Hype Project: Responsive-Flex.hype.zip (27.8 KB) - Demo here.


(David Montague) #7

Thank you very much for this!!!