Flex learning-custom loading Animation

I. lifecycle of the Flex program:

In essence, the flex program is a flash program using the flex framework (compiled by. However, the concept of timeline can be ignored in the flex program. All content is set to one frame. In fact, the root of the Flex program inherits the MX. Managers. systemmanager of flash. display. movieclip. Systemmanager has two frames. The first frame is the preload program, and the second frame is the main program. Therefore, before running all programs, you must go through the following process:
1) preinitialize: after this process, the program has been instantiated, but no content has been created.
2) initialize: after the program is in this process, the content has been created, but the layout has not yet been completed.
3) creationcomplete: after this process, the program has been created, including layout.

After successfully completing the preceding three processes, systemmanager broadcasts the applicationcomplete event, which means that the program is ready for installation.

Systemmanager also manages all contents that display the front end. Including pop-up windows, mouse pointers, and tooltip.

Systemmanager has an attribute called totellevelsystemmanager. When a flex Program is an independent program, this property points to the instance of systemmanager, and when the flex program is loaded to another flex program, this property points to the loader's systemmanager instance.

All uicomponents have a systemmanager attribute pointing to the systemmanager instance of the program.

Ii. preloader:

The pre-loader is automatically created by systemmanager In the first frame. After the task is completed, the complete event is published, and the second frame is entered, and then deleted by systemmanager.

In addition to complete, there are also the following events:
Progress: program download process
Rslerror: An error occurred while downloading the shared library during runtime.
Rslprogress: the download process of shared libraries during runtime
Rslcomplete: The Shared Library is downloaded at runtime.
Initprogress: Program initialization process
Initcomplete: The program Initialization is complete.

Iii. preloader:

Systemmanager uses the preloader class to monitor the download and initial activation status of flex applications, and is also responsible for downloading the Shared Library (RSL) during runtime ),

During use, the preloader class example must implement the download progress bar of the ipreloaderdisplay interface, and pass the download and initial events to the download progress bar.
4. Sprite:

The sprite class is a basic display list constructor. It is a display list node that Displays graphs and contains subitems.
A sprite object is similar to a video clip but has no timeline. Sprite is the base class of objects that do not require timeline. For example, Sprite is the logical base class of the user interface (UI) component that generally does not use the timeline.

5. ipreloaderdisplay:

The definition class must be implemented as an interface for the download progress bar. Ipreloaderdisplay receives events from the preloader class and displays this information to users.

Vi. key code:

[Embed (Source = "icons/loading.swf", mimetype = "application/octet-stream")] <br/> public class loadinglogo extends bytearray <br/>{< br/> Public Function loadinglogo () <br/>{< br/> super (); <br/>}</P> <p> public class custompreloader extends sprite implements ipreloaderdisplay <br/>{< br/> Public VaR _ loadinglogo: loadinglogo; <br/> private var dpbimagecontrol: loader; <br/> private VaR _ barsprite: Sprite; <Br/> private var progresstext: textfield; <br/> private var progressbarspritisadded: Boolean = false; <br/> Public Function custompreloader () {<br/> super (); <br/>}< br/> // Add a listener <br/> public function set preloader (preloader: SPRITE ): void {<br/> // listen for is downloading <br/> preloader. addeventlistener (progressevent. progress, handleprogress); <br/> // listen for download completed <br/> preloader. addeventlistener (event. complet E, handlecomplete); <br/> // listen for is initializing <br/> preloader. addeventlistener (flexevent. init_progress, handleinitprogress); <br/> // The listen for initialization is complete <br/> preloader. addeventlistener (flexevent. init_complete, handleinitcomplete); <br/>}< br/> // initialization <br/> Public Function initialize (): void {<br/> // Add a logo <br/> dpbimagecontrol = new loader (); <br/> dpbimagecontrol. contentloaderinfo. addeventlistener (event. com Plete, loader_completehandler); <br/> dpbimagecontrol. loadbytes (New loadinglogo (); <br/>}</P> <p> // set the Loading Control <br/> private function loader_completehandler (Event: Event ): void <br/>{< br/> addchild (dpbimagecontrol); <br/> dpbimagecontrol. width = 550; <br/> dpbimagecontrol. height = 60; <br/> dpbimagecontrol. X = This. stage. stagewidth/2-500; <br/> dpbimagecontrol. y = This. stage. stageheight/2-240; <br/>}< br/> // Set the progress bar <br/> private function addprogressbarsprit (): void {<br/> // draw the background gradient <br/> var matrix: matrix = new matrix (); <br/> matrix. creategradientbox (this. stage. stagewidth, this. stage. stageheight, math. PI/2); <br/> var colors: array = [0x058bbd, 0 xffffff]; <br/> var Alphas: array = [1, 1]; <br/> var ratios: array = [0,255]; <br/> This. graphics. linestyle (); <br/> This. graphics. begingradientfill (gradienttype. linear, colors, Alpha S, ratios, matrix); <br/> This. graphics. drawrect (0, 0, this. stage. stagewidth, this. stage. stageheight); <br/> This. graphics. endfill (); </P> <p> // draw center white light <br/> VaR _ sprite1: SPRITE = new sprite (); <br/> addchild (_ sprite1); <br/> _ sprite1.graphics. beginfill (0 xffffff, 0.45); <br/> _ sprite1.graphics. drawellipse (this. stage. stagewidth/2-130, this. stage. stageheight/2-90,280,100); <br/> _ sprite1.graphics. endfill (); <br // Filter to soften the luminous edge <br/> var blur: blurfilter = new blurfilter (); <br/> blur. blurx = 100; <br/> blur. blury = 50; <br/> blur. quality = bitmapfilterquality. high; <br/> _ sprite1.filters = [blur]; </P> <p> // load progress bar text <br/> progresstext = new textfield (); <br/> addchild (progresstext); <br/> progresstext. textcolor = 0x333333; <br/> progresstext. width = 300; <br/> progresstext. height = 18; <br/> progresstext. X = This. stage. Stagewidth/2-140; <br/> progresstext. y = This. stage. stageheight/2 + 20; <br/>}</P> <p> // refresh the progress bar <br/> private function drawprogressbar (bytesloaded: Number, bytestotal: number ): void <br/> {<br/> If (_ barsprite! = NULL & progresstext! = NULL) {<br/> var G: Graphics = _ barsprite. graphics; <br/> G. clear (); <br/> var matrix: matrix = new matrix (); <br/> matrix. creategradientbox (300 * (bytesloaded/bytestotal), 16, math. PI/2); <br/> var colors: array = [0x0099cc, 0x99cc77]; <br/> var Alphas: array = [1, 1]; <br/> var ratios: array = [2, 0,255]; <br/> G. linestyle (); <br/> G. begingradientfill (gradienttype. linear, colors, Alphas, ratios, matrix); <br/> G. drawrect (300 * (Bytesloaded/bytestotal), 16); <br/> G. endfill (); <br/>}</P> <p> // download progress <br/> private function handleprogress (Event: progressevent ): void {<br/> // draw the progress bar sprit during the first processing <br/> If (progressbarspritisadded = false) {<br/> progressbarspritisadded = true; <br/> addprogressbarsprit (); <br/>}</P> <p> If (progresstext! = NULL) {<br/> progresstext. TEXT = "loding... "+ (event. bytesloaded/event. bytestotal) * 100 + "%"; <br/>}< br/> drawprogressbar (event. bytesloaded, event. bytestotal); <br/>}</P> <p> private function handlecomplete (Event: Event): void {<br/> alert. show ("1"); <br/> If (progresstext! = NULL) {<br/> progresstext. TEXT = "Download complete. "; <br/>}< br/> drawprogressbar (1,1); <br/>}</P> <p> private function handleinitprogress (Event: Event ): void {<br/> If (progresstext! = NULL) {<br/> progresstext. TEXT = "Initializing... "; <br/>}< br/> drawprogressbar (1,1); <br/>}</P> <p> private function handleinitcomplete (Event: Event ): void {<br/> If (progresstext! = NULL) {<br/> progresstext. TEXT = "Initialization is complete. "; <br/>}< br/> drawprogressbar (0.03); <br/> // a completion event is thrown in seconds. <br/> var Timer: timer = new timer (); <br/> timer. addeventlistener (timerevent. timer, dispatchcomplete); <br/> timer. start (); <br/>}</P> <p> private function dispatchcomplete (Event: timerevent): void {<br/> dispatchevent (new event (event. complete); <br/>}< br/>}

 

VII. Loader:

It can be used to load SWF files or images (JPG, PNG, or GIF) files. Useload()Method to start loading. The loaded Display object is added as a child of the loader object.

Use the urlloader class to load text or binary data.

8. bytearray:

Provides methods and attributes for optimizing reading, writing, and processing binary data.

The data in the memory is a compressed byte array (the most compact representation of the data type), but the standard[](Array access) operator to operate bytearray class instances. You can also use a method similar to urlstream and socket class to read and write it as a file in the memory.

 

9. Simple Description:

Set the preloader attribute of an application to a custom loading animation class. systemmanager uses the custom preloader to monitor application loading and initialization. The entire execution process is:

1) initialize)

2) The Custom preloader detects the initial activation event and executes its own initialize method to initialize its own components.

3) execute the set preloader (sprite) method and set the preloader of the application to the current one. Add events to preloader.

4) execute the customized preloader initial, initial, and download methods respectively.

5) trigger the application creation completion event