nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

customize the loading screen of flex viewer

SaurabhDestiny18

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

Finde mehr Beiträge mit dem Tag

Accepted answers

RobertScheitlin__GISP

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

All comments

SaurabhDestiny18

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);
   }
}

}
}

SaurabhDestiny18

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