29 Replies Latest reply on Jul 14, 2014 9:54 AM by Xoco

    Customising Preloader

    -=XX=-Nephilim Level 1

      Hi all,

       

      Having reall dificulties customising preloader in Edge Animate...

       

      To get straight to the point(s):

       

      1. My main project is utilising 100% stage width and height amd naturally I would like for preloader to do the same but somehow animated gif always gets 'stuck' at the very top of the page ignoring Y percentage coordinates. How am I to center preloader animation regardless of the screen size?

       

      2. Preloader page is always white... How am I to change its colour? Or even better, how can I load some background pattern instead of using plain colour?

       

      These are my two main issues for now.

       

      Please help if you can

        • 1. Re: Customising Preloader
          dhosford Employee Moderator

          Hi there,

           

            Try utilizing the steps in this thread to change the background color from being white to being the default color of your animation:

           

          http://forums.adobe.com/message/4300575

           

          Also, are you sure you have made the x and y values percentage in the Preloader settings? It needs to be set in the preloader settings, not just the Stage settings.

           

          Let me know if that helps! Thanks!

          -Devon

          • 2. Re: Customising Preloader
            -=XX=-Nephilim Level 1

            Hi and thanks for your reply!

             

            Yes, I have made X and Y values percentage in Preloader settings - X works fine since preloader animation is centered horizontally, however, Y doesn't seems to work since animation is stuck at the top of the page.

             

            Stage is set at 100% for both X and Y - so I have no idea what's the problem.

             

            I'll try to follow that thread in regards to background colour and report back

            • 3. Re: Customising Preloader
              -=XX=-Nephilim Level 1

              One more thing I am tottaly confused about...

               

              3. What on earth is the difference between 'Imediate' and 'Polite' preloader options!?!?!

              • 4. Re: Customising Preloader
                -=XX=-Nephilim Level 1

                Update:

                 

                I checked that thread and it makes no sense whatsoever...

                 

                Maybe since it is almost 1 year old and is dealing with Edge preview while I am using V1.5

                 

                In any case, I have checked edge.min.js from edge_includes folder as well as index_edge.js from the root and both files do NOT include string thread is talking about.


                Any other suggestion!?

                 

                 

                • 5. Re: Customising Preloader
                  -=XX=-Nephilim Level 1

                  Shameless bump!

                   

                  Can anyone help please?

                  • 6. Re: Customising Preloader
                    -=XX=-Nephilim Level 1

                    Hmmmm...

                     

                    So no one can help with this!?

                     

                    OK

                     

                    How about forgeting built in Edge Animate preloader and creating one independently!?

                     

                    Can anyone help with this?

                     

                    All I want really is simple site preloader that will center animation in the middle of the 100% wide and high stage and that would allow me to use different coloured or patterned backgrounds instead of plain white as offered by Edge Animate.

                    • 7. Re: Customising Preloader
                      GusDoeMatik™ Level 1

                      I found this for u... I tried it and it works...

                       

                      I didn't create the solution... I'm just bringing it to u...

                       

                      If you have a preloader the preloader will not center using the above method.

                      You will need to use this method:

                      Open the HTML file created by Edge...

                      Using Dreamweaver or Notepad

                      add this in between the <head> tags:

                      <style type="text/css">

                      <!--

                      #Stage {

                          height: 596px;

                          width: 553px;

                          margin-right: auto;

                          margin-left: auto;

                      }

                      -->

                      </style>

                      Make sure the height and width match the height and width that you set for the Stage in Edge.

                      • 8. Re: Customising Preloader
                        -=XX=-Nephilim Level 1

                        Hi and thanks for the post but that doesn't help...

                         

                        1st - I am using 'liquid layout', or in other words, 100% wide and high stage. So my main stage is NOT of fixed dimension.

                         

                        2nd - Preloader animation is centering fine down X coordinates but it isn't centering down Y coordinates. In other words, vertical centering isn't working while horizontal is fine...

                         

                        3rd - Project I am working on is tonaly rather dark (on the dark background) so having preloader on white background makes no sense at all. I wish to be able to customise Edge Animate preloader to properly reflect rest of the design ie. change background colour of it and ideally, instead of using plain colour,  load bitmap pattern instead.

                         

                        So yes..

                         

                        Still looking for a help!

                        • 9. Re: Customising Preloader
                          webmaster.ie

                          I'm having the exact same problem. So any help would be appreciated!

                          • 10. Re: Customising Preloader
                            -=XX=-Nephilim Level 1

                            No help from Adobe...

                             

                            No help from users...

                             

                            It appears that Adobe Edge Animate built in preloader - MUST have white background and it DOES NOT play well with 100% wide and high stage - officially! (???)

                             

                            Sad stuff

                            • 11. Re: Customising Preloader
                              mrjanha

                              Hi,

                               

                              if I understood you correctly then you are looking to change the appearence of the preloader.

                               

                              In my case I did just copy (cmd+c) from my main stage a bg-image and placed it (cmd+v) under the Elements tab below the preloader div. I hope that that might solved you issue.

                               

                              Best, J

                              • 12. Re: Customising Preloader
                                -=XX=-Nephilim Level 1

                                Hi,

                                 

                                Thanks for the post but that is not the solution...

                                 

                                I am using fluid / resizable stage - NOT of the fixed size!

                                 

                                In other words, I need to figure out how to place tilable pattern behind preloader animation, NOT an image of fixed widht and height.

                                 

                                2nd problem is how do I center preloader animation in the middle of the screen regardless of its size and shape?

                                 

                                For some reason, when you are using fluid stage, preloader animation centers fine horizontaly but it does NOT center vertically and instead it gets 'stuck' at the top of the screen (Y axis)

                                 

                                I am kind of getting desperate and loosing hope with this one...

                                 

                                 

                                • 13. Re: Customising Preloader
                                  joel_pau Level 5

                                  Hi,

                                   

                                  I assume that your preloader panel has objects. What are their names? You have to look at the Elements panel.

                                  • 14. Re: Customising Preloader
                                    -=XX=-Nephilim Level 1

                                    I don't understand...

                                     

                                    From the main stage I can click on EDIT button under Preloader section (just right from Polite or Imediate options)

                                     

                                    When I eneter Preloader Panel there is almost nothing that I can do there...

                                     

                                    I can insert preloader clip-art and that is about it...

                                     

                                    Under Elements panel there is only one item - loader-bar!

                                     

                                    How can I change background colour?

                                     

                                    How can I center preloader bar if my main stage / project is utilising 100% width and height (fluid stage)?

                                     

                                    Joel, if you could help, I would be extremly greatful!

                                    • 15. Re: Customising Preloader
                                      joel_pau Level 5

                                      ok, i will post a sample files tomorrow.

                                      • 16. Re: Customising Preloader
                                        -=XX=-Nephilim Level 1

                                        That would be amazing!

                                         

                                        Thanks in advance, Joel

                                        • 17. Re: Customising Preloader
                                          joel_pau Level 5

                                          Hi,

                                           

                                          I do not have enough time to write a demo. Could you send me your project in a private message?

                                          • 19. Re: Customising Preloader
                                            joel_pau Level 5

                                            Here is one solution.

                                            I rewrite the html file.

                                            <body style="margin:0;padding:0;height:100%;background-image:url(back2.jpg);">

                                            <div id="container" style="margin:0;padding:0;height:100%;background: url(images/loader-bar.gif) no-repeat center center;">

                                                      <div id="Stage" class="EDGE-19258028">

                                                 ...

                                            </div>

                                            </body>

                                            So, you use the Edge file without preloader.

                                            • 20. Re: Customising Preloader
                                              -=XX=-Nephilim Level 1

                                              Amazing

                                               

                                              So why Edge Animate preloader isn't designed to apply such simple changes to index html file!?!?

                                               

                                              wow

                                               

                                              Thank you so much!

                                               

                                              I haven't really played too much with it but from what I can see all is working exactly as I wished!

                                               

                                              One thing that I am kind of confused about now is - what exactly such solution is preloading really!?!?!

                                               

                                              Is this solution still preloading EVERYTHING that is under ASSETS tag in Edge Animate?

                                               

                                              Thank you again so much - you are star!

                                              • 21. Re: Customising Preloader
                                                elainecc Adobe Employee

                                                Hi, Nephilim-

                                                 

                                                I've added it as a wish list request, thanks!

                                                 

                                                -Elaine

                                                • 22. Re: Customising Preloader
                                                  -=XX=-Nephilim Level 1

                                                  Hi all,

                                                   

                                                  I was just playing with this solution a bit more and I can confirm great news!

                                                   

                                                  1. Visually - it is all working perfectly, preloader animationg / graphics are centering on the screen on fluid layout.

                                                   

                                                  2. It is indeed super easy to change background colour or indeed add bitmap pattern.

                                                   

                                                  3. Most importantly this solution DOES preload all the files found under Assets tab in Edge Animate!

                                                   

                                                  In short - Joel Pau did it again

                                                   

                                                  Thank you again!

                                                   

                                                   

                                                  @Elaine

                                                   

                                                  This simple preloader customisation option(s) are simply must feature in the next incarnation of EA - in my humble opinion that is.

                                                   

                                                  Fingers crossed it finds it way for the next release.

                                                   

                                                  Thanks for taking a notice!

                                                   

                                                  All the best!

                                                  • 23. Re: Customising Preloader
                                                    AMULI Level 4

                                                    Hi Devon,

                                                     

                                                    Is there a way to access to this post (unauthorized) about changing the background color of a preloader ? Thanks

                                                     

                                                    Gil

                                                    • 24. Re: Customising Preloader
                                                      elainecc Adobe Employee

                                                      Hey, Gil-

                                                       

                                                      I moved the post over to the Edge Animate forum from the prerelease forum, so it should be accessible now.

                                                       

                                                      Thanks,

                                                       

                                                      -Elaine

                                                      • 25. Re: Customising Preloader
                                                        AMULI Level 4

                                                        Thanks, Elaine

                                                         

                                                        Gil

                                                        • 26. Re: Customising Preloader
                                                          jr730

                                                          joel_pau wrote:

                                                           

                                                          Here is one solution.

                                                          I rewrite the html file.

                                                          <body style="margin:0;padding:0;height:100%;background-image:url(back2.jpg);">

                                                          <div id="container" style="margin:0;padding:0;height:100%;background: url(images/loader-bar.gif) no-repeat center center;">

                                                                    <div id="Stage" class="EDGE-19258028">

                                                               ...

                                                          </div>

                                                          </body>

                                                          So, you use the Edge file without preloader.

                                                          I know i'm a bit late to the party but i needed to figure this out also.

                                                          changing it in the html file directly does work.

                                                          However i felt there should be an easier way not to make more work for myself

                                                          to help change the preloader body background color

                                                          I use this:

                                                           

                                                          $("body").css("background","rgba(0,0,0,1.00)");

                                                           

                                                          inside the OpenActions on the Preloader itself.

                                                           

                                                          hopefully this becomes useful for the next person who stumbles across an old post.

                                                          trying to find an alternative solution

                                                           

                                                          fyi I don't post much so... if my etiquette is off sorry.

                                                          • 27. Re: Customising Preloader
                                                            Fea

                                                            i solved it by adding  $("body").css("background","black"); to the preloader actions, while editing the preloader, not to the stage's actions, cause they won't effect the preloader's page itself.

                                                            Adding <body style="margin:0;padding:0;background-color:black;"> to the html file, as the body tag opening is the only way to make it work.

                                                             

                                                            <body style="margin:0;padding:0;background-color:black;">

                                                            <div id="Stage" class="EDGE-Number">

                                                            </div>

                                                            </body>

                                                             

                                                             

                                                            • 28. Re: Customising Preloader
                                                              Xoco Level 3

                                                              Yes, I prefer to use Preloader.loading event for this.

                                                               

                                                              $("body").css("background","rgba(0,0,0,1.00)");

                                                              $("body").css("width", "100%");

                                                              $("body").css("height", "100%");

                                                              • 29. Re: Customising Preloader
                                                                Xoco Level 3

                                                                But, without modifying html file, is possible center elements with preloader in Edge? I have a animated .gif in preloader panel, but I can't use sym.$("intro").css in Prelaoder.loading because Stage doesn't exists yet, how can I center image in preloader? if I use 50% in x and y, then the position 0,0 of image is centered, but not center of image.