Introduction
Remember when I first contact with Flash, should be the end of the FLASH6, the domestic flash web is still very few, the cow x is a handful, and this time the so-called Ox X, generally refers to the effect is very cool, the basic technology is not strong. In fact, this is inevitable, the early flash Web developers in China are mostly from flash animation makers or web designers to change. They are very keen on the title and transition effects, sacrificing the viewer's waiting time and eating the viewer's CPU. That's why a lot of people now talk about the Flash web as a source of great volume and inefficiency. Of course, if it is true to the personal site, this is understandable, personal site information is small, most of the site is a one-time browsing, the effect of cool glare can be memorable, especially in that era, but also can make people refreshing, this is ordinary HTML Web page can not reach. The most profound impression should be the green version of the Dragon Flash, the hacker Empire-like special effects and animations to conquer me thoroughly.
But then mm company to flash two consecutive upgrades are focused on as, as the built-in class rapid expansion, function rapid expansion, AS2.0 is the trend of the standard object-oriented language. This is when a large number of programmers are drawn in, especially those with a C or Java background. Unfortunately, they always like to use the programmer's thinking to judge the Flash web, they even use software development standards to the Flash Web development on the hard set. The result is inevitable, they are disappointed, but at this time most people are not from their own reasons, they are very arbitrary on the responsibility to the Flash: "Flash web structure is confusing, based on the timeline of as writing strange, flash Web is not suitable for large-scale commercial application development!" ”。 In this way the future of the Flash Web was sentenced to death.
As a result of the flash web in China's special development process, resulting in a very interesting phenomenon: many previous animation very cattle predecessors, have to professional animation production, and for the Flash animation industrialization and commercialization of brave exploration, some have made brilliant achievements And after FLASH7 came in the program cattle, directly engaged in flash game development and Flash RIA application development, they are more accustomed to event-based programming and object-oriented development model, the timeline of their significance is no longer important. In this way, flash web development has become a middle suspended belt, but also the most scarce area of talent. A lot of people who are currently engaged in Flash web development should be from the HTML Web page production staff to learn some flash after the transition over, they are not animation master also not program master, more is a master of Web design. However, these Design Master and always love to take Flash and PS ratio, the results of Flash web development has not been good reputation. The Flash web now has to be relegated to the bottom of the flash industry with a group of half-monk professionals-alas!
Fortunately there are volcanoes and a small number of idealists like volcanoes, not the money as a whole life pursuit. At least I am still naïve to insist: I want to live for my hobby, and then use my hobby to make a little food to eat money on it, anyway, I will definitely not in the short term to make more money and change their goals! I learned from the beginning of the flash is to do the site for the purpose, for more than two years, everything I've learned is based on flash web development and apps, and I've tried almost every common flash web structure, and I'm always thinking about how to save the flash advantage and can develop a practical application value of the efficient business works, and eventually the Flash Web development mode, rapid.
So where is the advantage of the Flash Web? For the display of the site, of course, the effect of flash cool, this has been the consensus of most people. But for a large number of information, the need to update the Flash Web, its biggest advantage can no longer be the effect, because the efficiency of the flash can not be flattering, a large number of effects will affect the query efficiency of information, and now network bandwidth is not optimistic, a large number of animation will result in SWF volume expansion Affect browsing speed. So what is the advantage of large and medium-sized information class Flash web? In the volcano's view, the biggest advantage is only two points, one is flexible interface layout, the second is the data without refreshing update. Remember the pain we used to pull tables in DW? will also be for the site layout neat write a bunch of CSS and js it? Do you need to open a new page each time you update the data? The two great advantages of the Flash Web have made these historical pains the past. Moreover, these two points, if handled properly, are enough to bring a new user experience to the average viewer.
My hobby is flash web development, and this is a talent suspended zone, just for me this program and design both sides are not dependent on the survival of people, and, it seems that the flash web development for me is really destiny, I still have any reason not to continue to go on! But after all I have been in the past two years in the study and exploration stage, is not a real theoretical research stage, two years is too short! Many of my ideas and theories are immature, even naïve. I now take out and share with you, do not seek to convince who or what, only to give Up-and some inspiration, but also a good summary of their own. Here is a superficial talk about my current flash web, especially the flash web structure of the understanding of it.
Flash Web Architecture Overview
Open 68design This kind of cool station collection station, we are not difficult to find today's flash web really blossom, hundred schools of contention. The various, bizarre flash web is overwhelmed and confusing. Free and flexible is the vitality of the flash web, but it is also one of the major bottlenecks in the commercialization of the Flash web. The most important thing in business is efficiency, and without rules there is no efficiency. So the flash web is not really a little bit of law? Not too! Looking at all of the Flash Web (flash RIA applications, such as flash graffiti boards, maps, etc.), no matter how well they are and how cool the effects are, they cannot escape the following four-tier structure:
These concepts are actually not novel, see these my own creation nouns, some experienced developers are sure to be able to guess immediately Ishilai. But since these concepts were not previously authoritative, at least I have not seen, in order to later discuss the convenience, I am here today officially shameless to give this structure a name: Volcanic flashweb four-storey structure, or volcanic mbdd structure, hereinafter referred to as MBDD-style. If my ignorance leads to similar references to some official or predecessor, I am here to say: if there is a familiar coincidence:
All of my discussions below will be held tightly around these four-tier structures, because in my opinion, the soul of the Flash Web is its structure, the technical content of a flash web is not to see some special effects and glare, not to look at what is new in this web, the application of cow x technology, The key is to see it through what means to effectively unify the various elements! If you've ever tried to make the flash web bigger, I'm sure your experience in this area will be no less than the volcano.
The last thing I want to say in advance is that the MBDD is an overview of all the Flash Web, and many of the flash web may be missing some of these layers depending on its functionality, and I'll explain it carefully below.
As for the other aspects of the Flash Web, I skipped over, after all, my article is a summary of the article, not a tutorial. Flash Web is not my article can write comprehensive.
On the Transition animation layer
The early flash Web mostly contains a rich transition animation, the typical is: Dragon Flash and Brahma. The latest version of the Dragon Flash guest also adds a gorgeous animation effect to the transition of each sub column. Overall, the animation layer can be divided into three kinds:
Let's talk about opening animations first. Opening animation time is generally relatively long, reflected in the timeline is a good long and complex frame structure. The first frame is generally the loading screen, the last frame is generally the main frame of the website. Here is a question of how to arrange frames. Remember to see someone posted on the forum said Flash Web best not to divide the scene, in fact, he is one-sided, for the Flash web without transition animation, can do so, for a large number of transition animation Flash Web is a different story. If you do not divide the scene, the code and animation will inevitably be mixed together. In general, the control of the site's main function of the code is in the frame after the transition animation, in the subsequent code writing process, you may have to pull the time axis to hundreds of or even thousands of frames, which is also very troublesome. The volcano's suggestion is that the transition animation be done in a scene, then copy the frame frame of the last frame of the transition animation to the second scene, the main feature code will also be focused on this scene, so that the animation and code are effectively separated, the time to write code when the axis looks more comfortable. There is also a more common practice is to add a skip button to the transition animation, if the viewer clicks on this button, will immediately loadmovienum (main.swf,0) into a new main.swf, and this main.swf the main frame of the site. This approach is similar to the previous one, except that it turns the animation and the main frame from two scenes into two SWF, and allows the viewer to choose whether to watch the transition animation for greater flexibility.
Again to talk about the column transition animation. Column transition animation mainly refers to when you click a navigation button to open a new section of the animation displayed, also take the latest version of Dragon City Flash guest example, it opens a new sub column will be the first column into a lot of small squares, and then fly to the left of the mysterious space, and then from the mysterious space issued a mysterious light, And in the light of the shower appeared in the new column loading screen. I have not cracked the latest version of the Dragon Flash, I do not know how he arranged the animation, but I have their own ideas. If this transition animation is integrated into the main frame, the transition animation is best not to write code, but in the home scene by detecting the current frame of the transition animation and the total number of frames to determine when to load the sub-column SWF; if each sub-column transition animation effect is different, it is best to each sub-column SWF processing into a separate site, Its structure should follow the rules mentioned in "Opening animation."
Dot animation Nothing to say, you think of it as a beautification of the HTML page GIF animation is good, of course, it is more vivid than GIF animation, use more flexible, but also can have interactivity.
In short, my main idea is to try to separate the animation and the code so that I can easily find and modify the code later. At the same time ensure that the site structure neat.
On the background layer
Background layer, as the name suggests is the background of the site, it seems easy to understand also very simple, in fact it contains a lot of knowledge and skills, if not handled properly, will directly affect the Flash Web user experience.
Here I divide the background layer into the following three modes:
Flash mode : The so-called flash mode, is directly in Flash to complete the site of the main frame of the drawing, and the use of flash to complete the framework of the modified content of the fill. This model is more suitable for the simple interface, single color, efficient and practical flash web. It fully utilizes the advantage of small size of simple vector graphics, the same picture, its volume will be much smaller than the bitmap. So if the site is properly handled, it can be much smaller than the normal HTML pages of the same style. It is also easy to modify and combine with other layers because it is drawn directly in Flash.
PS Mode : This pattern is analogous to traditional Web page production. Traditional Web pages are first painted with PS interface, and then slices exported as a Web page, and then edited in the DW. Flash Web Development can use this process, using PS powerful bitmap processing function to make up for the lack of flash graphics. But at the time of Chettu, it and HTML Web page Chettu ideas, in the flash web often to the animation factors and the occlusion relationship between the elements, so I generally cut each column into a JPG bitmap, involving animation and hierarchical relations of elements are independently exported as PNG transparent image. In this way, although convenient in the late production of Flash, but caused the site volume will be a certain degree of increase. In order to optimize the download and user experience, we can use the characteristics of flash streaming media, small or independent of the relatively good columns in the beginning of the frame first displayed, closely related to the main function of the column in the middle, the larger size of the independent also better column put the final display. Of course, do not forget to use a loading to remind viewers of the loading state of the column, so that they do not lose the confidence to continue to see. This model is generally suitable for the independence of the site columns better, the site is rich in color and contains a lot of animation effect, component level complex site. In addition, when I write this article, from the black plume where the message, the latest version of the Flash can really support PSD, but also to retain the original layer, coupled with faster speed, PS mode in the future is likely to be a big way.
Blending mode : Blending mode is the comprehensive use of Photoshop and flash to complement each other. First design the site with PS background map, and the content display part of the blank, just like the design of HTML pages. It is then exported directly to JPG without a tangent diagram, and is imported into flash. Then in this big background picture on a new layer, with the production of animation commonly used pen hook edge coloring technology to paint the site main frame side, this involves the "Data display layer" that I want to talk about later, the data display layer mainly consists of a neat vector color block with the background hue, of course, like a volcano like lazy people can also appropriately add bitmaps, However, the data display layer volume is best controlled within 30K. After the data display layer is molded, be sure to put the background bitmap on the frame after the data display layer. Now we should almost guess the advantages of this model is there!? Yes, we can take advantage of the characteristics of flash streaming media, do not have to wait until the entire SWF has been downloaded after the site, Flash Web loading era of the past! The great flow of time is coming! We can fully display the data display layer, so that viewers to get the information they want to the fastest speed, while quietly downloading the background layer, because our data display layer and background layer of color and layout are similar, even perfect match, So the background layer download complete and display the moment will not give viewers too much jump feeling. Of course, this has increased the amount of work, require the designer's PS and Flash can not be weak. The so-called fish and Bear's paw can not have both, we must according to the specific project to choose, see if it is really necessary to adopt this model. Volcano Personal Portal V3 main station, because the background picture size is too large, I used this mode, according to most people, the user experience is very good:
In short, the three models can be said to have advantages and disadvantages, how to choose or to be based on specific project decisions, of course, team and individual capacity is also an important factor. In general, programmers are likely to prefer flash mode; traditional web designers tend to prefer PS mode; the guys who know everything. After reading the volcano this article, it is estimated that they will start to try mixed mode.
Talking about the data display layer
The data display layer is already mentioned in front of the background layer. Because the volcano basically does not use the component, therefore to the volcano, the data display layer mainly refers to the TextField, or uses the MC simple packing TextField. They are the main part of the website information, and are generally dynamic call external information. Of course, because I used the MC packaging, they can also be used as a button, the more common is the title list, such as my main station on the three sub-stations of the latest release list.
As I said earlier, the data display layer to be as thin as possible, it is a flash web browsing efficiency of the key, not suitable for a large number of effects, especially bitmap effects. And its structure should be as clear and neat as possible, easy to code control. For the flash mode of the site can be considered directly to the TextField on the _root, and for PS mode and mixed mode, it is best to use MC to TextField packaging, to ensure the independence of the site's columns.
Talking about the data layer
The data layer can be described as the central nervous system of the whole flash Web, which is responsible for all the data display and exchange of the Flash Web, as well as the realization of the function and even the control of animation. Before I start to explain the data tier, I'd like to review my own history of code writing. In the beginning, I usually write the code directly on the component, the limitations of this writing is relatively large, many functions can not be achieved; later I began to try to write on the timeline, but because of the limited capacity at that time, some of the code is still to be written on the component, so that the code confusion, a long time, I can not remember where the code is written As ability slightly, I will no longer write the code on the component, but all written in the timeline, usually each column, or each MC contains its own code, the advantage is that the code distribution is more clear, and code independence is better. But even if it does, it's not ideal, because if the site MC nested results are very complex, each MC code is contained alone, then the code may be written in a very deep MC, and MC Many words, the code will also be distributed very scattered, so it is not convenient to the centralized management of the Code, It is not easy to grasp the relationship between the website data in general; So what do I do now? Since I'm not only as well as I've been playing, and can be from the macro-site structure to compare the grasp of the position, so I have the ability to according to the characteristics and features of the site before the official commencement of the site into a number of functional modules, and then use my own three frame of the MC to complete the implementation of each module. Open My site's source files, you will find that, in addition to the main timeline and the main timeline of a series of "three frame" structure of the empty MC, other places very few code, can be said that the core code has been completely separated from the site. In the main time axis, generally speaking, the first layer is as layer, the second layer of optional label layer, the third layer is the data layer, all of the "three-frame" MC are placed in this layer, the bottom of those layers is the site's main frame. Perhaps you have to ask, you always say "three frame", in the end what is "three frame" ah? Good question, that's the point I'm going to talk about here.
"Data Layer MC Three frame" is I for the convenience of data management and created an effective data organization framework, it cleverly utilizes the timeline, has a clear structure, but also has universality. Literally, we can guess, it is a movie clip with three blank keyframes, the names of these three frames are "Chushi", "Shuaxin", "Gongneng" in the order of precedence on the timeline.
"Chushi" frame: This frame is responsible for the initialization of the system, mainly divided into two parts, the first part is generally a large number of variables. These variables are divided into three kinds, the first is all the MC to operate the object and other components interface; The second is some of the system's initial variables, such as the message will be responsible for the page number variable initially 1, you can let the message initially to display the first page; finally there is a special Boolean variable, "Yijiazai", We put its value to false, indicating that the external data in this MC has not been loaded at this time, and once the data loading in this MC control is successful, we will immediately change the value to true. The advantage of this is that you can determine whether the data is loaded for the first time based on this value, and then make different settings and responses. The second part is the registration refresh function, experienced dynamic Flash Web developers should know, Flash data refresh is the focus, this is the flash web more than a regular web page one of the biggest advantages. Here we need to register two functions that are responsible for data refresh:
I'll explain why.
"Shuaxin" frame: This frame is a blank keyframe, nothing, and its meaning will also be explained below:
"Gongneng" frame: This frame is mainly responsible for the implementation of various functions and the presentation of data, in order to facilitate the control of the entire site and the "three-frame MC" Between the mutual control, I suggest that the more important functions are written as functions. At the end of the "Gongneng" frame code, be sure to add a sentence gotoAndStop ("Shuaxin"). One of the key plays in this frame is error analysis and processing, but in order to close down the center of the article, there is no more to say.
In this way, we have set up a simple and effective data control mechanism. First in _root all of the "three-frame MC" will stop to the first frame, that is, "Chushi" frame, and then set up a set of data loading mechanism, by controlling the playback of three-frame MC to control the data loading sequence. Once the data is loaded, we can control the three-frame MC anywhere by controlling the specific part of the MC-owned website. For example, a three-frame MC named "LIEBIAO_MC" is responsible for this part of the site's title list, so we can control the list of articles by following extremely simple code:
If we want to get the initial state of the article list, we just need to call: _level0.liebiao_mc.chushi ();
If we want to get a specific state of the list of articles, we only need to assign a value to the variable responsible for this state, and then call: _level0.liebiao_mc.shuaxin ();
If we only need to invoke one of the features in the list of articles, we just need to call: _LEVEL0.LIEBIAO_MC. Specific function function name ();
Because we have error analysis in "Gongneng" frame, transition animation and other such repetitive content, so when the call shuaxin function, these content will automatically trigger, very simple and easy to use.
Data-tier MC three frame is simply introduced here, the specific details are very rich, here is just a good point, the details are omitted.
Review
Through the above simple introduction, I believe that everyone on the MBDD-style of each layer should have a general understanding. As I said earlier, MBDD is a generalization of all flash web, not every flash web must have four-tier structure, many flash web because of its different function, it is likely that some layers. Like my personal portal V3, there is no transition animation layer, and this cool station, it can be said that there is no transition animation layer and no background layer; and some flash web is a pure display of goods, such as the current more popular real estate sites, they tend to directly through the animation to display their products, The data layer and the data display layer are relatively weak.
What is the true meaning of the MBDD-style in front of so many words? The following two points are mainly:
A simple thought about flash Web development team collaboration: Volcano is still a student, you can say that there is no team development experience, here to talk about teamwork is a typical armchair, but I am in the development of their own website, is strictly to their own role, but also a few of the meaning of the team, a lot of ideas here do not spit unpleasant. For example, when I first started doing architecture analysis, in addition to the simple writing document, is absolutely not going to work, at this time I play an architect's role, while in the PS drawing interface, I will try not to think backstage, at this time I am playing a role as a PS designer, and in the background, I'm just mechanical. Complete the data display and write format according to the requirements of the architecture, in general, the number is fixed format XML, at this time I do not think about what flash and PS, completely playing a background engineer's role, and finally in the synthesis of flash, I also play flash designer and as engineer. Especially in the development of my own personal portal V3, I was "self-discipline", at each stage of the development process, as far as possible to let themselves out of the "nosy", see the final can be expected to complete the task, the results are more satisfactory. My idea is: in Mbdd, a flash Web development team should have at least the following five people: architects, PS designers, flash dynamic designers, as engineers, background engineers. The architect is responsible for the entire site, he has to understand every aspect of Flash web development, rich development experience so that when a project can be a quick decision to adopt that development model, and the project to support a number of functional modules, and then for PS designers to provide a content framework sketch, and specifies the background data format. And in the whole process of development, he will be responsible for other people's adjustment and communication. So if you say the architect is the soul of the team, it's not too important. PS designers need to design the site according to the framework of the Web interface, he would better understand a little flash basic operations, know that those parts are in flash can be easily drawn directly, and those parts must be completed by PS. Of course, if he can also take the animation factor into account, and in the PS part of the completion of the effect diagram, it is better. Flash dynamic designers are mainly to complete the Flash animation and special effects, he better know a little as, so that when he is doing animation, will be programmed to take into account, so that his animation as far as possible to control the program, the effect is not too much to eat the CPU, if his as ability strong enough, We also want him to be the architect division of the module in Flash to complete the site's main interface layout, of course, the architect is best to assist from the side. As engineers mainly according to the requirements of the architect to complete a specific function module, while the data exchange between the front and back, he had better understand a little background knowledge, at least to know how flash through the background program to write data, and his XML parsing must be proficient. Finally, afterEngineer, he only needs to write the data in a particular format according to the architect's requirements, of course, if he learns a little as, it will be more helpful for him to understand why he wants to do so, in addition to his existence there is even greater significance, that is, complete the site data structure analysis and responsible for database management.
Anyway, I think in addition to the SEO process is not perfect now, if we understand the structure of the Flash Web, set up a perfect development model, plus the usual accumulation of code base, component library, special effects library, database, etc., Flash web development, rapid, efficient will no longer just a dream, The flash Web can fully achieve the development efficiency of the HTML website, and has the better visual and interactive effect than the HTML website.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
