Tip: Customizable scrollbar (and scrollable picture lists)

You have completed your first interactive designs with QuarkXPress 7, 8 & 9 and now have need for more advanced functionality. Discuss Expressions here, ask questions and learn more about them.
Please note that Flash (SWF) authoring is not supported in QuarkXPress 10 anymore.
Matthias Guenther (Quark)
Quarkian
Quarkian
Posts: 2490
Joined: 04 Jun 2004, 15:06
Contact:

Tip: Customizable scrollbar (and scrollable picture lists)

Post by Matthias Guenther (Quark) » 23 Oct 2007, 02:52

Hi, all,

somebody asked a while ago for a customizable scrollbar with scrollable pictures.

I must have been bored ;-) ... however, a customer asked again for such a functionality and as Interactive Designer doesn't have this built in by default (yet), I played around a bit:

Here is the result of my little test:
If anybody is interested I also uploaded the QXP for use in your own projects.

I created it in such a manner, that it is totally adjustable, it self adjusts to wherever you put the scrollbar, you can make it smaller or larger, you can define how far it should scroll, the same with the scrollable area, make it larger or smaller, define how large the visible area should be etc.

It is two scripts only, which you can ignore, they work in the background. Just remember that the initialize script needs to run when the page is entered.

Like it? Terrible? Cool?
Matthias

P.S.: The only thing I ask in return is that you send me the URL of your project where you used this, no other conditions, no royalty fees.

k_ahrendt
Posts: 0
Joined: 17 Aug 2007, 14:29

Tip: Customizable scrollbar (and scrollable picture lists)

Post by k_ahrendt » 23 Oct 2007, 08:42

Matthias,
Thanks for this example. I have found that the examples you (and the other contributors) have done have made it much easier for me to get a better understanding of QID and what it can do.
I'm always looking for a better way to display photos and can't wait to integrate this example in to a page.
Keep up the great work!
K. Ahrendt

Matthias Guenther (Quark)
Quarkian
Quarkian
Posts: 2490
Joined: 04 Jun 2004, 15:06
Contact:

Tip: Customizable scrollbar (and scrollable picture lists)

Post by Matthias Guenther (Quark) » 23 Oct 2007, 11:22

Hi, all,

some people approached me and asked me why the solution looks rather complex.

Actually I had two alternatives:
1) Create one script, with hard coded numbers, easy to understand, but not easy for you to customize and use in your own projects. You would have had to either use my design or struggle to recreate the script for your need.
2) Create two scripts, with quite some variables, not so easy to understand. Big advantage: You don't need to understand it, as you can just use it in your own projects, adjust boxes and only need to move two "lines" around which help to adjust the solution automatically.

I decided for alternative 2), hope that explains it.

Furthermore:
Some people asked why I the scrollable element an animation, in my point of view it makes it easier to maintain, you can just put whatever you want in it and adjust its size.

If you want pictures to do something (on click jump to a page or open a URL), just replace the animation object with a group object. Make sure you name it the same way (sc_element). And, in the "sc_drag" script, also reset the one "Set Object Position" action to set the position of the "sc_element" object.

Best
Matthias

jacquesd
Posts: 10
Joined: 09 Nov 2004, 06:09

Tip: Customizable scrollbar (and scrollable picture lists)

Post by jacquesd » 24 Nov 2007, 10:17

As soon i've got some time i will use it matthias
thanks a lot
jacques

Matthias Guenther (Quark)
Quarkian
Quarkian
Posts: 2490
Joined: 04 Jun 2004, 15:06
Contact:

Tip: Customizable scrollbar (and scrollable picture lists)

Post by Matthias Guenther (Quark) » 18 Jan 2008, 03:10

Hi, all,

Scott, one of the participants on the forum, preferred the scroll bar horizontal and successfully modified my project.
Additionally he also made some very nice design adjustments.

As Scott is fine to share his results, I am going to also put them online:

Result: click here to see the Flash / SWF

Source: click here to download the QXP

Thank you very much, Scott!

Enjoy
Matthias

petIQe
Posts: 0
Joined: 15 Nov 2008, 10:18

Tip: Customizable scrollbar (and scrollable picture lists)

Post by petIQe » 16 Nov 2008, 01:43

I tried to make a scrollable page based on your scrolling method, but i found a problem! It looks like there is a maximum size of the scrollable layout. In this case the scrollable content's height is 2660 px. When i scroll the content downwards, the bottom of the content not showing.
(sorry about my poor english!)

sergio
Posts: 0
Joined: 24 Feb 2009, 12:37

Tip: Customizable scrollbar (and scrollable picture lists)

Post by sergio » 24 Feb 2009, 06:16

Hi Everybody
I am new to interactive design and trying to use this scrollbar, but when replacing the pictures and previewing th SWF I get the message to "Define Variable" as you can tell I am not familiar with all the functions in QID, would someone care to break down in steps a liitle bit more on how to use and customize this scrollbar?
Thanks

Matthias Guenther (Quark)
Quarkian
Quarkian
Posts: 2490
Joined: 04 Jun 2004, 15:06
Contact:

Tip: Customizable scrollbar (and scrollable picture lists)

Post by Matthias Guenther (Quark) » 25 Feb 2009, 04:42

Hi, Sergio,
did you delete a script, an object or one of the lines?
Best
Matthias

sergio
Posts: 0
Joined: 24 Feb 2009, 12:37

Tip: Customizable scrollbar (and scrollable picture lists)

Post by sergio » 25 Feb 2009, 05:20

Hi Matthias, thanks for your quick response and I dont think I have deleted anything, I have replaced the pictures, regrouped the item and renamed it according to the notes, but I maybe missing something I will give it another try and see what happens.
Sergio

Matthias Guenther (Quark)
Quarkian
Quarkian
Posts: 2490
Joined: 04 Jun 2004, 15:06
Contact:

Tip: Customizable scrollbar (and scrollable picture lists)

Post by Matthias Guenther (Quark) » 25 Feb 2009, 05:24

Hi, Sergio,
which one did you download, the horizontal or vertical?
Be careful with ungrouping, as the group was an object I believe.
Thanks
Matthias

Locked

Return to “Expressions”