Animation fun

Wladimir Palant · Post by **Wladimir Palant** » Sat Apr 21, 2007 5:33 am

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?

Wladimir Palant · Post by **Wladimir Palant** » Sat Apr 21, 2007 12:30 pm

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

IceDogg · Post by **IceDogg** » Sat Apr 21, 2007 7:30 pm

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.

chewey · Post by **chewey** » Sat Apr 21, 2007 7:39 pm

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.

Wladimir Palant · Post by **Wladimir Palant** » Sat Apr 21, 2007 7:40 pm

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.

pavlac · Post by **pavlac** » Sat Apr 21, 2007 9:19 pm

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.

Wladimir Palant · Post by **Wladimir Palant** » Sat Apr 21, 2007 9:40 pm

A added a mouse icon, how is it now?

pavlac · Post by **pavlac** » Sat Apr 21, 2007 9:43 pm

It is much better now. But when you drag the icon, the mouse should be visible all the time.

chewey · Post by **chewey** » Sat Apr 21, 2007 9:57 pm

Yes, much better already.

I also agree with pavlac: The mouse icon should stay visible when
dragging - and it should follow the cursor.

Wladimir Palant · Post by **Wladimir Palant** » Sat Apr 21, 2007 10:14 pm

Another attempt - the mouse icon now follows the cursor. It starts looking convoluted around the cursor...

chewey · Post by **chewey** » Sat Apr 21, 2007 10:34 pm

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.

Wladimir Palant · Post by **Wladimir Palant** » Sat Apr 21, 2007 10:52 pm

I already doubled their length, maybe I should do it again... Edit: done.

chewey · Post by **chewey** » Sat Apr 21, 2007 11:01 pm

Much better.

It is boringly long for me so it should be just right for beginners ;-)

IceDogg · Post by **IceDogg** » Sun Apr 22, 2007 12:13 am

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!

Wladimir Palant · Post by **Wladimir Palant** » Sun Apr 22, 2007 1:00 am

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.