Hi,
I've been trying to disect the flex preloader to understand the load time. I have an application that shows a blank screen for quite some time before displaying the preloader. When the preloader does show it doesn't say 'Loading...' but skips straight to 'initializing' for a short time, then straight into the app.
I am not sure what is going on and why it takes such a long time for the preloader to pop-up. i don't want visitors to think there is nothing there, because it says 'Done' in the bottom of the browser when it is blank; it could seem it is just a blank page to a visitor.
can someone explain or point me in a direction where i can learn 1) when the 'preloader/loading' pops up 2) when 'initializing' pops up, and when the actual app loads. it seems it is skipping the first step, going straight to initiliazing for a short time and then loading the app.
examples:
www.encoemall.com
demo.phourus.com
better load time example:
www.smartbizrecycling.com
Thanks,
Jesse
blank screen for long time before...
These pages may be of use:
http://forums.adobe.com/thread/209255
http://livedocs.adobe.com/flex/3/html/help.html?content=app_container_2.html
If this post answered your question or helped, please mark it as such.
blank screen for long time before...
I guess what I need to know is this:
What exactly is loading before the flex preloader loads? when it is a blank screen is it loading 1) the entire swf (so blank screen duration would be directly proportional to the size of the swf) 2) the preinitiliaze/initialize phase
here is my main app file:
%26lt;?xml version=''1.0'' encoding=''utf-8''?%26gt;
%26lt;mx:Application
xmlns:mx=''http://www.adobe.com/2006/mxml'' preinitialize=''loadUser()'' layout=''vertical'' xmlns:progress=''reseller.master.preloader.*'' xmlns:master=''reseller.master.*'' width=''100%'' height=''100%'' xmlns:forms=''reseller.master.forms.*''
%26gt;
%26lt;mx:Script%26gt;
%26lt;![CDATA[
//Import
import mx.controls.Alert;
import flash.events.*;
import flash.net.*;
import mx.rpc.http.*;
import mx.rpc.events.ResultEvent;
import mx.managers.BrowserManager;
import mx.managers.IBrowserManager;
import mx.utils.URLUtil;
//Objects
public var variables:Object=
new Object();
private var browser:IBrowserManager;
//Globals[
Bindable]
public var global_ID:int;[
Bindable]
public var global_Email:String;[
Bindable]
public var global_Recipient:String;[
Bindable]
public var global_Company:String;[
Bindable]
public var global_Site:String;[
Bindable]
public var global_Style:String;[
Bindable]
public var global_Header:String;[
Bindable]
public var global_Directory:String;[
Bindable]
public var global_Type:String=
'fdi_site';[
Bindable]
public var global_Multi:Boolean=
true;[
Bindable]
public var title_Home:String;[
Bindable]
public var title_About:String;[
Bindable]
public var title_Blog:String;[
Bindable]
public var title_Contact:String;[
Bindable]
public var title_FDI:String;[
Bindable]
public var title_Multimedia:String;[
Bindable]
public var title_Store:String;[
Bindable]
public var disable_Header:String;[
Bindable]
public var disable_Menu:String;[
Bindable]
public var disable_Content:String;[
Bindable]
public var url_Header:String;[
Bindable]
public var url_Menu:String;[
Bindable]
public var url_Content:String;[
Bindable]
public var user_Username:String;[
Bindable]
public var background_Color:uint;[
Bindable]
public var primary_Color:uint;[
Bindable]
public var secondary_Color:uint;[
Bindable]
public var border_Color:uint;[
Bindable]
public var primary_Text:uint;[
Bindable]
public var secondary_Text:uint;[
Bindable]
public var user_Admin:Boolean=
false;
//Parameters
private var _user:String;
private function loadUser():
void {
browser= BrowserManager.getInstance();
browser.init(
'''',
''Welcome!'');
parseURL();
}
private function parseURL():
void {
var fragment:Object = URLUtil.stringToObject(browser.fragment,
''%26amp;'');
_user = fragment.user;
if(global_Multi==
false){global_Directory=
''; }
else{global_Directory=
'user/'+_user+
'/';
}
initPage();
}
public function initPage():
void {
var settingsRequest:HTTPService =
new HTTPService();settingsRequest.url= global_Directory+
''XML/settings.xml'';settingsRequest.resultFormat=
''e4x'';
settingsRequest.send(variables);
settingsRequest.addEventListener(ResultEvent.RESULT, settingsLoaded);
var contactRequest:HTTPService =
new HTTPService();contactRequest.url= global_Directory+
''XML/contact.xml'';contactRequest.resultFormat=
''e4x'';
contactRequest.send(variables);
contactRequest.addEventListener(ResultEvent.RESULT, contactLoaded);
}
public function settingsLoaded(event:ResultEvent):
void{
var settingsXML:XML= event.result
as XML;
global_Company= settingsXML.company;
global_Site= settingsXML.site;
global_Header= settingsXML.header;
//global_Style= ''CSS/''+settingsXML.style+''.swf'';
title_Home= settingsXML.homeTitle;
title_About= settingsXML.aboutTitle;
title_Blog= settingsXML.blogTitle;
title_Contact= settingsXML.contactTitle;
title_FDI= settingsXML.fdiTitle;
title_Multimedia= settingsXML.multimediaTitle;
title_Store= settingsXML.storeTitle;
disable_Header= settingsXML.headerDisable;
disable_Menu= settingsXML.menuDisable;
disable_Content= settingsXML.contentDisable;
url_Header= settingsXML.headerURL;
url_Menu= settingsXML.menuURL;
url_Content= settingsXML.contentURL;
background_Color= settingsXML.background_Color;
primary_Color= settingsXML.primary_Color;
secondary_Color= settingsXML.secondary_Color;
border_Color= settingsXML.border_Color;
primary_Text= settingsXML.primary_Text;
secondary_Text= settingsXML.secondary_Text;
loadComplete();
}
public function contactLoaded(event:ResultEvent):
void{
var contactXML:XML= event.result
as XML;
global_Recipient= contactXML.recipient;
}
private function loadStyle(style:String):
void {
StyleManager.loadStyleDeclarations(style);
}
private function loadComplete():
void {
if(disable_Header==
''true''){header.visible=
false;
}
text_header.htmlText= global_Header;
var application:CSSStyleDeclaration= StyleManager.getStyleDeclaration(
'Application');application.setStyle(
'backgroundColor', background_Color);application.setStyle(
'themeColor', primary_Color);
var linkButton:CSSStyleDeclaration= StyleManager.getStyleDeclaration(
'LinkButton');linkButton.setStyle(
'color', primary_Text);linkButton.setStyle(
'textRollOverColor', secondary_Text);linkButton.setStyle(
'rollOverColor', primary_Text);
//loadStyle(global_Style);
current_master.selectedChild= master_main;
}
]]%26gt;
%26lt;/mx:Script%26gt;
%26lt;mx:Style%26gt;
Application
{
backgroundGradientColors: #666666, #333333
;
backgroundGradientAlphas: 0.04, 0.21
;
color: #222222
;
}
.box
{
borderStyle: solid
;
cornerRadius: 5
;
backgroundColor: #eeeeee
;
backgroundAlpha: 1
;
padding-top: 10px
;
padding-right: 10px
;
padding-left: 10px
;
padding-bottom: 10px
;
}
LinkButton
{
font-size: 11px
;
}
RichTextEditor
{
borderColor: #fefefe
;
borderAlpha: 1
;
highlightAlphas: 0.32, 0.1
;
headerColors: #dddddd, #cccccc
;
titleStyleName: ''mypanelTitle''
;
}
Alert
{
borderColor: #fefefe
;
borderAlpha: 1
;
backgroundColor: #ffffff
;
color: #000000
;
highlightAlphas: 0.32, 0.1
;
headerColors: #dddddd, #cccccc
;
titleStyleName: ''mypanelTitle''
;
}
.mypanelTitle
{
font-weight:bold
;
}
ApplicationControlBar
{
highlightAlphas: 0.2, 0.16
;
fillAlphas: 0, 0
;
dropShadowEnabled: true
;
}
TextInput
{
color: #000000
;
borderColor: #000000
;
backgroundColor: #ffffff
;
}
Button
{
fillAlphas: 1, 1
;
color: #000000
;
textRollOverColor: #333333
;
}
.copyright
{
color: #000000
;
}
ComboBox
{
color: #000000
;
borderColor: #ffffff
;
iconColor: #000000
;
highlightAlphas: 0.16, 0.28
;
fillAlphas: 1, 1, 0, 0
;
fillColors: #ffffff, #cccccc, #ffffff, #eeeeee
;
arrowButtonWidth: 22
;
backgroundAlpha: 1
;
selectionColor: #ffffff
;
textSelectedColor: #333333
;
useRollOver: true
;
themeColor: #000000
;
alternatingItemColors: #ffffff, #cccccc
;
dropdownStyleName: ''myComboBoxDropDowns''
;
}
.myComboBoxDropDowns
{
borderThickness: 0
;
borderColor: #ffffff
;
}
DataGrid
{
color: #000000
;
}
.play
{
skin: Embed(source=''Icons/Play_Normal.png''
);
over-skin: Embed(source=''Icons/Play_Over.png''
);
}
.pause
{
skin: Embed(source=''Icons/Pause_Normal.png''
);
over-skin: Embed(source=''Icons/Pause_Over.png''
);
}
.stop
{
skin: Embed(source=''Icons/Stop_Normal.png''
);
over-skin: Embed(source=''Icons/Stop_Over.png''
);
}
.previous
{
skin: Embed(source=''Icons/Previous_Normal.png''
);
over-skin: Embed(source=''Icons/Previous_Over.png''
);
}
.next
{
skin: Embed(source=''Icons/Next_Normal.png''
);
over-skin: Embed(source=''Icons/Next_Over.png''
);
}
%26lt;/mx:Style%26gt;
%26lt;mx:Canvas width=''850'' height=''150'' backgroundImage=''{url_Header}''
%26gt;
%26lt;progress:Progress id=''progress''
/%26gt;
%26lt;mx:ApplicationControlBar id=''header'' width=''850'' height=''150'' paddingBottom=''0'' x=''0'' y=''0'' backgroundColor=''{primary_Color}''
/%26gt;
%26lt;mx:Text id=''text_header'' fontSize=''18'' fontWeight=''bold'' textAlign=''left'' x=''25'' y=''25''
/%26gt;
%26lt;forms:Authorize id=''form_login'' x=''550'' y=''10''
/%26gt;
%26lt;/mx:Canvas%26gt;
%26lt;mx:Box id=''container_main'' horizontalAlign=''center'' width=''100%'' height=''100%''
%26gt;
%26lt;mx:ViewStack id=''current_master''
%26gt;
%26lt;mx:Box id=''master_init''
%26gt;
%26lt;/mx:Box%26gt;
%26lt;mx:Box id=''master_main''
%26gt;
%26lt;master:Main id=''Main_Section''
/%26gt;
%26lt;/mx:Box%26gt;
%26lt;mx:Box id=''master_editor''
%26gt;
%26lt;master:Editor
/%26gt;
%26lt;/mx:Box%26gt;
%26lt;/mx:ViewStack%26gt;
%26lt;/mx:Box%26gt;
%26lt;mx:Label styleName=''copyright'' text=''Copyright 2009 {global_Company}. All rights reserved.''
/%26gt;
%26lt;mx:Text styleName=''copyright''
%26gt;
%26lt;mx:htmlText%26gt;
%26lt;![CDATA[
%26lt;p align=''center''%26gt;%26lt;i%26gt;Site Designed by %26lt;a href=''http://www.quick-sites.biz'' target=''_blank''%26gt;Jesse Drelick%26lt;/a%26gt;.%26lt;/i%26gt;%26lt;/p%26gt;
]]%26gt;
%26lt;/mx:htmlText%26gt;
%26lt;/mx:Text%26gt;
Do you think it has something to do with the Browser Manager or the preinitialize?
Flex SWFs are two-frame SWFs The preloader is the first frame, the app is the second frame. As soon as the bytes of the first frame are downloaded, the preloader shows up and the rest of the SWF downloads then the app is initialized.
If you are using ''#'' in the URL, you might be hitting this bug: https://bugs.adobe.com/jira/browse/FP-2332
Otherwise, if you're using a custom preloader, make sure it doesn't drag lots of code into the first frame.
Also try your app using a non-debugger player.
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui
so the preloader should be loaded before the rest of the .swf? this would mean it should be a relatively standard load time when using the standard preloader, considering the preloader loads first, then the 2nd frame is loaded. it seems like the first frame is taking much longer to load
if using the standard flex preloader, should the blank screen be the same duration regardless of .swf size? so if i have a 10 mb swf it will take the same time until the preloader shows up from the blank screen, but will take much longer to get to the app when the preloader is showing?
i tried the # issue, not sure if it made a difference, though i wouldn't be surprised if the Browser Manager has something to do with it.
thanks for your help
it seems .swf size has no effect on the blank screen duration, as you have mentioned. i have embedded a large file making the file size 3.5mb instaed of 350kb, and the blank screen duration was the same, though the 'loading' phase of the preloader was much longer, as expected. so apparently the file size is not the culprit (considering i have a small file size anyway it really wouldn't make sense for that duration)
i am now curious if the browser manager is part of the problem as you have mentioned about the #, otherwise i can't think of anything else
If your URL you used to start the app doesn't have a # in it, then that problem is not affecting you, even if you use BrowserManager in your app and later URLs have #
Can you post your SWF? It doesn閳ユ獩 have to run. I'll just download it and see how big frame1 is.
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui
i have attached the .swf (note i use a rsl for the flex framework) anyway i have it setup so if a user goes to http://professional.phourus.com/user/phourus, a php script uses header('Location: http://professional.phourus.com/index.html#user=phourus') to load the user's page, as sort of an alias.
You can try both of those urls...
thank you for your help
This url: http://professional.phourus.com/index.html#user=phourus has the '#' in it, so you are definitely going to experience the dead-air problem I mentioned earlier. It did load quickly for me though.
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui