Dec 29

How To Make Your Flash Design Work With ANY Resolution

Thu, 12/29/2011 - 15:49 — julie

One of the biggest problems that web designers face is to select a screen resolution for their style. Those days are gone when there were only two resolutions 800×600 and 1024×768. Today there are millions of devices with different screen resolutions which are used to browse the internet.  In this scenario, one of the best practices is to make a design which will fit all resolution. Flash is excellent for this and today I am going to show you how to make flash adjust your design according to the screen. Please keep in mind that you need to know the basics of designing and development in Flash in order to be able to understand this tutorial.

Start by creating a new ActionScript 3.0 document in Flash and keeping it the standard resolution.  Now create a movie clip. You can draw anything in the movieclip. And finally draw a rectangle bordering the stage. We need the rectangle to visualize where our stage is.

On my stage the box with the text “www.webdesigndev.com” is the movie clip and I have named it “text_mc”. You also need to put your movieclip on stage and give it a name.

For my design, I need to movieclip to be touching the right side of the screen. Let’s try to do that using ActionScript. Create a new layer in the timeline and paste the following line of code in it.

text_mc.x  = stage.stageWidth-text_mc.width;

In this line of code, stage.stageWidth give us the with of our stage and text_mc.width gives me the width of the movieclip text_mc. Subtracting the second from the first I can make the movie clip touch the right end of the stage. So, I set the x position of the movieclip to this value. Now press Ctrl+SHIFT+F12 and publish the application in html and flash. I get the html page looking like THIS.

Now this is not what we wanted. We wanted the movieclip to touch the right end of the screen. The movieclip is touching the right end of the red rectangle. This is because it is programmed to touch the right end of stage and right now our stage is the red rectangle. We need a way to make our whole screen the stage. That way our movieclip will touch the right end of the screen. In order to do this, go back to the publish settings by pressing Ctrl+SHIFT+F12 and go to the HTML tab. Now in the dimensions panel select “Percent” and set the width and height to 100 percent. This will make the flash occupy 100% of the screen available in the browser. Select the scale value as “No Scale” because we don’t want the content of our stage to be resized to fit the screen. Select the Flash alignment as LEFT , TOP because we want the (0,0) coordinate of flash to be on the top left of the screen and not somewhere in the middle so that our coordinate system of flash remains the same.

Now if we publish this in html and flash we can see our movieclip touch the right end of the screen. CLICK HERE TO SEE THE HTML PAGE.

Using this method you can place the components of your design on places relative to the screen size. If you think wisely while designing then you will be able to make some very practical, flexible and attractive web designs.. If your design fits all screens then the viewers will definitely be happy with it.

Want an easy way out of this tutorial? Use Wix, an amazing free Flash website builder that will let you create a very professional Flash website in the fraction of the time it takes creating it from scratch.

Copyright 2009. E-mail Me
Auto Spare Parts