Today we’re giving away $100 in free custom stickers from our friends at Sticker Mule. If you’re a designer, chances are you have clients that could use some stickers. That’s where Sticker Mule comes in. They make awesome die cut stickers, with a super easy ordering process. Just upload your artwork and they’ll take care of the rest. They’ll make your artwork print ready for free, and provide a free online proof with every order.

Here are some shots of their handy work:

To Enter: Just comment on this post. We’ll chose 1 winner at random.

Contest Ends 01/16/2012

Bonus Round!!! Retweet this post and we’ll pick one additional winner from Twitter. So spread the word!

With the power of Adobe Flash, some developers are eschewing the normal web design and development roles in favor of bringing back classic 8-bit gaming staples to the computer platform. Jay Pavlina of Exploding Rabbit has taken the original Nintendo Entertainment System and converted the platform staple Super Mario Brothers to an awesome Flash game.

Not only did he bring the classic Mario Brothers to the Flash platform, he brought along several other classic Nintendo characters for the journey. The latest version of the game includes Ryu from Ninja Gaiden, Link from The Adventures of Zelda, Simon from Castlevania, Bill Rizer from Contra, Sophia III from Blaster Master, and Samus from the legendary Metroid line of games.

While most would think that each of these characters would play a static and non-interactive role in the game, Pavlina has incorporated each of their unique abilities into the coding and storyline. Not only can each character attack with jumps and fireballs, they are also equipped with special skills according to their prior gaming history.

For instance, Simon can whip opponents and throw axes while Samus can curl up into a ball and drop bombs on unsuspecting Goombas. If you think that you are just going to rehash the same tired gameplay of the Mario universe, think again. Imagine taking out turtles with Mega Man’s arsenal or blasting away at Bowser using the Konami Code.

Adobe Flash can be used as an excellent tool for creating the most dynamic and interactive web pages and cutting edge video players known to man. It can also reach deep down into the nostalgia bin and pull out a gem like the Super Mario Crossover game. Are there any other characters who would fit into Jay Pavlina’s epic vision of the Mushroom Kingdom?

To see the Super Mario Crossover game, click the screenshot below:

Today, I am proud to present to you an awesome giveaway from Wibiya. What is Wibiya? It’s a company that has created a super innovate web bar. It’s the same bar you see at the very bottom of this page. It’s the same bar used by entities like NBA, Playboy, Samsung and many others. It requires absolutely zero coding skills – I didn’t have to code a thing to get it up and running. Do you want your own bar just like that to use on your website? If so, listen carefully as to how you can enter into this giveaway.

PARTICIPATION RULES:

Step 1: you must register for a free account on Wibiya.com

Step 2: please leave a comment here explaining how you plan to use the bar.

There will be TWO (2) lucky winners, each of whom will get a free upgrade to the PRO Wibiya account for 1 full year.

This giveaway will end in 1 week on Tuesday, January 3rd 2012 at 1 PM EST.

***THIS GIVEAWAY HAS ENDED*** Congratulations to Stuart Robson and Monique Jones who are the 2 lucky winners!

About ShopHTML.com

ShopHTML.com helps web designers convert their marvelous artwork into a standard compliant and cross-browser compatible XHTML/CSS markup and professional CMS theme.

With many years of experience, unmatched customer support and quick turnaround time, ShopHTML.com is an excellent choice for all of your PSD to HTML needs.

Why work with ShopHTML.com?

Excellent quality is their first priority. Markup they deliver is W3C Valid XHTML 1.0 Transitional and looks equally good in Internet Explorer 7+, Firefox 3.6+, Chrome, Opera 11, Safari 5. They can also test your page on mobile devices of your choice.

• You work directly with the team and your project manager, and as a result you have a greater control over the progress of your project.

• They respect your privacy, therefore your private information and designs will not be disclosed to anyone.

• It is a risk-free service! They guarantee to issue a full refund, if you are not happy with their work.

• Unbeatable pricing.

Take a look at some examples of their work to get a better idea of the quality XHML / CSS code they deliver.

Now you have an amazing chance to try their service for free! Just take a minute and follow the instructions below:

The terms of the giveaway are as follows:

There will be 2 winners, each of whom will receive 3 free pages of PSD to HTML conversion.

How to enter: Share a link to this giveaway either on your Twitter or Facebook profiles. Then copy the link where you talked about the giveaway and paste it into the comments section of this article.
Good luck to all! This amazing giveaway will end on Thursday, November 10th 2011.

My In-laws Made An Out-law Out of Me

While the leaves are changing colors, the air’s getting crisp and Jack-O-Lantern’s are beginning to decorate front porches, that can only mean one thing, we’re shifting from fall season in to holiday season.  I’m sure some of you will be able to relate to this hilarious music video animation (link: http://www.funnyflash.com/funnies/details/194/funny_flash/my_in-laws_made_an_out-law_out_of_me) about a poor Texan mans luck running out once his in-law’s come to town.

The End of the World

The End of the World cartoon (link: http://coldhardflash.com/video/06-endofworld.swf) not only became a cult classic amongst viral video fans, but it also earned the creator, Jason Windor, a job with Wieden+Kennedy.  Windor graduated from making this funny video portraying his take on the world’s nuclear standoff to help produce various TV spots for the NBA and Nike Sphere.  As one might expect while under threat of nuclear annihilation, there’s a fair amount of strong language in this one.

Old Man of the Future

Some times it’s hard for me not to feel like this guy (link: old-man-of-the-futures-.funnypart.com), especially when I’m visiting my friend and his 5-year-old son is browsing the web on a laptop, filtering search results, and busting out shortcut keys faster than I can type.  I didn’t even know what a computer was for when I was his age!  Then again, I think back when I was his age websites were still made with a chisel and stone.

Boot to the Head

Having grown up with parents who would always compare something that was a little less fun in a child’s eyes to a boot to the head, I got a good chuckle out of this video (link: http://www.funny-games.biz/cartoon/boot-to-the-head.html).  It’s definitely better than a boot to the head!

Sandwich

I’ll be the first to admit that I love sinking my teeth in to a nice, massive, meaty, sandwich smashed between a fresh roll on very frequent occasions.  But I think this guy (links: http://eddsworld.co.uk/amywins/toons/sndwch.htm) takes sandwich loving to another level, which surprises me considering it looks like it’s just plain white bread, and only one kind of meat and one kind of cheese.

Do you like waffles?

This video (link: http://www.just2pale.com/Viewer.aspx?n=StareDad) is short but sweet.  It tailors to the fans of completely random humor and was derived from a comic that has been floating around the interwebs for some time.  I’m still trying to figure out what there is not to like about waffles!

Odd Todd

Todd Rosenberg, or more commonly known as Odd Todd, propelled himself on to the viral video scene a decade ago when he was laid off and decided to start making Flash videos like this one (link: http://www.oddtodd.com/vacation.html) to vent his frustration.  Todd quickly became a poster child for the unemployed .com workers who suddenly found themselves in a similar situation to Todd’s.  Be aware that there is some strong language in this video.

Strong Bad

Created by Mike and Matt Chapman, this Homestar Runner cartoon (link: http://www.homestarrunner.com/sbemail58.html) features Strong Bad reading an email asking for some pointers on how to draw a dragon.  The cartoon became a viral video sensation and they eventually began creating Trogdor, the name given to the dragon Strong Bad draws, t-shirts and selling them in high-volume.

There She Is

This cartoon (link: http://www.albinoblacksheep.com/flash/ddautta) does a pretty good job at mocking falling in love, as a young female falls in love with a male counterpart.  He can’t make his case any more clear, he’s not interested, but she can’t take the hint and certainly won’t take “no” for an answer.  Is he doomed, or is there hope?

TF2 – The Question

If you’re a lover of Team Fortress 2, or sandwiches, you’ll probably get a kick out of this video (link: http://www.newgrounds.com/portal/view/580512).  This Flash short features characters from Team Fortress 2 singing instructions on how to make a sandwich.  I’ll be the first to admit, this sandwich is a lot more tempting than the one mentioned above (link: http://eddsworld.co.uk/amywins/toons/sndwch.htm).

Animatory vs Animation III

I’ve always heard people say that computers were going to take over the world, this Flash animation (link: http://www.newgrounds.com/portal/view/576381) gives us a look at what that might mean.  Or is this perhaps some new form of computer virus?  One thing’s for certain, I never thought watching icons and stick figures fighting each other, using games and menus as weapons, would be so entertaining!  Then again, I never imagined that kind of war even existed.

Nicolas Cage Wants Cake

What more needs to be said about this video (link: http://www.newgrounds.com/portal/view/539314), it has Nicolas Cage, a chick in a bikini, and chocolate cake.  Oh, yeah, and Nicolas Cage wants that chocolate cake.  The animation quality is really well done, and the video as a whole is part techno music video, part cartoon.

Drunk Science

I’ll admit, I thought this video (link: http://www.newgrounds.com/portal/view/551691) was pretty funny because I couldn’t help but think of my college years.  However, I’m not sure if the main part of the video is the actual video or some kind of intro.  The ending is a bit confusing and random, maybe even a tad vulgar for some.  But as a whole it’s worth a laugh.

Social Assassin

We all have one of these kinds of people in our social e-life, the person who has to give us an update every time their brain works, “OMG!!!! It’s been nearly 30 seconds since I last made an update, LOLOL!!!!!”  This cartoon short (link: http://www.newgrounds.com/portal/view/581120) by Happy Fatties LLC takes that person and gives him the job of his polar opposite, an assassin.  So, how exactly does a black ops assassin do his job if he’s constantly checking in and updating his followers?

The Icecream Machine

The Icecream Machine (link: http://www.newgrounds.com/portal/view/180049) is another video I think we can all relate to,  a vending machine giving us grief.  However, I don’t think we can relate to a vending machine that talks to us and acts as though it’s T1000 or some kind of other Terminator robot, but the frustration is easy to relate to.

Flash animated videos are a fun way to express your creativity.  Whether you’re unemployed and have the extra time and sense of humor to poke fun at your situation, or are fresh out of design school and looking for a fun and creative way to flex your Flash muscles, the web just may eat it up and propel you in to a new viral video sensation.  You never know, your work may go from a job hunting distraction to a Super Bowl halftime commercial.

Want to make your own Flash website with animation? Check out Wix, an awesome free Flash website builder.

About the author: with over ten years in the freelance web design and writing fields, Scott Stanton has had his finger on the beating pulse of the industry’s hottest design trends and bends for the past decade. Scott regularly writes for Wix.com the free website builder.

Gorillaz

The Gorillaz website www.gorrilaz.com/plasticbeach is less like a website and more like a video game.  In fact, there are loads of games that you can play on the site while strolling around Plastic Beach.

Milk

Yep, Milk.  The California Milk Processor Board has launched a website (link: http://www.gettheglass.com/index2.html) promoting milk that is so interactive that one would say it’s a game that acts like a Flash site.

Greenpeace

Greenpeace launched a pretty slick Flash website (link: http://anewwarrior.greenpeace.org/?lang=en) to help raise funds and awareness for their new Rainbow Warrior ship.  A video montage intro is followed by a very cool website that allows you to have a 360 degree exterior view of the ship, along with multiple views, and to see who has helped contribute to the ship.

Lego® Star Wars III

Legos, Star Wars, video games and Flash: sounds like a winning combination if I’ve ever heard one!  Lucas Arts launched this Flash site (link: http://www.lucasarts.com/games/legostarwarsiii/index.jsp) to promote the third installment of the Lego® Star Wars video game.  The site, a Flash video game itself, is a great way to kill some time and shoot some clones.

Buick Regal

Buick has adapted their flashy Buick Regal to the web with their Flash-y Moment of Truth (link: http://www.momentoftruth.com/) site.  The navigation is similar to a spinning Rubik’s cube, with multiple options on how to spin it, and the site features several reviews from experts and happy owners.

Carls

Cocktails, fine dining and a Flash site created by someone thinking outside the box – that’s what Carls Bar and Espresso accomplished with their website (link: http://www.carls.no/en/#/home).  Instead of a static background image, you get a tour of the restaurant, see drinks being made, food being prepared, and orders being delivered.  It’s creativity at its best, sucking the potential customer through their computer monitor and into the restaurant.

Sony Internet TV

Sony developed a very cool website concept (link: http://discover.store.sony.com//internettv/#/home) to promote their Internet TV.  A cool intro tour of a city leads you to a massive TV in the city center, which has grabbed the attention of some fellow citizens, and a balloon vendor.  Very cool use of Flash with the traffic in the background, flowing trees, and the buzz of the people.

Sony Bravia 3D TV

Sony didn’t just give their Internet TV a top-notch site and forget about everything else they sell, check out the micro-site (link: http://discover.store.sony.com/innovations/hd3d/) for their BRAVIA® Full 1080p 3D HDTV.  This site takes awesome to a whole other dimension: a third dimension!

Ben Faragau

Photographer Ben Fargau developed an eye-catching Flash site (link: http://www.benfaragau.com/main.html) to showcase his talent as a photographer.  Take a stroll through the old time cobbled streets, browse through his gallery, or check out his blog.  This is a unique approach to Flash user experience, as well as a unique way for a photographer to display his portfolio.

Riverfront Park

The city of Denver unleashed this incredible Flash site (link: http://www.riverfrontpark.com/index.aspx) promoting and informing citizens of their new River Front Park.  A thumbnail collage background gives the homepage character and flare while fulfilling the requirements for a picture gallery.  The “explore the neighborhood” interactive map is a really clever way of including the citizens into the vision of the park.

m&m’s

Next time you’re taking a chocolate break and enjoying some m&m’s, be sure to check out their Join The Hunt microsite (link: http://www.firstborn.com/websites/156_mm_join_the_hunt/us/) that they developed to promote their “World’s Most Speck-tacular Egg Hunt”.  The site is set up much like a game, where you can navigate the site by clicking on different aspects of the page and moving your cursor around to get the page to follow.

Sayonara

There’s one word I was not eager to say when I came across Sayonara’s website (link: http://www.misayonara.com/); saying goodbye was the last thing I wanted to do.  There was so much to click on, the graphics were fun, plenty of interactive aspects to keep me exploring and enough low key product placement to make me immediately want a burger and fries.

Mini

This promotional microsite (link: http://www.darc.ro/minichallenge/) for Mini features a driving game that has you peeling rubber across the top of a bar, while dodging cocktail glasses.  I can’t say that drinking and driving is a good combination, but the combination of a Flash website with an integrated driving game is pretty fun!

Arbo Media

This is a fun online portfolio (link: http://arbomedia.pl/) for Arbo Media, an active advertising agency in Poland, utilizing a Flash interface.  The site features a cityscape with links all over town to their portfolio features and is topped off with their Cyclops space creature, which also happens to be their logo, dancing in the city center.  It’s a fun site with great attention to detail.

Frito Lay

Frito Lay launched a promotional Flash site (link: http://madeforeachother.com/) that is an interactive game.  The site has three levels: a sky level promoting their cream dips, a hot level that represents their salsa, and an underwater level promoting their bean dips.  There’s very subtle product placement, and plenty of curiosity in the site to keep you clicking around on things and exploring.

Snoopy

Not even Snoopy could resist the action of having a Flash website (link: http://www.snoopyflyingace.com/#/Home). The Snoopy Flying Ace site promotes the XBOX Live arcade game with the same name.  Some fun animation and a creative navigation that uses newspaper headlines are just a few of the cool things to be seen on this site.

Dutch Horticulture

Dutch Horticulture has planted the fun and interactive seed in viewers to their site (link: http://nederlandse.tuinbouw.nl/#/).  An interactive map, consisting of chunks of land floating in the sky, is accompanied by a traditional navigation bar expanding in from the side.  It’s an extremely informative site that covers all aspects of horticulture, from logistics and international trade, to science and sustainability.

Adidas

Known for their flashy shoes, Adidas’ homepage (link: http://www.adidas.com/us/homepage.asp) is a unique approach to Flash navigation.  Various sized thumbnails grow, shrink, and move out of the way as you hover over them, while displaying more information on their respective products.  Once you navigate from the homepage it is a normal, static, website.  But you’ve got to admit, that homepage is pretty cool!

MSI Chicago

The Museum of Science and Industry in Chicago has developed a fun, interactive Flash site (link: http://www.msichicago.org/fileadmin/Activities/Games/simple_machines/) for their visitors.  Much like a Museum of Science and Industry, the site tricks you into having fun while you learn.  Definitely not a bad thing, plus it gives the viewer the impression that the Museum of Science and Industry in Chicago is a great place for fun and learning.

The Painted Tower

The Painted Tower website (link: http://thepaintedtowergame.com/play/) is so many games in one that it puts itself in a league of its own.  You even get to play a game while the rest of the site loads!  Consider this your warning that some of the things you discover inside the painted tower may spook or haunt you.

When executed properly, a Flash site can be quite awesome.  And the possibilities of what can be done with Flash are limitless!  But to build sites similar to these is not something that happens overnight and can be a long, and often frustrating, process.  If you find yourself in this situation then I’d suggest checking out an online Flash site creator, like www.wix.com.  Wix is an online Flash builder with a drag-and-drop development interface and, best of all, it generates backend HTML code, making your Flash site SEO friendly!

About the author: with over ten years in the freelance web design and writing fields, Scott Stanton has had his finger on the beating pulse of the industry’s hottest design trends and bends for the past decade. Scott regularly writes for Wix.com the free website builder.

Before I begin, for those of you who want an easy way out of this flash website tutorial, you can make a free Flash website with Wix that will look like a very professional website. Now for those of you who are still interested in reading this tutorial on how to make a flash website, I will continue.

In this Flash tutorial I will teach you how to make a very basic Flash website using Adobe Macromedia’s Flash CS5, CS5 simply standing for Creative Suite, 5th edition. So, let’s get started.

1. The first step is going to be creating your workspace in Flash. Begin by opening Flash and clicking “File”, at the top of your screen, then selecting “New”. A window should pop up similar to the one below asking you what kind of new document you’d like to create. For this Flash tutorial go ahead select “ActionScript 2.0”, which is a little easier for beginning Flash developers to work with, then click OK. This should make a blank white square appear on your screen.

2. From here we’re going to want to resize our stage to 790px wide by 630px tall. To do this we select our Properties window and click the Edit button next to the Size properties and a new window should pop up similar to this. And, while we’re at it, let’s change our background color to black.

3. Now that we’ve got our document sized the way we want it I’d suggest saving it, for simple purposes I just named mine “flash_tutorial”. Once you’ve saved the file let’s go ahead and import the “home.jpg” image so we can set the background of our Flash site. To do this you click File at the top, hover over Import then select “Import to library”. This will pop open a box for you to navigate to the “Site Images” folder and select “home.jpg”.

Once it imports in to your library go ahead and drag it on to the stage, then, use the alignment tab to center it and align it to the bottom of the stage. If your alignment tab isn’t open, go to “Window” on the top bar and select “Align”.

4. In order to keep things organized, let’s name this layer “bg pic” on the timeline. To do so is as simple as double-clicking “Layer 1” and changing its name. After we’ve named our background picture layer we’ll create another layer for our content. There are a few ways to do this: you can do so from the top menu bar by going Insert – Timeline – New Layer; or by right clicking (if you’re on a Windows machine, control click if you’re on Mac) over the “bg pic” layer name, this will cause a menu to pop up and you select “Insert Layer”.

Go ahead and add three new layers to your timeline and then name them, starting from the top, “navigation”, “footer”, and “content”, with “bg pic” being the layer on the bottom. And finally let’s lock the “bg pic” layer by clicking the dot for that layer that corresponds with the lock icon above it, which should be the dot on the right. Your timeline should now look like this:

5. Let’s make our Flash website navigation. Click on frame 1 of the “navigation” layer. The color should change from white to gray, this means that anything placed on the stage now goes on the “navigation” layer. We’ll begin by selecting the “T”ext tool from our toolbar and creating separate instances for each page link we want on our Flash site. In this Flash design I’ve planned for six pages, Home, About, Blog, Links, FAQ and Contact. So, let’s create six separate text instances for each of these links, resulting in a stage that should look similar to this:

6. Sticking with the “navigation” layer, let’s now go ahead and convert all of those text blocks to buttons. To convert a text block to a link you simply click on the text you want to convert, a blue box should now frame your text to let you know it’s selected. Then, once it’s selected, you right click (or control click for Mac) and choose “Convert to Symbol”.

7. Once you’ve selected “Convert to Symbol” a new menu should pop up asking what kind of symbol you’d like to convert it to and what you’d like to name your symbol. When it comes to naming symbols in Flash I always like to prefix the name with what the symbol is, it helps keep things organized and easy to find in the library once you go from making a simple Flash website to building larger, more complex Flash sites. For buttons I usually use the prefix “bu”, so for my “Home” button I would name my symbol, “buHome”. About would be “buAbout”, Blog becomes “buBlog” and so on. Go ahead and convert all of your text elements to buttons.

8. The hover effect we’re going to apply to our buttons is going to be a white color box behind the text and the text changing from white to black. Let’s start with the “buHome”. In order to give our buttons a nice spacing we’re going to start with our “buHome” 20 px in from the left hand margin of the stage and 8 px down from the top of the stage. You can easily adjust this by clicking on the “buHome” button, then going to the Properties window and under “Position and Size” change the X coordinate to “20” and the Y coordinate to “8”

Now, go ahead and double-click the “buHome” button and notice how the timeline changes, that’s because now you’ve briefly exited the timeline of your movie to enter the timeline of your button. You will also notice the text above each frame where numbers were on our main stage, these are the attributes of the button that we can set. We’ll start by expanding our timeline from the single “Up” frame it’s at now all the way to “Hit” by simply right clicking (or control + click on a Mac) and choosing “Insert Keyframe” from our list of options.

9. Now that we’ve got a new key frame under “Hit” let’s go ahead and define the live area that we want our viewers to be able to click on to follow the link. The easiest way to do this is by breaking our text box down twice, until it’s a flat image. You can do this by selecting the “Home” text and hitting Control + B twice (or Command + B twice on a Mac). The first time you break the text apart it breaks down to individual letters, the second time is a flat image and is easier to spread your target hit box over.

Once you’ve broken the text down, select the rectangle tool, that’s two spots below the text tool on your toolbar, and make a rectangle over the word “Home”. The “Hit” zone is not visible by the viewer, you’re only defining the live are in which they can click to follow the link. That’s why when I set my “Hit” area I like to use an obnoxiously bright color so that it sticks out and doesn’t blend in with the background colors.

10. Now let’s insert a keyframe for our “Down” and “Over” attributes as well. “Down” will remain the same as “Up”, but if we don’t break them all in to separate keyframes then once we change the “Up” effect, it will carry over to the “Down” effect.

Once you’ve got all the attributes with their own separate keyframe we can tackle the “Over” effect. To do this we’re going to need a new layer so we can place the white hover block behind the text. So, click on “Layer 1” and select “Insert Layer”. Once the new layer appears you’ll need to drag it below “Layer 1” because we want the color block to appear behind the text. And then we only want it to appear during the “Over” state so go ahead and “Insert keyframe” for the “Over” and “Down” state.

Now we can click on the “Over” state inside of “Layer 2” and draw our box. I think a 20 px marking on the left and right of the word will look nice as well as filling the entire black portion of the Flash website navigation box vertically. In order to do this we’ll need a box that’s 40 px wider than our text, so if you click on the text you’ll see it’s 52.85 px wide, meaning our box needs to be 92.85 px wide. The black area of our navigation bar is 37 px tall, which means our box has to be 37 px tall as well. Select the rectangle tool, go to your Properties window, set the fill color to white (#FFFFFF) and no stroke color, then drag out your box. If it needs fine tuning once you dragged it out, all you have to do is click on it to select it, then go to the Properties window and change the Width to 92.85, and the Height to 37. Then to move it in place make sure the X coordinate is set to -20 and the Y coordinate is set to -8.

The final step to making our button is clicking on the “Over” state in “Layer 1”, selecting the text, and changing the color under the Properties window to black (#000000) so you’re able to read it against our newly formed white box. If you’ve done everything correctly so far, your button stage should look like this in the “Over” state.

Go ahead and see if you can do the rest of the buttons on your own. Keep in mind that your next button should be spaced 40 px from the right side of your previous button to allow for the hover effect. The simple calculation for this is, Width + X Coordinate + 40. Your Y coordinate should stay at 8 to ensure all your buttons maintain the same Y-axis. And that your “Hover” effect should be 40 px wider than your text, with a 20 px margin on the left and right. The X and Y coordinates of your “Hover” square should always be X: -20 and Y: -8.

How’d you do in creating a Flash website, does your Flash website site match this?

If not, no need to fret. Surely it was a miscalculation on button placement. Here’s a little cheat sheet for you.

Home: x = 20
About: x = 112.85
Blog: x = 206.85
Links: x = 289.7
FAQ: x = 379.25
Contact: x = 461.75

And remember, the Y-axis on those should always be 8.

Now would also be a good time to not only save your project, if you haven’t done so already, but to export what you’ve done so far to see if your buttons are working properly. To export your editable .fla file to the .swf format that’s readable by web browsers, you can either go to File – Export – Export Movie. Or utilize the shortcut keys and hit Control + Shift + Enter on a Windows machine or Command + Shift + Enter on a Mac.

11. Now lets program those links to go somewhere. Click on “buHome” and then select the “Actions” window. Under the Actions tab, in the top right corner you should see an icon with “Code Snippets” next to it, and then another icon just to the right of that icon, which looks like a magic wand. Make sure you click the wand as it will help you write the ActionScript needed to make the buttons function.

On the left side should be a scroll box. Double-click on “Timeline Control” to get the menu to expand and drop down, then double-click “goto”. This should make a menu appear to the right asking more specific questions. First you’ll want to click the “Go to and stop” radio button, scene should remain at, under type you’ll want to change “Frame Number” to “Frame Label”, and then under Frame enter “home”. That’s it.

Now go ahead and do that for the rest of your buttons, but the “Frame” name should coincide with the link you’re programming. For example, when you’re developing the code for the About button you would simply write “about” in the box next to “Frame”.

12. Working our way down the layers latter of our timeline, next up should be “footer”. For this we’re just going to create a basic footer with some social media links as a way of closing of the bottom of our site and giving it a little extra aesthetics. But before we dive in to the footer, let’s go ahead and lock our “Navigation” layer, since we’re done with that and don’t want to accidentally screw anything up in that layer.

For our footer we’re going to create a black rectangle with a 60% opacity that’s 30 px tall and spans the width of our stage. To do this we first want to make sure we’re in frame 2 of the “footer” layer. If you’re already there, then all you have to do is select the rectangle tool from the toolbar and drag out a rectangle. Once you have a triangle on your stage you can easily edit it to perfection by selecting it, going to your Properties window, and entering the above attributes. Then, once you’ve got the proper shape size and opacity, you can go to your “Align” window and tell the rectangle to “Align horizontal center” and “Align bottom edge”.

13. Now let’s add those social media icons to our footer by importing them to our library first. If you don’t remember how to do this from step 3, I’ll give you a hint. File – Import – Import to Library. And you’re going to want to import “email.png”, “facebook.png”, and “twitter.png”.

Once they’re in your library go ahead and drag them on to your stage. Where to place them is a personal preference, but I like mine in the bottom right corner. My Y coordinate is set to 606, while my X coordinates are:
Facebook: X= 715
Twitter: X = 740
Email: X = 765

14. If you’d like to link the icons to your social media site the process is quite similar to the navigation buttons we did. Click on the icon you’d like to link and open the “Actions” window. Rather than going to “Timeline Control” this time, we’re going to go to “Browser/Network” and select “getURL”. This will select a menu similar to this one and you’ll want to enter the corresponding URL in to the appropriate box and select what window you’d like the link to open in (the current one, a new one, etc).

15. Now that we’re done with the footer layer of our Flash website you can go ahead and lock it and we’ll move on to the content. Like the footer, we’re going to start by dragging out another rectangle with a black background and opacity of 60%. Only we’re going to make this rectangle 355 px wide by 483 px tall and nestle it on the right side of our site at X: 395 Y: 77. Remember, to apply those changes you do so under the “Properties” window.

Once we have our rectangle set at the proper size and in place we’re going to polish it up a bit by softening the edges. To do this we select our rectangle, go to “Modify” on our main menu bar at the top of the screen, then select “Shape”, followed by “Soften Fill Edges”. This should pop up a small new screen asking what distance and number of steps you’d like your edges softened. I think a distance of 10, with 4 steps and expanding should do the trick for us.

16. In order to enter text on top of our rectangle we’ll also need to create a text box. Doing this is a combination of what we did to create our buttons and how we create our rectangles. Select the Rectangle Tool from the toolbar and drag out a box on the stage. I allowed for a 10 px margin all around on mine, so my text box is 335 px wide by 463 tall and sits at X: 405 and Y: 87.

Once your text box is created you can enter any text you’d like, I’m just going to enter some Lorem ipsum to fill the spot.

17. The home page on our Flash website is now created and our entire Flash site is almost created. From here we’re going to want to create frame labels and our next five pages. Going back up to our timeline, create a new layer at above all your other layers and name it “actions”. Once the layer is created click on frame 2 of the “actions” layer then go to your properties window. With “actions” frame 1 still selected, type “home” in to the box labeled “Name:” under “Label” in the “Properties” window. A little red flag looking thing should pop up under frame 1 of “actions”. This means that frame 1 is now labeled “home”, as this is where our home page lies on the timeline and from now on the “buHome” will point here. And if you expand out the timeline by adding more frames under this keyframe, you’ll see that it says “home” next to the flag.

To keep our Flash website from playing straight through every page with out hitting any links, we’re going to have to tell it to stop on each frame. With frame 1 of the “actions” frame still selected, go back to the “Actions” window where we programmed out buttons. Also similar to our buttons, we’re going to want to use the Timeline Control to tell our site to “Stop”. So, go ahead and double-click “stop” so that the site knows to stop at frame 1.

18. To create the next five pages on our Flash website is simple. We start by inserting a new keyframe in frame 2. To do this we need to click on frame 2 of “actions” and drag down to frame 2 of “bg pic”, highlighting all of the frames. Then we right click (or Control + Click on Mac) and choose “Insert Keyframe”. You’ll notice the red progress bar that runs vertically through the timeline has moved to frame 2, that’s because we’re now working on frame 2 of our timeline.

Since we’ve already learned how to make a flash website and done all the hard work of creating everything, now it’s just a matter of editing it slightly to correspond with the correct page. Since our second link is “About”, it would make the most sense to have frame 2 be our “About” page. First things first, let’s click on frame 2 of actions, go back to properties and name this one “about”. After that we need to tell it to stop here like we did on the home page, otherwise it will just play this one frame before looping back to the home page and stopping there. So, with frame 2 of “actions” selected, go back to the “Actions” window and double-click “stop” under Timeline Control.

Now select frame two of your “content” layer and edit the text so that it coincides with what you want on your About page. Once you’ve finished that go ahead and unlock the “bg pic” layer and delete that image. After the image is deleted import “about.jpg” to your library, drag it on to the stage and align it to the horizontal center and bottom of the stage using the “Align” window and PRESTO! Your page should look similar to this.

Now that you’re a Flash website expert, see if you can create the last four pages on your own! Be sure to export it again and test your navigation to see if the links take you to the proper page.

If you’re feeling like Flash is just too complicated, then I recommend using the free drag and drop flash site builder from Wix, which allows you to create a professional flash website for free.

About the author: with over ten years in the freelance web design and writing fields, Scott Stanton has had his finger on the beating pulse of the industry’s hottest design trends and bends for the past decade. Scott regularly writes for Wix.com the free website builder.

Ink Color: Blue or Black (Pink Pen only available with Black Ink)

Maximum imprint length for text (up to 5 lines):

Line1: 22 chars

Line2: 32 chars

Line3: 36 chars

Line4: 32 chars

Line5: 22 chars

*Giveaway rules**

You must be a U.S. resident due to legal restrictions.

*Here’s how to enter our Personalized Pens Giveaway: in the comments form below, tell us how you will use your personalized pens for your business, organization, or personal use. We will choose the Giveaway winner based on the best idea for the pens.  Please use a real email address that we can contact you at if you’re the winner. Comments must be posted by 7 PM, October 3rd, 2011. If you’re the winner, we’ll notify you via email. Good luck to all!

Start commenting NOW!

Prize details:
250  pcs Custom Business Cards for one winner. There will be THREE (3) winners chosen.
Choose one type of business card: 2 x 3.5″ Rounded Corners, 2×2″ Rounded Corners, 1.75×3.5″ Rounded Corners, 2×3.5″ Leaf, 2×3.5 Rounded one corner, 2×3.5″ Half Circle Side, 2×3.5″ Oval, 2.5″ Circle
14pt Cardstock Gloss / Matte / High Gloss (UV), or 13pt Cardstock Uncoated,
6 Business Days Turnaround *Free shipping

Restriction: Limited to *US residents 18 years old and above only. If you’ve won a giveaway from UPrinting in the past 6 months, you will not be eligible to win this giveaway. Prize claim emails are sent within 30 days upon receiving all winner’s details.

Terms of the giveaway:

You must share the link to this giveaway page either on Facebook, Twitter or Digg and leave a comment with the link where you shared it.

As stated earlier, there will be 3 winner chosen for this giveaway, so share this giveaway with friends and coworkers!

Please leave a VALID email address, otherwise we won’t be able to contact you if we choose you.

This giveaway will end on October 1, 2011 at 1 PM EST.

Upon logging in, you would see a screen like this:

As you can see above, I already have my campaign set up. To set yours up, you click click on Start a New Campaign:

Then, fill out the details and click Continue to Next Step:

Select all 3 major search engines (Google, Yahoo, Bing) and click Continue to Next Step:

In the step above, you can put up to 3 competitors. I suggest putting the highest ranking websites so you can see what they are doing right, and what you are doing wrong.. Then click Continue to Next Step to go to the final Step 4:

In the step above, enter up to 5 keywords you want to track. The free trial lets you track 300 keywords in total, which should be plenty (you can set up the other keywords after you create the campaign). Once you enter the keywords, click Create My Campaign.

I am now going to fast-forward 1 day, after SEOMoz has successfully crawled my website. I’ve also added a total of 300 keywords by copy/pasting the top keywords from my Google Analytics.

Here is how my campaign summary looks:

I was shocked to see 6 errors, 2890 warnings and 4957 notices. I thought there was nothing major wrong with my site! SEOMoz actually gives you the breakdown of what kind of errors/warnings/notices you have and shows you which page has which errors.

It turns out I have 5 pages with missing or empty title, 1 page with 4xx error, a whopping 2385 pages with missing meta description, 324 pages with too many links, 176 pages with title element that’s too long, 2271 pages blocked by robots.txt and more. Here I was thinking that the free WordPress SEO plug-in I used would take care of all of my SEO. Not so fast.

Here is a small sample of pages with missing meta descriptions. Turns out that my author pages don’t have meta description set up:

But this is far not all. Inside the dashboard I am also able to see data such as competitive link analysis:

I saw that I have a total of only 175,192 links. While to you this may sound like a lot of links, my top competitors have more than 15 times that number! Also, the biggest difference I saw is the number of unique linking root domains.

That’s not all. Among other things, I am able to see exactly where I rank for ALL 300 of the keywords I added, and across all of the major search engines:

SEOMoz also tracks all of my keywords and shows me where  my rankings have gone up or down.

It’s great to be able to get this kind of SEO information right in front of me. Best of all, I got it all for absolutely free within several days of starting my free trial of SEOMoz. The lesson I learned is you never know what’s wrong with your website until you run a very thorough scan of ALL of your pages. Good SEO is extremely important as that’s what drives the majority of traffic, clients and ultimately money into your pocket. I am off now to start fixing all of the things that are wrong with WebDesignDev’s SEO. What’s wrong with your website? Sign up for SEOMoz free 30 day trial and find out for free.