art, spinoffs, and how to make a magic letter

[astolat]

eee!

leyna55 has made a GORGEOUS drawing of Slytherin Sam -- http://leyna55.livejournal.com/2508.html

And a couple of people have asked in the comments -- if you would like to play in the Old Country universe, totally dive right in, whether you want to do missing scenes or sequels or alternate versions, anything. I am all over that stuff. ♥ joannindiw has already been noodling some snippets in the comments here!

And I thought I would write up how I did the magic letter and cursor, for anyone who is curious -- the basic image-swapping part is really not that hard: I did it using Photoshop CS3, but if you can make an animated GIF icon, you can do this. :D I used a testing page for the certificate which you can open up and use "view source" on, to see all the code in place.

1. I made a non-animated image of the letter with the Latin (I used a JPG for this because it was smaller).
   
   
2. I made two animated GIFs, one of the Latin letter fading into the English letter, and one vice versa. The key is, each of these animations runs *only once* -- they aren't on infinite loop, they just do the fade and then stop on the final frame.
   
   Extra details on these two steps: I made the letter with the Latin, got all the text layers positioned how I wanted (centered paragraphs) and then stuck them together in a layer group called Latin. I duplicated all those text layers and stuck them in a layer group called English, and edited the text to replace the Latin with the translation. That kept them mostly exactly aligned, but for a little minor tweaking, and now I could swap the letter image from English to Latin just by making one layer group or the other visible.
   
   For the animation, I used Photoshop CS3's animation tool -- this used to be part of ImageReady, so if you have Photoshop CS2, which I think that comes with, you would switch to using ImageReady at this point. I created an animation with two frames, and on the first frame, I turned on the Latin text, on the second I turned on the English text. I then selected the two and got Photoshop to create a "tweening" animation -- an automatic cross-fade. I used six frames after a little bit of trial and error, and used a time of 0.2 seconds on each one. In CS3 I was able to save this animation as an animated GIF file using Save For Web.
   
   Here's a screencap of the photoshop bit:
   
   
   



3. Okay, now, if you look at the source, the javascript at the top is what does the certificate switch. Here's the breakdown of what each chunk does:
   
   
   • This part at the top stores the names of the image files (which I just stuck in the same directory as the story), and their alt text. (NOTE -- I'm not actually including the alt text here, to save space. You can see what it actually looks like in the source.) "certState" saves which image is currently being shown, the Latin or the English.
     
     certEnglish = "./wizardingcertification-latintoenglish.gif"; certEnglishAlt = "[ english text ]"; certLatin = "./wizardingcertification-englishtolatin.gif"; certLatinAlt = "[ latin text ]"; certState = "Latin";
   
   
   
   • So that the user doesn't have to sit there waiting after they click for the big animated gifs to load for the first time, I pre-loaded the images at the top with this bit.
     
     // preload images if (document.images) { cert1= new Image(400,667); cert1.src=certEnglish; cert2= new Image(400,667); cert2.src=certLatin; }
   
   
   
   • And finally, the swapCert function is the one that actually does the swapping-around:
     
     function swapCert() { if (certState == "English") { cert.src = certLatin; cert.alt = certLatinAlt; certState = "Latin"; } else { cert.src = certEnglish; cert.alt = certEnglishAlt; certState = "English"; } }



4. Then, I just put in this img tag (cutting out all the parts that are not necessary for the switch to work):
   
   
   And that does it -- the first time you click, it loads up the "latin to english" gif, so you see the latin image fade into the english one. The next time you click, it loads up the "english to latin" gif to fade from english to latin. And after that it just alternates between those two gifs. :)

The magic wand and the sparkles:

1. To make the magic wand cursor ('magicwand.cur'), I basically followed this tutorial. I used a screencap of photoshop's magic wand tool, resized it to 32x32, and used that as a guideline and poked at it pixel-by-pixel until it came out looking good. (Use the pencil tool set to 1 pixel with no anti-aliasing and 100% opacity.)
   
   
2. Then I added this bit in the
   tag for the magic letter image:
   style="cursor: url('magicwand.cur'), pointer;"
   This is all it takes to put in a custom cursor, although it depends a lot on what OS/browser you're using. The "pointer" bit up there tries to make the cursor default to a pointing hand cursor if the magicwand cursor doesn't work, but that doesn't always work either.



3. The sparkles are more complicated so I will just give an overview. I was totally lazy and went googling for some javascript that does that really annoying "fairy dust" thing you see on some websites, where sparkles trail your cursor as you move it around the screen. I found one and then hacked it some to make it look prettier and also so it would only happen when you click instead of endlessly. The basic concept is, you stick a bunch of asterisks (or you could use plus signs or even an image) into some divs. Then you use CSS to define the style(s) for those divs so that they start out invisible.
   
   The Javascript then basically changes the position of each of the divs and makes them appear at slightly randomized positions around the place where you click with the cursor, and then fades them out and makes them invisible again.