Web Design Dev

How to use checkboxes and radio buttons in Flash

Iggy — Fri, 03 Feb 2012 14:40:33 +0000

When you are developing rich and interactive applications in flash, you need to provide the best communication between the user and the application. Flash has some very easy to implement UI components that you can use with your applications. These components will save you from the hassle of designing and programming the User Interface. In this tutorial I am going to show you how to implement the radio button and the checkbox component in your applications. It is important that you know a little bit of ActionScript 3.0 before you begin this tutorial.

Start by creating a new ActionScript 3.0 document in Flash. You can find the UI components in the components window. Press ctrl+F7 to open the components window and drag some radio buttons and checkboxes to stage.

I have dragged 3 of each to stage.

At this point these are pretty generic components but you can see that they are visually perfect, the only visual details that need to be changed are the text. If you press ctrl+ENTER to test the movie at this time you can click on these and see that they really work.

Now lets change some of the settings of these components. Select any of the components and head over to the “Component Parameters” section in the properties window. You can see some properties listed here. The properties are pretty much self-explanatory but I will explain them just in case. Lets go to the radio button’s property first.

The first thing here is the “enabled” checkbox. This would enable or disable the radio button to be selected. Group name sets the group that the radio button belongs to. A user can select one option from one set of radio buttons. The selected option specifies whether the button is initially selected or not. The value field sets a value that the radio button contains. So if a user selects this radio button then we can retrieve its value with ActionScript. At last the visible property selects whether the button is visible to the user or not. This property has some pretty limited applications.

If you head over to the checkbox component parameters you can see that all the properties are same except the label placement. This property selects the placement of label relative to the checkbox. Also note that there is not group name here. That is because there are no groups in checkboxes and each checkbox is independent.

I have labeled all the checkboxes and radio buttons with some names of foods. Now we examine the code that we need to process these components. For the code to work with these components, they need to have some variable names. I have given these the names of radio1_mc,radio2_mc,radio3_mc,check1_mc,check2_mc & check3_mc. I have also created a button that would be used to submit these values and I have named it submit_btn.

Now create a new layer for actionscript and insert the following code in it.

submit_btn.addEventListener(MouseEvent.CLICK,processButtons);

function processButtons(e:MouseEvent){

if(radio1_mc.selected){

trace(“Radio button 1 is selected”);

}

if(radio2_mc.selected){

trace(“Radio button 2 is selected”);

}

if(radio3_mc.selected){

trace(“Radio button 3 is selected”);

}

if(check1_mc.selected){

trace(“Checkbox 1 is selected”);

}

if(check2_mc.selected){

trace(“Checkbox 2 is selected”);

}

if(check3_mc.selected){

trace(“Checkbox 3 is selected”);

}

The code is pretty simple but let me explain it to you. First I add and event listener that handles the clicks on the submit button. In the event handler I check the “selected” property of all the radio buttons and checkboxes. If that is true then it means the radio button or checkbox is selected and so I trace on to the output that the radio button/checkbox is selected.

I hope you have learned how to use these UI components. Use these components to make your applications user friendly and save precious development time.

By the way, don’t forget to check out Wix, an awesome free Flash website builder.

10 Sources for Stock Photos

Scott Stanton — Thu, 26 Jan 2012 19:08:04 +0000

More often than not I find myself meeting with a prospective client and telling them one of the biggest keys to designing a stunning website are the images that you use. You can have the most elaborate interface, with parallax scrolling, fluid and responsive resizing capabilities, and the best color pallet possible. But if your images were taken on a disposable camera and then scanned, your website is going to look more like a web-fright.

If you’re dealing with a start-up, or a smaller client who may be on somewhat of a tight budget, the funds just aren’t there to hire a professional photographer to come in and take standard photos for you to use on the site. There are tons of places these days for finding good, high resolution, professionally edited photos for a fraction of the cost of hiring a lens man.

iStock Photo

Not only does iStock Photo have an image for just about everything you can think of, you can also get free images. Sure, it may be a shot in the dark that it’s one that will work with your design. But hey, I’m a sucker for free stuff! They don’t just offer images, you can also use them as a source for illustrations, audio files, videos, and Flash videos.

Getty Images

You may have seen the name Getty Images watermarked, or in the caption of, some news stories you’ve read on various news sites. Like iStock, Getty Images don’t stop at just images, they offer music and audio files as well. Unlike iStock, Getty has a pricing scale depending on what the image is going to be used for.

Free Digital Photos

The name says it all with Free Digital Photos. The selection may not be as vast as some of the other sites, but for the price you really can’t complain. Free Digital Photos offers both pictures and Illustrations and browsing the selection is extremely easy with the navigation on the left side. There’s also a search feature, in case you know just what you’re looking for.

Shutterstock

Offering over 17 million royalty-free stock photos, I think it’s safe to say you’ll be able to find the image you’re looking for on Shutterstock. There are a couple pricing options, you can buy a membership and have a monthly limit of 750 images, or you can buy on demand by the photo or by five photos. Shutterstock also offers a free photo and vector image each week.

123RF

123RF offers over 12 million royalty free stock photos, and counting. You can purchase credits and download by the image, or buy a subscription and download like crazy. The site is incredibly easy to navigate and once you find the image you want the pricing and size options are right there, no need to click through a bunch of other links to figure out the cost.

Free Pixels

Free Pixels is, well, exactly that, free stock images. The site navigates a lot more like a discussion forum, but for the cost of the product you really can’t complain. If you can’t find the photo you need on their site, they have a search box that automatically searches the Shutterstock site for you.

Deposit Photos

Deposit Photos offers the pay per image or subscription plan, and even has a free trial subscription. You can search for vectors and images if you know exactly what you came there to find, or using the hovering slide bar to browse by category.

Fotolia

Fotolia is a site cut from the same stone as Shutterstock, as they look nearly identical. Along with images you can also get vectors and videos. They also feature images of the day and seasonal searches that will help you to get your creative juices flowing.

Pixmac

Pixmac Pixmac makes it clear what they do, they sell pictures. And with low price pay per image options as well as some very affordable subscriptions options, I’d be willing to bet they sell quite a few of them. You can search for the image you’re looking for, or browse by one of the twelve categories they’ve broken their selection down to.

Dreamstime

One thing that I really enjoyed about the Dreamstime website was that it had an abundance of images on the homepage, laid out to give the page some design elements. You can click on the thumbnail images behind the search bar to jump directly to that image, or you can search for what you’re looking for. It’s that simple.

Stock photo sites are a great resource for the freelance developer. Being able to download affordable, top-quality, professionally edited photos to use in a design will help save you all sorts of time and money. The other nice thing about stock photo sites is that you can use comp versions of the images in your design comps. That way your client will have a better idea of how you intend for their site to look, rather than showing them a layout with a black square and the word “picture” written on it.

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. Follow him on Twitter @TheScottStanton.

Outsourcing Sites for Freelancers

Scott Stanton — Tue, 24 Jan 2012 14:44:22 +0000

I’m often asked by others questions like, “Where do you get job leads?” “How do you find clients?” And, “What’s a good source for finding work online?” Those are all pretty tough questions to answer, as there are several different ways to do so. But there are certainly some resources out that that are worth checking out.

Elance

If you haven’t already heard of, or aren’t already on, Elance then you will definitely want to look in to it. It’s an entire online community of work for remote freelancers that handles everything from the job posting to the payment. You can post jobs or bid on jobs in a system that’s very similar to Ebay. Each user can create their profile within Elance, allowing them to upload portfolio pieces and write a bio to let prospective clients know why they’re the best fit for the job. You can open a free account, which limits you to bidding on jobs in one profession, and the most important thing to keep in mind when you first get on there is to take placement tests. The tests will show what your skill level is in your area of profession. If you don’t have any test results on your profile then a prospective client will most likely quickly move on to the next provider, as they don’t know how good your skills are.

oDesk

Similar to Elance, oDesk is an online community of freelancers and outsourcers. You are also able to create a profile, and search for jobs, though the process of being verified on oDesk is a little tougher than Elance. This is a great source for finding work now and building long-term business relationships.

Guru

Guru is another online marketplace of freelancers and outsourcers. It’s free and easy to post projects on Guru, if you’re looking for help. If you’re looking for work you can create a profile, bid on jobs, win jobs, and get paid. If you’re curious what kind of jobs you can find on there, browse around and see if there’s anything that you want to bid on.

Freelancer

Claiming to be the world’s largest outsourcing marketplace, Freelancer is another great site to look in to. The format of Freelancer is just like the rest of the global market outsourcing sites, you create a profile, browse for jobs, and bid on them. One thing I think is pretty cool about this site are the stats on the homepage. You can see a real time calculation of how many users, projects and dollars spent are happening on the site. It gets you motivated to find work and get going on it!

Craigslist

You won’t find nearly as many job opportunities on Craigslist as you will on those global marketplace sites like Elance and Guru, but it’s certainly worth having a peak at every day or two. When I first got in to freelancing I got a lot of work on Craigslist, in fact, some of my biggest clients to date are ones I got off Craigslist years ago. Keep in mind that you don’t have to limit yourself to your home city, browse other cities close by, or major cities for telecommuting positions.

It’s also worth noting that with so many users going after the posted jobs on those global outsourcing sites, it can be a bit difficult to land your first gig. Along with your test result scores clients often look at your feedback rating, so if you haven’t done a job yet you won’t have any feedback. Much like Ebay, once you do a job for someone they will give you some sort of rating on how you did and leave feedback as to how their experience was working with you. You’ll find starting out that with no feedback it’s a little hard to get a response. You may want to consider making a hungry bid, coming in low on cost, and writing a stellar bid pitch and hope that the client is impressed with your placement tests.

How to make a panning website in Flash

Iggy — Wed, 18 Jan 2012 22:37:35 +0000

You might have seen a lot of panning websites in Flash. In these sites if you click on a link, the page automatically scrolls to that content. This effect looks great and is better than just plain old webpages. But believe it or not this effect is extremely easy to make. It’s so easy that you can make a simple website in one day. In this tutorial I am going to show you how to make this effect in Flash. Before you begin this tutorial you must know the basics of movieClips, Buttons and ActionScript 3.0.

Before I begin, if you want a very easy way out of this tutorial, check out free website builder from Wix, which lets you create a professional Flash website for free.

Start off by making a new ActionScript 3.0 document in Flash. Press ctrl+J and set the stage size to the size of your choice, I am giving it the size of 1024*600.Now we need to create the buttons. I will make just a simple rectangular button. But you can make a button as complicated as you want.

You can see in the screenshot below that I have placed three instances of my button on stage and I have put text on all three. I have also given the buttons instance names of home_btn , about_btn and contact_btn so that we can use the buttons in the actionscript.

Now it’s time to make the content of the webpage. The content of this page would actually be one long stip so that whenever we click on any of the buttons, the strip can be move to left or right to bring that content in the screen window. So I will just make a new movieclip with the content corresponding to the three buttons. Again I will not make anything fancy, just some simple text for each page. Remember that we will make our movieclip of the width 1024×3, since the width of each window is 1024 and there will be three windows. As for the height you can make it according to your will. You can see in the screenshot below that I have placed the movieclip with all the content the stage. I have also divided the buttons and content into layers so that the fla file is more manageable. I have also named the content movieclip as content_mc so that we can use it in the ActionScript 3.0

Now its time for the code part. Create a new layer to put the ActionScript and add the following code in it.

import fl.transitions.Tween;

import fl.transitions.easing.*;

home_btn.addEventListener(MouseEvent.CLICK,panContent);

about_btn.addEventListener(MouseEvent.CLICK,panContent);

contact_btn.addEventListener(MouseEvent.CLICK,panContent);

function panContent(evt:MouseEvent){

var buttonName:String = evt.target.name;

switch(buttonName){

case “home_btn”:

new Tween(content_mc,”x”,Strong.easeOut,content_mc.x,0,1,true);

break;

case “about_btn”:

new Tween(content_mc,”x”,Strong.easeOut,content_mc.x,-1024,1,true);

break;

case “contact_btn”:

new Tween(content_mc,”x”,Strong.easeOut,content_mc.x,-2048,1,true);

break;

}

Let me explain the code to you now. The first two lines import the Tween and Easing classes so we can Tween our movieclip with the help of actionscript. In the next three lines we are adding event listeners for click events on our buttons. Whenever a user clicks on any of the buttons, the panContent function would be dispatched. In the panContent function, the first line is strong the name of the button that called the event in the variable buttonName. The next code block is a switch statement on the buttonName variable. So, for each button the switch would perform a different function. For each case in the switch we are using

new Tween(movie clip name, attribute of movieclip to be tweened, the easing function,starting point, ending point,time, is time in seconds?);

For movie clip name, we always put content_mc because that is the clip we want to tween, for attribute we put “x” because we want to tween x position of content_mc, the easing function Strong.easeOut makes the tween go from fast to slow from start to end of the tween, for starting point of tween we always enter the current position of the movieclip, for ending point we set the negative of the x value for the specific content. E.g. The “About” content starts from x=1024 so we set the tween to go to -1024.If content_mc is placed at -1024 then the 1024 would be just at the start of the screen hence putting About section in view. For the time parameter, I put 1 and for the last parameter I put true which means that the time parameter is in seconds.

Now in order to publish this page in HTML, we have to set the publish settings for HTML. We want our content to be in the center of the screen so we choose the following settings.

If you publish the flash now and run the html then you might see everything to be fine, but if you have a screen size of width greater than 1024 then you would see extra bits of the content movieclip as in the screenshot below.

But the fix for this is really easy, you just need to apply a mask over the entire stage on the content layer.

Now if you publish and run the html, everything would be perfect. You can use this method to create interesting webpages very fast. You can innovate in this method to your will to make it even more attractive.

Click here to see the panning web page in action.

Found this tutorial way too hard? Check out free website builder from Wix, which lets you quickly create a professional Flash website for free without doing any coding.

How To Monetize Your Website With Google AdSense

Scott Stanton — Thu, 12 Jan 2012 13:31:44 +0000

If I had a euro for every time I heard one of those folklore stories of the guy who knew a person who talked to a guy whose roommate in college had a study group with someone’s cousin who made a website that earned him a million euros a month, I think I would be earning more than the guy in that story. Considering I don’t have a house in Monte Carlo or a fleet of Italian sports cars in the driveway, I think it’s time to look into how you monetize a website to help generate some more income.

Google AdSense is probably the most popular and the easiest source for webmasters to earn some advertising revenue. Google AdSense automatically delivers text, image, video and rich media adverts specifically targeted towards the content on your site. Meaning if you run a blog much like this site, Google will pull design-oriented adverts in to the spots. This allows the advertisers to target their specific audience, which in turn leads to the webmaster getting more clicks from the ads, and, ultimately, more revenue.

Google does all of the hard work for you, taking into consideration your geographical location, your market, the viewing audience, and other factors. This results in advertisements being more effective for everyone, the advertiser, the company whose site the ads appear on, and the viewers clicking on the ads. All the webmaster has to do is insert the AdSense JavaScript code into their page, then, each time the page is loaded, the code fetches content from the Google servers.

There are a few different applications that Google offers for their AdSense program. AdSense for Feeds is a program that runs on RSS and Atom feeds that have over 100 people subscribed to them. Google simply places an image into the feed and Google writes the content based on what the content of the feed surrounding the image includes. If the viewer chooses to pursue the ad they simply click on it and are taken to the advertisers website.

Adsense for Search is a program where website owners can include a Google Custom Search box in their website for viewers to either search the web, or the content of the site. Google will then share 51% of the advertising revenue generated from those searches with the site owner.

AdSense for mobile content is identical to the regular AdSense program, only it’s targeted towards mobile websites. The ads generated by Google match the content of the mobile site. The difference between AdSense for mobile content and the regular AdSense program is how Google generates the ads, rather than using JavaScript they utilize PHP and ASP scripts.

AdSense for domains is a program allowing developers to populate undeveloped sites with ads in an effort to generate some revenue off their domain before publishing their site or reselling the domain.

You can also target people on video content with AdSense for video. This is a common practice on popular YouTube videos.

Whether you are a hobby webmaster who maintains a personal site for fun and you’re looking for some supplemental income to help with hosting costs, or are looking to utilize your web presence to generate a decent amount of income, Google AdSense is a program certainly worth trying. The cost to the site owner is nothing, it only takes a few minutes to set up and Google does all of the accounting. Give it a shot and see how much extra income you’re able to generate.

Flash Guide Layer Tutorial

Iggy — Tue, 10 Jan 2012 15:24:12 +0000

When it comes to animation, nothing beats Flash. Flash has an arsenal of powerful tools that help to make animations easily. If you have done some animation in flash then you know that frame by frame animation gets a little hectic sometimes. There is tweening ; but it is only helpful when the change in position of a body is in the same direction. If you want your object to follow a specific path which is not in one direction then that’s where guide layers come in. Guide layers are exactly what their name suggests, they guide the object to maintain their path of motion. In this tutorial I am going to show you how to use guide layers. You have to know the basics of animation in Flash before you can take this tutorial, If you want to start on that then please see my previous tutorial about animation.

Start by creating a new document in flash. First of all we will make the object which we need to move. I am making a simple circle. The object needs to be a movieClip otherwise it would not work with the guide layer.

Now make a new layer and draw a line on it, this line is the path that the ball will follow. I have drawn a wavy line with a green color. The color is not important here because it would not be visible in the output.

Now right click on the layer with the path and select the guide option from the context menu. This will transform the layer into a guide layer.

You will know that it has successfully transformed when you see the icon of the layer change.

But the ball is not bound to the guide yet, to do that drag the ball layer with your mouse and move place it on the lower side of the guide layer. When the ball layer becomes a part of the guide you will see it like the image below.

To make the ball move with the line, the ball needs to be on the line first, drag the ball on the line such the circle showing the center of the ball is on the line.

Now press F6 on any other frame in the ball layer to insert a new frame there. Press F5 on the same frame in the guide layer to extend the guide layer upto that frame. Now in this frame change the position of the ball but you have to make sure that the center of the ball is still touching the line.

At last right click on the middle of ball layer and choose classic tween to tween the ball. Press Ctrl+ENTER to test the movie and you will see the ball move along the line of the guide layer.

You can use this method to dramatically decrease the time of making an animation. I hope this helps you become a better animator.

Found this Flash Guide Layer tutorial too hard? Don’t worry, you have an easy way out. Check out Wix, an awesome free Flash website builder.

Custom Sticker Giveaway by Sticker Mule

Web Design — Mon, 09 Jan 2012 14:25:53 +0000

***This giveaway has ended. Congratulations to John Hartley who is the winner!***

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!

10 World Class Athlete Websites

Scott Stanton — Fri, 06 Jan 2012 16:36:35 +0000

I have always appreciated an athlete who has their own website. Especially now days when they could call it good with a Facebook fan page, or really go above and beyond with a Twitter account. Some athlete’s are active members of charity organizations, or have their own product line, and they use their personal site as a platform to pitch and promote those organizations or products. In other words, they use it to generate revenue. Others aren’t trying to pitch anything and just want to give their fans a place to learn a little more about them. Let’s take a look at some of the better athlete websites out there.

Tom Cleverley

Tom Cleverley is not only quickly making his presence known on the football pitch, but online as well. His website allows fans to learn more about the England international and keep up to date with his accomplishments as well as what he’s up to. His site features his Twitter feed, a news section, and a monthly playlist of his favorite songs.

Bjoern Dunkerbeck

Bjoern Dunkerbeck is a world-class windsurfer with a world-class website. The Flash site features some stunning fullscreen background images, cool music, news, projects, and contact info, amongst other things.

Maria Sharipova

Maria Sharipova is not only stunning on and off the court, but on the web as well! Her personal website is packed full of content, including Facebook updates, photos, videos, news updates on her foundation, links to her various collections and products, as well as info on her sponsors.

Andres Iniesta

Hailed as one of the greatest modern day footballers, Andres Iniesta has a rather flashy Flash site to stay in touch with his fans. The site is packed full of photos, videos, news, bio and background info on the World Champion goal scorer at both club and international level. The site can also be viewed in Spanish, Catalonian or English.

Serena Williams

Serena Williams took the time to develop a site packed full of information on her and her various accomplishments. Amongst the standard, bio, pics, media, sponsor info, and contact links there is a schedule of her upcoming events, as well as a page about her foundation.

Troy Polamalu

Troy Polamalu is an American football player and a man to be feared on the field. If anyone was wondering how intimidating it may be to come face-to-face with him, you may now do so on his homepage. Along with a very stoic and intimidating background pic, Polamalu also has a store on his site where fans can buy his merchandise. You can also learn about the foundations Troy supports from his website as well.

Floyd Mayweather, Jr

Love him or hate him, Floyd “Money” Mayweather, Jr is a force to be reckoned with in the boxing world. You can access Money’s Facebook page, Twitter account and YouTube channel, as well as well as get info on the not-for-profit The Floyd Mayweather Jr, Foundation or shop his online store.

Lance Armstrong

Seven time Tour de France champion, Lance Armstrong has become a worldwide cancer awareness advocate since he gained worldwide fame as a cyclist. The site contains info on the Livestrong foundation, photos, news, pics, a bio, sponsors, and a whole lot more.

Felipe Massa

Felipe Massa is a Formula 1 driver for Ferrari with an extremely cool website. Featuring a fullscreen background image slideshow, multiple language options, and all of the standard, media, bio, and news content you’d expect. Felipe also has a fan club you can join from his site, as well as a link to the Ferrari merchandise store.

LeBron James

LeBron James has a site you must witness. A single page concept with a parallax scrolling effect that hovers over character drawings of the man himself, the site has your standard updates, and links to his social media presence. But the content gold mine comes in the way of “The LeBrons” cartoons.

There are some certain trends that you can see present throughout the majority of these sites, lots of color, emphasis on images, and basic content elements like bio, contact info, and links to social media platforms. These concepts can be applied to many other niches of web design and don’t have to be limited to athletes, the same concepts could work for artists, musicians, cooks, and many other professions.

Create a Full Page Background Image with CSS3

Scott Stanton — Thu, 05 Jan 2012 16:45:17 +0000

The other day we looked at 10 Awesome Websites With Full Screen Background Images. At the beginning of the article I had mentioned that there were a few ways of approaching this effect, some developers prefer to do it with jQuery, some with CSS, and others with Flash. In this article we’re going to take a look at how to achieve a full screen background image with CSS.

CSS3 allows us to choose between a few different values for the “background-size” property. The properties are, length, percentage, cover, and contain. The value that we’re going to use first is the “cover” value, which will scale an image to a size that will allow it to fill the content area. I would like to point out that in doing this some parts of the image may be cut off depending on the screen resolution or dimensions of the browser window. Centro Genesis is a good example. Look at how the background image displays in a widescreen browser.

Now look at how the image appears in a traditional square browser. The majority of the photo is the same, it just cuts off a piece of it in order to fill the height of the screen.

The code for this is method is really quite simple. All you have to do is insert these few lines of CSS in your external CSS file or in the head of your page.

html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

That was easy. Now let’s take a closer look at what we did. With the first line we’re calling in our background image and applying some style to it, “background: url(images/bg.jpg)” is pulling up our actual image. Then “no-repeat” is telling the browser to not repeat the image, “center center” is telling the browser to center the image horizontally and vertically, and “fixed” is telling the image to fix itself in that position and not scroll with the rest of the content on the page if there is a need to scroll. After we’ve called the background image and styled it we target all of the major browsers, webkit covers Safari 5+ and Chrome, Moz is Mozilla Firefox 4+, -o is Opera, and the plain and simple background-size with no prefix takes care if IE9+.

This technique is simple and works, but you’re relying on one image to please all resolution sizes. How do you decide what dimensions to use for your one background image? If you have an image that’s 1900px wide and someone’s trying to view your site on their mobile phone, the image may take quite some time to load. But if you try to shoot the gap and go with an image that’s around 1,000px wide then the image may become pixilated and blurry to anyone viewing your site on a widescreen monitor with the resolution set to 1440px. And chances are even at 1,000px it’s still going to take that mobile viewer a while to fully load your site because of your large background image.

Before you curse the variables like screen resolution and monitor shapes that can make our jobs so frustrating at times, allow me to give you the answer you’re looking for: media queries. CSS will allow you to define different attributes for various parameters. In other words, you can set a media query that tells a browser to load a largeBG.jpg, mediumBG.jpg, or a smallBG.jpg depending on what the browser dimensions of the viewer are.

For example, rather than defining your background image within the HTML of your site let’s say you create a div for your page and assign it the id of “container”. Pretty standard. Much like we did in the first method, we’re going to assign our “container” div id with our background image, add some style, then tell it to cover. I would recommend making your “largeBG.jpg” image somewhere in the ballpark of 1440px wide to 1900px wide.

#container{
background: url(images/largeBG.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Now that we’ve got the big version of our background image set, we can move on to the medium. This is a little different as we’re going to have to do a media query to tell the browser to load a smaller version of our background image. I typically set a media query for a screen resolution width of 1024, as this is the resolution of an iPad and the possibility of the viewer relying on a network rather than high speed wifi to load the page. To set a media query for 1024 you simply add this line in to your CSS.

@media only screen and (max-width: 1024px) and (orientation:landscape) {
#container { background: url(images/mediumBG.jpg) 50% 0 no-repeat fixed; !important; background-size: 100% auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}

The background-size properties are somewhat optional at this point. You can’t adjust the resolution of your iPad, but you have to remember that this media query is not specifically targeting iPad’s, it’s targeting that screen resolution. Since there are surely still a large portion of web surfers on older monitors set in the ballpark of 1024×768, it’s an easy enough step to enhance their viewing experience a little more.

After defining the landscape view for iPad’s let’s make a media query for the portrait view. Depending on your image, you may want to consider putting in a cropped, taller version of your image here so that it display’s full screen without getting too distorted and pixilated. You’ll also want to adjust the positioning to make sure the image stays aligned properly.

@media only screen and (min-width: 768px) and (max-width: 991px) {
#container { background: url(images/mediumTallBG.jpg) 50% 80% no-repeat fixed !important
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}

Finally, we can set another media query for mobile devices.

@media only screen and (min-width: 0px) and (max-width: 767px) {
#container { background: url(images/smalBG.jpg) 50% 80% no-repeat fixed !important; background-size: auto !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}

I would encourage you to play around with these tricks and leave a link to the page you’ve created in the comments section below so we can all see what you’ve come up with.

Web Design Dev

How to use checkboxes and radio buttons in Flash

10 Sources for Stock Photos

Outsourcing Sites for Freelancers

How to make a panning website in Flash

How To Monetize Your Website With Google AdSense

Flash Guide Layer Tutorial

Custom Sticker Giveaway by Sticker Mule

Top 10 Flash Slideshow Image Viewers

10 World Class Athlete Websites

Create a Full Page Background Image with CSS3