Adobe Community: How to make a website fit to browser window?

Currently Being Moderated

1. Bear Travis,

Apr 13, 2010 11:15 AM in reply to MarieClaire89

Report

Flash Catalyst currently only supports applications with fixed dimensions.

To add resizability, you would need to bring your project over to Builder. If you're interested in diving into that, here is an article on the subject:

http://help.adobe.com/en_US/Flex/4.0/UsingFlashBuilder/WS6f97d7caa66ef 6eb1e63e3d11b6c4d0d21-7fb5.html

-Bear

|

Mark as:

Currently Being Moderated

2. MarieClaire89,

Apr 13, 2010 11:28 AM in reply to Bear Travis

Report

Thanks for your reply. I'll give it a try

|

Mark as:

Currently Being Moderated

3. MarieClaire89,

Apr 20, 2010 8:09 AM in reply to MarieClaire89

Report

How to make this with the main.html file (from flash catalyst) in dreamweaver pls? Is it possible?

|

Mark as:

Currently Being Moderated

4. Bear Travis,

Apr 20, 2010 12:49 PM in reply to MarieClaire89

Report

You can scale the scale your swf to fit within the browser window, but you will still have to do a little tweaking in both Flash Builder and Dreamweaver. Also note that this scales your swf, so some of the content may appear warped.

1. Open your fxp in Flash Builder, and open the Main.mxml file

2. At the end of the s:Application tag, add ' creationComplete="init()" '

3. Copy-paste the following right beneath the application tag. If you know how the Script tag works, and there's one already there, you can just put the init function inside the pre-existing one.

<fx:Script>

<![CDATA[

private function init():void {

this.systemManager.stage.scaleMode=StageScaleMode.EXACT_FIT;

}

]]>

</fx:Script>

4. In the HTML file generated by Flash Catalyst, Flash Builder, or Dreamweaver, adjust all the width/height properties to be 100% rather than a fixed size.

-Bear

|

Mark as:

Currently Being Moderated

5. spiritonline123,

Apr 20, 2010 1:40 PM in reply to Bear Travis

Report

Hi there,

this topic seems really interesting. Would it also be possible to just have the background scale and have other elements of the page on a fixed position (and keep there size) for example the text field in the botom-left corner?

Thanks for all the helpfull answers from adobe staff

|

Mark as:

Currently Being Moderated

6. nat.b,

Apr 20, 2010 1:55 PM in reply to Bear Travis

Report

Hello Bear,

I've followed the forum since the first beta came out - this issue has been recurring in one form or another since day one.

And while the question often comes from newbies, contributers of high quality feedback (and lab idea contributors) have

indicated that this is major consideration if this software is to be taken seriously for production work.

In general the reactions from Adobe have been so disappointing that I'm posting my two cents' worth even though you personally

can't provide a quick fix.

Forum usage shows a large target audience using FC as a stand-alone tool - website navigation, mock-up prototyping,

ergonomics, slide-shows, etc. - all things which fit well with the super-easy-to-use image that's being promoted. What the hype

doesn't say is: easy to use and great to look at IF you know your site will only be viewed by users having a 1280x1024 15" monitor.

While resizing to browser window is what is ultimately wanted, please, please, please see if Adobe can't be persuaded to give us

some simple method of scalability for different output devices - either through an FC internal scale factor with links, in the html wrapper

or, in the worst case, rescaling complete apps in separate file copies.

Flash Catalyst is such a super-tool, that it's a shame that the projects can't be put online because too many viewers either

won't be able read tiny texts on a HD-monitor or will have to scroll like crazy on a 12" laptop.

Sorry, but thanks for listening,

Natalie

|

Mark as:

Currently Being Moderated

7. Bear Travis,

Apr 20, 2010 2:55 PM in reply to nat.b

Report

Hi Natalie,

We always appreciate feedback from our users. The comments we get from the forums, ideas website, and workshops are how we evaluate our product. I can't really comment on how Catalyst will change in the future, but we are aware that this is a major pain point for our customers.

-Bear

|

Mark as:

Currently Being Moderated

8. typolonyc,

May 1, 2010 10:13 AM in reply to Bear Travis

Report

I have tried this a number of ways and it makes no difference. This is where I am with it right now in FB4.

I would love to get this to work. If anyone can help me with it please?

<?xml version='1.0' encoding='UTF-8'?>

<s:Application xmlns:ATE="http://ns.adobe.com/ate/2009" xmlns:ai="http://ns.adobe.com/ai/2009" xmlns:lib="assets.graphics.Republic_1920.*" xmlns:fc="http://ns.adobe.com/flashcatalyst/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:flm="http://ns.adobe.com/flame/2008" xmlns:graphics="assets.graphics.*" xmlns:ai1="http://ns.adobe.com/ai/2008" xmlns:lib1="assets.graphics.tomorrow_text.*" xmlns:lib11="assets.graphics.perfect_text.*" xmlns:lib111="assets.graphics.intel_text.*" xmlns:lib1111="assets.graphics.history_page.*" xmlns:components="components.*" xmlns:lib11111="assets.graphics.CaseStudiesText.*" xmlns:lib111111="assets.graphics.RolexText.*" xmlns:lib1111111="assets.graphics.slider.*" backgroundColor="#000000" height="1200" preloaderChromeColor="#000000" width="1920">

<fx:Style source="Main.css"/>

<fx:Script><![CDATA[

private function init():void

{

stage.align = StageAlign.TOP_LEFT;

stage.scaleMode = StageScaleMode.EXACT_FIT;

}

protected function buttonEnter_clickHandler():void

{

const state:String = currentState;

if ( state == 'Home' ) {

currentState='Tomorrow';

}

|

Mark as:

Currently Being Moderated

9. UniversalComunicacion,

May 11, 2010 12:51 PM in reply to Bear Travis

Report

I try this method and dont work...

and the point 2 report error y flash builder

I have a flash catalyst cs5..

"1. Open your fxp in Flash Builder, and open the Main.mxml file

2. At the end of the s:Application tag, add ' creationComplete="init()" '

3. Copy-paste the following right beneath the application tag. If you know how the Script tag works, and there's one already there, you can just put the init function inside the pre-existing one.

<fx:Script>

<![CDATA[

private function init():void {

this.systemManager.stage.scaleMode=StageScaleMode.EXACT_FIT;

}

]]>

</fx:Script>

4. In the HTML file generated by Flash Catalyst, Flash Builder, or Dreamweaver, adjust all the width/height properties to be 100% rather than a fixed size."

|

Mark as:

Currently Being Moderated

10. juviesi,

Jul 24, 2010 2:30 PM in reply to MarieClaire89

Report

I have the same question, did you already figured it out?

|

Mark as:

Currently Being Moderated

11. Bear Travis,

Jul 25, 2010 2:40 PM in reply to juviesi

Report

You may want to check out this article about the process, it has everything down from start to finish.

-Bear

|

Mark as:

Currently Being Moderated

12. juviesi,

Jul 26, 2010 2:32 PM in reply to Bear Travis

Report

Thanks Bear, i'll try that.

Thats a very helpful blog, I'm learning a lot about FC there, thanks.

|

Mark as:

Currently Being Moderated

13. juviesi,

Aug 18, 2010 2:58 PM in reply to Bear Travis

Report

Its not working, its actually increasing in 200% the real size and when you try to scale down the browser its cropping.

In flashcats.net there others testimoinals of people with the same problem.

Do i have to do something in the html or this solution doesn't working anymore?

|

Mark as:

Currently Being Moderated

14. buynowwebsites,

May 2, 2012 2:15 AM in reply to MarieClaire89

Report

Nice information.....Thanks for sharing.

[url=http://www.buynowwebsites.co.uk]How to Make a Website[/url]

|

Mark as:

Flash Catalyst

How to make a website fit to browser window?

Apr 13, 2010 11:04 AM

More Like This

Incoming Links

Bookmarked By (0)

Answers + Points = Status