Flash MX 2004 Behavioral feature re-experience

Source: Internet
Author: User
Tags border color
   Behavioral features Overview

The built-in ActionScript language is powerful enough to enable a lot of complex interactive effects, but if you're not a professional program person, you'll probably have a headache for a lot of commands and attributes, and FLASHMX 2004 also fully takes into account the confusion that may arise in the use of increasingly powerful and complex as, the "behavior" (behaviors) panel emerges. Speaking of "behavior", web designers are not unfamiliar, as early as a few years ago, it has appeared in the Dreamweaver 3.0 (hereinafter referred to as DW) interface, now is a DW MX indispensable components. Because of its convenience, intuitive, efficient, more and more users have been favored.

The behavior in FLASHMX 2004 is similar to that in DW, which allows you to enter no as command and use a few steps to get professional program code and results. Today we are going to try the powerful function of "behavior".

  Example of behavioral function creation

In the production of Flash, the introduction of external pictures, the drag of movie clips is a wide range of application functions. In the past, we have to understand the as principle, constantly debugging to create a perfect work, now, let us see how "behavior" is how to work.

  the production of album

1. We have to get some of the photos in the album before we start production, and we can use fireworks to make these pictures to ensure that each picture is of the same size and in JPG format in the same directory as the Flash file. I made 5 jpg images of the size 288x209px and named Image1~image5 respectively.

2. Open FLASHMX 2004, create a new file, set the background color to white, size to 550x400px.

3. Create a new symbol named photograph, use the Rectangle tool on the toolbar, black as the border color, light gray fill Draw a rectangle, in the property panel, set the rectangle size to 308x224px. Aligns this rectangle's top left corner setting with the center point (using the Alignment button "Ctrl+k").

4. Create a new component named photo, use the Rectangle tool on the toolbar, no border color, black fill to draw a rectangle, and set the rectangle size to 288x209px in the property panel. Aligns this rectangle's top left corner setting with the center point.

5. Press the F11 key to open the Library panel, double-click the photograph component, and start editing. Drag the photo component from the library to the photograph component and set the center alignment. The mouse selects the photo component and sets the instance name to photo in the properties panel.

6. Back to scene One, drag the photograph component from the library panel to the scene, select the component, and set the instance name to PHOTOGRAPH1 in the Properties panel.

7. Repeat the above operation, drag the photograph component to the scene, and set the instance name to Photograph2~photograph5 (Figure 1) respectively.

8. The following will begin the use of the behavior. First, you will import the picture image1~image5 into the component Photograph1~photograph5 separately. Select Keyframe 1, press "SHIFT+F3" to open the Behavior panel, click on the "+" number on the panel, select Movieclip→load Graphic in the pop-up menu, and the Import Picture Setup box appears.

9. In the Import Picture Settings box in the Drop-down box to find PHOTOGRAPH1, click on the front of the "+" number, appear photo components, select photo. In the text box above, enter the name of the picture you want to import image1.jpg (Figure 2). This FLASHMX 2004 automatically adds as the imported picture to the first frame. Use the same method to set the import of the other 4 pictures.

10. Select the first frame, open the Actions panel, we can see the flash automatically added as to this frame, we do not need to understand their syntax and attributes, is completely automated.

11. Now to make a picture of the drag and at the top of the display function. Select the PHOTOGRAPH1 component, open the Behavior panel, click the "+" number, and select Moveclip→start draging Movieclip in the pop-up menu.

12. Click the OK button after selecting the PHOTOGRAPH1 component in the pop-up Start Draging movieclip dialog box (Figure 3). So we set up the function of using the mouse to drag graphics.

13. Select the PHOTOGRAPH1 component again, open the Behavior panel, click the "+" number, select Moveclip→bring Forward in the pop-up menu, select the Forward component in the pop-up Bring Photograph1 dialog box and click OK button, Finished the previous settings for the picture.

14. Select PHOTOGRAPH1 components, open the Behavior panel, click the "+" number, select Moveclip→stop draging Movieclip in the pop-up menu, follow the steps above to set up to stop the drag function.

15. At this time we can see the set of three behaviors in the behavior panel, but in the event item you can see that the trigger form of three actions is on release (Mouse released) (Figure 4), and our requirements are not consistent.

Click on the next two on release in the event, open the Drop-down menu, and select on press (Figure 5).

16. The final effect as shown (Figure 6), 5 pictures overlap each other, you can use the mouse to select any picture, the selected picture will appear on the top, press the left mouse button can drag this picture to any location.

17. Use the same method to set the other four components, and finally complete the production of the entire album, in this album, we can arbitrarily drag a picture, you can adjust the location between the photos, the magic is, from the beginning to the end, we do not hand-written even one word of the as code.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.