Create website homepage with Photoshop (5): Add Flash video

Photoshop production website homepage (5): Add Flash video Source: xuexin.com Xue Xin
Next we have to add Flash video content to the web page. Today, Photoshop and Flash have become one, so the compatibility has been greatly improved. Flash can already directly import Photoshop PSD layered files, which is undoubtedly good news for designers who have long been troubled by the compatibility of different manufacturers.

1. Save a version of the PSD source file of the Photoshop webpage we created, then crop out the area of the original Flash placeholder image, and delete the redundant layers, as shown in Figure 1- As shown in 5-1.

Figure 1- 5-1
2. Directly import the new PSD file after saving. We can see in the import dialog box that not only can we determine which layers need to be imported, but we can also make the text editable and set the Flash stage. Regarding the canvas size of this PSD in Photoshop, etc., there are many options worth exploring, as shown in Figure 1-5-2.

Figure 1-5-2

3. This is the Photoshop layered file opened in Flash. You can see that the original layers directly become the corresponding Flash files. Layers, we can create animations directly based on these layers, isn’t it very convenient? As shown in Figure 1-5-3.

Figure 1-5-3

4. The next step is to import the video. Flash provides special video import commands and optimizes the entire video import process, as shown in Figure 1-5-4 Shown is the basic process of video import. Usually it is a “fool-like operation”. After selecting the file, just click Next, which are to select the video, deploy, encode and select the skin. Since this is not the focus in this tutorial, I will not go into details.

Figure 1-5-4

5. The selected player skin, that is, the appearance of the video player, can be changed in the component inspector, including color and appearance, etc., as shown in the figure As shown in 1-5-5.

Figure 1-5-5

6. The playback of video files and Flash does not affect each other and can be integrated together naturally and seamlessly. To illustrate this point, a very simple animation is made for the four words “Stone Bridge Silhouette”, as shown in Figure 1-5-6.

Figure 1-5-6

7. Open Dreamweaver and add a table, set the number of table rows to “2”, the number of columns to “2”, and the table width to a percentage, which means you can Self-stretching. The border thickness, cell margin and cell spacing are all “0”, as shown in Figure 1-5-7.

Figure 1-5-7

8. Insert text and Flash into the two rows of the table just now. You can see that the current web page is still a bit messy. The pictures are stretched but the text is not. Styling, the position of the video is also wrong, as shown in Figure 1-5-8, so we also need to set it in the next lecture.