How to Create Animated Waving Flags for Websites

By Brandy Alexander

An animated, website flag mimics the look of a real flag on a windy day.
i Photos.com/Photos.com/Getty Images

If you want display a moving message or picture on your site, consider adding a waving flag to your page. This flag mimics the way a physical banner moves in the wind, and it presents the images and/or text you prefer. Although this graphic is traditionally created with a graphics application, you have the option to make this dynamic picture with a free Internet resource. Create the animated waving flag you prefer and understand how to publish it to your website.

Point your browser to an online, animated flag generator such as FlashVortex.com, MakeSweet or Layoutcodez.net. The MakeSweet and Layoutcodez.net sites allow you to upload your own picture for your flag, while the FlashVortex.com site provides you with ready-made images that you edit.

Upload an image for your moving flag on the MakeSweet website by clicking the plus-sign button and then click the next plus sign that appears with the default picture. On Layoutcodez.net, click the "Choose File" button. Follow the prompts on each site to select your graphic and add it to the design.

Use the menus on the FlashVortex.com and MakeSweet sites to design your image. On FlashVortex.com, for example, enter a flag size in the "Flag scale" text field, type the accompanying flag content in the "Text" box and then choose the positioning of your text using the features under the "Edit Text Label Position" title. Layoutcodez.net does not give you the option to do further modifications to your picture.

Finish your moving flag design by clicking the "Generate Animation" button on the FlashVortex.com website or the "Upload" button on the Layoutcodez.net page, and then copy the code that automatically displays in the text box. With MakeSweet, click the film icon on your design, select the "Draft" or "HI-RES" option and then click the disk image when it appears at the top to save the file to your computer desktop.

Upload your MakeSweet animated GIF file to your Web host (if applicable) to the same folder or directory where you keep your other website files. Make a note of the file location (for example, "http://www.yoursite.com/flag.gif").

Bring up the website page to which you want to add the flag in your text editor and position your cursor in the area where you want the graphic to appear. Paste in the code from the FlashVortex.com or Layoutcodez.net site. If using MakeSweet, enter your flag's file URL between the quotation marks of the following image code:

Save your work. Your animated flag now displays on the website page.

×