topic customize the loading screen of flex viewer in ArcGIS API for Flex Questions

customize the loading screen of flex viewer

SaurabhGupta5 — Thu, 12 Feb 2015 07:19:33 GMT

Hello,

i am trying to put customize logo instead of default loading for esri viewer for flex, any help would be greatly appreciated. thanks

PFB the default loading screen i want to replace with some logo.

Reagrds

Saurabh

Re: customize the loading screen of flex viewer

RobertScheitlin__GISP — Thu, 12 Feb 2015 13:02:27 GMT

Saurabh,

This is the link that I used to learn how to do this.

Building a custom Flex preloader | Adobe Developer Connection

Re: customize the loading screen of flex viewer

SaurabhGupta5 — Fri, 13 Feb 2015 03:10:14 GMT

Thanks for quick reply robert. i will check on to this one and will confirm back to you soon. Thanks

Re: customize the loading screen of flex viewer

SaurabhGupta5 — Fri, 13 Feb 2015 06:30:41 GMT

Hi Robert,

Quick help, where should i add this page in my esri flex viewer 3.6 , where to call from ?

Thanks

Re: customize the loading screen of flex viewer

RobertScheitlin__GISP — Fri, 13 Feb 2015 12:59:38 GMT

Saurabh,

In the Index.mxml of your project.

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:viewer="com.esri.viewer.*"

xmlns:managers="com.esri.viewer.managers.*"

pageTitle="Parcel Viewer Flex Version"

preloader="com.calhoun.county.CalPreloader">

Re: customize the loading screen of flex viewer

SaurabhGupta5 — Fri, 13 Feb 2015 15:11:44 GMT

Wow, i got it correct from your help but only one concern how to use customized image instead of displayloader(swc). i want to use image . please suggest . Thanks

Re: customize the loading screen of flex viewer

RobertScheitlin__GISP — Fri, 13 Feb 2015 15:17:03 GMT

Saurabh,

I don't know the answer that question.

Glad to help. Now it is your turn to help the community by marking this question as answered. All you have to do is click the "Correct Answer" link (the one with the little green star) on the post that provided the answer for you. If the answer was not provided by one of the responders then you can mark any of the replies that you received as helpful by clicking on the "Actions" menu and choosing "Mark as Helpful"

Re: customize the loading screen of flex viewer

SaurabhGupta5 — Fri, 13 Feb 2015 15:27:41 GMT

Done robert,

but please let me know if you get some clue on how to load image instead of flash content. that will be helpfull. thanls

Re: customize the loading screen of flex viewer

SaurabhGupta5 — Fri, 27 Mar 2015 10:50:44 GMT

HERE IS THE SOLUTION..

// ActionScript file

package com.esri.viewer
{
import flash.display.DisplayObject;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.text.TextField;
import flash.text.TextFormat;

import flashx.textLayout.tlf_internal;

import mx.core.mx_internal;
import mx.preloaders.SparkDownloadProgressBar;

import org.as3commons.lang.Assert;

use namespace mx_internal;

public class Preloader extends SparkDownloadProgressBar {

[Embed(source="assets/images/loaderlogo.png")] public var logoClass:Class;

private var preloaderLogo : MovieClip;
private var loadingText : TextField;
private var loadingProgress : TextField;

private var _initProgressCount : uint = 0;

private var textFormat : TextFormat = new TextFormat("Verdana", 16, 0x666666, true);

public function Preloader() {
   super();

   textFormat.align = "center";
}

override public function set preloader(value : Sprite) : void {
   super.preloader = value;

   if (!preloaderLogo) {

    var img:DisplayObject = new logoClass();

    preloaderLogo = new MovieClip(); // kakaranet logo
    preloaderLogo.addChild(img);

    var startX : Number = Math.round((stageWidth - preloaderLogo.width) / 2);
    var startY : Number = Math.round((stageHeight - preloaderLogo.height) / 2);

    preloaderLogo.x = startX;
    preloaderLogo.y = startY;

    loadingText = new TextField();
    loadingProgress = new TextField();

    loadingText.width = stageWidth;//to allow center align
    loadingProgress.width = stageWidth;


    loadingText.text = "Loading...";
    loadingText.y = preloaderLogo.y + preloaderLogo.height + 20;


    loadingProgress.text = "0%";
    loadingProgress.y = loadingText.y + loadingText.textHeight + 10;

    addChild(preloaderLogo);
    addChild(loadingText);
    addChild(loadingProgress);

    loadingText.setTextFormat(textFormat);
    loadingProgress.setTextFormat(textFormat);
   }
}

override protected function progressHandler(event : ProgressEvent) : void {
   super.progressHandler(event);
   if (loadingProgress) {
    loadingProgress.text = Math.floor(event.bytesLoaded / event.bytesTotal * 100) + "%";
    loadingProgress.setTextFormat(textFormat);
   }

}

override protected function completeHandler(event : Event) : void {
   loadingText.text = "Ready!";
   loadingText.setTextFormat(textFormat);
   preloaderLogo.stop();
}

override protected function initProgressHandler(event : Event) : void {
   super.initProgressHandler(event);
   //similar to super
   _initProgressCount++;
   if (loadingProgress) {
    loadingProgress.text = "100% / " + Math.floor(_initProgressCount / initProgressTotal * 100) + "%";
    loadingProgress.setTextFormat(textFormat);
   }
}

}
}