Animation File Formats and Management Techniques
Shana-Rochelle Gravillis
Advantages and Limatations of animated GIFs Various File Formats used in Animation File Format
What is it?
Shockwave and Flash ( .swf )
SWF stands for ‘small web file’. This type of file was initially created as a file extension for flash based vector graphics and simple animations. This file format is used in the following programs: • Shockwave and Adobe Flash Although you can use Shockwave and Adobe Flash to create this type of file, it should be noted that you can only edit this file format in Adobe Flash
MPEG – 4 Part 14 Moving Picture Experts Group ( .mp4 )
An mp4 refers to a file format which allows a combination of audio, video, text and still images to be held in a single file. It also allows users to create advanced content such as 3D graphics, menus and user interactivity to create animation files.
Windows Media Video ( .wmv )
A wmv file format refers to an extension of Windows Movie Maker which allows users to create an animation sequencing using an increased frame rate of 3fps for example.
Animation: File Formats and Management Techniques
Graphics Interchange ( .GIF) Animated
An animated GIF refers to file format which uses graphic images to create an animation sequence. Animated GIFs loop endlessly when placed on a website. They are mainly used for websites and banners however they can be used for animation purposes.
Advantages and Disadvantages of Animated GIFs Advantages They are simple to use and easy to make They don’t require you to install plug-ins for you to be able to view your animated GIFs – compared to flash animations where you are required to install specific plug-ins
Disadvantages Animated GIFs often have a pixelated appearance which reduces the overall quality The frame rate on GIFs quite low and using too few frames will result in a jumpy appearance to the animation and not a smooth appearance.
When compressing file sizes your animated GIF doesn’t get distorted and not too much quality is lost Animated GIFs have a reasonably small file size – compared to flash files which often very large
Animation: File Formats and Management Techniques
Software tools availble for Animation Widgets In computing, a web widget refers to a small application with limited functionality which can be installed into and executed within a web page. Widgets have the role of a temporary application – it just resides a portion of a webpage and fetches information from other websites and display it in a new destination. For example see figure 4 Figure 4
The above image is an example of a widget from sound cloud which can be embedded into a blog for example. Widgets can be considered as downloadable applications, which have the appearance of a traditional app; however they are executed using JavaScript, HTML and CSS.
Layers
Figure 4.1
Layers refer to the various levels in which an object/ image is placed. Top layers block the sight of the bottom layers as the layers begin to stack up.
Figure 4.1 shows an example of how objects are placed as layers.
Animation: File Formats and Management Techniques
Frames A frame refers to the combination the combination of an image to be displayed and the time when it should be displayed. Each frame is displayed on the screen until next frame overwrites it.
Controls Controls refer to the tools availbe in animation programs such as flash. They can usaully be found on the right hand side of the program window.
Animation: File Formats and Management Techniques
Tweening Tweening refers to the creating of movement or morphing; The tween its self has properties which can be altered. For example see figure 4.2 Figure 4.2
Figure 4.2 illustrates an example of how a tween is used to transform a square into a circle.
Buttons Buttons can be used to control an animation sequence. For example the play button allows for the animation to beginning. Other buttons include the ‘stop’ button and ‘pause’ button to name a few.
Libraries Libraries refer to symbols, tweens and other assests which are stored in libaries within an animation software - this enables them to be reused.
Integrated Media This refers to the embedding of ofther media for example images and sound into an animation. Embeding other media forms into an animation can prove very effective in the long run.
Animation: File Formats and Management Techniques
Animations for the Web Video and Animation Files (e.g. AVI and SWF Files) Video animation can affect the speed of the computer, through a website and video files which are embedded onto the computer system. When a video is uploaded through the internet for a third party user to view the video file usually has to be downloaded. Depending on the size of the file this will either be a fast or slow process. In other situations the video can also be streamed instead.
Factors which should be considered when creating animation for a website include: animated rollovers, email attachments and output devices eg mobile phone. When producing an animation for a website, file size is not the only factor which should be considered. Animation is used to enhance the content of the site – for example, menu buttons or logos. In addition a house style also has to be considered as the animation usually has to blend in with the content of the site.
Animated Rollovers Figure 5
Animated rollovers are buttons which perform a certain action when a specific event is triggered. For example see figure 5. Animated rollers usually have three different layers or states – they are normal, hover and active.
Figure 5 shows an example of how states are used/ created to create animated rollovers.
Animation: File Formats and Management Techniques
Email Attachments and E - Cards Animations are mainly popular for sending in emails. These animations are very popular in websites such as Facebook. Due to the busy nature of day to day life people don’t usually have time to send a long winded email so instead they send e-cards an example of this can be found in bit-strips. See figure 5.1. Figure 5.1
E-cards refer to digital cards which are sent via email – this form of emailing replaces traditional paper based cards. E-cards are generally animated and often have embedded in the file as well. E-cards are often available on sites such as https://www.justwink.com/ - see figure 5.2 Figure 5.2
Animation: File Formats and Management Techniques
E-cards are usually free however, some sites may only offer a limited range of free customisable cards and have a range of cards which must be paid for. Ecard sites such as ‘JustWink’ allow the user/ consumer to customise parts of the card for example see figure 5.3. Figure 5.3
Output Devices When creating animation, factors such as the devices which animation can be viewed on should be considered for example – some animations are specifically designed for computers and mobile devices.
Animation: File Formats and Management Techniques
Comparing Animation Formats Within animation there are two animation formats which are commonly used in created animation sequences. They are animated flash files and animated gifs. Flash files are usually smaller in size compared to animated GIFs, as they don’t store all images onto as a single frame, instead flash files use a combination to different frames; which refers to the combination an image to be displayed and the time when it should be displayed. Each frame is displayed on the screen until next frame overwrites it. Similarly flash files use vector images which saves its curves in mathematical equations – which explains it’s small file size. In addition vector files maintain their clarity which resized. In contrast bitmap/ raster images save pixels individually along with location, colours and other details. Which explains why animated GIFs are larger in file size. When exporting a series of images to form an animated movie clip it should be noted that animated gifs cannot be exported with sound whereas animated flash files can be. However this sound can only be heard if a browser contains the appropriate plugin/ player to support flash file, this is a problem which is avoided with animated gifs as they are compatible with all web browsers therefore not needing a specific plugin to be installed. On the other hand unlike animated gifs, flash files allows for interactivity on certain file formats for example, when creating an electronic portfolio flash allows for the user to increase the range of graphics which are used introduce, animations, videos and sound to an electronic portfolio. Being able to perform task such as this using animated gifs makes flash increasingly complex compared to gifs which contain a simple image cycle. However although animated gifs are simple they are easier to embed into a website as transparency is easy to achieve without having to compress files like you would have to with an animated gif, which often results in the loss of quality as when compressing files information can be lost, such as the loss of certain colours. Due to flash files having a limitless colour pallet in compressing files the quality of those colours can appear dull when compressing them. In contrast animated gifs only have a colour pallet of 256 colours. Animation: File Formats and Management Techniques
File Size Enhancing animation files is a complex process which involves detailed understanding of file types and compression methods. Two techniques which can be used to enhance animation files are file disposal and auto-crop.
Image Quality Frame Disposal refers to the discarding of current frames before the next frame is displayed. When working with animation files disposal methods include background transparency which specifies whether the current frame will be visible through the transparent areas of the next frame. Background transparency reduces the size of a file format by deleting current frames before the next one is displayed – as a result making it so that the frames within your animation are kept to a minimum therefore reducing the file size. Moreover less pixels are used in animation which results in less frames overlapping. Frame disposal can affect the quality of an image by deleting a frame which may be important within your animation – it should be noted that this can result in your animation being out of sync. The auto-crop tool is a tool used to cut an image to make it smaller. The reason for doing this is to make an image an appropriate size so that it is fit for purpose. This helps to reduce the file size of an image so that only the section of an image which you want is showing. Auto crop affects the quality of an image by cutting out parts of the animation which the user intended to keep.
Animation: File Formats and Management Techniques