Monday 9 March 2015

Web Animation Technology


Ways to create:

Adobe Flash  £15.59 (included in Adobes Creative Cloud)
Flash, probably the most popular 2D animation software out there, used to be owned by Macromedia, but when Adobe saw its popularity explode in the early years of internet, they've decided to buy Macromedia. Flash is vector based program and very intuitive to work with, but it can also manipulate with raster graphics to provide animation of text, drawings and still images. 

It also allows bidirectional streaming of audio and video, and it can capture microphone, mouse, keyboard and camera input. In addition to animation, Flash is also used for creating games, and rich internet applications(RIAs) that can be viewed via Adobe Flash Player, which is usually integrated into your web browser.




 Adobe After Effects £15.59 (included in Adobes Creative Cloud)
An interesting choice for 2D animation. AE gives you a great control when creating 2D animation. It is primarily used for video editing, but it does great in motion graphics.
After Effects is a layer-orientated program software, which also mean that individual media objects like video clips, still images, audio clips etc. run on their own. One of many great things about After Effects is the "Puppet Tool". Using this tool enables you to quickly add natural motion to raster images and vector graphics, including shapes, images and text characters.


It works by deforming part of an
image according to the position of the pins that you place and move. These pins define what parts of the image should move and what parts should remain rigid. You can also select which part will be in front when parts overlap. With that being said AE is definitely worth a shot.


Photoshop - £15.59 (included in Adobes Creative Cloud)
We all know Photoshop, that great image manipulation software that offers versatility and convenience, but who would think of it as an animation platform? Well, Photoshop is not exactly made for animation, often skipped when it comes to animation software, but the reality is that this is one heck of a product for frame by frame animation. Photoshop's new timeline functionality lets you animate by drawing frame by frame, using the same onion skinning function as seen in Flash, and its incredibly robust.


With all the tools Photoshop offers, you can create some stunning stills and thats what made it popular. Now, with the addition of onion skinning, a whole new world of possibilities has opened. Take those life-like drawings, put onion skinning on it, make a couple of frames and you have yourself an amazing piece of work (if you can draw that is). Lets sum it up. The best tool for image manipulation out there plus animation capability? What else can you ask for? If you have the time, and you know how to draw in photoshop, you should definitely go for frame by frame animation in Photoshop!


There are many more animation tools to write about, but for the sake of staying sane, I will just mention them without having to write pages of reviews. So, the honorable mention awards go to:

Adobe Edge Animate: Lets you create interactive HTML animations.
SWiSH: Advanced Flash creation tool for the graphic artist or web professional.
Amara: Animation software to create web animations for your website 
Blender: Blender is a free and open source 3D animation suite.


Ways to Play

As for the ways to play all of your creations, here are the following:

Adobe Flash Player - Free
Flash Player is a free software for playing multimedia, rich internet application (RIAs) and streaming audio and video content created in Adobe Flash. It can run on moblie devices, your browser or standalone. 




Flash can be downloaded for multiple operating systems like: Windows, OS X, Chrome OS, Android and more. With over 90% of people on the internet using it, it is a common player for games, animations and GUIs (General User Interface) embedded into web pages. Flash Player can be downloaded for free as a plug in for most recent versions of web browsers such as Mozilla Firefox, Google Chrome, Opera and Safari. Each version of Adobe Flash Player is backwards compatible and it should not have problems playing older flash files. Flash player can also access certain connected hardware devices, including web cameras, mouse and keyboard input and microphones.


Formats supported by Flash:

Data formats:                       
XML, JSON, AMF and SWF.

Multimedia formats:
MP3, FLV, PNG and JPEG.

Streaming protocols:
HTTP, RTMP and TCP.

Before version 10, Flash player had no support for GPU acceleration. When version 10 came out, it came out with a limited form of support for shaders on meterials in the form of Pixel Bender API, but still did not have GPU accelerated 3D vertex processing. In version 11, new low-level API called Stage3D was added which provides full GPU acceleration. Similar to WebGL. Current versions of Flash Player are optimized to use hardware acceleration on multiple platforms to play videos or render 3D graphics.



Adobe Shockwave - Free
Adobe Shockwave is a multimedia platform that enables you to add animation and interactive content to your web pages. Shockwave player allows applications made in Adobe Director to be published on the Internet and viewed in a web browser.

Because it offers more features and more powerful tools, authors often go for the Shockwave Director combination over Flash. It has a much faster rendering engine and support for various network protocols.
Shockwave plugin is not available for all operating systems. Despite intense efforts to bring Shockwave to Linux, they were unable to make it, so if you want Shockwave on your Linux you have to Emulate a windows version of a supported browser in Wine (A program that allows you to emulate windows software.






QuickTime - Free (QuickTime Pro $29.99)
QuickTime is developed by Apple Inc. It is capable of playing various formats of digital video, pictures, sound and panoramic images. It also supports interactivity. It is available for Windows Xp or later, and Mac OS X Leopard or later operating systems.

QuickTime comes with OS X, and for Windows, it comes as a standalone installation or bundled with Apple's iTunes. There is a far more superior version of QuickTime called QuickTime Pro. While the basic QuickTime is being limited in its features, QuickTime Pro has the ability to edit clips through the cut, merge separated audio and video tracks, it has a copy and paste function, saving and exporting and so on...



This is a list of supported formats:

 
Audio Video Picture
  • A-law
  • Advanced Audio Coding (AAC)
  • AMR Narrowband
  • Apple Lossless
  • Au file format
  • Audio Interchange File Format (AIFF)
  • Core Audio Format
  • MACE
  • Microsoft Adaptive DPCM (MS ADPCM)
  • MIDI
  • MPEG-1 Audio Layer 3 (MP3)
  • Pulse-code modulation (PCM)
  • QCELP (Qualcomm PureVoice)
  • QDesign
  • Waveform Audio File Format (WAV)
  • μ-law
  • Animated GIF
  • Animation
  • Apple ProRes
  • Apple Video
  • Audio Video Interleave (AVI)
  • Cinepak
  • Component Video
  • DV
  • 3GP and 3G2
  • Graphics
  • H.261
  • H.262/MPEG-2 Part 2[9]
  • H.263
  • H.264/MPEG-4 AVC
  • Microsoft Video 1
  • Motion JPEG
  • MPEG-1
  • MPEG-4 Part 2
  • Pixlet
  • Planar RGB
  • Qtch
  • QuickTime Movie
  • QuickTime VR
  • Sorenson Video
  • BMP
  • FlashPix
  • Graphics Interchange Format (GIF)
  • JPEG
  • JPEG 2000
  • Portable Network Graphics (PNG)
  • TIFF
  • Truevision TGA
  • TXT

 
HTML5 Video


HTML5 video element was intended to become a new standard and replace Adobe's Flash Player because it was lacking support for some video files formats, and that's when HTML5 came into place.
If you want to embed an HTML5 video on your website you would have to do the following:
  • Upload your video clip to your webspace
  • Copy the URL of the video
  • Paste it into the code of your website
Here's a little fragment of code that explains how to do this.


 Your video link goes where it says ""movie.webm", and your thumbnail (optional) goes to "movie.jpg".

You can also have multiple sources of your video in different formats, because some of the browsers do not support certain video formats, so you can do the following:






Source elements represent your videos, you can add as many sources as you want.
Every line should contain a different type of video (different format). Your "poster" (thumbnail) can remain the same.  And that's about it, you can later on add the position and size of your video in the code.







No comments:

Post a Comment