Preparing the asset
While developing applications in Flash, integrating assets such as images, audio, and video into a typical project can be accomplished in a couple of different ways. You may choose to integrate assets in the typical way by importing them directly in a Flash project library. The addition of an asset into a Flash project results in the asset inclusion into the compiled SWF file. Since all assets are compiled within a single file, there is no need to acquire assets from external resources such as the Internet. Assets within a compiled Flash project are inherently protected from acquisition or being referenced by public.
Unfortunately, assets internally referenced within the project library cannot be updated or changed once the project has been exported. Developing applications such as a video playback UI or photo gallery requires assets to be integrated dynamically, resulting in a single application instance that can be used infinitely. External assets may be integrated via requests for external files which are publicly accessible on the Internet. External integration allows for smaller application sizes as well as the ability to modify the external assets without the need for application updates. Unfortunately, if the file is unavailable or the user isn't connected to the Internet, the asset cannot be integrated and may result in a failure within the application.
External asset integration is the standard way of including content into web-based documents. Files that will be referenced by HTML documents are typically placed on the same web server as the HTML documents embedding them.
Assets can also be referenced from other web servers on the Internet, however the content is at the mercy of the developers or administrators with access to that content. Developer's laziness or attempts to lower bandwidth costs can result in images or other assets being embedded from external sources, moving bandwidth charges to a web server other than your own. This process is known as hotlinking and is frowned upon within the web development community, as you force other website owners to deal with the cost of asset distribution.
Due to lack of automatic optimization of web content as in the compiler in Flash, web developers must take it upon themselves to prepare their content and assets for web usage. Since web content is delivered on demand to users over variable Internet connection speeds, assets should be as small in file size as possible to allow playback and viewing with as little latency as possible for the end user. Let's review each of the common asset types and the proper methods for preparing each of them for embedding into our HTML documents.
Tip
All the assets used for optimizations and conversions can be found in the downloadable examples files for book within the Chapter 02_examples directory.
Images
Adding images into your project is usually one of the first asset integration techniques used in every web-based project. All images on the Web generally come in one of three different formats: JPEG, PNG, or GIF. Each of these formats serves specific purposes and should be used according to what a design and function requires. As common as these image formats are within everyday use, it is important to understand what each format can and can't do to allow for optimized image integration into HTML documents.
Note
Follow this book along with the example files available for download on the Packt Publishing website (www.packtpub.com). If you don't have a copy of Photoshop CS6, a demo for the same can be downloaded and installed for free from http://www.adobe.com/cfusion/tdrc/index.cfm?product=photoshop&loc=en_us&promoid=IICUB.
Consider this high-quality, uncompressed image in CR2 format taken directly from a Cannon digital SLR camera. The size of this raw image is 27 megabytes and hence it isn't compatible for viewing or embedding within any modern web browser.
Even if a web browser could handle placing this image within an HTML document, the time it would take to download the image would be enormous. Despite today's common high-speed Internet connections, not many users are willing to wait more than a couple of minutes to view a single image while loading a web page. Therefore, before using this image for the Web, it must be optimized for the Web. When this CR2 image is opened in Photoshop, the Photoshop Camera RAW window will display not only the photo data and file size but also the image dimensions.
It looks like the digital camera used to take this photo saved this image at 17.9 megapixels, which makes this image 5184 pixels wide and 3456 pixels high. This image would never be used at this resolution on the Web as it wouldn't fit on a computer monitor and would need to be scaled down in order to be viewed. Scaling down an image for using it on the Web may make it smaller in size and easier to view on the Web, but the file needed to display it is still the enormous master version that will be slow to load. Let's continue by opening this file in Photoshop by selecting Done within the Camera RAW import window.
It is good practice to export a web-ready version of your images with the resolution your web page design requires them to be displayed at. Changing the image resolution to an appropriate size for the Web can be easily accomplished within Photoshop by selecting Image Size under the Image tab.
In the Image Size window, we can enter some more realistic values into the Width and Height parameters to see what kind of optimizations we can achieve. By using values such as 1920 x 1280, which is still a very high-resolution image for the Web, you can view what the expected output image source file size will be in the text above the Width and Height parameters.
After updating the Width and Height parameters within the Image Size window, the resulting file size can be viewed immediately above them. Keep in mind that the file size change displayed will not be the final output size as we can still optimize this image source with techniques such as JPEG compression.
Tip
While optimizing image sizes for usage within a specific web design, there is generally no need to export images larger in size than what is set within a design. If a thumbnail is needed within a design, exporting two images, a large and a small, is better than using a single image for both instances.
Photoshop's Save for Web feature located under the File tab can be said to be web developers' best friend. This tool allows you to easily export images from Photoshop with the specific intent of optimization for the Web in mind. Whether spicing up designs or converting assets to single instances, whenever you are going to export something from Photoshop for usage on the Web, this tool is the best way to accomplish it.
Clicking on the Save for Web option will open a dedicated window that will aid you in selecting the best format and compression method while exporting your data. So let's export a couple of versions of this photo to see what can be the minimum possible file size while trying to retain as much image quality as possible.
With the format type set to JPG to allow for better compression, select the 4-Up tab at the top of the window to bring up side-by-side comparisons of different levels of compression on your image data. Play around with these values and see how low you can take the quality levels before you see dramatic changes to your image. While doing this, keep an eye on the expected file size to see how the level of compression is affecting the size.
The background of this dog photo specifically takes a hit in quality as the compression level rises. This is due to the long grass creates a very dynamic and busy area where pixilation can be seen. Areas within the dog's solid color body maintain more of the original quality as the pixels in the same area are very similar in color. Another interesting feature within the Save for Web window is the expected time to download output each version of image has with it. You can easily change the expected bandwidth levels to see how much time it may take to deliver this image to a user over the Internet.
Tip
Since every image is different, there is no single perfect optimization setting. Taking the time to make sure that each image looks its best at the smallest file size will reward you with a better looking website that loads quickly.
For example purposes, I have exported this image in a couple of different resolutions and compression levels using the JPEG format.
As you can see from preceding the file listing, we initially started out with a 27-MB photo taken directly from a digital SLR camera. Using different exporting methods in Photoshop, we can easily get a decent version of the same image with a smaller resolution in a file that is well under 500 kilobytes. Considering that in a fully developed web page this image could be one of many, the general rule of thumb is to keep every image files size as small as possible. This will allow your content to load quickly and display properly for the design you have created.
Of course, as previously mentioned, JPG is not the only image format available for use within web pages. Let's quickly cover each of the formats and what each of them brings to the table.
JPEG
Outputting an image as .jpeg or more commonly .jpg allows for lossy image compression, which aims to decrease file size by discarding some of the data within the image. The amount of compression used when saving in JPEG format is typically user defined, allowing designers and developers to create a smaller file than the original such that is as close to its source as possible. One of the major downsides to the JPEG format is the lack of transparency support as the format contains no alpha channels.
PNG
Portable Network Graphics (PNG) is a bitmap image format that doesn't use compression when saving image data. PNG images are great for design and asset images as they retain the quality and color palette used in design and also support transparency. However, they are not typically utilized for images such as photographs, as the resulting file size will be too large due to the amount of details in the image.
GIF
The beloved GIF file, or more commonly seen nowadays as the animated GIF has been available for usage since CompuServe released the format in 1987. GIF images support 256 colors, transparency, as well as animations via multiple image frames. Though it is still in use all around the Web till date, due to the lack of timeline control of animated images, techniques such as sprite sheets (of which we will cover more in the following chapters) are becoming more popular for animated image integration.
Audio
Preparing audio for the Web is relatively straight forward as majority of web browsers support MP3 audio formats within HTML5's new audio element. Aside from MP3, some browsers support the use of OGG audio files. Therefore, exporting audio in either of the formats will allow you to target all modern HTML5 compatible browsers and ensure that your end user hears the audio regardless of what browser they choose to view your content with.
The audio element
Creating the audio element, as with HTML syntax for most of the elements, is pretty straight forward. One major difference from traditional source references within HTML elements is the use of the source element which is encased within the audio element. By utilizing this new source element, we can reference multiple assets within the same element and load only the first file which is compatible:
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mp3"> Your browser does not support the audio tag. </audio>
If a user attempts to open this element within a browser with no HTML5 audio support, the remaining internal content within the audio element will be displayed. In this case, we display only text, but you could easily append a reference to a Flash audio playback application or a warning styled with CSS. However, if all is well with the browser as per the given requisites, the page will display an audio playback UI that look something like the following:
The audio playback control user interface is specific to the browser displaying the data. The preceding image is what Google Chrome currently renders as its internal audio playback control user interface. Default audio controls can be removed by excluding the controls parameter within the audio tag element. Without the default control UI, you can build your own controls with images, HTML, and CSS and control them with JavaScript.
Video
As mentioned in Chapter 1, Why HTML5?, video integration into HTML5 documents is now easier than ever. As simple as integrating video into HTML5 documents is, it all begins with preparing the video for use on the Web. This process should not only minimize the size of the video file but also encode it with a specific codec and save it within a specific video container.
The HTML5 video tag supports the inclusion of multiple video container formats. While attempting to support the full range of HTML5 compliant browsers, developers must include references to the same video saved in multiple formats as not every browser supports all of the allowed video file types. Therefore, a solid understanding of video containers and codecs is necessary for web developers to properly integrate video into their documents.
Video codecs
Codecs are used for compression and decompression of videos, to decrease file size and allow large video files to be shared using less bandwidth. Without the use of compression on video files, users would have to wait an inordinate amount of time to transfer a video over a typical Internet connection. To put this into perspective, a raw high-definition video, around 5 minutes in length, can be well over 25 GB of data. Video codecs are made up of advanced algorithms that remove similar data that blends from frame to frame. Rather than storing each individual frame as a separate image, an encoded video stores a specialized data set that is usually many times smaller than the raw source material. For viewing, the encoded data needs to be decoded from the streamlined data source back to viewable frame-based video. Codecs are the all-in-one piece of technology to get this task completed. Each of the supported video containers in HTML5 supports only one video codec, so choosing one is pretty straight forward. However, since video is usually accompanied by audio, the audio must also be run via a specific audio codec as well.
Video containers
One of the major issues while attempting to embed video into an HTML5 document is supporting all modern browsers with the same content. Unfortunately, not all the HTML5 compatible browsers available support the same video formats. Therefore, in order to support the widest range of browsers, developers must embed multiple versions of the same video file encoded in multiple formats. Since this issue is not likely to change anytime in the near future, understanding the available video containers and their corresponding codecs is an important step in preparing video for your HTML5 documents.
MP4
From the perspective of a Flash developer, the MP4 container should be the most familiar as they are very similar to FLV or F4V files. MPEG-4 or MP4 containers are currently supported for embedding within the video element by Internet Explorer 9+, Google Chrome, and Safari. MP4 videos must be encoded using the H.264 codec, which was also used by FLV and F4V videos in Flash.
WebM
The WebM audio and video format is a project sponsored by Google to bring a completely open multimedia container and codec to the Web. WebM files are supported by Firefox, Google Chrome, and Opera. When encoding videos for use within a WebM container, the VP8 video codec, which is also owned by Google, is used.
GG
OGG containers are supported by Firefox, Google Chrome, and Opera. When encoding videos for use within a OGG container, the Theora codec is used. Since the full spectrum of browsers is covered by using just MP4 and WebM videos, encoding in OGG format is not entirely necessary. There is no harm in adding it as a failsafe anyways; only the first video file format the browser finds within the source list is utilized during display, all of the other files are ignored and not downloaded.
Tip
Sample encoded video files as well as the high-quality master video file can be found within the Chapter 02_examples directory.
Video encoding software
There are many great applications available online that can encode your video content into formats compatible with HTML5. As long as the container and codec specification is met, any application or method can be used to get the job done. To aid in getting you up and running, for this chapter and the remainder of this book, here are some of the most popular encoding tools and applications web developers use to get videos on the Web in a snap.
Miro Video Converter
If you are looking for a simple way to get videos ready for the Web, look no further than Miro Video Converter, which can be found on Miro's website http://www.mirovideoconverter.com. This software is not only free and open source but also supports exporting videos and audios in all HTML5 compatible formats. Miro Video Converter is available for Windows and OS X and is probably the easiest way to prepare audios and videos for your HTML5 projects.
With the application installed and opened, the next step is to simply drag-and-drop your source video file into the application for queuing. If you have multiple videos, you can also add them to the queue and all of them will be encoded one after another.
Once all the videos you require to be encoded have been added to the queue, select the Format option at the bottom of the window and select one of the three available formats within the convertor. Keep in mind that to enable video element playback support in every browser, you will need to encode your videos once in each format. If you require more in depth configuration in the encoding job, Miro Video Converter allows us to control basic parameters such as aspect ratio and video dimensions.
Adobe Media Encoder
Flash developers who have included videos within their projects have probably made use of the Adobe Media Encoder. This handy software comes bundled with Flash and can easily encode videos for use within Flash and HTML5 projects. Unfortunately, this application will only output videos natively in Flash video formats of HTML5-ready MP4.
Handbrake
If you don't have access to Adobe Media Encoder, then the next easiest way to encode MP4 videos for free is by heading over to http://handbrake.fr and downloading Handbrake. Not only is Handbrake open source but also it is built for Windows, OS X, and Linux so it's hard to be left out in the cold.
FFMPEG
Finally, my personal favorite, FFMPEG. If you are a lover of the command line as I am, this amazing piece of software is for you. When it comes to media, it's hard to say what FFMPEG can't be used to accomplish. If you're in need of high-level video transcoding, be sure to visit http://ffmpeg.org to learn more.
The video element
Once our video content has been encoded in the necessary formats, all that is left is to do is to reference the video from within the body of the HTML document. Just like the audio element, instead of the typical src parameter used within an tag to create a reference to the file, the video element supports the source tags within the video element to allow referencing multiple assets. It should be noted that if you are only embedding a single video reference, the src parameter within the video tag can be used rather than adding the source tags:
<video width="800" height="600" controls> <source src="my_video.mp4" type="video/mp4"> <source src="my_video.webm" type="video/webm"> <source src="my_video.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
Again, just like the audio element, the video element allows for playback control integration by appending the controls parameter in the video tag. Videos can be played automatically on page load by appending autoplay="true" in the video tag.
Now that we have all of our assets prepped and ready for action, it's about time to start moving into the development environment. Since the web browser is our target platform, let's take some time to cover what the modern web browsers of today give us in terms of web developer tools to aid us in our development cycle.