I need strategic suggestions here.
The vertical versions of this simple animation work well. The final position of some objects is crucial, so I grouped them, and positioned and assigned Flexible Layout attributes to the group.
It’s time for me to make a horizontal version of it. (I haven’t yet explored @media queries in the documentation.)
Within this new layout, I change the animation within the group I call “bubble”, so that the speech bubble arrow turns to the right side rather than flips to the bottom, and animate the whole group to arrive to the left of the center line, so the dog can appear on the right, thus filling the landscape screen better.
But it upsets the other layouts! They all ended with the bubble above the dog. (woofhomepage-good.hype.zip (1.3 MB) is before my problem; woofhomepage-bad.hype.zip (1.3 MB) is after.)
Apparently the group is a group throughout all the layouts. Change one, you change them all.
What’s the best approach to take here? Am I to make a second group for the layout, and display:hidden the other group? Or are symbols better? Maybe my approach to group objects for crucial positioning is wrong-headed?
Is it possible to swap your layouts by breakpoints - vertical (narrow) and horizontal (wide)?
Your “bad” demo did not have the bubble above the dog - it was always on the dog’s left - whatever the layout. (Tested in “Preview” mode: Opera, Safari, FireFox, Chrome.)
That’s right … and that’s the problem. I only intended to change it in just the horizontal phone layout. It changed in them all. How do you recommend I keep that from happening?
Hi Rick!
Here is one possible solution: woofhomepage-good_JHSv1.hype.zip (1.3 MB). It appears to do the job in my limited testing.
General concept: Create a new symbol for a particular layout.
For the iPad Landscape layout I created a new symbol called “bubble landscape” and then copied all the elements properties, timelines, etc. from the “bubble” symbol and pasted into this new “bubble landscape” symbol. I then recreated the rotation of the bubble speech origin “pointer” (“logoblacktri” & “logowhitetri”) for the iPad Landscape layout (not perfect but it will serve our demo purposes here).
At this point You can eliminate the original “bubble” symbol from the iPad Landscape layout. I have kept it in place but made it “hidden” via the Hype timeline element list’s “eye” icon (turned it off).
Thank you! I didn’t need you to do it for me, but I appreciate it.
Clearly what I needed was some pre-planning. I’ll be better able to do it next time.
You are Welcome. I had to create the Demo anyway because your request was new to me. I wanted to make sure what I thought would work - actually worked ;->