In this post, I present an effect where a character blinks as if selected as part of an editing screen.

This sample uses a single image with masks that blink over the top. This should give the appearance that the selection is changing as you press the left and right buttons. This sample merely shows the blinking effect – no editing.

In another post – I will present a more developed example where you can actually edit the characters.

As with all code – there are probably many ways to get the job done. Here is what I came up with.

++step;

if (window.step==10) {
step=1;
}

if (window.step==1) {

flashOn1();

function flashOn1() {
cp.hide(“mask1”);
setTimeout(flashOff1, 500);
}

function flashOff1() {
cp.show(“mask1”);

if (window.step==1) {
setTimeout(flashOn1, 500);
}

else {
stop1();
}
}

function stop1() {
cp.hide(“mask1”);
}
}

Let’s examine.

The first line simply increments a single variable called step which tracks the letter that is currently active from left to right. (C=1 and e=9)

The second part says that if we increment to 10 then we need to switch to 1. This is the effective loop around when going to the right. A similar piece of code is there if looping by going left.

Next we have the code for the blinking mask. This is nothing more than a series of setTimeout() methods that point to each other and either show or hide the mask every half second.
The tricky part is that we have to have a way out of the blinking loop when we navigate to the next character.

So it might read this way…  if step is equal to 1 which means we have the C selected, activate the flashOn1() function. This will hide the mask and allow us to see the letter. It will then fire the flashOff1() function in a half second which will show the mask and effectively cover the letter. The next couple parts simply define what the functions will do when they are called.

Notice that within the flashOff1() function there is an embedded if statement that checks to see if the step variable is still a value of 1. If it is we will run the flashOn() function again. If not, we will run the stop1() function. This is our way out of the loop when a new character is selected. This function simply hides the mask and allows the character to stay visible without a blink effect. At that point, the newly selected character should blink with similar code.

Check it out and stay tuned for the version where we actually can edit those characters.