Page 1 of 2
Animation fun
Posted: Sat Apr 21, 2007 5:33 am
by Wladimir Palant
I think it is very useful to show how things are done and not only to tell it. So I decided to play around with animations. A few images and a little JavaScript to move them around - that should be enough.
So here is my test page: [removed, new page see below]. That's only 33 KB HTML code with embedded images and 1.7 KB JavaScript (both gzip'ed). The JavaScript file is a universal library, it will be able to play any other animation as well (just not in Internet Explorer though Opera works fine). What do you think, will this be useful for ABP documentation?
Posted: Sat Apr 21, 2007 12:30 pm
by Wladimir Palant
And another one: [removed, new page see below]. This time it took only 15 minutes to write.
Edit: one more: [removed, new page see below]
Edit2: The animations are all on one page now:
http://adblockplus.org/trash/animation.html
Posted: Sat Apr 21, 2007 7:30 pm
by IceDogg
I like them, but I do see one issue as far as being helpful as guilds. You don't see what you are doing with the mouse. For example, Disabling Adblock Plus is that a right click or middle click or what? I know which it is but for someone needing help that could be confusing. Is there some way to show that as well?
I know that's being picky, but I think some may need that info as well. They do look great though.
Posted: Sat Apr 21, 2007 7:39 pm
by chewey
Really nice idea, but I have to agree with IceDogg: It needs a way to
show which mouse button is clicked. A little icon symolising a three
button mouse with the particular button highlighted instead of the
normal mouse cursor would probably work fine.
Posted: Sat Apr 21, 2007 7:40 pm
by Wladimir Palant
Yes, I don't know how you can show which mouse button was pressed. But for now they should be accompanied by text anyway - e.g. the one you mentioned should replace the image
here.
Posted: Sat Apr 21, 2007 9:19 pm
by pavlac
You could make a small image on the right side of the animations, which shows a mouse.
(like in this screenshot:

)
Then you can highlight the buttons, which are used.
Posted: Sat Apr 21, 2007 9:40 pm
by Wladimir Palant
A added a mouse icon, how is it now?
Posted: Sat Apr 21, 2007 9:43 pm
by pavlac
It is much better now. But when you drag the icon, the mouse should be visible all the time.
Posted: Sat Apr 21, 2007 9:57 pm
by chewey
Yes, much better already.
I also agree with pavlac: The mouse icon should stay visible when
dragging - and it should follow the cursor.
Posted: Sat Apr 21, 2007 10:14 pm
by Wladimir Palant
Another attempt - the mouse icon now follows the cursor. It starts looking convoluted around the cursor...
Posted: Sat Apr 21, 2007 10:34 pm
by chewey
No, wait, you should also add some flowers, an animated cursor trail and a rubberducky...
Seriously: I like it. There is nothing more to add that I could think of.
However, I think those clicks are too fast for the inexperienced user
this is intended for. I'd suggest to make those clicks last longer.
Posted: Sat Apr 21, 2007 10:52 pm
by Wladimir Palant
I already doubled their length, maybe I should do it again... Edit: done.
Posted: Sat Apr 21, 2007 11:01 pm
by chewey
Much better.
It is boringly long for me so it should be just right for beginners ;-)
Posted: Sun Apr 22, 2007 12:13 am
by IceDogg
Awesome!! That's all it needed was a little something to show which button(s) to click, for the ones that need it. Great job!
Posted: Sun Apr 22, 2007 1:00 am
by Wladimir Palant
I was tired of bookmarklets so I added a list to select the language. Trying to use the same animations for all languages seems somewhat risky but so far it seems to work.