Flash vs HTML5

The battle between the two dynamic Web platforms

In earlier lessons, we had discussed the implementation of more dynamic features on the Web such as Javascript and Flash as well as the pros and cons of each. Just as a quick review, Flash has been the source of controversy in the Web design community due to its lack of support in Apple's popular products such as the iPad, iPod Touch, and iPhone.

Flash Embedding and Javascript

 

In earlier lessons, we had discussed the implementation of more dynamic features on the Web such as Javascript and Flash as well as the pros and cons of each. Just as a quick review, Flash has been the source of controversy in the Web design community due to its lack of support in Apple's popular products such as the iPad, iPod Touch, and iPhone. For a more in depth review, you can read Steve Jobs' letter he published via Apple's website entitled "Thoughts on Flash".

But in short, here are some of the main reasons for an against the use of Flash on the Web:

PRO-FLASH ARGUMENTS:

  1. Allows for complex dynamic animation with very little coding knowledge.
  2. Much more designer friendly.
  3. Up until recently, one of the best methods for embedding video on a website.
  4. Protects developers' code and content.
  5. Hundreds of thousands of very popular, high-traffic sites rely on Flash or are entirely Flash based, including Youtube, Vimeo, Hulu, Issuu, Vevo, and Daily Motion.

ANTI-FLASH ARGUMENTS:

  1. Proprietary, meaning, the source code is privatized and not available for coders to build upon.
  2. Required special software to author, which limits the number of people who can create Flash content.
  3. Requires the Flash plugin to be installed on the browser in order to view its contents.
  4. Is processor intensive, causing mobile devices to have shorter battery life.
  5. Not supported on most mobile devices.
  6. Not SEO-friendly, meaning, the textual content of Flash cannot be viewed by search engines, and thus will drop in ranking.

However, despite the controversy that surrounds Flash, as a Web designer, it is still a good idea to understand and be able to implmenet Flash content, just in case your client requests it or you need a specific feature that isn't currently available outside of Flash.

In addition, we'll be checking out pre-written Javascript plugins that we can implement into our sites for free. In both cases, the only code we'll be managing ourselves is the actual implementation code. We won't need to be worried at all with coding out the functionality of these features.

jQuery

While on the subject of JavaScript plug-ins, I would like to talk about jQuery. jQuery is currently the most popular and widely used JavaScript framework. What this essentially does is takes a very complex chunks of JavaScript code and organizes it in a way that allows users to run very complex functions with only a few simple lines of code. jQuery came out in 2004 and is now used in almost every major website. To find out more about jQuery, you can visit their website. Both of the JavaScript plug-ins we're using today run on top of jQuery.

So, let's get started!

Flash Embedding

Getting Flash on a website is slightly more complex than you might think. It's not as simple as dropping in an image or some text. Placing Flash on a page actually involved some Javascript as well. Javascript is the means by which we can view Flash within a browser. No Javascript = No Flash. Since this is the case, there are actually a few ways to go about it. Two of them require Dream Weaver or Flash, and the other is a Javascript plugin. Since everyone might not have a copy of Dreamweaver or Flash, I will show you all three ways. The Dreamweaver and Flash methods are a bit easier, but in the process, a great deal of in-line code is generated, which can make your source code a bit more cluttered. With the third method however, you simply link to an external .js file and only need a few short lines of in-line code.

Before following any of these methods though, you will need to download a sample .swf file. .swf is the Flash content that we will be embedding.

To get this file, click here.

After you've downloaded the file, create a folder on your computer, and inside that folder, create a folder called "assets" and inside of that, create a folder called "swf". Place the .swf file in there.

Now we're ready to get started.

METHOD 1: DREAMWEAVER

If you don't have a copy of Dreamweaver, don't worry about following through with this section. However, if you do have Dreamweaver, this may be your easiest option.

STEP 1:

  1. If you haven't already, create a new folder for this project. Inside the folder should be a folder called assets and inside of that a folder called swf containing the .swf file you downloaded from above.

  2. Open Dreamweaver.

  3. Create a new HTML file.

  4. Save your HTML as index.html in the top level of the new project folder you just created.

  5. Your work area should be set to "Split" so that your code is at the top and a blank white area is below. Click in the blank white area and type something like "Here is some Flash content below."

    Split

  6. Click below there and go to the Insert menu and choose Media > SWF or it may read Media > Flash for some versions. The hot key is Option Command F for Mac or Ctrl Alt F for Windows. Navigate to where the .swf file is located and click Choose. When the next dialog box pops up, just click OK.

    Insert SWF

  7. Save your file again and you should get a new popup dialog saying that two new files have been created. If you pull up your project folder on your computer, you should see a new folder called "Scripts" containing two new files. One is a Flash file and the other is a Javascript file. You should also notice several new lines of code that have been added to your source code in the code view in Dreamweaver.

    New Files



  8. Go ahead and preview your index.html file in a browser to see if it worked. If you see a pulsing "Flash Content", your project was a success! If you do not see this, here is a link to a working version so you can compare your code.

METHOD 2: FLASH

This method requires Flash, so, if you don't have a copy of Flash on your computer, you can either try this on a computer that does or go ahead and skip this section.

  1. Create a project folder, if you haven't already. In that folder, create a sub folder called assets, and inside that, create two folders, one called fla and another called swf.

  2. Open Flash and create a new ActionScript 2.0 file.

  3. Choose either a type tool, brush tool, or shape tool and do some random doodles on the blank canvas. It really doesn't matter what you create; we just want some visual content so that we know our Flash content is working when we view it in the browser.

    Flash tools

  4. Save your file inside the fla folder you created. Call it flash-content.fla.

  5. Go to File > Publish Settings. The current selected tab should be "Formats" and only the Flash and HTML boxes should be checked. Click the folder icons by each of those and choose a destination for those two files.

    Formats

  6. For the Flash file, navigate until you are inside the swf folder and call your file flash-content.swf.

  7. For the HTML file, navigate to the top level of your project folder and call your HTML file index.html. If you already have an index.html from doing the Dreamweaver method, call it index2.html.

  8. Now click "Publish" in the lower left corner of that dialog box.

  9. If you navigate on your computer to your project folder, you should see the files you just published. Open the index.html file in a browser to see if it worked.

  10. With the Flash method, if you want to add additional HTML content, you will need to then take your index.html into a code editing program and code around the code that Flash has generated automatically.

METHOD 3: JAVASCRIPT PLUGIN

This method is for those who do not own a copy of Dreamweaver or Flash. Although it does require a bit more manual coding, it does keep your code much more organized and clean than if you were to let Dreamweaver or flash automatically generated for you.

There are several ways to do this using JavaScript, but one method in particular that I have found is using a plug-in created by flowplayer.org. on this site, you can download all sorts of useful JavaScript-based plug-ins they can really enhance your website dramatically. The plug-in that we are using for today's project is one that lets you easily embed flash on your website with very little code.

So let's get started:

  1. Before we can go to download the plug-in, we need to first create a project folder and an HTML file to embed the flash in. So, create a new folder for your project, and inside of it, create a subfolder called assets and inside that folder create two new folders, one called "js" and the other called "swf".

  2. In your code editing program of choice, create a new HTML file called index.html.

  3. Now, go to flowplayer.org in Firefox and click jQuery Tools and then Demos in the nav bar, or click here.

  4. From the right column under toolbox and then under 2.flash embed click Basics of Flash embedding. On this page you should see an analog clock. This clock is created in flash. You can tell by right clicking on it, which will bring up a dialog box that should say something like "Adobe Flash Player 10" at the very bottom.

  5. To see the code for this page by itself, scroll down until you see " show this demo has a standalone page." Go ahead and click on the link.

  6. Pull up the source code of this page by going to View > Page Source or by pressing Command U in Mac or Ctrl U in Windows.

  7. The first line of code we need is the first <script> tag that calls for the jQuery plug-in that allows this to work. Copy and paste this line into your index.html file inside of the <head> tag. You should notice that there is a "http://" at the beginning of the src. This means that we are calling the script remotely from the host server, and therefore, are not posting this JavaScript file within our project folder. This will work for us for today's project, but in the future it's generally a good practice to host JavaScript files within your own project folder. The reason for this is in case the server on which your file is being hosted for whatever reason is shut down or changed, you would lose all functionality that is made possible by the file.

  8. Don't worry about copying the CSS <link>. This is just for styling the page, but is not necessary to run the flash.

  9. The next thing we need to copy is the <style> tag. This is necessary to tell the browser how tall and wide the flash content should be. In this case, you will see the selector is #clock. You can change this to whatever name you would like, so long as it is consistent with the id of the <div> tag that you're using for your page. For this project, let's give this <div> and id of "flash". Let's set the width to 720 and the height to 480, since that is the size of our flash content.

  10. The third thing we need to copy is the <div> element where we want our flash content to be placed. We don't actually need to place any content between these two opening and closing tags. The only thing we need to be concerned about is giving this item an ID.

  11. And finally, at the very bottom of the code you will see another <script> tag, where we are actually running a line of JavaScript which tells the browser which elements to embed our flash inside of and also what the path is to the .swf file.

  12. If you haven't already, you'll want to download our example flash content. Go ahead and click here to download it, and once you have, place it inside of the swf folder in your project. This is what we want to link to in this final line of JavaScript. This is what your script should look like:

    <script>
    flashembed("flash", "assets/swf/week10.swf");
    </script>


  13. That should be it. Save your HTML file and open it in Firefox to see if it worked. If you see a pulsing "flash content" then you successfully embedded flash using JavaScript. If, for some reason, you do not see this, click here to compare your code with mine.

Javascript plugins

There are literally hundreds of excellent pre-written JavaScript plug-ins that are freely available on the Internet for you to download and use. As a web designer, you will discover more and more of these as you do more projects.

For today's assignment, we are going to be using a very popular JavaScript slideshow plug-in called fancy box. It uses a method of displaying images in what is called a white box, which is much more elegant and convenient than having to open images in new windows or having to load an entirely new page.

Let's get started:

  1. Go to fancybox.net. On the first page, there is a section called examples, showing several ways that the plug-in can be implemented. Go ahead and click on the thumbnail images to see the various types of effects.



    In this week's lesson, we will only be doing the very basic version, however, feel free to add additional functionality on your own.

  2. Before we can implement this plug-in, we will obviously need to create a new HTML file again. So, go ahead and create a new project folder, inside there create a folder called images and another folder called JS.

  3. Go inside of Dreamweaver or whatever other code editor you like and create a new file called index.html and save it in the top level of the project folder.

  4. Next, let's go back to the fancy box website, and click the download button in the upper right corner. Once the file has been downloaded and decompressed into a folder, you should notice that there are several files inside of it, including an index.html. This file contains several examples, and although we could just pull the code from this page, I would like you to get some practice in manually implementing this feature into your own custom page, since this will be very common.

    Fancybox Files

  5. Copy both the fancybox and example folders into your project folder. Also, copy the file jquery-1.4.3.min.js into the js folder that you created inside of your project folder. Don't worry about copying the style.css file, since it is only used to style the demo page.

  6. Even though we are not going to be using the demo page that was included in the fancy box download folder, we will be pulling specific lines of code from there to be used in our own project.

    So go ahead and open the included index.html in Firefox, and go to View > Page Source to view the source code.

  7. Copy the first <script> tag that reads like this:
    <script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
    </script>
    This is a link to a the jQuery Javascript framework code which makes this plugin possible. Since this is a remotely hosted file, we don't need to worry about posting it ourselves. And you will notice in the URL that the host is googleapis.com, which we can be pretty confident in, since Google's servers are securely backed up.

  8. The next line of code that we need a copy is the link to the fancy box JavaScript file. It should read like this:
    <script type="text/javascript" 
    src="./fancybox/jquery.fancybox-1.3.4.pack.js">
    </script>
    this is different from the line directly above it that reads:
    <script type="text/javascript" 
    src="./fancybox/jquery.mousewheel-3.0.4.pack.js">
    </script>
    Don't worry about copying this line, since it's only purpose is to add scroll wheel functionality, which we don't need to be concerned with at this point.

  9. Next, we need to copy the fancy box CSS file. That link should read like this:
    <link rel="stylesheet" type="text/css" 
    href="./fancybox/jquery.fancybox-1.3.4.css" 
    media="screen" />
  10. Next you will see an opening <script> tag with a whole bunch of code inside of it. These are for the various types of examples that are shown on this demo page, but we only need to be concerned with the very basic one. Here is what you should copy and paste into your code:
    <script type="text/javascript">
    $(document).ready(function() {
    $("a#example1").fancybox();
    });
    </script>
  11. Now that we have included all the necessary JavaScript and CSS files, we can now place the HTML elements that we are going to affect on the page. In essence, we are going to create <img> tags that are wrapped in <a> tags. The <img> tags are the thumbnail images themselves and the <a> tags will be pointing to the larger versions of the images, which will pop up in the light boxes.

    Here is what your code should look like inside the <body> tag:

    <a id="example1" href="./example/1_b.jpg">
    <img alt="example1" src="./example/1_s.jpg" />
    </a>
    The id is used to point out what element to run the fancybox plugin on. Notice the JavaScript above the line that reads "$("a#example1").fancybox();" a#example1 is referring to a <a> element with an id of "example1", and the .fancybox() is just telling the the Javascript to run fancybox.

    The src="./example/1_s.jpg" inside the <a> tag is referring to the image that we want to pull up in the and lightbox.

  12. That's it! Save your file and open it in Firefox to test if it's running. If for whatever reason it's not running, you can click here to view my example so you can compare source codes.

Email me if you have any questions! -> jearley1@ivytech.edu

HOMEWORK

  1. Create a project folder containing all the necessary files for embedding a swf file. You may use any of the three methods listed above, you do not have to do all three if you don't want.

  2. Create a project folder containing all the necessary files for running fancybox. For extra credit, you can create a project with your own custom images.

  3. Upload both of these projects via Filezilla and save them as (first initial)(last name)-wk10-flash and (first initial)(last name)-wk10-fancybox.

Questions?

As always, please email me if you have any questions! jearley1@ivytech.edu