I tried making a simple header with pagination with 3 layouts but I was hoping to convert it to a re-usable symbol that was responsive - is that possible?header.zip (51.5 KB)
Hi Michael!
Hype Demo: header_JHSv1.hype.zip (90.1 KB)
If I have understood You correctly:
• Used the "Desktop" layout as my starting point. For simplicity I adjusted only the "Text-1" field here. The buttons can also be adjusted in a similar fashion to the steps below. Also for simplicity I am ignoring the iPhone layout. There are two scenes with matching layouts using the same Symbol as a trial.
• Grouped the buttons (they seem stay the same size with both Desktop & iPad so only their position as a group will need to be changed.)
• Selected the "Text-1" field & the newly grouped buttons and converted to a standard Symbol.
• Created (2) relative timelines called "iPad" & "Desktop" in the Symbol. In these timelines I adjusted the properties of the elements I wished to change. For now it is just the "Text-1" field ("Origin-Top" & "Font-size").
• Created (2) "Custom Behaviors" called "iPad Portrait" & "Desktop" in the Symbol to exactly match the names of the layouts.
• In the "Scene Inspector" > "On Layout Load" triggers a small JavaScript function ("layoutTrigger_CB") that gets the name of the newly loaded layout (currently either "Desktop" or 'iPad Portrait") and runs the "Custom Behavior" with the same name as the layout. This behavior in turn triggers the appropriate timeline for the layout (which currently adjusts the "Text-1" field).
layoutTrigger_CB function
whatLayout = hypeDocument.currentLayoutName();
hypeDocument.triggerCustomBehaviorNamed(whatLayout);
2 Likes