Tuesday, 19 May 2015
P3: Assignment 3 - Section A; Uses of Animation
Animations are used in various areas, they can be used on the purely the internet for entertainment, TV (for different reasoning’s), or even in the class room. I will be going over each area where animation is used, then explain the good and the bad aspects of it (the place it is used, or a main animation type used in that area).
TV Commercials (Advertising)
Products are usually over emphasized in commercials, and to do this animation is sometimes used, for example in the Citroen C4 Transformer advert the Citroen transforms into a Transformer, this is impossible in real life but has been used as a marketing strategy to sell the car.
Although animation can be good in advertising, it can sometimes take seriousness from the advert, animation is mostly used to exaggerate the product, and make it funny. But if you are going to make an advert for funeral service it may not be entirely appropriate. Apart from being slightly inappropriate for some advertisements, the main drawback is that it could be expensive to produce, especially for TV commercials.
Animation for advertising is not just used for TV Commercials, it is also used on the web, this is a very useful way of advertising, since for it to load easily, it needs to be a small file, meaning it needs to be simpler. Although it needs to be simpler than other animations, it still can be very impressive and effective (for a small amount of work, compared to the others).
Trailers (Game Adverts)
3D modelling is used to animate characters and generate (render) terrain/architecture, this is normally used in game trailers due to the game not being complete to be able to play it smoothly for a video, and also you can use 3rd person.
Another thing to note is they can add more dramatic scenes into the trailer that might not be possible in game, when they do this you can see on the bottom of the trailer something like “not actual gameplay footage”.
This is a very good way to advertise a product before it’s ready, but it can be subject to change, or presents an inaccurate display of the product (although it does show it on the bottom of the advert). But since this may not use the in game engine to render it, it might be a bit more expensive, since you would possibly need someone with experience in another software package.
Movies (Entertainment)
CGI is popular type of Animation used in movies, it is normally used to make the movie futuristic or introduce alien characters into it. This is not the only type of Animation used in movies, another example is the Wallace and Gromit which uses stop motion, this is rarely used though, since stop motion is a pain staking process and has many dis-advantages.
Nearly any type of animation in movies will be pain staking, since a movie usually takes place over an hour or two, and depending on the type it can cost a lot of money. With CGI it’s very expensive to create, and requires people with expert knowledge of CGI, but it is normally cheaper than hiring actors, and you can create more futuristic scenes.
Shows such as Wallace and Gromit use a type of stop motion, this is a lot less expensive than using CGI for a show/movie, but as stated above the only drawback is that it is a pain staking process.
Educational
Animation is sometimes used in schools to teach children about an area of a subject, this can be useful because it can be used to teach them about something that is not physically possibly to see. This can be used to see how atoms work in Science, how tectonic plates work in Geography, of even possibly graphs in Maths.
Depending on what type of animation is used there can be different drawbacks, but the main method used to get across an idea (how atoms work, as an example) is using 3D rendering. This is the best method since it is the most visually representative than other methods, but can be slightly expensive to produce.
Although it might be expensive, it is not similar to movie or film, where only one person would benefit from seeing it, so companies/people will care less about cost since it is educational.
Informative
If you watch the news, you have probably seen the weather section, when you see a person in front of a map of the UK, where it is moving and updating the weather whiles they explain it, that is a type of Animation (Chroma key).
This can be a very useful way to present information, and depending on which type of animation is used it cannot be as expensive as other types of animation, if Chroma Key is used it will cost a very minimal amount, but you’ll still be able to present a useful animations.
Simulation
This is used to recreate something in real life, but on a computer, to achieve an accurate simulation an advanced engine is needed to simulate real life variables (gravity, lighting, etc.), or they need to be recreated manually.
This will take a significant amount of effort to make, since more is needed to be considered when creating the animation, for it to be an accurate simulation you need to make it as realistic as possible. Also to render this animation a more powerful machine will be needed, since it will need higher specifications to calculate then render real life variables (lighting and gravity), and possibly a high poly count.
Creative Arts
This is a form of animation used just to express an opinion, test the limits of yourself, or even the software package its self. It is normally seen in music videos sometimes in the form of CGI, but there are some that use other types of animation (and multiple at once), such as cell animation (for example the bizarre music video “ME!ME!ME!”).
Creative arts can span many areas different areas of animation, but usually they all take a significant amount of time to produce, since the creator will want to express their option to the fullest. Since it can span many different areas, the cost can dramatically vary, it can cost a very small amount (but a large amount of time, and effort), or cost a significant amount (which can still take a large amount of time, and effort, but usually is a bit less pain staking).
TV Commercials (Advertising)
Products are usually over emphasized in commercials, and to do this animation is sometimes used, for example in the Citroen C4 Transformer advert the Citroen transforms into a Transformer, this is impossible in real life but has been used as a marketing strategy to sell the car.
Although animation can be good in advertising, it can sometimes take seriousness from the advert, animation is mostly used to exaggerate the product, and make it funny. But if you are going to make an advert for funeral service it may not be entirely appropriate. Apart from being slightly inappropriate for some advertisements, the main drawback is that it could be expensive to produce, especially for TV commercials.
Animation for advertising is not just used for TV Commercials, it is also used on the web, this is a very useful way of advertising, since for it to load easily, it needs to be a small file, meaning it needs to be simpler. Although it needs to be simpler than other animations, it still can be very impressive and effective (for a small amount of work, compared to the others).
Trailers (Game Adverts)
3D modelling is used to animate characters and generate (render) terrain/architecture, this is normally used in game trailers due to the game not being complete to be able to play it smoothly for a video, and also you can use 3rd person.
Another thing to note is they can add more dramatic scenes into the trailer that might not be possible in game, when they do this you can see on the bottom of the trailer something like “not actual gameplay footage”.
This is a very good way to advertise a product before it’s ready, but it can be subject to change, or presents an inaccurate display of the product (although it does show it on the bottom of the advert). But since this may not use the in game engine to render it, it might be a bit more expensive, since you would possibly need someone with experience in another software package.
Movies (Entertainment)
CGI is popular type of Animation used in movies, it is normally used to make the movie futuristic or introduce alien characters into it. This is not the only type of Animation used in movies, another example is the Wallace and Gromit which uses stop motion, this is rarely used though, since stop motion is a pain staking process and has many dis-advantages.
Nearly any type of animation in movies will be pain staking, since a movie usually takes place over an hour or two, and depending on the type it can cost a lot of money. With CGI it’s very expensive to create, and requires people with expert knowledge of CGI, but it is normally cheaper than hiring actors, and you can create more futuristic scenes.
Shows such as Wallace and Gromit use a type of stop motion, this is a lot less expensive than using CGI for a show/movie, but as stated above the only drawback is that it is a pain staking process.
Educational
Animation is sometimes used in schools to teach children about an area of a subject, this can be useful because it can be used to teach them about something that is not physically possibly to see. This can be used to see how atoms work in Science, how tectonic plates work in Geography, of even possibly graphs in Maths.
Depending on what type of animation is used there can be different drawbacks, but the main method used to get across an idea (how atoms work, as an example) is using 3D rendering. This is the best method since it is the most visually representative than other methods, but can be slightly expensive to produce.
Although it might be expensive, it is not similar to movie or film, where only one person would benefit from seeing it, so companies/people will care less about cost since it is educational.
Informative
If you watch the news, you have probably seen the weather section, when you see a person in front of a map of the UK, where it is moving and updating the weather whiles they explain it, that is a type of Animation (Chroma key).
This can be a very useful way to present information, and depending on which type of animation is used it cannot be as expensive as other types of animation, if Chroma Key is used it will cost a very minimal amount, but you’ll still be able to present a useful animations.
Simulation
This is used to recreate something in real life, but on a computer, to achieve an accurate simulation an advanced engine is needed to simulate real life variables (gravity, lighting, etc.), or they need to be recreated manually.
This will take a significant amount of effort to make, since more is needed to be considered when creating the animation, for it to be an accurate simulation you need to make it as realistic as possible. Also to render this animation a more powerful machine will be needed, since it will need higher specifications to calculate then render real life variables (lighting and gravity), and possibly a high poly count.
Creative Arts
This is a form of animation used just to express an opinion, test the limits of yourself, or even the software package its self. It is normally seen in music videos sometimes in the form of CGI, but there are some that use other types of animation (and multiple at once), such as cell animation (for example the bizarre music video “ME!ME!ME!”).
Creative arts can span many areas different areas of animation, but usually they all take a significant amount of time to produce, since the creator will want to express their option to the fullest. Since it can span many different areas, the cost can dramatically vary, it can cost a very small amount (but a large amount of time, and effort), or cost a significant amount (which can still take a large amount of time, and effort, but usually is a bit less pain staking).
D2: Assignment 2 - Section E; Tool Evaluation
|
Animation Tool /
Technique:
|
(Purpose / What used for)
|
Eval’
|
|
Frames
|
These are used to extend a previous
keyframes time on the timeline.
Without layers it would be extremely hard to animate, since you would
have to use key frames, which require manual animating (since you cannot use
tweens).
|
9
|
|
Key Frames
|
This is used to
hold an object, this is different from
a frame since a frame just extends key frame.
Without key frames it would be impossible for animation in Flash,
since any object needs to be stored on a key frame.
|
10
|
|
Layers
|
These are used for organisation, they usually contain
one object, also when one layer is above another, if the is something
overlapping, only the overlapping part on the top layer will be shown (unless
it’s transparent).
You can also use them for masking, which works in reverse to
Photoshop, being whatever the mask holds, is shown (and not blocked out like
in Photoshop).
Layers can also be stored in groups, which are folders that are used
for further organisational purposes.
Layers also have 3 other options which are very useful, the first one
will stop it being visible on the scene whist animating. The second locking
the frame, stopping you from accidently selecting it, and making changes.
Thirdly shows the wireframe of the graphic (an outline).
|
7
|
|
Buttons
|
A button is a type of symbol, but with this symbol ActionScript can be
added on it. This can allow the user to pause/start the animation, or control
another symbol in the animation.
These can be used for a variety of means, meaning that it is a very
good tool, but I have not yet to find a practical means to use it as of yet.
|
4
|
|
Tweening
|
This is a very
useful feature in Flash, it is used to calculate the difference between two keyframes, there are three types of tweens:
Shape
This only works on shapes (not types of graphics), and requires them to be transformed for you to be able to apply a shape tween, this will warp the shape from the first keyframe to the last.
Motion
If you are moving any object the best way to do this is with a motion tween, it will automatically calculate how it has to move from point A to B.
Classic
This works similar to the Motion tween, where it is normally used to move objects, but with a classic tween you would have to create key frames manually then apply a Classic tween when with a Motion tween they are created if you move the shape between point A and B.
Also if you apply a classic tween to a graphic you
have more options, such as Alpha (transparency), and you can also transform a
graphic in a Classic tween (1% to 150% then 100%).
This is the feature/tool I like the most (which is
not manditory, like using frames and key frames). This is due to the fact it
is very customisable and editable, unlike using key frames which takes longer
to create, and takes longer o modify if it needs changes.
|
8
|
|
Symbols
|
If you create an object (or text), you can make it a symbol, there are
three types of symbols; movie, button and
graphic.
With any type of symbol you create it is
automatically added to the library so it can be used at a further date, this
will also prevent you from making any adjustments to the symbol on the scene
(but you are able to transform it, and move its positing).
If you want to make any adjustments you will need to enter the symbol from the stage (entering it), in there you will have its own timeline which will
correspond to the scenes timeline (unless it’s a movie symbol).
With a movie symbol any animations made will not be
viewable unless rendered, his can be annoying and seems like there’s no
point, but with a movie there are more effects that can be added, and it
works independent from the frames on the scene.
A graphic does not need to be rendered to view its changes, it works
along the scenes timeline (where the graphics starts
with the scenes keyframe, is where the graphics independent keyframe starts).
Symbols are extremely useful since it allows more animation techniques
to be applied, and applied only to certain parts of the symbol (graphic).
|
7
|
|
Library
|
This is where
assets are stored for multiple uses in
an animation, and where symbols are stored when created. It can also contain
other types of media such as audio (rather than just graphics).
The library is not essential though, especially if you do not plan on
using a object more than once, but it is extremely useful when you do.
|
7
|
|
Multimedia
|
This is any type of media, being; image, audio and movies. These are
stored in the library to be used later.
|
6
|
|
Drawing
Tools
|
These are used to create stuff (objects, shapes,
text, then symbols) on the scene, you can use pre-set shapes such as the oval
or rectangle, but you do also have to option for free hand draw an object
(with a path, which is more smooth, or with the pencil).
These will be the main tools you would use to create objects to
animate (unless you create graphics is other software packages such as
Photoshop), making these nearly essential.
|
7
|
|
Scenes
|
These are used to set up different stages in a project, it is where your objects are placed to create the animation.
These can be very useful to change scenes, but when creating my
animation I used another method to change scenes without using scenes (using
a white rectangle and changing its opacity). Because of this I do not think
it is entirely essential, but I do understand why it can be very useful.
|
5
|
|
Pre-Loader
|
These are loaded before the main animation/program is loaded, these
are usually far lower in file size, and is prioritized.
These are not essential in the slightest, but they are a nice feature
to use, and makes it look more professional.
|
3
|
M3: Assignment 2 - Section D; Reduce Animations File Size
Resolution & File Size
When you create an animation, you need to consider how large the animations canvas size is. The larger the canvas size is a factor that will determine how large the file size is, and this will in turn determine how long it takes to load.
When you produce an animation the default canvas size (resolution, which is measured in pixels) 550x400 in Adobe Flash. This would be an appropriate size for an advert on a website, but any larger would be redundant, and not be shown unless the user viewed the animation outside the website. You would usually know where you would like your animation to be (on the web), so it is simple to figure out what to set the canvas size. this can normally be achieved by inspecting the “element” of the website you would like it to be.
Also the DPI (dots per inch) of the animation itself is key, this will vastly alter the file size, especially if you have a larger animation and more frames. The recommended DPI is 72; anything over the resolution would not be seen on the web, as a note 300 is the recommended DPI for printing.
Another factor that will determine the file size is the FPS (frames per second), the human eye only needs 12 FPS to notice Animation. But this will not be smooth enogh, it is recommended to keep it at least at 25 FPS (if not 30 FPS).
But you might want to set your animations FPS to 60 which will make it smoother. I would not recommend doing this, since this will increase the file size (or could make your animation too quick, depending on how you do it) and it will not be entirely noticeable.
Although FPS is a factor, if certain compression techniques are used this factor can severely be reduced. A tween in an SWF will be similar to how vector images are used to reduce the file size, and use calculations to draw the images (changes for tweens) instead of individual pixels.
Sound
It’s not just images that can be stored in different formats, and implement different ways to reduce their file size. The MP3 audio format is the most used lossy audio codec, although it does have a few issues with it such as patent issues. WMA (Windows Media Audio) is Microsoft lossy codec, it was made to avoid issues with licensing which exists in the MP3 format. But AAC (Advanced Audio Coding) superseded it, it is the standard format used in MPEG4 encoded videos, it’s also widely used since it has excellent licensing (DRM and none is needed to stream it).
Sound files will also vary in size depending on what format they use, MP£ is commonly used for its excellent compression, but it also depends on how many channels there are. A usual audio file will contain two channels, left and right (stereo), but can have only one (mono), or 5+ (surround sound).
File Format & Sound
To examine how the file format contributes to the size of the file, and only this variable, I will export the animation I did for P7 in different formats (and convert them for more results than the default option in Adobe Flash).
As we can see AVI creates a very large file, being hundreds of times larger than the other formats, whist the SWF is the smallest (being under 10 times the size of a MP4, and over 13 under a GIF).
It is interesting to notice that the GIF is bigger than the MP4 though, since a GIF cannot hold sound, so you would assume it would be smaller, but this is not the case. This is very likely to the GIF holding each frame as an image, and having little to no compression in-between frames (inter-frame compression).
Compression
Images can be quantised, which can lead to the lossless (BMP or PNG files usually are) or lossy parts of the file.
Lossless compression is when the file is compressed then when it is uncompressed, it is exactly the same, a simple lossless compression technique is AZ compression. AZ normally ia used in text, it uses pointers to refer back to repeated keywords, and these pointers are stored in two 8 bit numbers (but can be partitioned). There is one referring back to where the start of the repeated word starts, then one where it ends. This can save a considerate amount of space, for example you could repeat a 8 character word (8 bytes), but only use 2 bytes to repeat it (compressed by 400%).
Lossy compression is usually the form of compression used in images (which can be used in animation). This means when the image is uncompressed after the compression it is not exactly the same, but to the human eye it is barely noticeable, and it allows for far more compression.
Lossy compression is used in the YCbCr colour mode, this is achieved by down sampling, usually it is downsampled by a factor of two (meaning 400% compression, being that you’d have 1 luminance pixel instead of 4 (2x2)). You can do this by a much higher factor, such as 10, and it still won’t be noticeable to the human eye, this works due to the human eye noticing grayscale more than luminance.
There are also tools you can use to compress files, two popular software packages that “zip” up a file (but there are other formats such as rar) are Winzip and Winrar.
Colour Depth
A pixel in an image is stored in binary components following a colour mode (as mentioned above). But these components for each of the colours can vary in size, usually they are stored in 8 bits (meaning 256 shades of a colour, and over 16 million combinations with a 3 channel pixel).
If you create an animation with very simple colours (such as black and pure red, without any gradients), you could lower the colour depth, this will decrease the file size by changing #FF0000 (red in hexadecimal, with 8 bits red reserve for each channel) to #F00 (4 bits red reserve for each channel), halving the amount of space used by colours.
If you did have any gradients in your animation or a smooth transition of opacity when you have used the brush, you would not try and lower the colour depth to save size. This is due to a gradient needing more shades in-between the colours to ensure the transition is smooth, if you do lower the colour depth it will lower the quality of the animation/image.
When you create an animation, you need to consider how large the animations canvas size is. The larger the canvas size is a factor that will determine how large the file size is, and this will in turn determine how long it takes to load.
When you produce an animation the default canvas size (resolution, which is measured in pixels) 550x400 in Adobe Flash. This would be an appropriate size for an advert on a website, but any larger would be redundant, and not be shown unless the user viewed the animation outside the website. You would usually know where you would like your animation to be (on the web), so it is simple to figure out what to set the canvas size. this can normally be achieved by inspecting the “element” of the website you would like it to be.
Also the DPI (dots per inch) of the animation itself is key, this will vastly alter the file size, especially if you have a larger animation and more frames. The recommended DPI is 72; anything over the resolution would not be seen on the web, as a note 300 is the recommended DPI for printing.
Another factor that will determine the file size is the FPS (frames per second), the human eye only needs 12 FPS to notice Animation. But this will not be smooth enogh, it is recommended to keep it at least at 25 FPS (if not 30 FPS).
But you might want to set your animations FPS to 60 which will make it smoother. I would not recommend doing this, since this will increase the file size (or could make your animation too quick, depending on how you do it) and it will not be entirely noticeable.
Although FPS is a factor, if certain compression techniques are used this factor can severely be reduced. A tween in an SWF will be similar to how vector images are used to reduce the file size, and use calculations to draw the images (changes for tweens) instead of individual pixels.
Sound
It’s not just images that can be stored in different formats, and implement different ways to reduce their file size. The MP3 audio format is the most used lossy audio codec, although it does have a few issues with it such as patent issues. WMA (Windows Media Audio) is Microsoft lossy codec, it was made to avoid issues with licensing which exists in the MP3 format. But AAC (Advanced Audio Coding) superseded it, it is the standard format used in MPEG4 encoded videos, it’s also widely used since it has excellent licensing (DRM and none is needed to stream it).
Sound files will also vary in size depending on what format they use, MP£ is commonly used for its excellent compression, but it also depends on how many channels there are. A usual audio file will contain two channels, left and right (stereo), but can have only one (mono), or 5+ (surround sound).
File Format & Sound
To examine how the file format contributes to the size of the file, and only this variable, I will export the animation I did for P7 in different formats (and convert them for more results than the default option in Adobe Flash).
|
Format
|
Size (With Sound)
|
Size (Without Sound)
|
|
SWF
|
638 KBs
|
517 KBs
|
|
AVI
|
3+ GBs
|
|
|
GIF
|
|
8,835 KBs
|
|
MP4
|
6,591 KBs
|
|
As we can see AVI creates a very large file, being hundreds of times larger than the other formats, whist the SWF is the smallest (being under 10 times the size of a MP4, and over 13 under a GIF).
It is interesting to notice that the GIF is bigger than the MP4 though, since a GIF cannot hold sound, so you would assume it would be smaller, but this is not the case. This is very likely to the GIF holding each frame as an image, and having little to no compression in-between frames (inter-frame compression).
Compression
Images can be quantised, which can lead to the lossless (BMP or PNG files usually are) or lossy parts of the file.
Lossless compression is when the file is compressed then when it is uncompressed, it is exactly the same, a simple lossless compression technique is AZ compression. AZ normally ia used in text, it uses pointers to refer back to repeated keywords, and these pointers are stored in two 8 bit numbers (but can be partitioned). There is one referring back to where the start of the repeated word starts, then one where it ends. This can save a considerate amount of space, for example you could repeat a 8 character word (8 bytes), but only use 2 bytes to repeat it (compressed by 400%).
Lossy compression is usually the form of compression used in images (which can be used in animation). This means when the image is uncompressed after the compression it is not exactly the same, but to the human eye it is barely noticeable, and it allows for far more compression.
Lossy compression is used in the YCbCr colour mode, this is achieved by down sampling, usually it is downsampled by a factor of two (meaning 400% compression, being that you’d have 1 luminance pixel instead of 4 (2x2)). You can do this by a much higher factor, such as 10, and it still won’t be noticeable to the human eye, this works due to the human eye noticing grayscale more than luminance.
There are also tools you can use to compress files, two popular software packages that “zip” up a file (but there are other formats such as rar) are Winzip and Winrar.
Colour Depth
A pixel in an image is stored in binary components following a colour mode (as mentioned above). But these components for each of the colours can vary in size, usually they are stored in 8 bits (meaning 256 shades of a colour, and over 16 million combinations with a 3 channel pixel).
If you create an animation with very simple colours (such as black and pure red, without any gradients), you could lower the colour depth, this will decrease the file size by changing #FF0000 (red in hexadecimal, with 8 bits red reserve for each channel) to #F00 (4 bits red reserve for each channel), halving the amount of space used by colours.
If you did have any gradients in your animation or a smooth transition of opacity when you have used the brush, you would not try and lower the colour depth to save size. This is due to a gradient needing more shades in-between the colours to ensure the transition is smooth, if you do lower the colour depth it will lower the quality of the animation/image.
P5: Assignment 2 - Section C; Producing Animations for the Web
When you are creating an animation for the web, there are various aspects to consider to ensure the animation is appropriate and professional.
File
Resolution & File Size
When you create an animation, you need to consider how large the animations canvas size is. The larger the canvas size is a factor that will determine how large the file size is, and this will in turn determine how long it takes to load.
When you produce an animation the default canvas size (resolution, which is measured in pixels) 550x400 in Adobe Flash. This would be an appropriate size for an advert on a website, but any larger would be redundant, and not be shown unless the user viewed the animation outside the website. You would usually know where you would like your animation to be (on the web), so it is simple to figure out what to set the canvas size. this can normally be achieved by inspecting the “element” of the website you would like it to be.
Also the DPI (dots per inch) of the animation itself is key, this will vastly alter the file size, especially if you have a larger animation and more frames. The recommended DPI is 72; anything over the resolution would not be seen on the web, as a note 300 is the recommended DPI for printing.
Another factor that will determine the file size is the FPS (frames per second), the human eye only needs 12 FPS to notice Animation. But this will not be smooth enogh, it is recommended to keep it at least at 25 FPS (if not 30 FPS).
But you might want to set your animations FPS to 60 which will make it smoother. I would not recommend doing this, since this will increase the file size (or could make your animation too quick, depending on how you do it) and it will not be entirely noticeable.
Although FPS is a factor, if certain compression techniques are used this factor can severely be reduced. A tween in an SWF will be similar to how vector images are used to reduce the file size, and use calculations to draw the images (changes for tweens) instead of individual pixels.
Colour Mode
There are two main colour modes, and both could have an extra channel (for example Alpha for transparency, K for Key). These are RGB (Red, Green and Blue) and CMY (Cyan, Manganese and Yellow). When images are printed out, printers usually use CMYK (key being black), but on the web RGB colour mode is commonly used (since it will be viewed on displays which output in RGB mode).
If you save an image in CMYK, it will have 4 channels (which is obvious), but this will increase the size of the file will be increased by a significant amount (since it has to store more). So when producing a graphic (animation) for the web it is recommended to use RGB, this is since it stores the least amount of channels (unless it’s grayscale, or pure B&W) and how monitors display colour.
It is to be noted that colour modes can be converted (by the printer drivers from a RGB image to CYMK when printing), and show the same image (to the human eye). But it’s better to take note of it since it is a part of the file, and if altered incorrectly could increase the file size, or even render an image incorrectly.
YCbCr (luminance, blue-difference chroma and red-difference chroma) is also another colour mode to consider, it is usually only used in broadcasting, but it does have excellent compression.
Colour Depth
A pixel in an image is stored in binary components following a colour mode (as mentioned above). But these components for each of the colours can vary in size, usually they are stored in 8 bits (meaning 256 shades of a colour, and over 16 million combinations with a 3 channel pixel).
If you create an animation with very simple colours (such as black and pure red, without any gradients), you could lower the colour depth, this will decrease the file size by changing #FF0000 (red in hexadecimal, with 8 bits red reserve for each channel) to #F00 (4 bits red reserve for each channel), halving the amount of space used by colours.
If you did have any gradients in your animation or a smooth transition of opacity when you have used the brush, you would not try and lower the colour depth to save size. This is due to a gradient needing more shades in-between the colours to ensure the transition is smooth, if you do lower the colour depth it will lower the quality of the animation/image.
Compression
Images can be quantised, which can lead to the lossless (BMP or PNG files usually are) or lossy parts of the file.
Lossless compression is when the file is compressed then when it is uncompressed, it is exactly the same, a simple lossy compression technique is AZ compression. AZ normally ia used in text, it uses pointers to refer back to repeated keywords, and these pointers are stored in two 8 bit numbers (but can be partitioned). There is one referring back to where the start of the repeated word starts, then one where it ends. This can save a considerate amount of space, for example you could repeat a 8 character word (8 bytes), but only use 2 bytes to repeat it (compressed by 400%).
Lossy compression is usually the form of compression used in images (which can be used in animation). This means when the image is uncompressed after the compression it is not exactly the same, but to the human eye it is barely noticeable, and it allows for far more compression.
Lossy compression is used in the YCbCr colour mode, this is achieved by down sampling, usually it is downsampled by a factor of two (meaning 400% compression, being that you’d have 1 luminance pixel instead of 4 (2x2)). You can do this by a much higher factor, such as 10, and it still won’t be noticeable to the human eye, this works due to the human eye noticing grayscale more than
luminance.
Looping of animation
Depending on where you are using your animation, you might decide to loop it, this usually is effective when there’s a smooth transition from the end too the start.
Looping is usually used for amusement on the web, but can be seen as unprofessional depending on where the animation will be. The things to consider are, is it any type of advertisement (which would usually loop), entertainment (such as animations used on Tumblr) and if it’s strictly professional (not likely to loop).
Loading/Rendering
Upload speed / Page Load Speed
Once you upload your animation to the web, it will take time to load, this is due to it basically being a video (no matter what format you use). The time it takes to load is essential, if it takes too long, views could grow impatient and decide not to view it, but since it’s loading with the site (depending on how it’s done in the HTML), they could choose not to visit your site at all.
Browsers
When you produce an animation, you have different file types you can render it as, PNG is usually recommended, since it is compatible with most browsers, this is due to it being an image, instead of a video. If you export your animation as a SWF, it cannot be loaded on a large quantity of mobile devices (and whatever browser you use), this is due to it needing an add-on to render the unknown format.
Flash Transparency/Special effects
One feature that SWF animations have is transparency, although this is very useful, some browser do not support this, which is why you need to consider this factor when using transparency in SWF animations.
Also SWF animations are not stored the same as GIF animations (so they cannot be read the same), it does not just store images in a sequence, and it uses effects such as tweens to produce an animation. These effects allow the user to easily modify the animation again, instead of having to alter every frame, although this is usually done by calculations, it can increase the file size.
Social Context
Type of Images (culture/social)
Depending on your animation, you might need to first know about the culture, to aid this all cultures have 6 dimensions (Technological, Economic, Political, Institutional (social), Aesthetic-value, and Belief-conceptual).
For example some hand gestures are perfectly acceptable in some countries (okay in the UK/USA, being the thumb and index finger in a circle), whilst in others it could be seen as offensive (Brazil).
If you are going to have women in your animation, depending on where it is viewed it could be seen as male dominance, in large parts of the world it is acceptable for women to wear a bikini, but in Arab counties it will be seen as male dominance, and visa versa.
Also, you will need to know the social context, if your animation is appropriate for where it is posted, for example an adult site would NOT be advertised on the BBC. This is an extreme example, and obvious, but it is still a social issue (would be socially unacceptable) that needs to be considered when publishing your animation (where you would need to do research for, since there are many aspects).
Language
If you are going to use text in your animation, the usual language used is English, but depending on where your animation is going to be, you might want to use another language in the text. Especially since your animation is going to be on the internet, it does not restrict anyone that speaks another language (from another country) from seeing it, and not understanding the text.
You might just use the language that’s popular on that site (which might be English, but it’s good to check), but there are various other methods you could implement. If you are using an SWF animation, you could possibly use ActionScript to change the text depending on which language is set on the website.
Another point is who are you aiming your advert for, if you are aiming it towards children, you will use less complicated words than if it was toward adults. Also it depends on if the animation is professional, it will be unprofessional if you use informal language or slang (such as “U WOT M8”), in a formal/professional animation.
Parental Control
If you were advertising an 18+ game, or an adult site, parental control would be needed, since there could be a possibility that children could see these animated adverts. Although quite a few sites that do primary show content of adult nature do have warnings, not every one of them do have an 18+ warning (or even blocked, by the ISP or parental control software). Some sites do allow the option to state if your post contains adult content, not ever site does, so depending on where it going to be posted it's safer to produce animations with little adult content.
Target Audience
Depending on who your target audience is, you would suit your animation to fit that target audience. It would be seen as very unprofessional if you, for example, use too many colours (and vivid) on an animation for a business. If you were advertising a game (mobile) mainly aimed towards children, then you would use more vivid and bright colours.
The target audience also includes the other areas I have talked about in this “Social Context” section, such as when I explain that you would suit the text (language) in your animation to your desired target audience, and the nature of your animation (type of animation and age appropriateness).
Useful Links
Colourspaces (YCbCr): https://youtu.be/LFXN9PiOGtY
Compression: https://youtu.be/n_uNPbdenRs
LZ 77 Compression: https://youtu.be/goOa3DGezUA
In-depth Social and Culture in Animation: http://cec.vcn.bc.ca/cmp/modules/emp-cul.htm
File
Resolution & File Size
When you create an animation, you need to consider how large the animations canvas size is. The larger the canvas size is a factor that will determine how large the file size is, and this will in turn determine how long it takes to load.
When you produce an animation the default canvas size (resolution, which is measured in pixels) 550x400 in Adobe Flash. This would be an appropriate size for an advert on a website, but any larger would be redundant, and not be shown unless the user viewed the animation outside the website. You would usually know where you would like your animation to be (on the web), so it is simple to figure out what to set the canvas size. this can normally be achieved by inspecting the “element” of the website you would like it to be.
Also the DPI (dots per inch) of the animation itself is key, this will vastly alter the file size, especially if you have a larger animation and more frames. The recommended DPI is 72; anything over the resolution would not be seen on the web, as a note 300 is the recommended DPI for printing.
Another factor that will determine the file size is the FPS (frames per second), the human eye only needs 12 FPS to notice Animation. But this will not be smooth enogh, it is recommended to keep it at least at 25 FPS (if not 30 FPS).
But you might want to set your animations FPS to 60 which will make it smoother. I would not recommend doing this, since this will increase the file size (or could make your animation too quick, depending on how you do it) and it will not be entirely noticeable.
Although FPS is a factor, if certain compression techniques are used this factor can severely be reduced. A tween in an SWF will be similar to how vector images are used to reduce the file size, and use calculations to draw the images (changes for tweens) instead of individual pixels.
Colour Mode
There are two main colour modes, and both could have an extra channel (for example Alpha for transparency, K for Key). These are RGB (Red, Green and Blue) and CMY (Cyan, Manganese and Yellow). When images are printed out, printers usually use CMYK (key being black), but on the web RGB colour mode is commonly used (since it will be viewed on displays which output in RGB mode).
If you save an image in CMYK, it will have 4 channels (which is obvious), but this will increase the size of the file will be increased by a significant amount (since it has to store more). So when producing a graphic (animation) for the web it is recommended to use RGB, this is since it stores the least amount of channels (unless it’s grayscale, or pure B&W) and how monitors display colour.
It is to be noted that colour modes can be converted (by the printer drivers from a RGB image to CYMK when printing), and show the same image (to the human eye). But it’s better to take note of it since it is a part of the file, and if altered incorrectly could increase the file size, or even render an image incorrectly.
YCbCr (luminance, blue-difference chroma and red-difference chroma) is also another colour mode to consider, it is usually only used in broadcasting, but it does have excellent compression.
Colour Depth
A pixel in an image is stored in binary components following a colour mode (as mentioned above). But these components for each of the colours can vary in size, usually they are stored in 8 bits (meaning 256 shades of a colour, and over 16 million combinations with a 3 channel pixel).
If you create an animation with very simple colours (such as black and pure red, without any gradients), you could lower the colour depth, this will decrease the file size by changing #FF0000 (red in hexadecimal, with 8 bits red reserve for each channel) to #F00 (4 bits red reserve for each channel), halving the amount of space used by colours.
If you did have any gradients in your animation or a smooth transition of opacity when you have used the brush, you would not try and lower the colour depth to save size. This is due to a gradient needing more shades in-between the colours to ensure the transition is smooth, if you do lower the colour depth it will lower the quality of the animation/image.
Compression
Images can be quantised, which can lead to the lossless (BMP or PNG files usually are) or lossy parts of the file.
Lossless compression is when the file is compressed then when it is uncompressed, it is exactly the same, a simple lossy compression technique is AZ compression. AZ normally ia used in text, it uses pointers to refer back to repeated keywords, and these pointers are stored in two 8 bit numbers (but can be partitioned). There is one referring back to where the start of the repeated word starts, then one where it ends. This can save a considerate amount of space, for example you could repeat a 8 character word (8 bytes), but only use 2 bytes to repeat it (compressed by 400%).
Lossy compression is usually the form of compression used in images (which can be used in animation). This means when the image is uncompressed after the compression it is not exactly the same, but to the human eye it is barely noticeable, and it allows for far more compression.
Lossy compression is used in the YCbCr colour mode, this is achieved by down sampling, usually it is downsampled by a factor of two (meaning 400% compression, being that you’d have 1 luminance pixel instead of 4 (2x2)). You can do this by a much higher factor, such as 10, and it still won’t be noticeable to the human eye, this works due to the human eye noticing grayscale more than
luminance.
Looping of animation
Depending on where you are using your animation, you might decide to loop it, this usually is effective when there’s a smooth transition from the end too the start.
Looping is usually used for amusement on the web, but can be seen as unprofessional depending on where the animation will be. The things to consider are, is it any type of advertisement (which would usually loop), entertainment (such as animations used on Tumblr) and if it’s strictly professional (not likely to loop).
Loading/Rendering
Upload speed / Page Load Speed
Once you upload your animation to the web, it will take time to load, this is due to it basically being a video (no matter what format you use). The time it takes to load is essential, if it takes too long, views could grow impatient and decide not to view it, but since it’s loading with the site (depending on how it’s done in the HTML), they could choose not to visit your site at all.
Browsers
When you produce an animation, you have different file types you can render it as, PNG is usually recommended, since it is compatible with most browsers, this is due to it being an image, instead of a video. If you export your animation as a SWF, it cannot be loaded on a large quantity of mobile devices (and whatever browser you use), this is due to it needing an add-on to render the unknown format.
Flash Transparency/Special effects
One feature that SWF animations have is transparency, although this is very useful, some browser do not support this, which is why you need to consider this factor when using transparency in SWF animations.
Also SWF animations are not stored the same as GIF animations (so they cannot be read the same), it does not just store images in a sequence, and it uses effects such as tweens to produce an animation. These effects allow the user to easily modify the animation again, instead of having to alter every frame, although this is usually done by calculations, it can increase the file size.
Social Context
Type of Images (culture/social)
Depending on your animation, you might need to first know about the culture, to aid this all cultures have 6 dimensions (Technological, Economic, Political, Institutional (social), Aesthetic-value, and Belief-conceptual).
For example some hand gestures are perfectly acceptable in some countries (okay in the UK/USA, being the thumb and index finger in a circle), whilst in others it could be seen as offensive (Brazil).
If you are going to have women in your animation, depending on where it is viewed it could be seen as male dominance, in large parts of the world it is acceptable for women to wear a bikini, but in Arab counties it will be seen as male dominance, and visa versa.
Also, you will need to know the social context, if your animation is appropriate for where it is posted, for example an adult site would NOT be advertised on the BBC. This is an extreme example, and obvious, but it is still a social issue (would be socially unacceptable) that needs to be considered when publishing your animation (where you would need to do research for, since there are many aspects).
Language
If you are going to use text in your animation, the usual language used is English, but depending on where your animation is going to be, you might want to use another language in the text. Especially since your animation is going to be on the internet, it does not restrict anyone that speaks another language (from another country) from seeing it, and not understanding the text.
You might just use the language that’s popular on that site (which might be English, but it’s good to check), but there are various other methods you could implement. If you are using an SWF animation, you could possibly use ActionScript to change the text depending on which language is set on the website.
Another point is who are you aiming your advert for, if you are aiming it towards children, you will use less complicated words than if it was toward adults. Also it depends on if the animation is professional, it will be unprofessional if you use informal language or slang (such as “U WOT M8”), in a formal/professional animation.
Parental Control
If you were advertising an 18+ game, or an adult site, parental control would be needed, since there could be a possibility that children could see these animated adverts. Although quite a few sites that do primary show content of adult nature do have warnings, not every one of them do have an 18+ warning (or even blocked, by the ISP or parental control software). Some sites do allow the option to state if your post contains adult content, not ever site does, so depending on where it going to be posted it's safer to produce animations with little adult content.
Target Audience
Depending on who your target audience is, you would suit your animation to fit that target audience. It would be seen as very unprofessional if you, for example, use too many colours (and vivid) on an animation for a business. If you were advertising a game (mobile) mainly aimed towards children, then you would use more vivid and bright colours.
The target audience also includes the other areas I have talked about in this “Social Context” section, such as when I explain that you would suit the text (language) in your animation to your desired target audience, and the nature of your animation (type of animation and age appropriateness).
Useful Links
Colourspaces (YCbCr): https://youtu.be/LFXN9PiOGtY
Compression: https://youtu.be/n_uNPbdenRs
LZ 77 Compression: https://youtu.be/goOa3DGezUA
In-depth Social and Culture in Animation: http://cec.vcn.bc.ca/cmp/modules/emp-cul.htm
P4: Assignment 2 - Section B; Adobe Flash CS6 Tools
|
Scene:
|
These are
used to set up different stages in a project,
it is where your objects are placed to
create the animation.
|
|
Timeline:
|
This is the central
area the user will interact with to create the animations, it has an
unlimited time, but only shows a portion of it, and only renders up to the
furthest frame on the timeline.
|
|
Frames:
|
These are used to extend a previous
keyframes time on the timeline.
|
|
Keyframes:
|
This is used
to hold an object, this is different
from a frame since a frame just extends key
frame.
|
|
Tweens:
|
This is a very useful feature
in Flash, it is used to calculate the difference between two keyframes, there are three types of tweens:
Shape
This only works on shapes (not types of graphics), and requires them to be transformed for you to be able to apply a shape tween, this will warp the shape from the first keyframe to the last.
Motion
If you are moving any object the best way to do this is with a motion tween, it will automatically calculate how it has to move from point A to B.
Classic
This works similar to the Motion tween, where it is normally used to move objects, but with a classic tween you would have to create key frames manually then apply a Classic tween when with a Motion tween they are created if you move the shape between point A and B.
Also if you apply a classic tween to a
graphic you have more options, such as Alpha (transparency), and you can also
transform a graphic in a Classic tween (1% to 150% then 100%).
|
|
Shapes:
|
There the regular shapes available in Flash,
Rectangle and Oval, but you also have the primitive versions of these (as
well as a third shape called PolyStar).
With the oval primitive tool you have
the option to customise the start angle and end angle, this allows you to,
for example, animate a pie chart.
|
|
Text:
|
Like many packages you have the option to add text, this works how
you think it would and after you create it you can make it a symbol for a few
more options.
|
|
Transform Tools:
|
There are various ways you can transform an object, you can do the usual resizing (and scaling), but you also have the option to rotate it and even
skew it if needed. If that is not enough there
is also the free transform option, where you are able to alter the entire wireframe.
|
|
Masks:
|
You can make any layer a mask layer, this will hide what is on the
mark layer, on the masking layer.
|
|
Symbols:
|
If you create an object (or text), you can make it a
symbol, there are three types of symbols; movie,
button and graphic.
With any type of symbol
you create it is automatically added to the library so it can be used at a
further date, this will also prevent you from making any adjustments to the
symbol on the scene (but you are able to transform it, and move its
positing). If you want to make any
adjustments you will need to enter the symbol from the stage (entering it), in there you will have its own timeline which
will correspond to the scenes timeline (unless it’s a movie symbol).
With a movie symbol
any animations made will not be viewable unless rendered, his can be annoying
and seems like there’s no point, but with a movie there are more effects that
can be added, and it works independent from the frames on the scene.
A graphic does not need to be rendered to view its
changes, it works along the scenes timeline (where the graphics starts with
the scenes keyframe, is where the
graphics independent keyframe starts).
|
|
Library:
|
This is where assets are stored for multiple uses in an animation,
and where symbols are stored when created. It can also contain other types of
media such as audio (rather than just graphics).
|
|
Exporting:
|
When exporting an
animation you have 8 formats to save it as (SWF, Avi, MOV, gif, wav, jpg, gif
and png), depending on where the animation is going to be used you would
export it as a different file type (probably GIF if it is for the web).
|
|
Graphic
properties:
|
When you create a symbol, you
can alter properties of it without changing
the graphic, an example of this is the Alpha channel, which can be used for tweening.
|
|
Project Window
|
This is where
the scenes are held, it comprises all
the scenes you have created, and
contains any graphics you have animated.
|
|
Toolbox
|
This contains shortcuts to commonly
used tools, if you hold the mouse button on one you might have further
options, for example if you hold the shapes icon, you have more options,
rather than just the oval tool.
|
|
Tool Bar
|
These are different bars that contain tools, not to
be confused with the toolbox which contains shortcuts to tools to
manipulate/import objects into the scene. The main toolbar contains tools to save the file, print the file, or copy
and paste stuff.
|
|
Layers
|
These are used for organisation, they
usually contain one object, also when one layer is above another, if the is
something overlapping, only the overlapping part on the top layer will be
shown (unless it’s transparent).
|
|
Groups
|
This is purely organisational, if you have different parts of an object,
section or area of an animation, you might split these up into groups, also
with groups you can collapse all layers within (so you only see the group in
the timeline, like a layer).
|
|
Drawing Tools
|
These are used to create stuff
(objects, shapes, text, then symbols) on the scene, you can use pre-set
shapes such as the oval or rectangle, but you do also have to option for free
hand draw an object (with a path, which is more smooth, or with the pencil).
|
Subscribe to:
Posts (Atom)