Tweet
Example: Creating Animated Images
How To : Create animated .gif , create animated .jpg , create animated .bmp , create animated .png , or create animated .tif , create animated .pcx , create animated .tga , create animated .wmf , create animated .apm , create animated .emf , create animated .psd , and create animated .pcd images.
As of the latest service release, AutoPlay Media Studio 5.0 is capable of handling .gif images. For the time being though .gif support is limited to non-animated .gifs, so I thought I would create a tutorial to show how you can quickly create animated images from static images inside of AutoPlay Media Studio using the native page timer. It's quick, easy, and reliable. And you can easily add multiple animated images without affecting performance too much. OK, so here we go, note that there is a working example file attached to this post which includes:
Step 1. If you are starting off with an animated .gif please extract the frames so that you have them as as individual image files. You can do this using a free tool such as http://www.irfanview.com if needed. If you are starting with static images, ignore this step.
*Note* that this method works with any format image so you can easily use this to create animated .jpgs, animated .pngs, or animated .bmp as well as any other image format recognized by AutoPlay Media Studio. Use the image format which is best suited to your needs. For example if you wish to include transparency in your animation you might want to consider using PNG24 format since it offers full alpha transparency, which is superior to .gif transparency.
Step 2. With everything now ready we simply drag 'n drop all our frame images onto our page and align them together, such as in the attached example...
Step 3. Now that we have the individual frames of our animation in our project we need to name the image objects with sequential numbers so we can rotate them easily, i.e. add "_1" to the end of your first frame image's corresponding image object, "_2" to the second, "_3" to the third, and so on...
Step 4. Now we need to hide all the images, there are a couple ways, I reccomend toggling the visiblity icons in the object pane for each image to off. I leave my first frame showing just for fun.
Step 5. Now we have to initiate a frame number variable and add an action to our page's OnShow event to start our timer. In my case the minimum frame view will be 200 milliseconds, you can set this to any rate you like though. So my action ended up being:
frame = 0;
Page.StartTimer(200);
Step 6. No all we have to do is add a couple lines of code to the page OnTimer event to rotate the frames' visibility. In my case I have 7 frames in the attached example so I set my loop limit to 7. The code ends up looking like this.
-- increment frame number and check for frame limit
frame = frame + 1;
if frame > 7 then
frame = 1;
end
-- show current frame first to avoid "flicker"
Image.SetVisible("dancer_"..frame, true);
-- now hide old frame
old = frame - 1;
if old < 1 then
old = 7;
end
Image.SetVisible("dancer_"..old, false);
And that's it. Works great, check out the attached example and if you have any questions just let me know and I'll be happy to help.
As of the latest service release, AutoPlay Media Studio 5.0 is capable of handling .gif images. For the time being though .gif support is limited to non-animated .gifs, so I thought I would create a tutorial to show how you can quickly create animated images from static images inside of AutoPlay Media Studio using the native page timer. It's quick, easy, and reliable. And you can easily add multiple animated images without affecting performance too much. OK, so here we go, note that there is a working example file attached to this post which includes:
Step 1. If you are starting off with an animated .gif please extract the frames so that you have them as as individual image files. You can do this using a free tool such as http://www.irfanview.com if needed. If you are starting with static images, ignore this step.
*Note* that this method works with any format image so you can easily use this to create animated .jpgs, animated .pngs, or animated .bmp as well as any other image format recognized by AutoPlay Media Studio. Use the image format which is best suited to your needs. For example if you wish to include transparency in your animation you might want to consider using PNG24 format since it offers full alpha transparency, which is superior to .gif transparency.
Step 2. With everything now ready we simply drag 'n drop all our frame images onto our page and align them together, such as in the attached example...
Step 3. Now that we have the individual frames of our animation in our project we need to name the image objects with sequential numbers so we can rotate them easily, i.e. add "_1" to the end of your first frame image's corresponding image object, "_2" to the second, "_3" to the third, and so on...
Step 4. Now we need to hide all the images, there are a couple ways, I reccomend toggling the visiblity icons in the object pane for each image to off. I leave my first frame showing just for fun.
Step 5. Now we have to initiate a frame number variable and add an action to our page's OnShow event to start our timer. In my case the minimum frame view will be 200 milliseconds, you can set this to any rate you like though. So my action ended up being:
frame = 0;
Page.StartTimer(200);
Step 6. No all we have to do is add a couple lines of code to the page OnTimer event to rotate the frames' visibility. In my case I have 7 frames in the attached example so I set my loop limit to 7. The code ends up looking like this.
-- increment frame number and check for frame limit
frame = frame + 1;
if frame > 7 then
frame = 1;
end
-- show current frame first to avoid "flicker"
Image.SetVisible("dancer_"..frame, true);
-- now hide old frame
old = frame - 1;
if old < 1 then
old = 7;
end
Image.SetVisible("dancer_"..old, false);
And that's it. Works great, check out the attached example and if you have any questions just let me know and I'll be happy to help.
Comment