12 Replies Latest reply on Sep 9, 2010 6:19 AM by jt72thinking

    Fit browser width


      I have a project that I'm looking to have the background (about 300px tall) span the whole width of the browser. The background color is changing for each different page otherwise I would do it in HTML. I have the background larger than the artboard but it still doesn't show up. Is there a way to do this?


      Thanks in advance!

        • 1. Re: Fit browser width
          Peter Flynn (Adobe) Adobe Employee

          There are a few ways to do this that involve writing a little bit of code, but unfortunately I don't think there's any way to do it purely within Catalyst.


          One option is to write a bit of code that calls out to JavaScript and upates the HTML page's background whenever your application's state changes.  You'd add a currentStateChange listener to your root s:Application tag, then use ExternalInterface to call your JavaScript code.


          Another option is to convert the fixed-size application generated by Catalyst into a resizable one, with your fixed-size layout floating in the center and the background filling 100% of the width.  You can do that as follows:

          1. Import the project into Flash Builder
          2. In the Main.mxml file, wrap your outermost fx:DesignLayer tag in an s:Group tag
          3. Set verticalCenter="0" on the group to center it
          4. Copy the width and height from the root s:Application tag onto the group
          5. On the application tag, change both width & height to 100%
          6. Setup your background color variations by adding attributes to the application tag: backgroundColor.Page1="#FF0000" will make the background red in the "Page1" state, for example.  Be sure you use the exact state name after the dot (copy/paste from the <s:states> section if you want to be sure).


          Hope that helps!


          - Peter

          1 person found this helpful
          • 2. Re: Fit browser width

            I know this is a fundamental question, but I haven't been able to find an answer, and this post addresses some of the question...


            I have a site built in Flash Catalyst.  I would like to edit the background color of the page the flash opens on.  I read and found that I can edit the fxp file in Flash Builder.  I was able to open the file and edit the HTML code to change the color.  At that point I was at a loss on how to publish the file.  I tried to import the file back into Flash Catalyst, but it wouldn't let me do it.


            How do I move forward with this?  Thanks for any help!!!

            • 3. Re: Fit browser width
              JOey_KFLA Level 1

              Ok, after some looking around I found that I can go: Project > Export Release Build


              It seems to work, is that the right way to do it?


              So, to recap,  I can make changes in Catalyst, do some editing in Builder, then export the release build in builder to publish it, right?


              Thanks for your patience...

              • 4. Re: Fit browser width
                jt72thinking Level 1

                Hi Joey,

                It sounds like your latest solution should do the trick. What I did was

                export our my project from Catalyst then build all of the HTML around it.

                For example: http://arrestedevelopment.com/  The center area is using Flash

                Catalyst. It's nothing complicated, just a test as to some simple templating

                with Catalyst. Everything outside is HTML and CSS.


                If you are making adjustments outside of Catalyst to the file you may be

                limited to exporting the project from whatever program you are using to make

                the final edits. I would keep a backup file of your original files from

                Catalyst before moving them from Catalyst to another program just in case.

                That way if you have to go back to the beginning in Catalyst you can.


                I hope that helps!

                • 5. Re: Fit browser width
                  JOey_KFLA Level 1

                  Thanks for the reply!


                  I know this might be a little over my head, but for imbedding the FC part, what did you do?  I looked at the source, and I get the idea, but did you write it yourself, or did Fireworks do that for you?


                  Thanks again, I am a teacher trying to get our school website up and running, with a week left to do it!!! 



                  • 6. Re: Fit browser width
                    JOey_KFLA Level 1

                    Here's what I have so far...




                    Any suggestions/comments/critques would be appreciated...


                    I am new to all of this, but it's a start!



                    Thanks again,



                    • 7. Re: Fit browser width
                      JOey_KFLA Level 1

                      AH!  One more thing while I have (hopefully still..) someone's attention.


                      What if someone has a problem with the flash site?  Is there a way for me to have a link for them to click if they have problems updating flash?  (I was thinking it could go in the same area where the adobe logo comes up and says like "adobe flash 10ish is required to run this site", but I couldn't find where that was...)


                      thanks again..

                      • 8. Re: Fit browser width
                        jt72thinking Level 1

                        Hi Joey,

                        The site looks good. As for the flash issues, I believe that the flash

                        updater is automated. So if you want to add a link to download the latest

                        flash plugin, that you could add a small link below your actual flash file

                        in the HTML.


                        Hope that helps!

                        • 9. Re: Fit browser width
                          JOey_KFLA Level 1

                          This is what I have come up with so far:




                          What is the "right" way to address the issue of people having computers/connections that won't adequately support the flash site?


                          Thanks again for all the help!



                          • 10. Re: Fit browser width
                            jt72thinking Level 1

                            I think what you've done is good. You're offering people the option to view

                            the Flash site or the HTML site. So if they have an issue with the Flash

                            site, they can backtrack to the HTML site. I think it looks good!

                            • 11. Re: Fit browser width
                              JOey_KFLA Level 1

                              Thanks for all your input.


                              Is there a way to change the header text and favicon for the flash site using either catalyst or builder?


                              Looking at the html for the favicon it doesnt seem like it corresponds with any of the language on the main.mxml page?


                              Thanks for any additional help,



                              • 12. Re: Fit browser width
                                jt72thinking Level 1

                                With a favicon.ico you can basically drop the file in the root folder of your site and most browsers will pick it up by default. Also, in your <head> area of your html you would drop this code: <link rel="Shortcut Icon" href="favicon.ico" />  Please note, it's best to name the file 'favicon.ico'


                                Hope that helps!