M3 - Managing File Size

M3 - Managing File Size

When it comes to file size, quality can be a limiting factor in animation. This is because the more dtail you put in and the more complex the animation the more data is needed.There are however methods to reduce file size and keep quality.

One example is Frame disposal - Frame Disposol is when after each frame in an animation the previous frame diapaears. This means you don't see the previous frame while the current one is playiung and leaves you with a more seemless animation. On most current animation software this is done auomaically, for example Flash, but on some software you have to do this manually. Either way Frame disposal is a big advantage to have as then there is less on the screen at once so the file size is smaller. A disadvantage however is if you don't know how to use it properly then you could accidently delete some of your animation.

There are four main types of Frame Disposal:

None: This is mainly used when you are changing one transparent frame into something else. As there is no need to dispose of the previous frame you don't need to delete it and can just lay the next frame over it without any problems.

Don't remove: This is basically the same as None but this time it is for a reason. When choosing this the frame you are on isn't removed and the next frame will just be layed ontop. This means that, if the frame has a transparent background, you will still be able to see the previous frame. One reason to use this would be because none of the frames are transparent, so you can't see the previous frames, and you don't care about file size, as that will be greatly increased.

Background: When you choose this method any animation on screen is still removed like it would be in normal frame disposal. However if the next frame has any tranparency you will still be able to see the background from the previous frame. This works well if you want the same background throughout but don't want to continuously copy and paset it. Then you can just work on the foreground.

Previous: You can choose this function if you want to repeat a previous frame in your animation. This is done by disposing of the current frame, as it normally would, then reverting to the last "don't remove". This would still mean if the next frame isn't transparent you wouldn't be able to see the previous frame though.

      With Frame Disposal you end up with a seemless animation with the previous frame removed:

 

Without Frame Disposal you just end up with a alot of different images ontop of each other: 

Another method to reduce file size is auto-crop. Auto-crop is a peice of software htat crops the screen around your images in order to fit them all in perfectly. This means that If you have a small animation but it is in a large background then it dan cut it so you only have the screen size you need. This is especially helpful when you have images panning in and out of the screen as if it is too big then the images will just appear on screen then pan instead of looking realistic. It also works well because with less background comes less to loud so you get a better quality with less file size. However as with Frame Disposal if you don't know how to use it properly you could end up either with the screen being too big or too small. This is due to the fact is the layers are transparent then it doesn't take them into account so you could lose the animation size when you need it.

Change in size with auto-crop:

There are also different aspects of the animation you can change in order to decrease the file size.      

Ø  Number of colours

The number of colours can affect file size because the less colours ytou used the less they need to render. This is why you can see alot of black and white animations online because the file size is significantly reduced.

Ø  Vector or bitmap graphics

Depending on what you plan on doing with the images you could be better off with either format. Bitmap files have large files size but have good realistic quality - This is because your computer loads every single pixel. The only problem with these files is you cannot edit or re-size them without losing quality. Vectors on the other hand are small, and can be edited and re-sized easily, but do not look realistic. This gives the images a cartoon like property so isn't generally used in professional work.

Ø  Physical Size of the animated image

Like I explained in Auto-crop the actual size of the animation can be a big factor in file size. This is because even if you don't use the extra space the extra pixels still need to be rendered so data is still taken up.

Ø  Compression method used

There are a number of compression methods you can use to reduce your file size. When using flash this can be as simple as exporting it as an SWF which significantly reduces file size. Otherwise you can zip the file using programs like winrar in order to further reduce the file size for later use when you unzip it.

Ø  Background transparency

If the background is transparent then when downloading there is less to render. This is because a white background still needs to be rendered as white, where as if it is transparent there are no pixels to load.

Ø  Whether sound is represented

If there is sound in an animation this creates a better quality as it adds more detail and means you can give a better insight into what is being shown. This is especially helpful in advertising as they can use less text and just have it narrated to save space and time. Unfortunately though this will increase the file size as the animation has to do more.

Ø  The content of the animation

Depending on what you have in your animation can easily change the file size. If you animation includes different tweens or imported images then this can make the file bigger. On the other hand if you use simple frame by frame you can decrease the file size but the quality will be lower.

            Ø  Resolution

If an animation has higher resolution then the file size will be bigger but the quality will also be greatly increased. If you have low resolution however you will have a lower file size but the quality ill be lower. If you have a low resolution however the image will appear pixelated and will look like a a zoomed in bitmap.

P5 - Animating for the Web

P5 - Animating for the Web

Rollover Buttons
A Rollover is when you take two images and fit them into the space of one. This can be done on websites as simple Rollovers in order to turn one image into another when the mouse scrolls over this. They are also known to be used in more complex websites too, using the rollover tool to fit in a slide show or SWF video without it taking up the whole page. This is a big advantage for larger companies as they can fit much more information about their products on a page.

One of the disadvantages is the extra javascript this creates. The more Rollover buttons or other features on a website the longer it will take to load. One alternative is you can create a separate page for the images you want to convey and hyperlink them - this creates less to load at once and means if the user doesn't want to view the image they don't have to wait for an image they're not going to use. This option is chosen by most companies who sells products as, where they have so many products, it is easier and more user friendly to just create a different pages for each one with the same template.

An example of a Rollover can be found below:
The code for this Rollover is as follows:

<script language="javascript">

        function MouseRollover(MyImage) {

        MyImage.src = " button2.png";

    }

        function MouseOut(MyImage) {

        MyImage.src = " button1.png";

    }

</script>

<br />

<div align="center">

<!--The rollover image displays here.-->

<img border="0" onmouseout="MouseOut(this)" onmouseover="MouseRollover(this)" src=" button1.png" />

</div>

E-Cards/ Email Attachments

E-cards are a lot like postcards except they are created and sent using digital media. This means that someone can create and personalise a card for the reader like they would usually and email it straight to the recipient. This is a cost free version of posting a card as well as taking out the time frame in which it would have taken to post it.

Another Advantage of E-cards over conventional greetings cards is you can do more with them than simple pen and paper. By doing it all digital you can also choose to upload sound or video to your card making it more unique and special.

A disadvantage however is if you create an E-card using a website or third party based program. This is because, if you go through a third party E-Card creator, you are giving them access to both yours and the recipients email address. This means that the company can take advantage of this and send you emails. This can be especially dangerous as where the recipient didn't "opt in" to this, if they receive spam, both the sender and the third party can be held responsible.

There are many types of E-cards:
These can range from simple Holiday greetings:

To more sarcastic and Funny cards:
 

To E-Cards you can add to manipulate as you wish:

An Example of an E-Card site is: happybirthdaytoyou.com
http://www.happybirthdaytoyou.com/index.php?source=msnuk&kw=ecards&msn=yes
You people can use to send singing birthday cards to their friends and family. Most E-Cards such as these are sent as E-mail attachments. This is when you choose to add an image or file to send to whom you want to receive it. This is easier than normal mail as you can choose to send it to someones personal email where you know they will receive it, and then open it with your E-card inside.

Output Devices

There are a large variety of output devices that animations can be be viewed on. This can range from large Cinema sized screens, used for public displays, to small screens found on a smart phone. This can cause constraints on animators because this large variation in size can cause resolution problems.

Also Because of the different kinds of screens available, like Tablets and PC monitors, there is no exact size an animation can be. For Some Devices you can have a perfect fit but for others this will leave an outline or gap between the animation and the screen. This also means that depending on the device some formats will not be able to be viewed. For example apple do not let you view flash SWF files.

Downloading the file is also a problem as if you create a large and complex animation then depending on the device it can take too long depending on download speed and processing power. This can cause problems on devices like phones as the download speed can vary anyway let alone if the file is over sized. This can be affected by something large, like the range  and quantity of techniques used, to the simple matter of how many colours are used.

 

Rollover Button Example

Creating a Rollerover image: Here is Test Button 1

Here is Test Button 2

Now Lets Try a Rollover