Major Confusion :: Sharing the FUN with Serif software page footer: Kaptain-Chaos Designs ©2008 Major Confusion :: Sharing the FUN with Serif software Page Header : Kaptain-Chaos Designs ©2008 Major Confusion navbar Links: Kaptain-Chaos Designs ©2008 Major Confusion navbar Contact me: Kaptain-Chaos Designs ©2008 Major Confusion navbar: Kaptain-Chaos Designs ©2008 Major Confusion navbar: Kaptain-Chaos Designs ©2008 Major Confusion navbar Gallery: Kaptain-Chaos Designs ©2008 Major Confusion navbar Tutorials: Kaptain-Chaos Designs ©2008 Major Confusion navbar Home: Kaptain-Chaos Designs ©2008
Kaptain-Chaos Designs

Home

Tutorials

Gallery

Links

Contact

Site map

Privacy Policy

Terms & Conditions

page border - right: Kaptain-Chaos Designs ©2008 page border - left: Kaptain-Chaos Designs ©2008

Flash navigation buttons

navbar right:  Kaptain-Chaos Designs ©2008Back to Tutorials home page button: Kaptain-Chaos Designs ©2008navbar Tutorials: Kaptain-Chaos Designs ©2008

For this Serif DrawPlus tutorial we’ll explore some of Serif DrawPlus Flash animation capabilities by creating a pulsing roll over swf ‘Flash’ button for use in a website. We’ll keep the design fairly simple to help us understand just how easily these can be created. Once the basic idea is grasped, there are endless possibilities that open to us.


I will be adding this button to my tutorial example site in a WebPlus tutorial set around using i-frames. As soon as it is complete, the link will also be posted on this page so that it can be seen in action as a fully functioning button.

Okay, let’s get started, everything we need for this exercise is at our disposal in Serif DrawPlus X2 or Serif DrawPlus X3 – so, let’s fire DrawPlus up.


1) From the wizard screen choose New Keyframe animation – any size, it doesn’t matter because we will be setting our own dimensions. With the empty page before us either select Page setup from the context toolbar just above the pasteboard or right click on the pasteboard and choose Page Setup. Enter 120 pixels for the width and 30 pixels for the height, 30 fps and 100% for the quality. The 100% quality is important at this stage as we will be exporting the resulting file as a swf and re-importing it later. I also select Flash version 8 as I prefer to use the most current version of the Flash program possible.


2) Zoom into the page.

back to DrawPlus Tutorials page button: Kaptain-Chaos Designs ©2008 navbar right: Kaptain-Chaos Designs ©2008 top of page button: Kaptain-Chaos Designs ©2008

This is the style of navigation button we will be producing in this tutorial. It is only 4kb.

Flash Button Screen-shot 1 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 1 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 1 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 1 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 1 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 1 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 1 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 1 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 1 :: Kaptain-Chaos Designs ©2009

Introduction and example

Stage One

3) Rename Layer 1 as ‘camera’ and create a new layer called ‘button’. This is the layer we will be concentrating on for now. It’s just a preference of mine to keep the camera layer separate from the objects themselves, it is not necessary, but I find it helps avoid confusion later when working with large animations and is good practice generally.


4) Save the work so far giving it the name ‘pulse’ in a folder of your choosing. As this is for a website I save it in a folder called ‘rough work’ within the main folder I use for the site because it keeps things related to the website together in one place.

With the page set up, it’s time to turn our attention to the layers tab.

Flash Button Screen-shot 2 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 2 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 2 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 2 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 2 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 2 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 2 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 2 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 2 :: Kaptain-Chaos Designs ©2009

5) Back on the ‘button’ layer create a new Quick Shape rectangle to fill the page. On the transform tab anchor the shape at the top left setting X and Y to 0, W to 120 pixels and H to 30 pixels.


6) Double click inside the ‘object1’ title on the layers tab to rename this shape to ‘normal’; this prepares our shape for the second part of the exercise.


7) On the colour tab, make sure that the line is transparent and, setting the colour tab to the HSL colour space, make the fill H 180, S 15, L 42. This colour is for the tutorial example website, this can be altered to suit your own website, of course, but I suggest this is followed for the time being and altered later once we have worked through the complete tutorial.

Flash Button Screen-shot 3 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 3 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 3 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 3 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 3 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 3 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 3 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 3 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 3 :: Kaptain-Chaos Designs ©2009

8) With the shape still selected click on the Filter Effects (fx) button second from the bottom of the toolbar. Place a check (click) next to the 3D Effects. Set the blur and depth to 3.00 pixels. Now, selecting the 3D lighting, leave all the defaults as they are but change the angle from 180 to 45.

Flash Button Screen-shot 4 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 4 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 4 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 4 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 4 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 4 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 4 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 4 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 4 :: Kaptain-Chaos Designs ©2009

9) Insert a new keyframe for 0.75 seconds.

Flash Button Screen-shot 5 - 7 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 5 - 7 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 5 - 7 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 5 - 7 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 5 - 7 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 5 - 7 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 5 - 7 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 5 - 7 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 5 - 7 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 5 Flash Button Screen-shot 6 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 7 :: Kaptain-Chaos Designs ©2008

10) Select this new keyframe and add another new keyframe for 0.75 seconds again.

11) Still on the middle keyframe select the button shape and, opening the colour tab, alter the L setting to 54.


12) Save the file.


Preview the animation - We now have a pulsing animation! This in itself is not sufficient to display on a website, we still have some work to do.


13) Export this animation as a swf, calling it ‘pulse’.


Now we move onto Stage Two.

Stage Two

In this stage we will create the button itself.


14) Selecting the last keyframe delete it, now do the same to the second (lighter coloured button) keyframe. We are left with a single keyframe again.


15) Save this single keyframe file under a new name. I would suggest it is saved under the name of the button it will be making e.g. home-pulse.dpa, a button for an ‘About us’ page could be called about-pulse.dpa. The files do not take up much space on our hard drive, if we give each one the title of the page name button it is designed for it becomes very simple to return to the correct file at a later date if we need to alter the name of a page.

With this file saved under its button name we can move on to making the actual button.


16) Add a new layer and call it ‘text’. Drag the Artistic text out and type in the name for this button. Click on the select tool and set the font and size as appropriate – the one in the example is 10 pt Verdana. Either leave the default name object2 or as I do, rename it with the button name.


17) Use the Align tab to centre the text vertically and horizontally on the page.

Flash Button Screen-shot 8 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 8 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 8 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 8 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 8 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 8 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 8 :: Kaptain-Chaos Designs ©2009 Flash Button Screen-shot 8 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 8 :: Kaptain-Chaos Designs ©2009

18) Add a new keyframe, leaving the default length to one second.


19) On the second keyframe select the button layer and delete the ‘normal’ button.


20) Go to Insert>Movie Clip, navigating to the pulse.swf we created a moment ago; drag this out to 119.5 pix x 30 pix, anchoring the top left corner to 0 X and Y (using the transform tab here may be useful).


21) Rename object3 to ‘over’

top of page button: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 10 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 10 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 10 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 10 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 10 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 10 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 10 :: Kaptain-Chaos Designs ©2009 Flash Button Screen-shot 10 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 10 :: Kaptain-Chaos Designs ©2009

A word of explanation - as we have used the Filter Effects on this object and exported as swf in step one, the vector shape has been converted to a bitmap. This has resulted in a swf file of slightly different dimensions. If we insert this at the original size of 120 pixels and then preview the animation the highlight on the right hand side of the button jumps to the right. If, however, we make the width of the button 119.5 pixels, the button highlight remains static - this is what we want. Don’t worry that the page on keyframe 2 looks wrong, it is the exported effect we are after in this instance and not the page look.

With our basic animation in place, we can now begin adding the Action Script that will make the button work.


22) On the storyboard click the first ‘marker’ (click in the first triangle above the right hand corner of Keyframe1).


23) This opens a pop-up window asking for a name for this marker and how Action Script will affect this marker. Call this marker ‘normal’ and check the stops playhead box, but leave the “at next keyframe” box blank. Click OK.


24) Now click on the second marker, naming this one ‘over’ and also check the stops playhead box.

Flash Button Screen-shot 11 - 12 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 11 - 12 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 11 - 12 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 11 - 12 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 11 - 12 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 11 - 12 :: Kaptain-Chaos Designs ©2009 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 11 - 12 :: Kaptain-Chaos Designs ©2009 Flash Button Screen-shot 11 - 12 :: Kaptain-Chaos Designs ©2009 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 11 :: Kaptain-Chaos Designs ©2009 Flash Button Screen-shot 12 :: Kaptain-Chaos Designs ©2009

25) Selecting the ‘normal’ button on Keyframe1, open the Actions tab. Double click the “Roll Over” action


26) The Action Script window opens; select the Timeline actions.


27) In the Timeline list, choose ‘Go to marker X and stop’ and move it across to the empty Applied Actions pane.


28) A window pops up with a drop down list containing the names of the markers we set; choose ‘over’ from this drop down list of markers. Click OK.


29) Turning our attention to Keyframe2, select the ‘over’ animation; on the Actions tab double click “Roll Out”


30) Again choose Timeline actions from the window.


31) This time select “Play movie” and move it across to the Applied Actions pane.


32) Click OK and save.

Flash Button Screen-shot 13 - 15 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 13 - 15 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 13 - 15 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 13 - 15 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 13 - 15 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 13 - 15 :: Kaptain-Chaos Designs ©2009 Flash Button Screen-shot 13 - 15 :: Kaptain-Chaos Designs ©2009 Flash Button Screen-shot 13 - 15 :: Kaptain-Chaos Designs ©2009 :: Kaptain-Chaos Designs ©2008

Let’s have a preview. When we roll our mouse over the button shape the pulse animation begins to play; when we roll our mouse off of the button it returns to normal – funtastic!


Now all we need to do is add a browser action to our animation. It is useful to have set up the pages for the website with their HTML names first. If not, it will be a case of remembering the names of the pages these buttons will link to and making our web pages to match what we put here.

33) On the Storyboard select Keyframe 2 – the one containing the roll over pulse animation. Open the Actions for this frame – the bottom right, grey looking cog.


34) In the Actions window select Browser Actions>Navigate browser to URL, entering the http address in full for the page this button will navigate to.


For my website tutorial this will be set using the Navigate named frame to URL – the full URL is added to this and also the frame address for the page the button sits on. For more details please see the WebPlus tutorial that uses this pulsing swf button when it is uploaded.


35) Save the file.

Flash Button Screen-shot 16 - 17 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 16 - 17 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 16 - 17 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 16 - 17 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 16 - 17 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 16 - 17 :: Kaptain-Chaos Designs ©2009 Flash Button Screen-shot 16 - 17 :: Kaptain-Chaos Designs ©2009 Flash Button Screen-shot 16 - 17 :: Kaptain-Chaos Designs ©2009 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 16 :: Kaptain-Chaos Designs ©2009 Flash Button Screen-shot 17 :: Kaptain-Chaos Designs ©2009

That’s it. All that remains now is to export this completed button as ‘your-button-title’ swf file. For more buttons it really is a simple case of selecting the first keyframe and altering the text, updating the text forward to the end of the storyboard, remembering to align to the centre first. On the second keyframe alter the navigation action to the relevant page in your site, saving the dpa file under this new button name and exporting as a new swf.

Further possibilities with this type of button is to introduce a small looping movie clip or animation in place of the pulse, rather than keeping the buttons static, the buttons could animate too – the possibilities are there.

One word of warning though – just using swf buttons on your website is not recommended. These files are not seen by Google, other search engines and screen readers for the visually impaired. Some people browse the internet using small add on programs that block JavaScript and Flash from working. I always recommend having normal text hyperlinks on the pages that include these buttons as these are seen by all (perhaps positioning the text hyperlinks at the bottom of the page as I have with this website).

Remember, whatever you do, have FUN!

Ken (Major Confusion)

This button contains a movie file and is just over 300kb - something to consider when designing buttons for our website.

Flash Button Screen-shot 13 - 15 :: Kaptain-Chaos Designs ©2008 Flash Button Screen-shot 13 :: Kaptain-Chaos Designs ©2009 Flash Button Screen-shot 14 :: Kaptain-Chaos Designs ©2009 Flash Button Screen-shot 15 :: Kaptain-Chaos Designs ©2009