Multimedia interaction application BASICS (9)

 

Q: How can I scale an externally loaded image?

 

Step 1: Load External images. Second, use its scalex and scaley attributes to scale their proportions, and third, scale proportionally by clicking an event.

1. Package
2. {
3. Import flash. display. movieclip;
4. Import flash. Events .*;
5. Import flash. display. loader;
6. Import flash.net. URLRequest;
7. Import flash. display. Bitmap;
8. Public class example extends movieclip
9. {
10. Public Function example ()
11. {
12. Init ();
14. }
15. Private function Init (): void
16. {
17. VaR _ Loader: loader = new loader ();
18. _ Loader. Load (New URLRequest ("1.jpg "));
19. _ Loader. contentloaderinfo. addeventlistener (event. Complete, loadhander );
20. _ Loader. contentloaderinfo. addeventlistener (ioerrorevent. io_error, iohander );
22. }
23. Private function loadhander (E: Event): void
24. {
25. Trace ("loaded successfully ");
26. Trace(e.tar get. content );
27. VaR image: bitmap = E. currenttarget. content as bitmap;
28. // Var bitmap: bitmapdata = image. bitmapdata;
29. VaR MC: movieclip = new movieclip ();
30. MC. addchild (image );
31. Addchild (MC );
32. MC. scalex = 0.2; // set the percentage after loading to 0.2.
33. MC. scaley = 0.2; // set the proportion of the uploaded image to 0.2.
34. MC. Rotation =-30; // convert its angle to-30 degrees.
35. MC. x = stage. stagewidth/2-100; // set the X coordinate
36. MC. Y = stage. stageheight/2-100; // set Y coordinates
37. MC. addeventlistener (mouseevent. Click, onclick );
39. }
40. Private function iohander (E: ioerrorevent): void
41. {
43. Trace ("loading error ");
45. }
46. Private function onclick (E: mouseevent): void
47. {
49. Trace ("You clicked on me ");
50. E. currenttarget. scalex = 1; // restore the original proportion
51. E. currenttarget. scaley = 1;
52. }
53. }
54. }

Add a proportional scaling code based on the Code of multimedia application base 8. Such an image can be scaled, but the effect is not monotonous, not dynamic. To achieve its dynamic effect, we add a buffer to make the interaction more exciting.

 

Output result:

 

 

Question 2: How to buffer images?

 

Step 1: Use the buffer function to import two packages

Import Fl. transitions. Tween;
Import Fl. transitions. Easing .*;

 

Official Document reference:

The tween class allows you to move, resize, and fade in and out a video clip by specifying the attributes of the target video clip to play an animated effect in several frames or seconds.

 

The tween class also allows you to specify various easing methods. "Easing" is the progressive acceleration and progressive deceleration effect during the animation operation, which helps make the animation more realistic. The fl. transitions. Easing package provides many easing methods (including the equations for acceleration and deceleration) that change the easing animation accordingly.

 

The fl. transitions. Easing package contains classes that can be used with the fl. transitions class to create easing effects. "Easing" refers to the gradual acceleration or deceleration in the animation process, which will make your animation look more realistic. The classes in this package support multiple easing effects to enhance the animation effect.

1. Package
2. {
3. Import flash. display. movieclip;
4. Import flash. Events .*;
5. Import flash. display. loader;
6. Import flash.net. URLRequest;
7. Import flash. display. Bitmap;
8. Import Fl. transitions. Tween;
9. Import Fl. transitions. Easing .*;
10. Public class example extends movieclip
11. {
12. Private var key: Boolean = true;
13. Public Function example ()
14. {
15. Init ();
17. }
18. Private function Init (): void
19. {
20. VaR _ Loader: loader = new loader ();
21. _ Loader. Load (New URLRequest ("1.jpg "));
22. _ Loader. contentloaderinfo. addeventlistener (event. Complete, loadhander );
23. _ Loader. contentloaderinfo. addeventlistener (ioerrorevent. io_error, iohander );
24. }
25. Private function loadhander (E: Event): void
26. {
27. Trace ("loaded successfully ");
28. Trace(e.tar get. content );
29. VaR image: bitmap = E. currenttarget. content as bitmap;
30. // Var bitmap: bitmapdata = image. bitmapdata;
31. VaR MC: movieclip = new movieclip ();
32. MC. addchild (image );
33. Addchild (MC );
34. MC. scalex = 0.2;
35. MC. Scaling = 0.2;
36. MC. Rotation =-30;
37. MC. x = stage. stagewidth/2-100;
38. MC. Y = stage. stageheight/2-100;
39. MC. addeventlistener (mouseevent. Click, onclick );
41. }
42. Private function iohander (E: ioerrorevent): void
43. {
45. Trace ("loading error ");
47. }
48. Private function onclick (E: mouseevent): void
49. {
51. Trace ("You clicked on me ");
52. If (key)
53. {
54. VaR mytween: tween = new tween (E. currenttarget, "scalex", elastic. easeout, 0.2, 1, 3, true );
55. VaR mytween2: tween = new tween (E. currenttarget, "scaley", elastic. easeout, 0.2, 1, 3, true );
56. Key = false;
57. } Else
58. {
59. VaR mytween3: tween = new tween (E. currenttarget, "scalex", elastic. easeout, 1, 0.2, 3, true );
60. VaR mytween4: tween = new tween (E. currenttarget, "scaley", elastic. easeout, 1, 0.2, 3, true );
61. Key = true;
62. }
63. }
64. }
65. }

The tween class is used to achieve the image buffering effect. After you set the initial scaling ratio to 0.2 clicks, the ratio can be restored to achieve some effect.

You can also modify elastic. easeout to make it more effective. In this way, we can use it to achieve the effect.

Output result: