Design a Simple Landing Page with Flash

Flash can be used to make a lot of stuff. From video players, audio players, full blown websites to games, applications and widgets among many more usages. If you’ve been around a while you might know that quite a bit of the webs content is made up of landing pages.

Using a mixture of Flash, HTML and CSS you can come up with some very creative money making content yourself.

What’s A Landing Page?

Landing pages have been around since the birth of the Internet. People have used them for collecting your name and email address to selling you something. The affiliate marketing industry are probably the most prolific users of landing pages.

Designing A Landing Page with Flash

The first thing you need to determine before you set about designing a landing page is to figure out what it is exactly you want your visitor to do? In this example, I want my visitor to visit Themeforest via my referral link. So let’s get started.

The Details

First things first, let’s get some architecture in place. The major thing to think about here is

“What do I want my visitor to see?”

Since Themeforest sells themes, obviously, we want to present the benefits of the marketplace -

1. Variety, Variety, Variety!
2. Low Prices
3. Easy to customize

Great! Now that we have an idea of what we want to present let’s move forward and get some layouts down on. You may choose to hand draw them on paper, I sometimes do, but since I’ve done stuff like this before I know exactly how I want to structure it. Here’s my box layout -

Colors!

Picking colors can be either really fun or really frustrating. I generally tend to hit up ColourLovers and pick a palette.

How do I decide on a palette?. Well, it’s all a matter of personal choice and spontaneity. I could be eating a fruit and like a certain shade from it and look for something that matches it. Moving forward, here is the palette I chose {I always wanted to visit Turkey}.

Let’s Flash It Up

Now, generally I would go ahead and build my own Flash file. But since we’re on FlashDen and there are an immense amount of galleries I just went ahead and picked one that I thought would serve the best purpose.

This actually took me longer than anticipated because there are so many files to choose from. I made a bookmark collection that you can view. I’m sure the others would serve the purpose just as well, ultimately I choose the Flash Banner Rotator file from rcuela.

Best of all I do not need to open Flash to add my content, as is the case with most of FlashDen’s files.

The HTML and CSS

The HTML is going to be very simple, as will the CSS. As you can see from the above layout I basically need four sections.

Here’s my HTML:

<div class="content">

<a href="http://themeforest.net" target="_self">
<img src="content/logo.png" width="127" height="66" border="0" /></a>

<h1>Customizable Templates from $10.00</h1>

</div>

<div class="content">

<p>You can find website templates and themes for blogging platforms like
<a href="#wordpress">WordPress</a> and Blogger on Themeforest.
You can also find <a href="#psd">PSD templates</a> and themes for a CMS
like <a href="#joomla">Joomla</a>. </p>

</div>

<div class="centered" id="wordpress">

<h2>WordPress Themes</h2>

Flash comes here

<p><em>*click on any image to view more</em></p>

</div>

<h2>PSD Templates</h2>

Flash comes here

<p><em>*click on any image to view more</em></p>

</div>

<h2>Joomla Themes</h2>

Flash comes here

<p><em>*click on any image to view more</em></p>

</div>

<div class="content">

<p>Visit <a href="http://themeforest.net" target="_self">Themeforest</a>
to view more amazing themes for your web projects.</p>

</div>

Here’s my CSS:

body { background: #AFF6FF; padding:0px; margin: 75px 0 0; padding: 0; }

p { text-align: left;
font: normal 0.8em Verdana, Arial, Helvetica, sans-serif;
padding: 0 0 15px; }

a { color: #16ABBE; text-decoration: none;
border-bottom: 1px dotted #16ABBE; }

a:hover { color: #000; border-bottom: 1px dotted #000; }

h1 { font: italic normal 2em Georgia, "Times New Roman", Times, serif;
margin: 0; padding: 0 0 10px; color: #3A3839; }

h2 { font: normal 1.5em Georgia, "Times New Roman", Times, serif;
margin: 0; padding: 0 0 10px; color: #3A3839; text-align: right; }

.content { width: 696px; text-align: left; margin: auto;
overflow: auto; text-align: right; }

.content img { float: left; }

.centered {    width: 590px; margin: auto; padding: 35px 53px 0;
overflow: auto; background: url(content/bg.png) no-repeat;
height: 441px; text-align: center; }

.centered p { font-size: 0.7em; text-align: center; }

The XML:

Since the XML is pretty lengthy and you would only be able to see it once you buy the file I will not be publishing it here, but rest assured it is EASY.

Now, I simply make separate folders for the PSD and Joomla categories and store the Flash SWF along with the respective XML files to call the different image files I’m showcasing here. This is the easiest way to do it without opening Flash to re save the SWF with another filename.

Putting it together

First let’s create a simple HTML document and stick the HTML and CSS I provided above in there.

Here’s some more screenshots of the progress -

I made a simple faded background in Flash and exported it as a PNG to use it as a background for the Flash areas. Just to add a touch of design.

The final page looks like this, for a live preview you can visit it on my server here.

So there you have it in a nutshell. By using a little bit of HTML, CSS and a nice offering of Flash we have created a simple landing page that you can use to promote virtually any type of product.