Make and Animate a BlinkieA Blinkie is made of blocks, icons and letters (props)
You can use MSpaint to create your own props or use an online blinkiemaker.
For this tutorial I'm going to use an online blinkiemaker.
- Once you've dragged and dropped the props where you want them, press printscreen (a button on your keyboard close to the F12 button, at the top right) and open MSPaint (or another image editor)
- Choose the select tool (the dotted rectangle), right click on the blank white space and choose 'paste' or simply press the hotkeys 'Ctrl+V'. Click for screencap
- Use the select tool to cut out your blinkie from the screencapture of the webpage, right click and choose 'copy' (or Ctrl+C) then paste it in to a new MSPaint image. Click for screencap
- Resize the image so it fits your blinkie and zoom in by 800% using the magnifying glass tool.
- Floodfill the areas to be transparent with a color not used in your blinkie, set that color as the background color by right clicking its square on the palette. Click for screencap
- Now save that first image as frame1.bmp (or just 1.bmp or a.bmp) it will be the first frame of your blinkie animation.
Here's where we start to edit our blinkie for different animation effects...
I'm going to make a blinkie where the letters change color when the heart bounces on them:
5 letters in my name = 1 original frame + 5 changes = 6 frames named 'a' to 'f'
- Edit the original frame in mspaint and save the changes as the different frames. Click for screencap
- Convert the a-f.bmp files to a-f.gif files using Giffy
- Load the a-f.gif files in Unfreeze, check that they are in the right order, set a frame delay (15). Click for screencap
- Save the new animation as 'heart.gif' --»
Here are some other animation effects you can create:
Dropping blocks: --» . Click for screencap
Color swap: --»
Letters: --» or .
To add your blinkie to your website or blog, upload it to photobucket.com or imageshack.us and use the code that starts with <img src="...