Bootstrap and oam


(Ian bennett) #1

Some advice would be gratefully received here. I am producing animations that I want to insert into a bootstrap page set-up so that they appear in the correct proportions an scale to fit the Bootstrap column.
Firstly, is this possible?
Secondly, can a one-size animation fulfil this role or do I have to produce variously sized animations?
Some exploratory tests have not been successful so far.
Any general guides to point me in the right direction would be welcome!

Ian


#2

Hi Ian,

It would be useful to know a bit about your ideal situation: Do you require a responsive height for your document or can you get by with just a responsive width?

Here’s how Hype handles resizable OAMs: When you set scaling to true on any dimension, scaling and resizable will be added to the OAM manifest:

<property name="resizable" defaultValue="false" hidden="true"/>
<property name="scaling" defaultValue="none" hidden="true"/>

(You can see where that is placed in an example file here: https://gist.github.com/themorgantown/11a21c490dd2a098ff7cc7c57a9e60dc#file-iconicstructures_oam-xml-L39)

So this file has a ‘default’ size on line 9, but it can be resized to fit within a Bootstrap column. Here’s an example responsive OAM (unzip first):

temp-muse.oam.zip (264.7 KB)


(Ian bennett) #3

Brilliant, thank you Daniel. The ideal situation would be for me to produce the one animation and have that resize according to different screen size break points rather than having to construct differently sized artwork to suit a range of device sizes. I have been going at this the wrong way round so advice from yourself and Bootstrap has enabled me to “see the light” and change my approach. So thank you once again for the help and for the great product.


(Ian bennett) #4

Sorry to bother you again Daniel. How do I set those properties in Hype?


#5

Responsive Layouts and Flexible Layout is what we call that in Hype. When you use responsive layouts, the available width will determine which ‘layout’ is used. Flexible layouts lets you define how elements are ‘pinned’ or ‘scaled’ based on the available width. These can be combined to give you a lot of freedom. This video shows you how to combine both techniques. Even though it is geared towards Wordpress, it applies to your situation:


(Ian bennett) #6

Once again, thank you! I was sort of getting there but using the scale height as well as width!
I shall now proceed.