Preloader-Flex custom preload progress bar

When the network speed is slow, if there are no prompts or changes to the interface during the download process, the user will feel annoyed and even complain about the developer, which is not what we want. The progress bar is a good way to divert attention. It makes the user feel that the program is running normally and can wait patiently.

Preloader is a class that monitors the download and initialization processes of application, RSL, and modules, including the download process, the initialization process events are generated based on the download status, including:

Flexevent. init_progress

Flexevent. init_complete

Progressevent. Progress

Event. Complete

Although preloader publishes initialization process events, it does not directly display the initialization process. Instead, it submits the displayed work to a display class. We call this class A display class. Systemmanager calls the initialize method of preloader in its own initialize method, and passes the Class Name of the loaded display class as the parameter value to preloader. By default, this class is specified as downloadprogressbar by systemmanager (the default progress bar of the system ).

If we use the preloader attribute in the MX: Application tag to specify the loading display class, the specified class name will be passed as a parameter to the preloader. In the initialize method, the preloader class creates a display class based on the class name obtained in the parameter, initializes the basic attributes of the display class, and assigns a value to the preloader attribute of the display class.

The ipreloaderdisplay interface must be implemented to load the display class. This is the requirement of the preloader class, because preloader forcibly converts the instance for loading the display class to the ipreloaderdisplay interface for access. Through the ipreloaderdisplay interface, preloader can complete the settings for loading the basic attributes of the display class. These attributes include backgroundimage and backgroundsize. The ipreloaderdisplay interface will be detailed later.

Sometimes we think that the default display class cannot meet the requirements, and we want to display the progress with more characteristics. We can change the display class loading format in three ways: First, modify the properties of the default display class progress bar; second, listen to the loading process events and redraw; and third, re-implement the ipreloaderdisplay interface. The workload for the three methods to rewrite the Code increases sequentially. Of course, the degree of freedom for the presentation method increases sequentially.

You may wonder if you can use tags to modify the properties of the progress bar? First, the attribute of modifying the progress bar is not provided. Secondly, we know that preloader occurs in the first frame, and application and all components are initialized in the second frame. Therefore, even if you can use the tag to modify the progress bar attribute, the progress bar is no longer displayed after the first frame of work is completed. Therefore, to modify the default preloader display class behavior, you can only modify the code. Next we will introduce three methods to change the default display of the pre-load.

1. Modify the properties of the progress bar

The default display class for pre-loading is downloadprogressbar (download progress bar). To modify the display form of the download progress bar, inherit from the default downloadprogressbar, modify its property value, and override the method of this class, finally, the new implementation class is assigned to the preloader attribute of the application to implement download progress bars of different styles. Create an ActionScript class and inherit from downloadprogressbar. The code for modifying attributes is shown in code listing 3-1.

Code List 3-1 modify the properties of the progress bar

Import flash. geom. rectangle; import flash. text. textformat; import MX. graphics. roundedrectangle; import MX. preloaders. downloadprogressbar; public class mydownprobar extends downloadprogressbar {[embed (Source = "bcgimage.jpg")] // background image of the progress bar [Bindable] private var bcgimageclass: Class; Public Function mydownprobar () {super (); downloadinglabel = "download... "; // The default value is loading initializinglabel =" Initializing... "// The default value is initializing showlabel = true; // whether to display the label. The default value is true showpercentage = true; // whether to display the download percentage, the default value is true} override public function get backgroundimage (): object {return bcgimageclass; // background image} override public function get backgroundsize (): String {return "30% "; // background size. The default background size is full of the entire stage.} override public function get backgroundalpha (): number {return 0.5; // transparency of the control relative to the background} // override public function get backgroundcolor (): uint // {// return 0x00ff00; // background color, you can select only one of the background color or image. // you can select the rectangular area of the edge frame of the progress bar to make the progress bar look concave. Override protected function get barframerect (): roundedrectangle {return New roundedrectangle (14, 40,154, 10);} // The rectangular area of the progress bar override protected function get barrect (): roundedrectangle {return New roundedrectangle (14, 39,154, 12, 0);} // The rectangular area of the perimeter border (make the progress bar look in a panel) override protected function get borderrect (): roundedrectangle {return New roundedrectangle (0, 0,182, 60, 10);} // display format of label override protected function get labelformat (): textformat {var TF: textformat = new textformat (); TF. color = 0x333333; TF. font = "verdana"; TF. size = 12; return TF;} // display the label's rectangular area override protected function get labelrect (): rectangle {return New rectangle (14, 17,100, 18 );} // percentage text format override protected function get percentformat (): textformat {var TF: textformat = new textformat (); TF. align = "right"; TF. color = 0x000000; TF. font = "verdana"; TF. size = 12; return TF;} // display the percentage of the rectangular area override protected function get percentrect (): rectangle {return New rectangle (108, 4, 34, 16 );}}

The code listing 3-1 lists the attributes that can be modified and the methods that can be overwritten. The Code only modifies the values of some attributes, including the font of the prompt and the height of the progress bar.

Note that although backgroundimage, backgroundsize, backgroundalpha, and backgroundcolor are all public attributes, direct value assignment does not work, and the get method must be overwritten to work.

The attributes backgroundimage and backgroundcolor cannot be set at the same time. The default range of these two attributes is the stage size. You can overwrite the backgroundsize get method to control the size of the background image and background color (a ratio to the stage ). Background transparency (backgroundalpha) refers to the transparency of the progress bar relative to the background. It must also be modified by overwriting the get method.

Note: although the application has the same attributes as the preceding, the attributes of downloadprogressbar are displayed in the first frame, and the preceding attributes of the application control the display of the second frame.

Add the property preloader = "flex. sample. mydownprobar ", compile and run the application, you can see the modified progress bar effect 3-1, compared with the default progress bar (3-2), you can see the modified effect.

By using the preceding method, you can modify the progress bar border, background image, download prompt label text, initial prompt label text, and display percentage. However, the overall framework of the progress bar cannot be changed. If you want to create a progress bar of other forms, you need to use the other two methods.

2. Listen to process loading events and redraw

In order to be able to draw on your own, you must be able to handle events related to the loading process, including download process events, download completion events, initialization Start events, and initialization end events. These events are all sent by the preloader object. The downloadprogressbar class listens to these events when setting its own preloader attribute. Therefore, in order to draw a progress bar by yourself, you need to overwrite the Set Method of the preloader attribute of downloadprogressbar. The specific implementation is shown in code listing 3-2.

Code List 3-2 listen to process events

Import flash. display. graphics; import flash. display. sprite; import flash. events. *; import flash. text. textfield; import MX. containers. canvas; import MX. events. *; import MX. preloaders. downloadprogressbar; public class mydownprobar extends downloadprogressbar {private var progressbar: SPRITE; private var mylabel: textfield public function mydownprobar () {super (); mylabel = new textfield (); // create the text label mylabel for the display information. X = 200; mylabel. y = 200; addchild (mylabel);} // overwrites the downloadprogressbar method and listens for related events override public function set preloader (S: SPRITE): void {S. addeventlistener (progressevent. progress, inprogress); S. addeventlistener (event. complete, complete); S. addeventlistener (flexevent. init_complete, initcomplete); S. addeventlistener (flexevent. init_progress, initprogress);} // The Private function inprogress (E: progressevent): void {var barwidth: Number = E. bytesloaded/e. bytestotal * 100; var G: Graphics = This. graphics; // drawing area G. clear (); G. beginfill (0x88ff22); G. drawrect (180,220,100, 20); G. endfill (); G. beginfill (0xff9900); G. drawrect (180,220, barwidth, 20); G. endfill (); mylabel. TEXT = string (INT (barwidth) + "%";} private function complete (E: Event): void {mylabel. TEXT = "downloaded";} private function initcomplete (E: flexevent): void {mylabel. TEXT = "initialization completed" // After initialization, the complete event must be distributed. Otherwise, the second dispatchevent (new event (event. complete);} private function initprogress (E: flexevent): void {mylabel. TEXT = "initialize... "; // Method for loading progress bars }}

The implementation effect of the above Code is shown in 3-3.

The implementation effect is still relatively simple. After all, the code for drawing is very simple. To achieve a pleasing progress bar, more drawing code is required.

3. Implement the ipreloaderdisplay interface again

Inheriting from the sprite class and implementing the ipreloaderdisplay interface is equivalent to re-developing a downloadprogressbar. Due to space limitations, this book will not discuss implementation details in detail, but will only explain the implementation principles. First, let's take a look at the implementation method required by ipreloaderdisplay, as shown in code listing 3-3.

Code List 3-3 ipreloaderdisplay Interface

Public interface ipreloaderdisplay extends ieventdispatcher {function get backgroundalpha (): Number; function set backgroundalpha (value: Number): void; function get backgroundcolor (): uint; function set backgroundcolor (value: uint): void; function get backgroundimage (): object; function set backgroundimage (value: Object): void; function get backgroundsize (): string; function set backgroundsize (value: string): void; function get stageheight (): Number; // stage height

Function set stageheight (value: Number): void; function get stagewidth (): Number; // stage width

Function set stagewidth (value: Number): void; function set preloader (OBJ: SPRITE): void; function initialize (): void; // The initialization method after the progress bar is created, configure progress bar properties}

You can see that the property setting method in the Code is the property set in the first implementation method. For the implementation of the method, refer to the Code in code listing 3-1. The implementation of the Set Method of preloader in the interface is basically the same as that of the Set Method of preloader in the second implementation method. You can monitor download and initialization events, and implement your own preloader through plotting. Through the implementation interface, you can modify the display mode of the progress bar more freely.