Afix a button exactly on a specific area despite window resize


(Mikael) #1

I want to afix a button (with link) exactly over a specific area on an image which is resizing when user change the browser dokument view. Hence the button must do accordingly yet keeping the same offset and proportions but adjust size to background.

I’ve tried several approaches (grouping, pinning scale behavior etc.) but the button seems arranging it self quite odd regardless what I try.

http://raaskot.dk/raalab/hype/offset_fix/index.html

The ressource files is here if needed:
http://raaskot.dk/raalab/hype/offset_fix/ansoegning_landing_page_03.zip

Can any help with at solution?

Kind regards and thanksfulness in advance,
raaskot


Enhanced tools for positioning and sizing objects
(Steve Flowers) #2

This arrangement worked most closely for me. It doesn’t scale the button properly but it positions it well enough. Four pins on the outside but no stretch.


(Greg) #3

The only way I see to do this is to uncheck the “Scale 100%” check boxes in the Scene inspector, and change the scene’s background color to match the reddish color.
ansoegning_landing_page_04.hype.zip (48.8 KB)


(Mikael) #4

Thanks, Greg:)
Though unfortunately I cannot open your file right now since I’m still stuck with Hype 2.5 due to current Mac OS 10.6. I know it sounds a bit strange, but I have a plethora of programmmes (and myself in the midst of large project to finish first) needing upgrade before any OS-stepup is undertaken. :frowning:

Yet: if I – understanding you correct – uncheck the 100% option – and do as you suggest – the page (and the button) won’t scale, right?

What I would love very much was that one could maintain both the scaled proportions of placed objects and their spaces in between, when, in this case, the window width (in browser) is reduced by the device or user.

On some occasions I’ve seen these objects react OK responsively but when the document window is reduced to a specific point the placed object won’t follow the relative positions but instead is reduced to nothing.

Also thanks to you Steve:
I this very layout displayed I can indeed use your advice, since the “button”-object scale to a point, which cover the underlaying image acceptably. Still I would face problems if I had made several urls, but it will do fine in this case.

Many thanks to both of you for your kind feedback.

Kind regards,
Mikael


(Greg) #5

Yes, that is correct – you would lose the scaling option.


(Mikael) #6

I understand. Though I can see that a non-scaling page – as you suggest – will behave fine according to my wishes when displayed on iPad- or Droid-devices. With respect to that, and from a design perspective, it’s a matter finding an overall document size, that will fit laptop screens of the most. The mobile devices will scale according own native screen formats. Thanks, again. -Mikael


(Trey Yancy) #7

Something like this?

Note that you can drag the edges of a group box around, make them narrow or offset them to change the relative degree of shift. By doing this in a nested arrangement, dragging an edge off the stage, etc., you can even make elements go in the opposite direction of the resized window. This is great for parallax.


(Mikael) #8

Thanks alot for your notice. It’s a good point concerning the paralax options, but in this case I’m going for a procedure to control the proportions of the objects PLUS their individual distances to each other. You’ll see at the examples here, that some of the elements wlll distort considerably when the window frame is cropped. In other (drawing) applications you might group objects and apply a size affecting both objects and their spaces in between, if you understand :slight_smile: .
I have to figure out how to deal with this when making button layouts to respond meaningfully ie. to an underlying illustration.


(Trey Yancy) #9

If the thing goes wonky when the browser window is too narrow, perhaps you could create a break point and adjust things.

For a nice execution of what you are talking about, Softpress Freeway has a great solution. When Freeway 6 came out they introduced more options such as “flexible” versus “stretchy” (?) which made things a bit confusing, but I like having the ability to specify a set percentage plus minimum / maximum.


(Mikael) #10

I will test Hype Pro to split the layouts into break points as you suggest. But I never heard about Freeway until you brought it to my notion: very interesting app. I’ll try it out.

Yet I understand – however – that Freeway is merely for creating (somehow) static wysiwy-html and not animated content. I guess I was looking for an flash-like-html5-approach in Hype – to be controlled progressively – but see that combining html/css-layout might be the way to go.

Kind regards and thanks from Mikael


(Trey Yancy) #11

Freeway is to page design as Hype is to HMTL5 animation. It is WYSIWYG like Hype but (also like Hype) you can insert custom code wherever (plus in the body, etc.) .

I’ve make the long, long trek from PageMill to GoLive, to Dreamweaver, and finally to Freeway. Hype is a perfect companion for Freeway and vice-versa. The one thing it doesn’t do is edit existing HTML documents. It takes your layout, Actions (plug-ins), and whatnot and builds the pages. It also auto updates links and such (I like the automatic listing of target pages and anchors, which makes it very fast to link everything together.


(Jon) #12

Are a lot of using Hype alone to build websites? I’ve always used in embedded in other websites. It does seem like it may be good to use by itself for a full site. Trying to foresee any issues thought before I start down that path


(Trey Yancy) #13

The issue with creating a website totally in Hype is one of loading times. There are a few things you can do, such as use a symbol for a menu bar that spans multiple scenes (pages) but you will have to create an additional timeline to control menus (as in graying out the menu item for the page you are on. You can delay loading of content for scenes following scene one, but this will cause a delay while subsequent pages load.

Hopefully, somewhere down the line Hype will provide tools for direct control of object loading such as keyframe actions or timers. With a tool like Flash (and Director) you can create a script that will handle such things, such as waiting for a certain event or setting a timer.

Here’s a site created using an inline layout in Freeway with Hype objects alternating with text objects. It takes a while to load. This is an experiment. the separate modules make it possible for me to swap out items that are customized for a specific dealer. Here’s a virtually identical site with the menu bar and contact sections swapped out. The other modules can be swapped out as needed (product changes, etc.).

The obvious issue is load time. Ideally, the hierarchal order in Freeway would force the modules to load in order from top to bottom so that the content at the top would appear in only a second or so with the other module content loading when out of view, but this does not work.

Once the issue of loading control makes it to the top of the Hype development list, things will really begin to take off for Hype in the area of web page development.