These tend to be used on scrolling banners, that when people hover over., there is some sort of animation to stop the scrolling. However, they are most commonly used in buttons, to show when we have hovered over, clicked and released a button. This helps user functionality, as it shows when we are hovering over an area, which helps people who struggle to see the cursor to click on buttons.
Although they are good to help see where the cursor is located, however, when overdone, they can hinder the ease of access of the site with poor hitboxes, vibrant/seizure-like animations that may be dangerous to some people. They can also dramatically increase file sizes of webpages if there is lots of them if they are not properly optimised, causing slow loading webpages and strain on hardware.
Here is button 2:
Here is button 1:
Here is an example of a ActionScript for flash to create a rollover button that can link to a webpage
on (rollOver) {
var chcolor = new Color(homebutton);
chcolor.setRGB(0xff0000);
}
on (rollOut) {
var chcolor = new Color(homebutton);
chcolor.setRGB(0×000000);
}
on (release) {
getURL(“http://www.yourhomepage.com/index.html”, “_self”);
}
E-cards
An E-card is a card that is electronic, this means it can contain any sorts of animation within the card itself, allowing for a far greater customisabilitythan regular cards. They are also cheap, as you don't need to buy a card, you can just make one using the default windows tools (Or more advanced tools if you have them). Assuming you have connection to the Internet, they are also free to send to people. Other aspects such as sound can also be added to enhance the card, which will not cost money either, unless you buy a track or sound clip. These cards do also not need paper or ink, so can save resources. However, if the are animated they can't really be printed, which makes having a paper version almost impossible.
E-cards use any graphical editing software to create a card, or use the Internet to get a picture to use for it, these can then be edited using programs such a flash or web based animation pages to create an animated card. These are then normally sent using email clients.
Here is an example of a professional E-Card:
Here is the link
These are more or less personalised video animations which are used as cards to make it more interesting and personal for the receiver. These have almost no limits as to what can be done with them, certain software can make them 3D, virtually anything can be animated by a professional animator and custom ones can be created easily if you have the right skills.
As you can see, E-Cards are also used to advertise the business acting as almost pre packaged business cards for the company, which will grow and expand the business.
Emails tend to be the preferred way to send E-Cards, these come in the form of attachments, which is a file attached to the email which can be opened, saved and viewed by the recipient.
Output Devices
There is lots of viewable monitors nowadays, from small mobile phones to large public display screens, this means that the animation will be viewed on many different sizes of screens, so we must choose the resolution size that will fit the majority of the screens. This means that files often have to be made in a lower resolution that the developer would want, which will make the animation look less good on larger resolution screens. However, most screens, despite their size, have a similar pixel count, with small 7 inch tablets having resolutions of 1920x1080, which is the average resolution for a 20" HD computer monitor, although they have begun to expand into 1440p now. It is also a good idea for the developer to make several versions with different resolutions to show off the animation as well as possible on almost any device.
The number of colours that a screen can display also tends to be quite consistent throughout all visual display systems, this is mainly due to the similarity in resolutions of all devices, so although the developer will have to think carefully and test the animations colours on all devices that it will be displayed on and make adjustments to the colour scheme accordingly, it will not make too much difference.
On the other hand, there is a large difference in download speeds between devices and connections to the Internet. The animation will likely be displayed on fast fibre optic connections that will have no problem loading the animation quickly, but it will also be displayed on 3G connections, which have severely limited download and upload speeds. This means the developer cannot make the file too large, o will have to reduce the quality to allow it to load faster on slower connected devices. However, many sites now have mobile equivalents (So when connecting from a mobile, they will be sent to a different address than a desktop would) This means that different animations (Ones with smaller file sizes) could be displayed on mobiles, which would fix the issues with resolution and download speeds.
Some animation formats, such as .SWF's need a flash plugin to play, and many mobile devices such as Android and Apple no longer support flash players on their devices, so you need to externally download a plugin and run it on your own to view it. This means other formats really need to be used, such as HTML 5, which can run without a plugin on any device with a sufficient connection to the Internet.
The hardware of the device can also be an issue, although most modern hardware is more than capable of playing an animation. An older PC (+7 years old) may have some issues playing it due to the lack of graphical processing in the motherboard and CPU, although it shoudn't be a great concern to the developer, as almost all modern computers will have the graphical power to play it. Although, if the animation is very long and hardware intensive, the file size and resolution may have to be reduced so it can be played without stuttering.
M3
Quality is directly correlated with file size; almost all
files that have a better quality have a larger file size, which makes it much
harder to upload and view higher quality files on the web. However, files can
be compressed or converted to other file types to reduce their quality, and
although the colour pallet may reduce in size, there isn’t a significant
reduction of quality in most cases, which makes them ideal for use on the web,
as they have good quality and a low file size.
Frame disposal is where the software gives an action to a
frame once it has been displayed on the screen. This means that frames with
backgrounds that want to be displayed can be removed once they are displayed,
removing the backgrounds which could ruin later frames. This makes the
animation look cleaner and more professional than animations that have no frame
disposal. It is also good for keeping file sizes small, as often with
animations, shapes are kept off the screen, out of sight but still being loaded
by the program; increasing the file size.
However, it can have its disadvantages too, they are notoriously hard to
set up, and can cause issues within the animation if deleting a vital frame to
the animation, but with the right effort, they can produce a cleaner and
smaller animation than before.
Here is an example of the Auto-Crop tool in GIMP, a free
image editing software. It automatically crops the selected layers to reduce
the file size and background clutter. It will remove all of the white
background that can be removed without removing any of the actual images. It
reduces the file size as it decreases the number of pixel colours that have to
be stored, reducing file size.
Other Factors
The number of colours can also play a huge part in the size
and quality of the file, the more colours there are, then more different
colours that have to be stored, increasing file size. However, when files are
compressed either one of two things happen. The colours are rounded to a near
digit, so the colour pallet is reduced in size, or the colours are stored
together, so instead of storing long colour digits constantly, pixels that have
the same colour are stored together. If both of these are used in compression,
they can significantly reduce file size of a file, without drastically reducing
the quality.
Vector Graphics also have a much smaller file size as they aren't storing each indvidual pixel data, but the data of shapes, which means alot less information is stored, making the files much smaller than Bitmap files.
The Physical size of the file also plays a large part, if you have an animation lasting 3 seconds, it is not likely to be that large, if it 5 minutes, it will be much larger. This means that all animations should be as short as they can in order to keep the file size low. This should be done by reducing pointless frames and not needed images within those frames for the most optimised file size.
Dithering is used to make intermediate colours in images by scattering pixels in that area to make it look like a new colour. This gives the impression the image has more colours than it would normally (Especially if its limited to 256 colours), making the image a better quality without increasing the file size. This is done to reduce banding in .GIF files and to create smoother transitions, increasing quality.
Resolution is also a key factor, as it determines how much data needs to be stored, the larger the resolution, the better the quality, but the larger the file as more pixel colour data has to be stored in the image. However, the majority of monitors and display devices dont have the largest resolution, so a common resoultion needs to be found and used to keep the animation file size down but retain the quality of the animation.
Frame rate can drastically increase file size, as if the frame rate is high (50+ compared to 24) it means there will be more frames in the alloted time (If both animations are 30s long) as more frames are being displayed per second, so you need more frames. However, the human eye can only process 24 frames per second, which makes it pointless to go above this point, as this is when the animation is at its optimal speed. Any slower and although the animation size will get smaller (If stays at 30s long) but the quality will reduce dramatically as we will be able to see it stuttering and not flowing properly, making it look awful.
D1
Flash is built upon the Adobe plugins, namely flash player which means that this is required for flash to run. It also runs as an independent program on the computer, away from browsers and other such programs. This does allow it to do different things, and program from the frames that they give themselves, rather than developing a web based program that must run on all browsers, which may limit what they can do. This custom base also allows Adobe to make their program more efficient, as it does not need to link in with other programs to work effectively. Mixeek on the other hand, which is a HTML 5 based animation editor that allows you to edit animations within a browser, such as chrome, without the need for third party or extra plugins, as HTML is built into the web browsers themselves. This does limit Mixeek in terms with what they can do, as their program must work with lots of different types of browsers, so much time is spent making sure that the program works correctly on each browser, and is compatible with other functions that the browser may perform at the same time. However, this does make the editor easier to access, as it means that the user only needs a browser and no specialist software; which may allow them to use it on a tablet or other such mobile device.
Mixeek is free! It's that simple, there is no need to pay anything, just open the browser and start editing, whereas Flash costs in excess of $200, which prices lots of budding and amateurs out of the market, as it is too expensive for them to reasonably buy.
Mixeek is used as a basic editing packing to create small, fun animations. It really isn't designed to create large animations. However Flash is a Professional program that has been used, and is designed to create larger and more professional animations. It has good designs that allow this, and with a wealth of support forums online, it makes it very easy to do this.
Other than the timelines, there really is not much that is similar between Flash and Mixeek. Mixeek has a limited amount of tools that are displayed on the sidebars, as shown to the left, however these tools are set out clearly and consistency. On the other hand Flash has lots of tools, which makes them very difficult to find, meaning that they all have to be stored in the drop down menus, giving the user much more variety of tools, but at the cost of simplicity. The timelines are similar, they display the frames, and give options to set key-frames, but they handle object control differently. Mixeek uses the idea of Sprites, giving each object a sprite which can be independently controlled from the timeline, whereas Flash uses objects that can be put into layers, which can control various animations at once, making it easier to use for larger projects. Here is an example of Mixeek and Flash's timeline interfaces.
We can see here the differences in looks, with Flash looking more complicated than Mixeek, but including more features, such as being able to lock layers etc.
As I have already said, the interfaces vary greatly. Flash is extraordinarily complicated in places, while Mixeek's is very simple and easy to use. This means that Flash is likely to be used, and recommended to be used by professionals looking to create top quality animations, while if animations are being created for fun, it may be better to use Mixeek, especially if you have not used Flash before, as it is very specialist software, with a large learning curve, whereas Mixeek is very simple and easy to use, once you understand the basics.
Creating a motion tween is also easy in Mixeek, all you need to do is set a place for an object at 0 seconds by clicking on 0 on the timeline, creating a red dot there and then clicking somewhere else along the timeline will create another red blob, if you then edit it again then this will create a tween. This is much easier than flash, where you have to create a Key frame, edit this key frame by double clicking it and editing and then creating a motion tween by right clicking and selecting motion tween. At this point you can then edit the key frame and other frames to create an animation. As we can see, the Flash way of creating them is complicated to learn, and can often lead to mistakes but once learned, is quite easy to do. However Mixeek's way is much easier and more intuitive, which is much better for beginners who are wanting to create an animation. However, Flash's method is much better for larger animations, as the layers allow you to easily control lots of objects, where Mixeek' s sprites layer controlling would be swamped very quickly by lots of layers. To create more advanced tweens, with rotations and re-sizing you need to create a shape tween, which works exactly the same way as a motion tween, but re-sizes and rotates a shape instead. This can be done in Mixeek by just editing the image in the frame later on, and the editor will change the size just as a shape tween would, just without the added complications of having to make a new tween just to change the size.
Saving animations in Flash is very easy, as you can just save the animation as a SWF or other animated file type, and the animation will be saved, ready to be displayed. However it is not so simple with Mixeek sa you cannot save/opn your work, due to the way that it is exported. When you try to export your work you'll be given a java script file which you must save for later use. To then apply your animation to a site you must use the following HTML code:
You can also open Flash files in Flash, and edit them just as you would normally with any other program, but you must export the animation in a animation/video file (gif etc) and then upload it to a website and embed the video into the webpage for it to be viewed on the site. This takes much longer than the HTML version, and requires more space on a server, as the file is likely to be larger than a text file with java script in it, which is all the HTML animation needs.
This is the first time that Mixeek has been more complicated than flash, as the exporting as a js file is very confusing at first, and is not good for the easy to use ideas for Mixeek. That being said, it can still be done, and there is good documentation on the site that can help and guide you through the process.
The undo key for Flash does as we would expect, it undoes the previous action that we did, regardless of the layer that was edited. However, Mixeek has taken this a step further and will only undo actions that have been completed in the active layer/sprite. This is very useful software, as it makes it easier to correct errors and deal with issues within the programs, making it much easier for newer people to use. It would also be useful for the professionals in Flash too, as it will help them correct errors that they have. This further promotes the thought that Mixeek is easier and friendlier to new animators to test ideas and designs.
Both programs are reliable, Flash can crash when creating large animations on slower machines, but if you are within the recommended specifications for hardware, then there is unlikely to be any issues with it. Mixeek is reliant on a internet connection, which can be very unreliable and may cause you to loose projects that you are working on, however there is very little that can be done about this, due to the fact that you cannot save/load animations in that editor. The same goes for performance, both editors will run slowly if you are running large animations, but when running normal sized animations then the programs will run fast unless you are on a slow machine. Flash can be quite resource intensive, and it's best not to run too many programs when you have it open, but other than that both programs are stable and good to run.
Adobe is a multi-million dollar company, which inevitably means that the company’s support of the Issues of the Product is pretty poor, just due to the structure of large companies. However, as it the most used there is a multitude of forums and support sites that provide rich information about how it works and helping out with any issues that a user may have, not necessarily making the program user friendly, as it is a complicated program to understand and use, but allowing people to fund solutions to issues they may be having with the things they are trying to make.
Vector Graphics also have a much smaller file size as they aren't storing each indvidual pixel data, but the data of shapes, which means alot less information is stored, making the files much smaller than Bitmap files.
The Physical size of the file also plays a large part, if you have an animation lasting 3 seconds, it is not likely to be that large, if it 5 minutes, it will be much larger. This means that all animations should be as short as they can in order to keep the file size low. This should be done by reducing pointless frames and not needed images within those frames for the most optimised file size.
Dithering is used to make intermediate colours in images by scattering pixels in that area to make it look like a new colour. This gives the impression the image has more colours than it would normally (Especially if its limited to 256 colours), making the image a better quality without increasing the file size. This is done to reduce banding in .GIF files and to create smoother transitions, increasing quality.
Resolution is also a key factor, as it determines how much data needs to be stored, the larger the resolution, the better the quality, but the larger the file as more pixel colour data has to be stored in the image. However, the majority of monitors and display devices dont have the largest resolution, so a common resoultion needs to be found and used to keep the animation file size down but retain the quality of the animation.
Frame rate can drastically increase file size, as if the frame rate is high (50+ compared to 24) it means there will be more frames in the alloted time (If both animations are 30s long) as more frames are being displayed per second, so you need more frames. However, the human eye can only process 24 frames per second, which makes it pointless to go above this point, as this is when the animation is at its optimal speed. Any slower and although the animation size will get smaller (If stays at 30s long) but the quality will reduce dramatically as we will be able to see it stuttering and not flowing properly, making it look awful.
D1
Adobe Flash has always been a leader in Animation design,
ever since its early predecessors in 1996 it has been used as a software
platform for almost all forms of multimedia, generally used for authoring
vector graphics, animation and internet applications that can be played and
viewed using the Adobe Flash player. Although it has many issues surround it
and its family (Other Adobe Products) it has always remained at the forefront
of especially Animation creation, and although other software has challenged
it, it still remains the most used.
However, since the conception of Web 2.0 and editable HTML
formats new web based animation software has arisen, using the new HTML 5, CSS
3 and XML formats, allowing the user to create animation files in an internet
browser, without the need for downloading external programs from other sources
that take up more computer processing that browsers. This uses web based
Interfaces on webpages to allow the user to create and edit files using a range
of tools. Although this software is very much still in development, it has more
than enough behind it to challenge Flash’s mantle.
Flash is built upon the Adobe plugins, namely flash player which means that this is required for flash to run. It also runs as an independent program on the computer, away from browsers and other such programs. This does allow it to do different things, and program from the frames that they give themselves, rather than developing a web based program that must run on all browsers, which may limit what they can do. This custom base also allows Adobe to make their program more efficient, as it does not need to link in with other programs to work effectively. Mixeek on the other hand, which is a HTML 5 based animation editor that allows you to edit animations within a browser, such as chrome, without the need for third party or extra plugins, as HTML is built into the web browsers themselves. This does limit Mixeek in terms with what they can do, as their program must work with lots of different types of browsers, so much time is spent making sure that the program works correctly on each browser, and is compatible with other functions that the browser may perform at the same time. However, this does make the editor easier to access, as it means that the user only needs a browser and no specialist software; which may allow them to use it on a tablet or other such mobile device.
Mixeek is free! It's that simple, there is no need to pay anything, just open the browser and start editing, whereas Flash costs in excess of $200, which prices lots of budding and amateurs out of the market, as it is too expensive for them to reasonably buy.
Mixeek is used as a basic editing packing to create small, fun animations. It really isn't designed to create large animations. However Flash is a Professional program that has been used, and is designed to create larger and more professional animations. It has good designs that allow this, and with a wealth of support forums online, it makes it very easy to do this.Other than the timelines, there really is not much that is similar between Flash and Mixeek. Mixeek has a limited amount of tools that are displayed on the sidebars, as shown to the left, however these tools are set out clearly and consistency. On the other hand Flash has lots of tools, which makes them very difficult to find, meaning that they all have to be stored in the drop down menus, giving the user much more variety of tools, but at the cost of simplicity. The timelines are similar, they display the frames, and give options to set key-frames, but they handle object control differently. Mixeek uses the idea of Sprites, giving each object a sprite which can be independently controlled from the timeline, whereas Flash uses objects that can be put into layers, which can control various animations at once, making it easier to use for larger projects. Here is an example of Mixeek and Flash's timeline interfaces.
We can see here the differences in looks, with Flash looking more complicated than Mixeek, but including more features, such as being able to lock layers etc.
As I have already said, the interfaces vary greatly. Flash is extraordinarily complicated in places, while Mixeek's is very simple and easy to use. This means that Flash is likely to be used, and recommended to be used by professionals looking to create top quality animations, while if animations are being created for fun, it may be better to use Mixeek, especially if you have not used Flash before, as it is very specialist software, with a large learning curve, whereas Mixeek is very simple and easy to use, once you understand the basics.
Creating a motion tween is also easy in Mixeek, all you need to do is set a place for an object at 0 seconds by clicking on 0 on the timeline, creating a red dot there and then clicking somewhere else along the timeline will create another red blob, if you then edit it again then this will create a tween. This is much easier than flash, where you have to create a Key frame, edit this key frame by double clicking it and editing and then creating a motion tween by right clicking and selecting motion tween. At this point you can then edit the key frame and other frames to create an animation. As we can see, the Flash way of creating them is complicated to learn, and can often lead to mistakes but once learned, is quite easy to do. However Mixeek's way is much easier and more intuitive, which is much better for beginners who are wanting to create an animation. However, Flash's method is much better for larger animations, as the layers allow you to easily control lots of objects, where Mixeek' s sprites layer controlling would be swamped very quickly by lots of layers. To create more advanced tweens, with rotations and re-sizing you need to create a shape tween, which works exactly the same way as a motion tween, but re-sizes and rotates a shape instead. This can be done in Mixeek by just editing the image in the frame later on, and the editor will change the size just as a shape tween would, just without the added complications of having to make a new tween just to change the size.
Saving animations in Flash is very easy, as you can just save the animation as a SWF or other animated file type, and the animation will be saved, ready to be displayed. However it is not so simple with Mixeek sa you cannot save/opn your work, due to the way that it is exported. When you try to export your work you'll be given a java script file which you must save for later use. To then apply your animation to a site you must use the following HTML code:
<html>
<head>
<meta charset="utf-8">
<title>Dummy example</title>
<link type="text/css" href="css/mixeek.css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"/>
<script type="text/javascript" src="js/mixeek-X.Y.Z.js"/>
<script type="text/javascript" src="your_exported_animation.js"/>
</head>
<body></body>
</html>
This allows for easy pasting of animations into websites, but has the severe downside that you cannot save the animation and edit it at a later date, a feature which really need to be added for Mixeek to improve further, as it leaves Mixeek as a fun software that allows you to create small animations for no purpose, but no real, professional animations.You can also open Flash files in Flash, and edit them just as you would normally with any other program, but you must export the animation in a animation/video file (gif etc) and then upload it to a website and embed the video into the webpage for it to be viewed on the site. This takes much longer than the HTML version, and requires more space on a server, as the file is likely to be larger than a text file with java script in it, which is all the HTML animation needs.
This is the first time that Mixeek has been more complicated than flash, as the exporting as a js file is very confusing at first, and is not good for the easy to use ideas for Mixeek. That being said, it can still be done, and there is good documentation on the site that can help and guide you through the process.
The undo key for Flash does as we would expect, it undoes the previous action that we did, regardless of the layer that was edited. However, Mixeek has taken this a step further and will only undo actions that have been completed in the active layer/sprite. This is very useful software, as it makes it easier to correct errors and deal with issues within the programs, making it much easier for newer people to use. It would also be useful for the professionals in Flash too, as it will help them correct errors that they have. This further promotes the thought that Mixeek is easier and friendlier to new animators to test ideas and designs.
Both programs are reliable, Flash can crash when creating large animations on slower machines, but if you are within the recommended specifications for hardware, then there is unlikely to be any issues with it. Mixeek is reliant on a internet connection, which can be very unreliable and may cause you to loose projects that you are working on, however there is very little that can be done about this, due to the fact that you cannot save/load animations in that editor. The same goes for performance, both editors will run slowly if you are running large animations, but when running normal sized animations then the programs will run fast unless you are on a slow machine. Flash can be quite resource intensive, and it's best not to run too many programs when you have it open, but other than that both programs are stable and good to run.
Adobe is a multi-million dollar company, which inevitably means that the company’s support of the Issues of the Product is pretty poor, just due to the structure of large companies. However, as it the most used there is a multitude of forums and support sites that provide rich information about how it works and helping out with any issues that a user may have, not necessarily making the program user friendly, as it is a complicated program to understand and use, but allowing people to fund solutions to issues they may be having with the things they are trying to make.
As I've said, HTML 5
Editors are still developing, with lots of tools still not implemented into them, but they are improving, much faster than Adobe is to fix some of the
issues in Flash. Here we can see the toolbar from Mixeek’s Editor, and although
it lacks lots of the tools that Flash has, it has the tools clearly labelled
and has made them easy to use, which is something that can’t be said for the unintuitive
user interfaces of Flash. This makes Mixeek much easier to use than Flash, and much easier to learn, making flash a very specialist program to use and only recommended for Professionals, limiting their sales.
The way undoing is processed in Mixeek is far superior to Flash's, as it allows more control when trying to fix an issue or problem in your animation, and will help users to create animations more efficiently in terms of time.
Mixeek does need to fix the saving and loading of animations though, even if they could be saved as .js files and then reopened it would make life alot easier, but not being able to loading them is a severe disadvantages.
The way undoing is processed in Mixeek is far superior to Flash's, as it allows more control when trying to fix an issue or problem in your animation, and will help users to create animations more efficiently in terms of time.
Mixeek does need to fix the saving and loading of animations though, even if they could be saved as .js files and then reopened it would make life alot easier, but not being able to loading them is a severe disadvantages.
Overall, Flash is still probably a better editor and creator
for Animated files, as it has the largest support base, the most format support
and has been optimized over many years to make it run faster and more
efficiently. However, in the coming years it will be caught up and overtaken by
in browser editors if Adobe don’t do anything about it.
No comments:
Post a Comment