Ala tarquin Click auto-scroll interface in HTML

[ShadowCaster]

Just a thought : I could write a javascript designed to be simply included in already existing HTML webcomic.
It would catch clicks on the document an smoothly scroll to the clicked point (like 20% of the remaining distance evry half second for a nice Rush and slow "Ala tarquin" effect + contant pannel travelling time).
Browthers wit javascript disabled would "degrade" perfectly to the original comic, and other readers would not have to use scrollbars any more.
Big Zigzags wouldn't be a problem either. (except if used to make the reader ill)
Do you mind if I do the script Merlin ?
Anyone interessed ?
Suggestions ?
Anyone allowing me to use his comic for the example page ?

[ShadowCaster]

The script is working !!! thanks to the
http://www.quirksmode.org/ and http://www.howtocreate.co.uk ressoureces, I finally got a cross plattfom way to handle clicks, mouse coordinates (an ugly mess) and window scrolling.

As intended the result is very tarquin like (without pannel specification and zooming).

Using the script is just a matter of linking to a 5KB javascript from the otherwise unchanged comic.

Successfully tested on
-Zot online
-Blip
-Delta thrieves
-It's about girls
with IE5.0, Netscape 7.1 and Opera 7.23.

Could someone autorise me to use his comic so that I can set up an example page ? Preferably one with monodirectionnal scrolling (Vertical or Horizontal) and one with both directions scrollable.

[Greg Stephens]

I once did a rather wide comic. Is that sort of what you're looking for?

[ShadowCaster]

Yep, so if it's OK with you, I'll use it for the Horizontal only scrolling demo.
The best advantage of the script is the ability to scroll diagonnaly by simply clicking on the page.

Do you know if anyone actually used Scott's staircase comic idea? The script would be perfect for reading it.
The Blip comic would also profit from it, since you would read the comic in a consistent click read manner, instead of having to use both scroll bars in turns.

[BuckBeaver]

This is very exciting to hear!

I'm putting together a series of web comics for my site which are all long horizontal/vertical scrolling comics. Any chance I could make use of your script for them?

[ShadowCaster]

That would be OK with me, but I'm still waiting for Merlin to tell me how I can give credit to him before releasing the script.
If you want to test it and give feedback, and are OK not to use it online as long as Merlin doesn't respond, I can mail you the script. (3KB)

[tylerisrandom]

Neato!

I once set up a computer at a VERY local art show (teeny tiny, but it's something) and had my webcomics on CD-ROM free for people to take a look at.

In an act that was more than a little creepy, I'd stand a reasonable distance from viewers in the room and watch how they used my comics. Despite what I thought were clear indications of where the user should scroll next (i.e., panels right next to the previous panel, or bright yellow arrows), usually the user would either find themselves in a sea of blank space or they'd notice you had to scroll more than one way and give up entirely!

Anything to make the process easier is great, and I'd love to get a copy of the script. I would obviously put a link and a credit at the very end to it's creator.

[BuckBeaver]

That would be OK with me, but I'm still waiting for Merlin to tell me how I can give credit to him before releasing the script.
If you want to test it and give feedback, and are OK not to use it online as long as Merlin doesn't respond, I can mail you the script. (3KB)

That's OK because what I'm working on won't be up on the web for a few months at least but I'd be happy to test it and give feedback.

You can email the script and any instructions I should know to beartown AT bear-town DOT COM.

Thanks!

[ShadowCaster]

Hi Tyler Sticka, welcome to the forum.
I'm glad you're interessed since Blip and Merlin's tarquin engine are the two things that gave me the idea of developping the script.
I'm mailing the 2nd version to you and buckbeaver.
Please don't put it online yet but I'd love feedback.

Note : since the screen scrolls to the clicked point and browser windows are at most screen sized, the maximum vertical scrolling offset with a click is half the screen's height witch is too small for blip on classic resolution.

I have another under developpement version that centers the view around the clicked image insted of around the clicked point in the document. This works great in many cases but is sometimes a disaster :
When an image is bigger than the screen and you click on it, you don't have time to read the first part of the image before being centered on the image, and since you can't click on the next pannel that is still offscreen and clicking on the current panne won't help you're stuck.(of course you can use scrollbars, but that exactly what the script is supposed to get rid of)

How would you like these case to be handled ?

Even worse, with delta thrieves, the image stacking gets in the way : bubbles get the clicks and the reading experience becomes so weird that you can't appreciate the comic : you're too aware of the seemingly nonsensical reading interface.

[tylerisrandom]

I have a Psychology class in about an hour, and then a looming deadline after that, but I plan on trying out the script later this evening.

I'm intrigued by the idea because, prior to hearing this, I haven't really seen any non-Flash scrolling/navigation alternatives (maybe I just haven't been looking hard enough?)

The problem I find with Flash is simply that you have to specify a height and width, and I feel like you are, effectively, putting your work back into a box, the same place we're trying to break away from. However, I'm really enjoy the Tarquin engine that Scott used in Mimi's Last Coffee... but I feel like we haven't reached a point where the navigation doesn't, as you mention, distract from the work itself.

I just want to find some sort of solution that doesn't feel "gimmicky," if that makes sense. Even though saying that is slightly hypocritical of me, since a large portion of my webcomics seem to be analyzing the new medium, and thusly concentrating more on form than content...

But that doesn't mean I CAN'T deliver content! No, really!

[ShadowCaster]

I'm intrigued by the idea because, prior to hearing this, I haven't really seen any non-Flash scrolling/navigation alternatives (maybe I just haven't been looking hard enough?)

I've searched for it a lot before coding it myself. Problem is that screen/mouse coordinates and scrolling coordinates are a huge mess of incompatibilities across browsers and versions. I think evry artist who tried to follow that path quickly fled from javascript hell to the nicer structured Flash word.

the problem I find with Flash is simply that you have to specify a height and width, and I feel like you are, effectively, putting your work back into a box, the same place we're trying to break away from. However, I'm really enjoy the Tarquin engine that Scott used in Mimi's Last Coffee... but I feel like we haven't reached a point where the navigation doesn't, as you mention, distract from the work itself.

I don't see the Flash viewport as a prison : with transparency, you can deal with it the same way you deal with transparent gifs or pngs (even better with png, since it allows cross browser correct alpha channel).
Or, as in Tarquin engine, you can consider the flash viewport to be the full screen. You could simply adjust it's size to the maximum available room of the window showing the HTML that links to the .swf
SVG is perfect in that respect, but unfortunatly not enough used by potentiel readers to become a format of choice for webcomic artists yet.
I think Tarquin engine is a very effective interface, and the only reason why it keeps distract from the content is because it's still new to readers, and because the zooming in/out is purpusfully ment to catch attention.
When Scott kills the reader so efficiently at the horizontal end of Mimi, everithing feels wrong : the zooming, the breaking of the color conventions of the other pannels. I'm falling, I'm getting blind, evrything's wrong, I'm dying, I'm dead, I have nowhere to click for an alternative !!!

What I believe to be the future of webcomics are dedicated engines.
Java is the perfect choice, because it's portable and general, meaning new interfaces are not a problem. Other interfaces migh become the de facto standard, like flash currently is.
Artist's wouldn't need to know the engine's inner working, tools to define the comic is all he'll need to master.
But that's a lot of programming work with little short time potential revenue, and it needs artist and developper's cooperation.

Merlin happens to be both and is therefore ahead, clearing some fo the possible path.

I'm just a developper but I'm willing to implement the artist's reading interfaces of their dreams.


Oh, I know a non flash non java scrolling/navigation alternative :
Quicktime.
Quicktime allows spherical panoramas with hyperlinks and/or intenal links.
Comics could be built with that.

[tylerisrandom]

I just tried out the script, and it's very interesting. I'm not sure if "Blip" is the best place for it, because it's sort of meant to be read and scrolled at right angles, but I think it would be really interesting to try something diagonal as you mentioned. Thank you for sharing this with me.

[BuckBeaver]

Problem is that screen/mouse coordinates and scrolling coordinates are a huge mess of incompatibilities across browsers and versions. I think evry artist who tried to follow that path quickly fled from javascript hell to the nicer structured Flash word.

I agree. The beauty of Flash is it's simplicity and cross-platform/browser compatibility. The web comic project I'm working on is mostly Java simply as an exercise in programming but it's not fun. I'll take Flash in a heartbeat.

Oh, I know a non flash non java scrolling/navigation alternative: Quicktime. Quicktime allows spherical panoramas with hyperlinks and/or intenal links. Comics could be built with that.

That is such a good idea. Has anyone ever seen a Quicktime VR comic?

[ShadowCaster]

I just tried out the script, and it's very interesting. I'm not sure if "Blip" is the best place for it, because it's sort of meant to be read and scrolled at right angles, but I think it would be really interesting to try something diagonal as you mentioned. Thank you for sharing this with me.

the right angle issue is solved with the version where you scroll to the center of the clicked pannel instead of to the clicked point : pannels (images) have their center aligned either horizontally or vertically so it works great. BUT there's still the bigger than screen pannel issue to solve and I'm eager to hear interface suggestions to handle this problem.
Maybe some kind of invisible trails that you'd scoll along to the nearest point form the clicked point ? Or some ccombination of that and pannels ?

Has anyone ever seen a Quicktime VR comic?

Nope, I've been regularily suggesting this but there again, artists tend to beleive it's too complex.
If any artist can conceptualise a comic with this media but is afraid of the technical aspects, please create a new thread about it and I'll do my best helping demistify the tech aspects. It's not because it looks complex that it is.

[BuckBeaver]

OK, I want to try this out tonight and simply linking to the script didn't work. Forgive my ignorance, but is there no code that has to go in to the HTML document? No parameters to change?

Obviously I am doing something wrong so could you give an example of how you've set up the code for this?

[ShadowCaster]

copy the script in the same directory than your HTML file.
In your HTML file, in the head part (beetween <head> and </head>) add
<script language="javascript" src="click_to_scroll2.4.js"></script>
and when opening the HTML page, you can scoll to any point on the page by clicking on it.
I don't remember what version I sent you, adapt the src part to the name of the js file.

[BuckBeaver]

Very cool.

It worked perfectly, the problem was the javascript didn't save as a .js file when I copied it to my harddrive.

Personally, I don't see why there should be a problem releasing this without Merlin's approval. I think it's very courteous of you to do so, but really all you've done here is develop a java script navigational tool. While it's certainly inspired by Merlin's work it's not the same thing. Just my opinion.

[ShadowCaster]

While it's certainly inspired by Merlin's work it's not the same thing. Just my opinion.

I agree that the click scroll is not the same as tarquin, but now I've added pannel handling (by adding an id starting with "pannel_" to an image tag, clicks to that image make the scrolling center to the image instead of to the clicked point.
I've also added the notion of "angular pannel" :
by adding an id to an image starting with "pannel30_" for example, the rectangular image is considered to be oriented with an angle of 30?, witch means that if you click the image, it will scroll to a point on the image that is the nearest from the clicked point on the diagonal passing by the center of the image
with an angle of 30? (great for bigger than screen "diagonal" pannels with transparency (idea found while rererereading http://www.scottmccloud.com/comics/icst ... cst-1.html ).
I'm also working on an invisible path notion, invisible pannel notion (witch is the way you define navigationnal information in tarquin), and on zooming, but that last funcitonnality will probably not be implemented as I don't see yet how to efficiently make it cross browser compatible.
The more I advance in the script, the more "tarquin like" the reading experience becomes.
I think I could release the click scroll you have, but don't want to decide when the script has borrowed too much from tarquin to be releasable and when not. I'd rather have it become a collaboraational work beetween Merlin and I, where most the concepts comes from him and most the realisation from me.

[BuckBeaver]

I should have caught this earlier, but is the script compatible with Mozilla browsers? I just noticed that it doesn't seem to work in the latest version of Firefox (works fine in IE and Opera though). What about Safari?

[ShadowCaster]

I just noticed that it doesn't seem to work in the latest version of Firefox

Damn, what version of Firefox is it not working on ?
It was supposed to work with safari and firefox too , what happens, error messages ? no scrolling ?

[BuckBeaver]

I'm currently using the 0.9.2 build of Firefox which I believe is the latest. I'll try to reload the page tonight and use the JS console to find out what the exact error was.

*EDIT*

After posting this I checked and sure enough there's a 1.0 Preview release available. Installed that and it seems to work fine.

[Merlin]

Sorry it's taken me an age to reply to this thread - I suck.

Shadow - it sounds like what you've come up with is pretty much it's own thing, so feel free to spread it around without my say so.

If you do want to credit me, just a simple link to a tarquin comic on e-merl would be fine (and flattering).

One thing - I would rather you don't actually call what you've come up with any kind of Tarquin related name, just to avoid confusion (not that you were necessarily planning to or anything, but you know, just in case).

Oh, and if you're still after comics to test your code out on, you're welcome to use http://e-merl.com/wpend.htm as a basis for experimentation.

[ShadowCaster]

Shadow - it sounds like what you've come up with is pretty much it's own thing, so feel free to spread it around without my say so.

If you do want to credit me, just a simple link to a tarquin comic on e-merl would be fine (and flattering).

Thanks, I'll put the links in the documentation page and as a comment in the scripts.

One thing - I would rather you don't actually call what you've come up with any kind of Tarquin related name, just to avoid confusion (not that you were necessarily planning to or anything, but you know, just in case).

OK, I need 3 names, on for the click to scroll interface, one for the taquin like interface, and one for the drag to scroll interface, propositions welcome.

Oh, and if you're still after comics to test your code out on, you're welcome to use http://e-merl.com/wpend.htm as a basis for experimentation.

My, as usual, the assumtions I made about how people do HTML webcomics are wrong.
I had assumed that pannels would be either images or elements with absolute coordinates.

For pannel images, you have to add an id with a special name (pannel_whatever) for the script to handle it as a pannel.
For absolutely positionned elements, The comic writer can use another script to view the current coordinates of the mouse, and write the pannel coordinates in the call that inits the engine.
I thought these methods would cover evry possibility, and the first page I'm suggested to test my scripts on simply can't deal with it.
(rendering is far from pixel perfect match depending on the browser, and a table cell with a colspan and TEXT in it is an element that can't be simply and precisly pixel located.)
I could rewrite the comic using CSS positionning and/or transparent images to be given the special pannel_* id, but the whole point of the scripts was to allow navigation without changing the page more than by adding a javascript call. There has to be a way.