Dreamweaver make a Web page slide effect

Source: Internet
Author: User
Tags insert dreamweaver
dreamweaver| Slides | Web page In this example, the player can be viewed at the following address: http://webart.myrice.com/sample/index.htm
As an amateur web-maker who doesn't know the code, he often admires the multimedia works that the professional program staff has produced in the browser. Alas, the helpless procedure that dongdong, the enzymatic astringent South studies, is not a day's work, needs the good logical thinking ability and enough discipline to be able to achieve. is not the program, will never be able to realize their own ideas and ideas? Not too! Now we're going to make a slide player in the Web page. When the user presses the "Play" button on the control disk, the picture will be continuously circulated as a slide. When you press "PAUSE", the picture in play stays in the current position. When the "Restart" key is pressed, the slide is played from the beginning. All of this is done with Dreamweaver3 embedded layer (Layer), Time Chain (Timeline) and behavioral (Behavior) technology, and all JavaScript code is automatically generated in Dreamweaver. This is not to encourage people not to touch the program code, on the contrary, if the reader has mastered some of the basics of programming technology, will play a very important role in the production of Web pages. In fact, this is now a professional web page production staff of a basic quality requirements.
Here is a step-by-step description of the player's production.

   Step One: the production and preparation of graphic elements.
Make a picture of the slide and put it in the Dreamweaver layer. We are going to implement alternating transformations of 7 images in each slide, so we need to make 7 different pictures. Note that the image is optimized for compression in Photoshop and is resized to the same size. Create a layer, insert the original picture, which is the first picture that the slide defaults to. Name the layer Layer_main and set the index value of the layer to 1.

   Step Two: Make the viewer appearance and four control buttons.
Use Photoshop to make a metal-effect player look. (The concrete effect depends on your liking, perhaps you can be inspired by Winamp's skin). For optimal optimization, output a transparent GIF image. In order to allow the mouse to move the back button some changes, you have to make 2 pictures per button (a total of 6), two buttons only need to have color differences. First build three layers, adjust the position, and insert three playback keys of their respective two tumbling pictures (rollover image) (insert-rollover image). By adjusting the index-z value of the layer, make sure that the player is in the layer above the layer_main layer, underneath the button's layer. The layout of the various layers as shown in the picture.

   Step Three: Create a slide play time chain.
Press the CTRL+F9 key to open the time Chain floating tool panel. Select the initial picture in the layer (Layer_main) where the slide is located (make sure the image is selected, not the layer), and drag the mouse to the time Chain floating tool panel to release the mouse at the beginning of the time chain. Set the frame rate to 5 fps and tick the loop box. Select one of the frames in the time chain, right-click the mouse, select Add keyframe (add keyframes), and select another slide picture to replace the original picture in the layer (Layer_main). Repeat this operation to add the remaining 5 pictures to the different keyframes of the time chain. Finally, appropriate adjustment of the distance between the key frames. and name the time chain as Timeline_main. Set up a time chain as shown in the figure.

   Step Four: button and other add behavior (Behavior).
Click the picture where the play button is selected, and in the Behavior Floating tool panel, select Timeline-play Timeline from the + (ADD) Action Drop-down list and select the time chain in the pop-up dialog box Timeline_main. Click OK. By default, an OnClick event is set for the toggle action. Click to select the picture where pause is located. In the Behavior Floating tool panel, select Timeline---Stop Timeline (stop playing the time chain) from the + (ADD) Action Drop-down list, and select the time chain Timeline_main in the pop-up dialog box. Click OK. By default, an OnClick event is set for the toggle action.
Click to select the picture where replay is located. In the Behavior Floating tool panel, select Timeline---Go to Timeline frame from the + (ADD) Action Drop-down list, and select the time chain Timeline_main in the pop-up dialog box, and enter 1 in the Frame text box. Click OK. By default, an OnClick event is set for the toggle action. And then add the next action. Select Timeline---Play Timeline from the + (ADD) Action Drop-down list and select the time chain Timeline_main in the pop-up dialog box. Click OK. By default, an OnClick event is set for the toggle action. Replay pictures Add good behavior as shown in the picture.

Further, in order to make the player more lively, you can add sound to the playback of the slides at the same time.
To put the player on the Internet, while the total picture capacity of more than 150K, you can give the page a "Loading (loading) layer", after downloading all the content, only to show. So as not to download the picture because the playback is not smooth feeling. About the "Loading" layer of production methods, in many places have introduced, here is no longer detailed.
With this example in hand, we can make an album. You can add a photo of your family or girlfriend to the time chain on the slide and add last (previous) and Next (next) buttons to make it easier for viewers to appreciate it. If you think the photo is too small to see the details, you can also add a zoom in (zoom) button and link to a new window page with a single enlarged picture. Finally put it on the Internet, I believe it will give your family or girlfriend to bring a surprise.

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.