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 navbar Tutorials: Kaptain-Chaos Designs ©2008 Flash Banner2 example : Kaptain-Chaos Designs ©2008 Flash Banner2 example : Kaptain-Chaos Designs ©2008 Flash Banner2 example : Kaptain-Chaos Designs ©2008 Flash Banner2 example : Kaptain-Chaos Designs ©2008 Flash Banner2 example : Kaptain-Chaos Designs ©2008 Flash Banner2 example : Kaptain-Chaos Designs ©2008 Flash Banner2 example : Kaptain-Chaos Designs ©2008 Flash Banner2 examople : Kaptain-Chaos Designs ©2008 Flash Banner2 example : Kaptain-Chaos Designs ©2008 Flash Banner2 mask example :: Kaptain-Chaos Designs ©2008 Flash Banner2 mask example :: Kaptain-Chaos Designs ©2008 Flash Banner2 mask example :: Kaptain-Chaos Designs ©2008 Flash Banner2 mask example :: Kaptain-Chaos Designs ©2008 Flash Banner2 mask example :: Kaptain-Chaos Designs ©2008 Flash Banner2 mask example :: Kaptain-Chaos Designs ©2008 Flash Banner2 mask example :: Kaptain-Chaos Designs ©2008 Flash Banner2 mask example :: Kaptain-Chaos Designs ©2008 Flash Banner2 mask example : Kaptain-Chaos Designs ©2008

Let’s turn our attention to the Mask

Creating the Banner

Flash Banner2 screenshot 1 & 2 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 1 & 2 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 1 & 2 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 1 & 2 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 1 & 2 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 1 & 2 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 1 & 2 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 1 & 2 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 1 & 2 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 1 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 2 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 3 & 4 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 3 & 4 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 3 & 4 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 3 & 4 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 3 & 4 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 3 & 4 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 3 & 4 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 3 & 4 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 3 & 4 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 3 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 4 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 5 & 6 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 5 & 6 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 5 & 6 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 5 & 6 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 5 & 6 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 5 & 6 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 5 & 6 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 5 & 6 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 5 & 6 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 5 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 6 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 7 ::  Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 7 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 7 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 7 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 7 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 7 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 7 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 7 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 7 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 8 & 9 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 8 & 9 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 8 & 9 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 8 & 9 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 8 & 9 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 8 & 9 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 8 & 9 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 8 & 9 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 8 & 9 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 8 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 9 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 10 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 10 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 10 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 10 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 10 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 10 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 10 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 10 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 10 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 11 & 12 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 11 & 12 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 11 & 12 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 11 & 12 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 11 & 12 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 11 & 12 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 11 & 12 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 11 & 12 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 11 & 12 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 11 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 12 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 13 - 15 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 13 - 15 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 13 - 15 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 13 - 15 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 13 - 15 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 13 - 15 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 13 - 15 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 13 - 15 :: Kaptain-Chaos Designs ©2008Flash Banner2 screenshot 13 - 15 :: Kaptain-Chaos Designs ©2008back to Flash Banner 1 Projects page button: Kaptain-Chaos Designs ©2008next button to DrawPlus Tutorials and Projects page : Kaptain-Chaos Designs ©2008top of page button: Kaptain-Chaos Designs ©2008back to Flash Banner 1 Projects page button: Kaptain-Chaos Designs ©2008next button to DrawPlus Tutorials and Projects page : Kaptain-Chaos Designs ©2008top of page button: Kaptain-Chaos Designs ©2008top of page button: Kaptain-Chaos Designs ©2008

Dissolving text

A brief word regarding the dissolving text in the banners. Each text section is treated the same as the images, they are placed on their own ‘text-track1’ and ‘text-track2’ layers.

Taking the first two phrases, text1 is 100% opaque on keyframe 2 - the same frame as image1. Like image1, it is 100% transparent on Keyframe 3. The opposite happens to text2. This is 100% transparent on Keyframe 2 but 100% opaque on Keyframe 3. The two text sections ‘cross fade’. The next cross fade happens on Keyframes 4 and 5 - and every 3 second fade section after.

Ken (Major Confusion)

If there are any questions you wish to ask, please feel free to contact me. I’m always happy to try and help. Any comments and suggestions are always welcome.

13) With our positioning now correct, we turn to the transparency. Ensuring that image3 on Keyframes 5 and 7 is a Key object, switch to Keyframe 4 and make it 100% Transparent (0% Opacity). Now do the same on Keyframe 8. Please bear in mind this numbering is following the addition of a keyframe in the last step.


14) Deleting image2 from Keyframes 7 and 8, inserting a 7 second Keyframe from Keyframe 8 and another 3 second one from Keyframe 9, it’s time to import image4 to Track2 on Keyframe 7.


Repeat the above steps as necessary remembering to rename and position the images used. Remember to save often and preview the work to see how the transitions are looking.


If the banner is to repeat, or a replay button is to be inserted, please refer to the Flash Dissolving Images project.

There we have it, export as a Flash swf and it’s all ready to place on your web page. A little more complex but, as always, remember to have FUN!

12) Create the movement as before starting on Keyframe 4, ending with Keyframe 7


Example image: The image pans from left to right, so again it is moved from right to left. However, this time, as we are following the branch, this needs a little more work. With our panning set up, split Keyframe 5 in two (giving us a total of 8 Keyframes, Keyframe 5 of 7000 ms becoming Keyframes 5 and 6, each lasting 3500 ms (3500 ms + 3500 ms = 7000 ms). Image3 in each Keyframe is now updated to reflect the relevant positions. Image3 in the new Keyframe is also a ‘tweened’ object.


Selecting image 3 in Keyframe 6 we move the image so that the branch is sitting in the top third of our frame. Because our image in Keyframes 5 and 7 is a Tweened object, the position will alter slightly, this is what we want. If the resulting positions are where we want them to be, we can move to the next step; for this exercise however, we need to adjust it a bit more. Selecting the small ‘Tween object’ marker for Keyframe 5, we drag it to the right position halfway between the marker for Keyframes 4 and 6 and on the relevant part of the branch. This automatically turns our Tween to a Key object. We do the same for Keyframe 7.

10) Selecting Keyframe 6, insert a 3 second Keyframe. This last Keyframe (7) now reads 30.0s on our storyboard.


11) Selecting Track1 on Keyframe 4 import image3 and name it. Selecting image3, click on the right facing double arrow and choose ‘Run forward’, ‘To end of storyboard’ from the pop-up window, and click ‘OK’. Our image is now in every Keyframe to the end and is automatically placed as Tweens.

Now we turn our attention to image2


8) Deleting image2 from Keyframe 1 (it’s not needed here) select image2 on Track 2 of Keyframes 3 to 5, converting them to Tweened objects.


9) Back on Keyframe 2, position and size image2 to its’ opening position relative to our mask. Selecting Keyframe 6, re-position and resize to our ending position. Again, the intermediate frames are automatically updated.


Example image: The cactus image stays at a fixed, original size and pans from left to right, this requires moving the image from right to left.


That’s image2 dealt with. Let’s save and preview our work so far, impressive? Don’t worry if the last image seems to be on screen for too long, we will attend to this during the next section.

The image on track 1 has temporarily been hidden to provide a better view

5) Change image1 in the Keyframes 2 and 3 to a ‘Key Object’. This locks the attributes like position and transparency.


6) On to Keyframe 3, select image1 and give it 0% Opacity via the swatch on the  Transparency tab.


7) Move to Keyframe 4 with image1 on track 1 selected, delete it. Insert a 3 second keyframe. Moving to the new keyframe, add another on of 7 seconds. Our Storyboard tab now reads 27.0s.

3) On keyframe 1, select image1 and resize it to the starting size.


Example image: The orange was resized to 300x200 and positioned using the transform tab (measuring from the top left corner) to 400x and 0y.


Tip: Always resize by using one of the corner ‘nodes’. In Draw Plus, this automatically constrains the proportions of the image. The centre nodes will distort the image in either direction - not a good idea unless it’s for a ‘special effect’. Professional image editors never stretch an image in one direction or another, they will always re-size to make the shortest side fill a space, cropping the longer size to suit the image.


4) Selecting Keyframe 4 (17.0s), re-size and re-position image1 to its final position. The image in the intermediate Keyframes will automatically update to an inbetween (Tween) state relative to their time frame - magic!


Example image: As this will zoom in to a close up on the four drops, we enlarge the image to accommodate them within our mask area. Notice the mask is the visible grey area in the screenshot above.

The image on track 2 has temporarily been hidden to provide a better view

With our images on tracks 1 and 2 we are ready to begin.


1) On the Storyboard tab, running along the bottom of our workspace, click on the ‘Insert’ button to add a new Keyframe using the pop-up window, make this 7 seconds. Selecting the new Keyframe insert another Keyframe of 3 seconds. Finally, selecting the new Keyframe, insert one more Keyframe of 7 seconds. There will now be four Keyframes in our storyboard; it will run for 17 seconds. The bottom left of the Storyboard tab provides a readout of the currently selected Keyframe.


2) Select image1 on Track 1 of the Keyframe 2 and convert it to a ‘tweened’ object. Do the same on keyframe 3.



Now it’s time to insert our images, we can follow the basic principles of the Flash Dissolving Images project. This time however, we will need to increase the timings of the 4 second sections up to around 7 seconds to accommodate the movement; the transitions can remain at 3 seconds.


It helps to have made the time to create the storyboard earlier once we begin to add images and movement together. The storyboard doesn’t have to be set in stone. Sometimes, when putting it all together, a better idea will come that improves the overall appearance; the storyboard still provides an excellent foundation for the work though.


For the rest of this project, we will look at the first three images in the above Flash banner. It doesn’t matter if you have different images, these are only provided as a guide, and example of how to achieve certain movements. The main thing is to follow the numbered steps adjusting to suite your needs.

Moving images

Create a new WebPlus 10 Flash Banner as before (with the same page and frame rate settings), we need to go as far as adding the Track 1 and Track 2 Layers then stop.


This time, before adding any images, create another layer calling it Mask, and click on the M icon to the right of the layer. Double click on the layer, the Layer properties options window pops up, select 2 from the number of layers drop down box. Our Mask layer in the Layers tab is now shaded along with a paler tint on the Track1 and Track2 layers. This shows the layers our mask will be affecting.


Still selecting the Mask layer, copy the shape from our drawing and paste it into this layer, naming it mask. Position the mask in the area our images will play. Make the shape 80% transparent (Opacity 20% swatch). The example mask is black. This only affects the colour and opacity of what we see in DrawPlus, it does not affect the final swf. Doing this we will be able to see where the mask is without it interfering with our images.


Click on the padlock icon to lock our mask into position and check that the ‘edit all layers’ icon is set to off - we don’t want to accidentally move our mask layer during this project. Moving masks are very useful for creating some striking visual effects though and would be well worth considering.

The mask in the above Flash Banner example is 300 x 200 pixels. It was created from two quick rectangles 200 x 200, one of which had rounded corners. Arranged to measure 300 x 200 pixels, they were combined (added together) which converted the two quick shapes into a single ‘Closed Curve’.

“What is this image of a brick wall and window doing here?”, I hear you ask; good question! This serves as an illustration of a mask. Think of the shape of the mask as being like the window, everything outside of this shape is like a brick wall. We can see through the window (this one could do with a clean!), but not the brick wall.


This project utilises the Layer mask of DrawPlus X2. We are using the WebPlus 10 Flash Banner template as before, we know that the height is 200 pixels and the banner length is 700 pixels; what shape and size do we want our mask to be?


One important thing about masks in DrawPlus X2, there is no opacity setting within the mask. Like the brick wall example, it is a hard edge between what is and is not masked.


It’s a good idea to create the mask shape as a new drawing in DrawPlus first. By using a quick shape or two, combining and converting to curves we can have a wide variety of unique shapes, for example, a ‘Splat’ with drips; the only limits are size and imagination! Save the drawing and keep it open for now, we’ll use it shortly.


Tip: It helps to keep the mask a fixed, whole number of pixels for this project.

Image choices

A quick word about images and quality. For the best results use high quality images in the original DrawPlus project; when exporting as a SWF file, DrawPlus will handle all the image compression and the resulting banner will look good. Starting the project with blocky, pixelated images will only result in an inferior looking banner with blocky, pixelated images. Images larger than the mask we create are required to enable panning and zooming

Preparation is all-important.

As mentioned in the Flash banner above, it will be beneficial to create a storyboard first, working out the order and movement of these images. It need not be complicated, touching on the subject in the Flash Dissolving Images project, it was suggested to create a single ‘images’ folder, renaming the images with a number prefix for the order of play. We could then create a simple text file for the storyboard reading:

Image 1:

01_orange: (scaled down to fit) zoom in from full image, panning up to centre on four drops.
Image 2:

02_cactus: (normal size) slow pan from ‘out of focus’ head to ‘in focus’ head; head centred.

Image 3:

03_branch: (normal size) l-r pan along the branch.

Tip: Short, snappy sections are fine in pop videos or banner ads (where they are designed to grab the attention); if the banner is being designed as an integral part of our site, to enhance its’ appearance, it is better to design it to run as smoothly as possible. That’s not to say never use short snappy sections, but if they must be used, use them sparingly.

Here we will be creating something along the lines of this example, using still images:

This project follows on from the previous Flash Dissolving Images project, please read it through first before attempting this one as I won’t be covering the basic instructions here. I’m sorry, if you are using an earlier version of Serif DrawPlus, prior to X2, you will not be able to join in (you may wish to follow though, if you’re considering upgrading!).

Example and Introduction

Flash Banner 2 :: Dynamic Images