Liliana blogged
Synyster blogged
Harvest Moon Angel blogged
tekmosis blogged
Preloading images for smooth transition on flip/flop effect
If you're a frequent member on the site I'm sure you've noticed blank star images 
which when clicked switch 'states' to this image 
and perform an action such as adding a blog to your favorites.
In this post I'll go over a method on achieving a changeable state when you click on the image.
HTML:
JS:
Let's go over the JS first. You can place the JS in either an external .js file and include it on the page. However, in this example we'll add it between our header tags.
For optimum performance we'll want to do some preloading. We're doing this because without utilizing preloading you'll get a "flicker" between images while they change states after being clicked. Adding a preloading smooths things out and makes the state change seamless.
In this we are preloading images for both states "on" and "off". Both images are 15px by 15px (width / height) so that's what the "15,15" in the Image instantiation represents. Then, we're setting the source for the newly declared images for preloading. Now, lets take a look at our function which will handle the changing.
We'll set all of our variables to start with so that our logic will look a lot cleaner. Here's a brief run down of our variables and their purpose.
star_is_blank is a regular expression looking for the text "unsubscribed_star" we'll use this to check the current image that is being viewed on the page so we can determine which state to properly display.
star_image this will grab the actual html image tag itself so we can get information we need from it, in our case the source (src="")
star_text this part is optional and only benefits you if you want to change the text on the state change.
Now we get to the bulk of the code in the function which handles the actual changing of the image and the text. As noted in the section above with the regex you can now see how we are using it. We'll check if the src of star_img is "unsubscribed_star", if it is then we'll change the src star_image to the src of star_on, take note that we're using star_on and not "https://i.neoseeker.com/f/neo/subscribed_star.gif" itself. If you were to call "https://i.neoseeker.com/f/neo/subscribed_star.gif" rather than star_on users browsers will not be intelligent enough to know to use your preloaded image. You must use the variable in which you set for your preloaded images. The second step in the if block is to change the text and the else block will contain the opposite state changes using star_off and changing the text to 'hello'.
web development
which when clicked switch 'states' to this image and perform an action such as adding a blog to your favorites.In this post I'll go over a method on achieving a changeable state when you click on the image.
HTML:
| code |
<a href="#"><img id="preimg" src="https://i.neoseeker.com/f/neo/unsubscribed_star.gif" border="0" /> <span id="word">hello</span></a> |
JS:
| code |
star_on = new Image(15,15);
star_on.src="https://i.neoseeker.com/f/neo/subscribed_star.gif";
star_off = new Image(15,15);
star_off.src="https://i.neoseeker.com/f/neo/unsubscribed_star.gif";
function changestar() {
var star_is_blank = new RegExp("unsubscribed_star");
var star_image = document.getElementById('preimg');
var star_text = document.getElementById('word');
if (star_is_blank.test(star_image.src)) {
star_image.src = star_on.src;
star_text.innerHTML = 'goodbye';
} else {
star_image.src = star_off.src;
star_text.innerHTML = 'hello';
}
}
|
Let's go over the JS first. You can place the JS in either an external .js file and include it on the page. However, in this example we'll add it between our header tags.
For optimum performance we'll want to do some preloading. We're doing this because without utilizing preloading you'll get a "flicker" between images while they change states after being clicked. Adding a preloading smooths things out and makes the state change seamless.
| code |
star_on = new Image(15,15); star_on.src="https://i.neoseeker.com/f/neo/subscribed_star.gif"; star_off = new Image(15,15); star_off.src="https://i.neoseeker.com/f/neo/unsubscribed_star.gif"; |
In this we are preloading images for both states "on" and "off". Both images are 15px by 15px (width / height) so that's what the "15,15" in the Image instantiation represents. Then, we're setting the source for the newly declared images for preloading. Now, lets take a look at our function which will handle the changing.
| code |
var star_is_blank = new RegExp("unsubscribed_star");
var star_image = document.getElementById('preimg');
var star_text = document.getElementById('word');
|
We'll set all of our variables to start with so that our logic will look a lot cleaner. Here's a brief run down of our variables and their purpose.
star_is_blank is a regular expression looking for the text "unsubscribed_star" we'll use this to check the current image that is being viewed on the page so we can determine which state to properly display.
star_image this will grab the actual html image tag itself so we can get information we need from it, in our case the source (src="")
star_text this part is optional and only benefits you if you want to change the text on the state change.
| code |
if (star_is_blank.test(star_image.src)) {
star_image.src = star_on.src;
star_text.innerHTML = 'goodbye';
} else {
star_image.src = star_off.src;
star_text.innerHTML = 'hello';
}
|
Now we get to the bulk of the code in the function which handles the actual changing of the image and the text. As noted in the section above with the regex you can now see how we are using it. We'll check if the src of star_img is "unsubscribed_star", if it is then we'll change the src star_image to the src of star_on, take note that we're using star_on and not "https://i.neoseeker.com/f/neo/subscribed_star.gif" itself. If you were to call "https://i.neoseeker.com/f/neo/subscribed_star.gif" rather than star_on users browsers will not be intelligent enough to know to use your preloaded image. You must use the variable in which you set for your preloaded images. The second step in the if block is to change the text and the else block will contain the opposite state changes using star_off and changing the text to 'hello'.
web development
chautemoc blogged
The Answer blogged
[Comiket 75] Touhou - A Summer Day's Dream
Well, the highly anticipated Comiket 75 finally arrived a few days ago and I managed to get my hands on the also highly anticipated Touhou non-official anime's first episode, entitled: A Summer Day's Dream. Much discussion formed in the pre-release period, concerning the (judging from the two previews leaked on the web) questionable animation quality and the ridiculous list of voice actors hired for the project, but I'll explain in detail later on.
Before I continue, for those of you who don't know what Touhou is, it's a series of games, developed by a one-man team, going by the name of ZUN. Most of the series' games fall into the category of bullet-hell vertical scrolling shooter. In the game, you must defeat the enemy all the while dodging a ridiculous amount of different bullets. The series has gained an immense amount of fans and has been subject to countless fan works.
An example of bullet-hell or danmaku, in one of Touhou's games (Mountain of Faith)
By the way, catch Moonrise beating Imperishable Night's extra stage. The game is pretty intense, haha.
Anyways, back to the main topic at hand. Skimming through the blogosphere, forums, and friends' comments, we were all expecting the animation to be a let-down. From the two previews we saw (a second link would be pretty much redundant since it has basically the same thing), you could notice that the animation and character design was kind of meh. However, for a fan project, it was pretty good, especially the background designs.
A few days before C75, the release date and list of voice actors for the adaption was revealed, and needless to say, everyone was impressed at the amazing cast they were able to round up (and of course the speculations of the veracity of the cast list ran wild). Then came the date of Comiket 75. A day or two after it started, I had "acquired" a copy of the adaptation's first episode. I sat back, grabbed a snack and watched.
Twenty minutes later, I was blown away. The animation wasn't as bad as I thought it would be, and while the story started out a bit slow, it was very enjoyable and I found myself smiling the whole episode! So yeah, if you're a fan of the series, it's definitely worth checking out.
Basically, the story takes place in Gensokyo, a world alternate to ours, in which many mystical beings live. It centers around the main character, a shrine maiden named Reimu Hakurei, and an unfortunate incident that occurs when her shrine donation box is stolen. She then sets out with the help of others to find the culprit of the theft. It's a light-hearted, calm, and comical story so far.
Suika(right): Needs moar sake.
From a fan's point of view, even though I had some trouble getting used to some of the character's voice actresses (the personalities, not the voice acting itself which was excellent), it was great nonetheless.
Reimu: Oh my god it's a *bleep*.
The music, while not something stand-out-ish, was good as well. All of it fit nicely with the mood of the moment and did its job. The intro song of the episode was nicely done, by the way.
Taking nude pictures while you're in the shower is no challenge for Aya.
There was a also a fight scene near the end of the episode and, surprisingly, it was very well animated. The effects were top-class and the fluidity and movements were pretty impressive for what the anime was.
Bringin' Marisa along for the ride.
Embarking on a search for Reimu's missing shrine maiden donation box.
At the Scarlet Devil Mansion.
All in all, it was a very enjoyable watch. I thought it was pretty amazing for a doujin animation. I expect the next episode to be better, although I am not sure as to when it will come out. It seems the possibility of another episode will depend on the sales, but I can't be too sure about this either.
2008 has been a good one. Oh yeah. (H)
Oh, by the way, apparently Patchouli has Wikipedia on her library.
comiket 75 touhou anime
Before I continue, for those of you who don't know what Touhou is, it's a series of games, developed by a one-man team, going by the name of ZUN. Most of the series' games fall into the category of bullet-hell vertical scrolling shooter. In the game, you must defeat the enemy all the while dodging a ridiculous amount of different bullets. The series has gained an immense amount of fans and has been subject to countless fan works.
An example of bullet-hell or danmaku, in one of Touhou's games (Mountain of Faith)
By the way, catch Moonrise beating Imperishable Night's extra stage. The game is pretty intense, haha.
Anyways, back to the main topic at hand. Skimming through the blogosphere, forums, and friends' comments, we were all expecting the animation to be a let-down. From the two previews we saw (a second link would be pretty much redundant since it has basically the same thing), you could notice that the animation and character design was kind of meh. However, for a fan project, it was pretty good, especially the background designs.
A few days before C75, the release date and list of voice actors for the adaption was revealed, and needless to say, everyone was impressed at the amazing cast they were able to round up (and of course the speculations of the veracity of the cast list ran wild). Then came the date of Comiket 75. A day or two after it started, I had "acquired" a copy of the adaptation's first episode. I sat back, grabbed a snack and watched.
Twenty minutes later, I was blown away. The animation wasn't as bad as I thought it would be, and while the story started out a bit slow, it was very enjoyable and I found myself smiling the whole episode! So yeah, if you're a fan of the series, it's definitely worth checking out.
Basically, the story takes place in Gensokyo, a world alternate to ours, in which many mystical beings live. It centers around the main character, a shrine maiden named Reimu Hakurei, and an unfortunate incident that occurs when her shrine donation box is stolen. She then sets out with the help of others to find the culprit of the theft. It's a light-hearted, calm, and comical story so far.
Suika(right): Needs moar sake.
From a fan's point of view, even though I had some trouble getting used to some of the character's voice actresses (the personalities, not the voice acting itself which was excellent), it was great nonetheless.
Reimu: Oh my god it's a *bleep*.
The music, while not something stand-out-ish, was good as well. All of it fit nicely with the mood of the moment and did its job. The intro song of the episode was nicely done, by the way.
Taking nude pictures while you're in the shower is no challenge for Aya.
There was a also a fight scene near the end of the episode and, surprisingly, it was very well animated. The effects were top-class and the fluidity and movements were pretty impressive for what the anime was.
Bringin' Marisa along for the ride.
Embarking on a search for Reimu's missing shrine maiden donation box.
At the Scarlet Devil Mansion.
All in all, it was a very enjoyable watch. I thought it was pretty amazing for a doujin animation. I expect the next episode to be better, although I am not sure as to when it will come out. It seems the possibility of another episode will depend on the sales, but I can't be too sure about this either.
2008 has been a good one. Oh yeah. (H)
Oh, by the way, apparently Patchouli has Wikipedia on her library.
comiket 75 touhou anime
Artificer blogged
Katsumi blogged
Blackfalcon blogged
Candle blogged
Shana blogged
Kazooieman blogged
Redemption blogged