Adobe Community: Message List - Customising Preloader

Re: Customising Preloader

forums_noreply@adobe.com — Mon, 14 Jul 2014 16:54:21 GMT

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.

Re: Customising Preloader

forums_noreply@adobe.com — Wed, 21 May 2014 07:10:42 GMT

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%");

Re: Customising Preloader

forums_noreply@adobe.com — Mon, 19 May 2014 22:23:21 GMT

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.

</div>

</body>

Re: Customising Preloader

forums_noreply@adobe.com — Fri, 21 Mar 2014 00:14:05 GMT

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.

Re: Customising Preloader

forums_noreply@adobe.com — Thu, 20 Jun 2013 18:01:52 GMT

Thanks, Elaine

Gil

Re: Customising Preloader

forums_noreply@adobe.com — Thu, 20 Jun 2013 17:15:25 GMT

Hey, Gil-

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

Thanks,

-Elaine

Re: Customising Preloader

forums_noreply@adobe.com — Thu, 20 Jun 2013 16:01:09 GMT

Hi Devon,

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

Gil

Re: Customising Preloader

forums_noreply@adobe.com — Tue, 02 Apr 2013 10:04:28 GMT

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!

Re: Customising Preloader

forums_noreply@adobe.com — Mon, 01 Apr 2013 18:27:19 GMT

Hi, Nephilim-

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

-Elaine

Re: Customising Preloader

forums_noreply@adobe.com — Mon, 01 Apr 2013 16:25:44 GMT

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!

Re: Customising Preloader

forums_noreply@adobe.com — Mon, 01 Apr 2013 15:42:19 GMT

Here is one solution.

I rewrite the html file.

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

...

</div>

</body>

So, you use the Edge file without preloader.

Re: Customising Preloader

forums_noreply@adobe.com — Mon, 01 Apr 2013 11:40:07 GMT

Done

Re: Customising Preloader

forums_noreply@adobe.com — Mon, 01 Apr 2013 10:38:29 GMT

Hi,

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

Re: Customising Preloader

forums_noreply@adobe.com — Sun, 31 Mar 2013 10:16:53 GMT

That would be amazing!

Thanks in advance, Joel

Re: Customising Preloader

forums_noreply@adobe.com — Sat, 30 Mar 2013 21:46:04 GMT

ok, i will post a sample files tomorrow.

Re: Customising Preloader

forums_noreply@adobe.com — Sat, 30 Mar 2013 18:30:50 GMT

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!

Re: Customising Preloader

forums_noreply@adobe.com — Sat, 30 Mar 2013 17:24:25 GMT

Hi,

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

Re: Customising Preloader

forums_noreply@adobe.com — Sat, 30 Mar 2013 09:54:14 GMT

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...

Re: Customising Preloader

forums_noreply@adobe.com — Fri, 29 Mar 2013 19:35:13 GMT

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

Re: Customising Preloader

forums_noreply@adobe.com — Tue, 19 Mar 2013 07:56:58 GMT

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

Re: Customising Preloader

forums_noreply@adobe.com — Thu, 14 Mar 2013 03:29:09 GMT

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

Re: Customising Preloader

forums_noreply@adobe.com — Sun, 10 Mar 2013 14:22:12 GMT

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!

Re: Customising Preloader

forums_noreply@adobe.com — Sat, 09 Mar 2013 18:47:29 GMT

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.

Re: Customising Preloader

forums_noreply@adobe.com — Sat, 09 Mar 2013 18:04:44 GMT

Hmmmm...

So no one can help with this!?

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.

Re: Customising Preloader

forums_noreply@adobe.com — Wed, 27 Feb 2013 08:09:55 GMT

Shameless bump!

Can anyone help please?

Re: Customising Preloader

forums_noreply@adobe.com — Sun, 24 Feb 2013 20:26:36 GMT

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!?

Re: Customising Preloader

forums_noreply@adobe.com — Sun, 24 Feb 2013 19:42:06 GMT

One more thing I am tottaly confused about...

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

Re: Customising Preloader

forums_noreply@adobe.com — Sun, 24 Feb 2013 19:23:50 GMT

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

Re: Customising Preloader

forums_noreply@adobe.com — Sun, 24 Feb 2013 17:49:14 GMT

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

Customising Preloader

forums_noreply@adobe.com — Sun, 24 Feb 2013 16:40:04 GMT

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