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
No comments:
Post a Comment