How to create a Flash banner advert in DrawPlus X2

Transcription

1 How to create a Flash banner advert in DrawPlus X2 Open DrawPlus X2 and choose Start New: Keyframe Animation Select WebPlus 10 Flash Banner and click on Open The work area should look like the screenshot. The main tabs you will be using are labelled below ) Main work area 2) Storyboard tab 3) Colour / Transparency tabs 4) Easing / Actions tabs Serif Europe AO5 1

2 From the Drawing toolbar, select the Quick Rectangle tool and draw out a rectangle that almost fills the page. Click on the Node Tool and use the slider to round the corners of the rectangle Select a suitable colour to fill the rectangle. Use the Artistic Text tool to add some text to your banner. Choose a suitable font size and style. To add an image to your banner, go to the Insert menu and select Picture and then From File. Browse to the file you want to insert. Resize the image as appropriate and align it with your text. Serif Europe AO5 2

3 The Storyboard tab shows all the keyframes in your animation. Currently it will just show one frame. Click on Insert to add a second frame. This will be an identical copy of frame 1. Enter a value of 2 seconds into the Insert Keyframes window that appears. Keep all the other values the same then click on OK. DrawPlus will add a second keyframe to your Storyboard tab. Keyframe 2 will be how the banner looks at the end of the animation. We are now going to make changes to Keyframe 1 to set up how we want the animation to look when it begins. Click on Keyframe 1 to select it. We want the writing to move onto the banner from off-stage. Select the text and move it to the left so that it sits just outside the edge of the page. At the start of the animation it will not be visible. We also want the image to gradually fade in onto the banner. We are going to make it invisible at the start of the animation. Select the image. Go to the Transparency tab and click the Opacity 0% swatch to make the image fully transparent. On the Storyboard tab, click the triangular marker just to the right of the second keyframe to bring up the Marker dialog. Serif Europe AO5 3

4 In the Marker dialog tick the Stops Playhead box, name the marker end and click OK. This will make the animation stop once it has played once. If you want the animation to keep looping round and round then keep the box unticked. In Keyframe 1, hold down the Shift key and click on both the text and the image to select them together (or go to Edit and Select All) From the Easing tab, select All Envelopes from the drop down menu and click and drag the blue line to make a smooth curve as shown in the picture. This will change how the objects animate, moving faster at the start and then slowing down. If the Easing tab is not visible, go to the View menu and select Studio Tabs. You may need to toggle this off and then on to see it. This banner is going to have a hyperlink so that when the user clicks on the image of the strawberry it will navigate to another website. This is done by adding an Action to the image. First select the image. Then from the Actions tab choose Mouse Press and either double click or click on the Edit button. Serif Europe AO5 4

5 From the Mouse Press dialog window open the Browser Actions menu. Select Navigate Browser to URL. Click the arrow button to apply this action (it will move across to the right panel). Enter the full URL of the website you wish to link to and click OK. (The is included by default) You can preview your animation at any time by clicking on the Play icon and selecting Preview in Flash Player. To export your banner to use in a website, go to the File menu and select Export and then Export as SWF. A SWF file is the file format used for Adobe Flash animations. However, you also have other options to choose from such as Export as Video, which could also be used in other situations. Choose where to save your file, give it a suitable filename and click Save. Your banner is now ready to use on your website. Serif Europe AO5 5

6 The next part of this tutorial will show how you can use Serif WebPlus 10 to add your Flash banner to a website you have created. Start WebPlus 10 and open an existing site or create a new one from scratch. Open the Master A page template. Adding your banner here will place your banner on every page in your site that uses that template. From the Insert menu select Media and then choose Flash. Click the Browse button to find the SWF file you saved in step 24 then click OK. Click on the page to add your Flash banner. You can then resize and position it as required. Serif Europe AO5 6