Flash vs HTML5
The battle between the two dynamic Web platforms
But in short, here are some of the main reasons for an against the use of Flash on the Web:
- Allows for complex dynamic animation with very little coding knowledge.
- Much more designer friendly.
- Up until recently, one of the best methods for embedding video on a website.
- Protects developers' code and content.
- 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.
- Proprietary, meaning, the source code is privatized and not available for coders to build upon.
- Required special software to author, which limits the number of people who can create Flash content.
- Requires the Flash plugin to be installed on the browser in order to view its contents.
- Is processor intensive, causing mobile devices to have shorter battery life.
- Not supported on most mobile devices.
- 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.
So, let's get started!
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.
- 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
- Open Dreamweaver.
- Create a new HTML file.
- Save your HTML as index.html in the top level of the new
project folder you just created.
- 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."
- 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.
- 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
should also notice several new lines of code that have been added to your
source code in the code view in Dreamweaver.
- 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.
- 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.
- Open Flash and create a new ActionScript 2.0 file.
- 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.
- Save your file inside the fla folder you created. Call
- 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.
- For the Flash file, navigate until you are inside the swf folder and call
your file flash-content.swf.
- 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.
- Now click "Publish" in the lower left corner of that dialog box.
- 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.
- 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.
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.
So let's get started:
- 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".
- In your code editing program of choice, create a new HTML file called index.html.
- Now, go to flowplayer.org in Firefox and click jQuery Tools and then Demos
in the nav bar, or click here.
- 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.
- 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.
- 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.
- 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
within our project folder. This will work for us for today's project,
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.
- Don't worry about copying the CSS <link>. This is just for styling the
page, but is not necessary to run the flash.
- 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.
- 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.
- And finally, at the very bottom of the code you will see another <script> tag,
browser which elements to embed our flash inside of and also what
the path is to the .swf file.
- 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
Let's get started:
- 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.
- 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
- 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
- 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.
- 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.
- 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.
- Copy the first <script> tag that reads like this:
- The next line of code that we need a copy is the link to the fancy box
- Next, we need to copy the fancy box CSS file. That link should read like
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
- 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:
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:
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.
- 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! -> firstname.lastname@example.org
- 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.
- Create a project folder containing all the necessary files for running
fancybox. For extra credit, you can create a project with your own custom
- Upload both of these projects via Filezilla and save them as (first initial)(last name)-wk10-flash and (first initial)(last name)-wk10-fancybox.