Flash merchandise display

Abstract: With the development of computer network, terms such as virtual reality, computer simulation and three-dimensional commodity display have gradually entered people's field of vision. The development of 3D merchandise display started from 3D model based on modeling and rendering, but due to the limitation of program, there are some shortcomings in reducibility, convenience, accuracy and functionality. To this end, it is more advantageous to display Flash 3D products based on pictures. Taking the three-dimensional display of chairs as an example, this paper analyzes the method and platform structure of realizing three-dimensional commodity display by using Flash. Key words: online shopping, computer application, 3D display, Flash merchandise display, China Library classification number: TP39 1.4 1+0 Document identification number: A.

First of all, the questions raised

With the increasing popularity of the Internet, the consumption pattern of online shopping is increasingly favored by people, and the following problem is how to better show consumers the goods you want to sell online. Traditional methods include image display and three-dimensional display based on modeling and rendering. Picture display means that the photographer chooses the best observation angle to take pictures of the finished products and uses image editing software (such as

Photoshop) for post-processing, and then uploaded to the web page. Picture display can let consumers observe the goods from the best angle, but its disadvantage is that it can't be observed from multiple angles and displayed in three dimensions, which brings consumers a lack of realism. On the basis of modeling and rendering, 3D rendering is based on modeling, assigning materials and adding interactions through 3D software, and finally rendering 3D animation, which can well observe objects from a 3D perspective.

Each part is realistic enough, but the disadvantage is that it is not convenient to download a separate plug-in to play on the web page, and because of program restrictions, it can only support 1-2 times magnification, which will cause problems such as blurred picture and mosaic. Therefore, it is necessary to propose a method, which is realistic and easy to browse, and there will be no blurring and mosaic problems when zooming in, and it is also relatively simple to make. The three-dimensional display mode of Flash based on pictures can meet these requirements. This method is: based on the actual object, rotate the object 360 degrees, take 12 ~ 36 pictures with different accuracy, then digitize the pictures and add interactive functions to complete the display and production of three-dimensional goods.

In fact, three-dimensional commodity display technology has been widely used in online commodity promotion and sales, such as e-commerce, real estate sales, clothing, cultural relics protection, tourism and so on. How to choose a more economical, efficient and suitable display platform will become the key to the success or failure of business sales strategy. This paper is to study and discuss how to better realize commodity display.

Various 3D display platforms have their own characteristics, and Flash 3D display platforms based on pictures can generally be divided into image acquisition, image processing and post-processing.

Stage splicing and addition interaction. Therefore, taking a three-dimensional display of a chair as an example, this paper discusses the overall structure and design and development ideas of the display platform.

Second, the overall design of the platform

1 platform structure

Flash 3D merchandise display based on pictures can generally be divided into three steps: image acquisition, image processing, post-splicing and adding interaction. In the image acquisition step, a camera is used to acquire a photo of an object rotating around 360 degrees. The image processing step is responsible for image cutting.

[Paper Net] Cut and adjust basic image editing such as color and light. In the later stage, the interactive step is responsible for stitching images, adding scripts, completing interactive functions, reasonably arranging the display platform, and finally releasing the final results under the Flash platform. The acquisition step consists of camera and other camera instruments, the processing step is completed by the image editing software on the PC, and the later sewing and adding interactive steps are completed by the PC installed with Flash application. The structure of the platform is as follows:

2 the basic idea of platform design

The basic idea of platform design is: before making, collect the pictures and materials needed for making and edit the materials at the same time. After the production begins, use Flash software to guide the prepared video materials, make the required components, drag them into the scene, rationally lay out the scene, add Flash scripting language to make it interactive, test the films after all the works are edited and produced, and finally export them to the screening platform.

Third, the realization of the platform.

1 image acquisition steps

In the image acquisition step, a camera is used to acquire a photo of an object rotating around 360 degrees. For image acquisition, professional cameras are needed to shoot at different angles and with different accuracy. Multi-angle shooting 12 36 images, the equipment used can be SONY360-degree panorama camera, such as RPU-C352/25 1 model, and the collected images are transmitted to the computer through USB interface.

2 image processing steps

The image processing step is responsible for cutting the image and adjusting basic image editing, such as color and light. The computer first receives the image material sent by the camera, then uses the image editing software (such as Photoshop) on the computer to cut the material, adjust the color and light, and then outputs the image that meets the requirements. At the same time, some beautiful buttons and backgrounds are made by image editing software, which will be used as image materials for component editing under Flash platform in the future.

Three interactive steps of late splicing and adding

In the later stage, the interactive step is responsible for stitching images, adding scripts, completing interactive functions, reasonably arranging the display platform, and finally releasing the final results under the Flash platform. For this stage, it is mainly to make components under the Flash platform, rationally lay out the display platform, add scripts to frames or buttons, set whether the animation is played, click the mouse to change the viewing angle, zoom in and out, and improve the picture quality. You can also add background music, key sounds, special effects and other functions. The screenshot of the platform part is as follows:

Four. Concluding remarks

The needs of some "indoor" shoppers can be met through the Flash three-dimensional commodity display platform based on pictures. Because the image is taken according to the real object, the details, textures and colors of the object can be restored 100%. With Flash technology as the playing platform, it can be easily embedded in the web page, which is convenient for browsing and viewing. It has powerful function expansibility, and can customize various functions according to different exhibition requirements, such as audio explanation, hot spot connection, interface customization and so on. The platform discussed in this paper will provide consumers with comfortable browsing needs.

Chapter 2: Flash Operation Theme 1

1. Open "Traffic Publicity". Fla "in the" 3282 "folder with Flash, do the following and save!

= = = All the data and samples of this project are stored in the "3282" folder = = =

(1) Create graphic components named "Slogan 1" and "Slogan 2", and input the words "safe driving" and "have a nice trip" respectively;

(2) Create the layer "Text 1, Text2", put "Slogan 1" into the 1 frame of the "Text 1" layer, and put the component "Slogan 2" into 1 of the "Text2" layer.

(3) Create tween animation to make the character move to the middle first, and then move in the opposite direction. The whole animation effect is displayed in the example "Example. swf "；

(4) After saving the file, release the animation with the file name "Traffic Safety". Swf "to the folder" examinee folder 3282 ".

2. Open the animation file named "Text Deformation". Fla" in "328 1 "with flash.

= = = All materials and samples of this project are stored in the folder "328 1" = = =

(1) Rename "Layer 1" to "Text";

(2) Create three graphic elements named "Text 1, Text 2 and Text 3" respectively. The element contents are "eight, nine and ten" respectively, the font is italic _GB23 12, and the font size is 96;

(3) Put the three components into the 1 frame, 15 frame and 30th frame of the "text" layer in turn, and put them in the middle of the stage;

(3) Create a shape gradient animation with character gradient, and the whole animation effect is displayed as "sample". swf "；

(4) After saving the file, publish the animation to the examinee folder 328 1 with the file name "Text Deformation". Sovereign wealth fund ".

3. "The Snow Mountain has opened. The "3286" folder under "fla" uses Flash to do the following and save it! = = = All the data and samples of this project are stored in the "3286" folder = = =

Animation requirements:

(1) Rename "1 floor" to "Destroyer Xuefeng"; Import the symbol "Destroyer Snow Wind" from the library to the ski floor at frame 1.

, placed in the center of the stage, the same size as the stage, and inserted at 40 frames.

(2) The new layer is named "Man", and the component "Man" is imported into the 1 40th frame of the "Man" layer, and the image size is adjusted by using any deformation tool; And put it in the corresponding position (see example).

(5) Add a "motion guide layer", set the layer "track" as the guide layer, set the layer "person" as the guided layer, draw a guide line on the "track" layer, and create an animation of a person skiing along the guide line. The whole animation effect is displayed as an example. swf "；

(6) After saving the file, publish the animation to examinee folder 3286 with the file name "Ski.swf".

4. Open the subtitle. Fla "in the" 3288 "folder with Flash, do the following and save! = = = All the materials and sample questions in this question are stored in the "examinee folder 3288" folder = = =

(1) Set the document background color to "#000000" and rename the layer "Layer 1" to "Decoration";

(2) At the same time, select two horizontal lines in the "decoration" layer and convert them into graphic components, named as "wireframe";

(3) Create a new layer and name it "Text". Enter the word "Welcome" in frame 1, the word "Welcome to" in frame 5, and so on. Finally, enter the full text "Welcome to use the" in frame 20.

Software! ",and set the font of characters in all frames to Chinese letter dimension, with the color" #FFFFFF ",the size of 30 and the letter spacing of 2;

(4) Turn the 25th frame of the layer "decoration" into a key frame, and insert the component "pic" in the library into the 25th frame of the layer "decoration", and set the width as 130, the height as 120, and the coordinates as X:4 18 and y:/kloc-.

(5) Insert a frame in the 30th frame of two layers, and the whole animation effect will be displayed as sample column "sample column". swf "；

(6) After saving the file, release the animation file named "Subtitle". "examinee folder 3288" under swf.

5. Open "paopao.fla" in the "3284" folder with Flash, perform the following operations and save! = = = All the data and samples of this project are stored in the "3284" folder = = =

(1) Set the document size as 500px wide and 300px high, and the background color as "# 33cff";

(2) Insert the component "Orange" in the library into the center of the stage of the "orange" layer, set the width and height to 100, and create a fade-in animation with the length of 10 frame, and the Alpha value of 1 frame is 0%, with reference to 10 frame.

(3) Import the components "red and yellow" in the library into the 10 frame of the "red and yellow" layer, and place them in the center of the stage with the width and height set to100;

(4) Create an animation with reference to "Sample.swf", in which the component "red" gradually appears from the 10 frame to the 20th frame of the layer "red" and moves to the upper left corner. The Alpha value of 10 frame is 0%, and the Alpha value of 20 frames is 80%;

(5) create an animation with reference to "Sample.swf", in which the component "yellow" gradually appears from the frame 10 of the layer "yellow" to the 20th frame and moves to the lower left corner, with the Alpha value of the frame 10 being 0% and the Alpha value of the 20th frame being 80%;

(6) Insert a frame in the 30th frame of "orange, red and yellow" and input the text "Let the world have more colors!" Frame 20 in the "Text" layer. , the font is "Chinese Hangkai", the font size is 40, and the text color is "#00CC66". The whole animation effect is displayed in the example "Example. swf "；

(7) After saving the file, publish the animation to examinee folder 3284 with the file name "Bubble.swf".

6. Use flash software to do the following:

(1) Create a new animation file with a file size of 400×200 pixels and a frame rate of12 fps; ;

(2) Draw a borderless red circle (#FF0000) on the picture of 1 frame, and the size is self-determined;

(3) Draw a blue square (#0000FF) with no border in the 30th frame, and then make a deformation animation from circle to square, with the effect as shown in the legend "26 deformation. swf "；

(4) Save the file in the "examinee folder Flash26" folder with the file name "Deformation". Fla”；

(5) Publish the file as "Round to Square". Swf ",store it in the" examinee folder 26 "folder and close the application.

7. Open flash to make an animation of "skipping rope" and save it as "skipping rope". Fla”。 (See the example in the "Skipping Rope" folder)

1. Draw a horizontal "straight line" on the layer 1

2. Create keyframes at frames 10, 20, 30 and 40 respectively.

3. In frame 10, the straight line is transformed into an upward "arch ⌒", and in frame 30, the straight line is transformed into a downward arch.

4. Create a "shape" deformation animation. (Form a coherent skipping movement)

5. Save the animation file and test the movie.

8. For the animation of guiding line movement (the material is in the library), please refer to the example of the folder "Guiding Animation Butterfly".

Requirements: Turn on the "Boot Animation Butterfly". Fla" ① Size fla"① Flash document is 800×600 pixels; ② The frame rate is12 fps; ; (3) The wings of butterflies are constantly flapping during the flight, and at least two butterflies fly along different trajectories in the picture; ④ The total length of animation is 60 frames. Tip: Guide line animation. Draw two guide lines with different trajectories, that is, the butterfly element moves according to the guide line path.

9. Turn on the "ordinary animated plane" to make an airplane fly from near to far, and gradually disappear in the distance. (The information is in the library)

Requirements: ① Flash document size is 800×600 pixels; ② The frame rate is12 fps; ; (3) with "blue sky and white clouds. Jpg "in the library as the background; ④ When the airplane disappears, the transparency of the "airplane" component is 0. The total length of animation is 60 frames.

Tip: Ordinary animation. Move the plane and set the size and transparency of the plane at the end of the keyframe.

10. Make an animation in which the text color flashes from left to right. Tip: The text layer is used as a mask animation for the mask area. (See Example 2) Requirements: ① Flash document size is 550× 150 pixels; ② The frame rate is12 fps; ; ③ The background color is black; (4) Enter the text "If you are poor, you will be immune to it, and if you are up to it, you will help the world". The total animation length is 30 frames.

1 1. Open flash to make an animation of "Earth orbit" and use "Earth". Fla”。 (The information is in the library)

1. Add a layer named "Earth".

2. Add a guide layer and draw an oval guide line.

3. Set the layer where the earth is located as the guiding layer.

4. Set the "Earth" to move according to the guide line, with the start key frame of 1 and the end key frame of 30.

5. Publish the animation and save it.

12, lash software, do the following:

(1) Create a new animation file with a file size of 400×200 pixels and a frame rate of12 fps; ;

(2) Draw a red heart shape (#FF0000) on 1 frame, and the size is self-determined;

(3) In the 30th frame, the original picture is copied into three hearts, and then a deformation animation is made. The effect is like the legend "examinee folder Flash3 1 love dedication. swf "；

(4) The file is saved in the "examinee folder Flash3 1" folder, and the file name is "Love and Dedication". Fla”；

(5) Publish the file as "Love.swf", save it in the folder "examinee folder Flash3 1", and close the application.

13. Use flash software to do the following:

(1) Create a new animation file with a file size of 400×200 pixels and a frame rate of12 fps; ;

(2) Draw a borderless red circle (#FF0000) on the picture of 1 frame, and the size is self-determined;

(3) Draw a red heart shape on the 30th frame, and then make a deformation animation from circle to heart shape. The effect is shown in the example "examinee folder flash27hart.swf";

(4) Save the file in the "examinee folder Flash27" folder with the file name "Heart-shaped". Fla”；

(5) Publish the file as a heart. Swf ",store it in the folder of" examinee folder Flash27 ",and close the application.

14, lash software, do the following:

(1) Create a new animation file with the file size of 550×400 pixels, the frame rate of 12fps and the background color of black (# 000000);

(2) Draw a white full moon (#FFFFFF) in the lower left corner of 1 frame, and the size is self-determined;

(3) Create a new layer, draw a black circle with the same size, and then make an action animation in which the black circle gradually blocks the white circle and the moon changes from a circle to a semicircle. The total length of the animation is 30 frames, and the effect is like the example "examinee folder Flash223 moon deformation. Fla”；

(4) Save the file in the "examinee folder Flash223" folder with the file name "Moon Deformation". Fla”；

(5) Publish the document as "Moon". Swf ",store it in the examinee folder Flash223" folder, and close the application.

15, mask to make a simple text effect. (See example 1) Make a simple text effect with a mask.

1, click file, and create new.

2. Select the FLASH document, and then click OK.

3. Set the background to black, and you can set the frame rate to 24 frames per second. This is to make the animation smoother.

4. Create a new component named "my_mc".

5. Create three layers. The name of the layer is shown in the figure below.

6, and then at the bottom, insert the text content.

7. Copy this passage.

8. Then select the shadow layer. First frame.

9. Then right-click the stage. Select and paste to the current location.

10, and then select the currently pasted text content, and move it down to the right by a few pixels through the cursor keys of the keyboard.