Header Ads Widget

Responsive Advertisement

Ticker

6/recent/ticker-posts

How To Make Your Flash Design Work With ANY Resolution (Flash)

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 800x600 and 1024x768. 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.
img
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;
img
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.
img
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.
img
Now if we publish this in html and flash we can see our movieclip touch the right end of the screen.
img
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.