17 Replies Latest reply: Jan 24, 2013 11:17 AM by CarolWasp RSS

    Header and Footer in flash

    CarolWasp Community Member

      Ok. This was supposed to be a question about a header and footer in Flash. I intended to attach my fla to make it possible to understand what I was saying. As it turns out I can't figure out how to attach files. Is it even possible? That's my first question.

       

      Here's the actual question, although it will be very vague now: I have a basic header and footer in Flash that stretch to fill the screen horizontally. It works when I test the file inside Flash (Control>Test movie). But it does not work when I go "Publish Preview" and use the browser. Why is that and how can I sort it out? Any ideas?

        • 1. Re: Header and Footer in flash
          Ned Murphy CommunityMVP

          No, you cannot attach files in these forums.  Also, few people will download files for a variety of good reasons.

           

          If you are previewing in a browser, then it is likely that an html page is being generated for the preview, and that html page is probably sizing the flash content per the stage dimensions the pieces were designed with.

           

          What you probably need to do is find a tutorial for creating full screen content, though you could probably find a solution if you search tis forum as well.

          • 2. Re: Header and Footer in flash
            CarolWasp Community Member

            In that case, is there a way to add simple code in the head of the html that will force the document to play by the rules of the swf? The same way you can alter say "overflow" and "outline".

            • 3. Re: Header and Footer in flash
              CarolWasp Community Member

              Actually I figured out the follow up question on my own. All I had to do was change a publish setting, namely dimensions to percent. The header and footer is scalable in the browser now. But my problem is how to center the content in between. I know how to do it with movieclips. But I can't do that this time. The content is diverse and will lose functions if I turn it into a movieclip. Is there some other way? Something I can do in Flash? Or something I can add in the html-file?

              • 4. Re: Header and Footer in flash
                moccamaximum Community Member

                Flash Fluid Layout is the magic word.

                Check this out.

                • 5. Re: Header and Footer in flash
                  CarolWasp Community Member

                  Thanks, I have followed that particular tutorial before, it tells me how to center a movieclip. Works fine as long as the mc contains a mere image or a textfield. In my case I've got a bunch of buttons (and some other stuff) that will obviously cease to work as buttons once I turn them into a movieclip.

                  • 6. Re: Header and Footer in flash
                    moccamaximum Community Member

                    In my case I've got a bunch of buttons (and some other stuff) that will obviously cease to work as buttons once I turn them into a movieclip.

                     

                    Nobody said you had to turn your buttons into MovieClips.

                    Buttons will just work fine inside a MovieClip.

                     

                    SimpleButtonsInsideMovieClipJPG.JPG

                    Nested inside the Blue MovieClip are two SimpleButtons that work as expected, they have not been converted to MovieClips, all their up, over and whatnot states are intact.

                     

                    import flash.events.MouseEvent;

                     

                    mc.mouseEnabled = false;

                    mc.button1.addEventListener(MouseEvent.CLICK, clickHandler);

                    mc.button2.addEventListener(MouseEvent.CLICK, clickHandler);

                     

                    function clickHandler(e:MouseEvent):void{

                        trace(e.currentTarget.name);

                    }

                    • 7. Re: Header and Footer in flash
                      CarolWasp Community Member

                      Thank you. That worked for me. I "nested" my buttons inside a movieclip which made it possible to center them. I'm close to home but I've got a remaining obstacle. In the main timeline I'm loading an external swf:

                       

                      var ExitLoader:Loader = new Loader();

                       

                      addChild(ExitLoader);

                      ExitLoader.x=154;

                      ExitLoader.y=127;

                       

                      var ExitURL:URLRequest = new URLRequest("Exit.swf");

                       

                      ExitLoader.load(ExitURL);

                       

                      I want this swf to be centered along with the buttons. But I can't figure out how to nest it.

                      It does not seem to work the same way. Besides I wonder if declaring position of x and y will mess it up.

                      • 8. Re: Header and Footer in flash
                        moccamaximum Community Member

                        Simply add the Loader to a newly created MovieClip:

                         

                        var mc:MovieClip = new MovieClip();

                        addChild( mc);

                         

                        var ExitLoader:Loader = new Loader();

                         

                        //its important to wait for the swf to be fully loaded

                        ExitLoader.contentLoaderInfo.addEventListener(Event.COMPLETE , completeHandler );

                        ExitLoader.load(new URLRequest("Exit.swf"));

                         

                        function completeHandler( event:Event ):void

                        {

                            mc.addChild( ExitLoader);

                        }

                         

                        once inside the mc, you can manipulate the Exit.swf x/y-Positions with

                        mc.x=154;

                        mc.y=127;

                        • 9. Re: Header and Footer in flash
                          CarolWasp Community Member

                          I tried something similar earlier but I end up getting a faulty outcome. The swf is at first centered with the other stuff in the mc (buttons etc) but as soon as I drag and resize the browser window the mc disappears. Btw my mc is named "content". Probably a bad name since it tends to turn blue. I don't know.

                           

                          var content:MovieClip;

                          addChild(content);

                           

                          // further down

                          content.x = sw/2 - content.width/2;

                           

                          }

                           

                          var ExitLoader:Loader = new Loader();

                          ExitLoader.x=154;

                          ExitLoader.y=127;

                           

                          ExitLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler);

                          ExitLoader.load(new URLRequest("Exit.swf"));

                           

                          function completeHandler(event:Event):void

                          {

                              content.addChild(ExitLoader);

                          }

                           

                          I could post the code in it's entirety but perhaps it would be boring to scan through.

                          • 10. Re: Header and Footer in flash
                            moccamaximum Community Member

                            This code should throw an error;

                            Enable debugging and look at the Output window;

                             

                            MovieClip needs the new Constructor:

                            var content:MovieClip= new MovieClip();

                            addChild(content);

                             

                            Btw my mc is named "content". Probably a bad name since it tends to turn blue. I don't know.

                            You are right, its a bad name, it works in this context, but it makes the code less readable.

                            Its generally a good idea to avoid any reserved Keywords in any programming language.

                             

                            so its definitively better to name that MovieClip _content or content_

                             

                            It`s probably a good thing that you make an empty fla and compile that code to see what really happens, when you place an empty MoviClip on the stage:

                             

                            var _content:MovieClip = new MovieClip();

                             

                            addChild(_content);

                             

                            trace(_content.x);

                            trace(_content.y);

                            trace(_content.width);

                            trace(_content.height);

                            • 11. Re: Header and Footer in flash
                              CarolWasp Community Member

                              It worked when I created a new mc for the swf, different from the one with the buttons. A bit inconvenient but I can live with it. I hoped that was it. But I stumbled on the next scene (I know scenes are frowned upon) when I tried to repeat the procedure.

                               

                              Part of the problem is that I get tangled up in renaming instances with slight modifications. For instance "var my_content:MovieClip;" becomes "var my_content2:MovieClip;". And it gets worse. I'm sure there's a way around this. Can I wash out the functions and variables etc from the previous scene so I can start afresh? Ultimately I would like to use the same code again with the same instance names.

                              • 12. Re: Header and Footer in flash
                                moccamaximum Community Member

                                You could put all the content of your Scenes in one MovieClip.

                                So you would have a Scene1, Scene2 Movieclip etc. and then you would have to declare all the vars and functions in it private, so you could reuse your code.

                                Or you could split up your scenes in different flas and load them via a Main.as.

                                 

                                But I would strongly advise against such a thing.

                                 

                                Here is a good read that explains how to do navigation properly in AS3.

                                After that you will maybe get new Ideas how to restructure your work, to make it easier to maintain.

                                • 13. Re: Header and Footer in flash
                                  CarolWasp Community Member

                                  I'm convinced there are better ways to do navigation, but this close to the end I was hoping to just grind my way forward. Somehow I managed to get the second scene working (centered that is). But when I resize the window in debug mode an error is pointed out in the first scene. "Error #1009: Cannot access a property or method of a null object reference". The snippet goes like this:

                                   

                                  stage.scaleMode = StageScaleMode.NO_SCALE;

                                  stage.align = StageAlign.TOP_LEFT;

                                   

                                  stage.addEventListener(Event.RESIZE, resizeStage);

                                   

                                  var header:MovieClip;

                                   

                                  resizeStage(null);

                                   

                                  function resizeStage(e:Event):void

                                  {

                                      var sw:Number = stage.stageWidth;

                                   

                                      header.width = sw;

                                   

                                  And it's the last line here that's supposed to cause the error. Do you see anything apparently wrong? I tried  "var header:MovieClip; = new MovieClip();" but that didn't work at all.

                                  • 14. Re: Header and Footer in flash
                                    moccamaximum Community Member

                                    The error you are receiving is one of the most common.

                                    Read this, to get more insight.

                                     

                                    var header:MovieClip; = new MovieClip();

                                    This line of code can never work. It should be

                                     

                                    var header:MovieClip =  new MovieClip();

                                     


                                    • 15. Re: Header and Footer in flash
                                      CarolWasp Community Member

                                      Actually the additional ";" was a typo in the post only. The header doesn't work typing it the right way either. It only works when I keep it "var header:MovieClip;".

                                       

                                      If I keep it that short and ignore the error message I find that the fluid layout actually works in browsers (some problem with the footer put aside). But, and here's another thing, it looks quite awkward. When resizing the window the content is stretched out before it snaps into place. Pretty much like this demo I found:

                                       

                                      http://active.tutsplus.com/tutorials/web-design/build-a-fluid-website-layout/

                                       

                                      Ugly I say. As compared to something like this:

                                       

                                      http://www.reuters.com/

                                       

                                      What's the secret? Any keywords? What should I look for?

                                      • 16. Re: Header and Footer in flash
                                        moccamaximum Community Member

                                        Define ugly.

                                        Does the content look pixelated, distorted or blurry after you resize?

                                        The demo you mention looks perfectly fine for me.

                                         

                                        If you rightclick on the demo, check if the quality of your flashplayer is set to high.

                                        The local Flash Player settings will alway "override" your Publishing settings. Even if you publish your content to 100% and deactivate compressed: if the user chooses low quality it will always look ugly.

                                         

                                        As for the Reuters site you showed as a superior example: it uses no Flash to resize its Layout but purely css/javascript.

                                         

                                        What's the secret? Any keywords? What should I look for?

                                        You are probably looking for Pixel Perfect Fluid Layouts

                                         

                                        Other tips: If you have any bitmaps on your stage that have bitmapSmoothing set to true, any scaling (that you might do during rezizing, or rotation will require you to set the property again. The bitmap.Smoothing property gets "Lost in Transformation" so to speak.)

                                        • 17. Re: Header and Footer in flash
                                          CarolWasp Community Member

                                          Thanks for all the help. Based on the condition that scaling and resizing in Flash look distorted I decided to use CSS instead. Turned out to be much easier and faster to center the flash content that way as well as creating and stretching the header and footer. And it scales without distortion.