Create an animated GIF using the eleven images provided. You will be using the 'importing frame by frame' method.
Create a new document of size width 200px by height 150px.
Select the frame panel from the 'Window' drop down menu. Open the options pop-up menu on the frame panel (it's the triangle at the top right). Choose the 'add frames' option and in the next pop-up add 10 frames. For this example it does not matter where the frames go, as at this point they are all empty. If you have done this correctly you will see that the frame panel now displays eleven frames.
Select frame one. Select import from the 'File' drop down menu. Browse to the folder where the images, that were provided, are stored. Select the image called 'Frame 1'. If you have done this correctly you will notice the image displayed on the canvas.
Select frame two on the frame panel, and you will see that the image on the canvas will disappear. This is because frame two is empty.
Again choose import and select the image named frame 2. Repeat this process, selecting the next frame number and it's corresponding image, until all eleven frames have different images on them.
At the bottom of the frame panel there is a button called 'Animation looping'. Pressing this will display the amount of times that the animation will play. Select forever. This means that the animation will constantly loop.
Select the first 10 frames, by clicking on frame 1 and then holding shift and clicking frame 10. If you have done this correctly then you will see frames 1-10 highlighted. Using the options pop-up again, (the arrow in the top right on the frame panel), select properties. This will display the 'frame delay' pop-up. The frame delay governs how quickly individual frames will be displayed one after another. Set this to '10/100 second'. The number that you insert represents a percentage of a second. For example entering 50 would create a half second delay between the selected frames. Make sure that the 'include when exporting' check box is ticked. To create a pause at the end of the animation select frame 11 and change its frame delay to 100. This will create a one second pause at the end of the animation.
Select the optimise panel from the 'Window' drop down menu. Select 'animated GIF' from the drop down menu underneath 'Settings'. Export and save the image.
Test the animated GIF on an HTML page to check that the animation runs as it should.
Create an animated GIF using any logo and a piece of text. You will be manually animating these objects.
Create a new document of size width 200px by height 200px.
Select import from the 'File' drop down menu. Import the graphic that you wish to use as a logo. Size your image to approximately 80px by 80px (obviously this may differ depending upon your chosen image). Place the image in the top left-hand corner of the canvas.
Select the frame panel from the 'Window' drop down menu. Open the options pop-up menu on the frame panel (it's the triangle at the top right). Choose the 'duplicate frames' option and in the next pop-up add 6 frames. For this example it does not matter where the frames go, as all of the frames will be the same. If you have done this correctly you will see that the frame panel now displays 7 frames. If you click on any of the frames you will notice that the logo is in the same position on every frame.
At the bottom of the frame panel there is a button called 'Onion Skinning'. On the next pop-up menu check that 'Muti-Frame editing' does not have a tick next to it. If it does then click to get rid of it. Go back to the onion skinning pop-up again and choose 'Show all frames'. When onion skinning is turned on, objects in frames before or after the current frame are displayed but are dimmed so that you can tell them from objects in the current frame.
Select frame two on the frame panel. Go back to the canvas and select the logo, then move it down and to the right as shown (fig 1).
You will notice that you can see the position of the logo in frame one. This is the onion skinning in action. Repeat this process of selecting the next frame and moving the logo's position. If done correctly you should see the positions of the logos on each frame (fig 2).
Create a piece of text by selecting the 'add text' button from the left side tool bar, (the one with a big 'A' on it). Make sure that you have frame 1 selected in the frame panel. Click on the canvas and the text editing box will appear. Type your text and modify it to your requirements. Press ok and you will see the text on the canvas. At the moment it is only on frame 1.
Select the text and using the edit drop down menu select copy (keyboard shortcut 'Ctrl+C'). Select frame 2 and using the 'edit' menu again choose paste ('Ctrl+V'). Repeat this until the text is on every frame. You can now animate this text using exactly the same technique as for the logo.
Select the 'Optimise' panel from the 'Window' drop down menu. Choose type of compression as 'Animated GIF' and then export the image.
Insert the image on an HTML page and test.
Create an animated GIF using any logo and a piece of text. You will be using 'tweening' to let Fireworks do the animation work for you.
Create a new document of size width 200px by height 200px.
Select import from the 'File' drop down menu. Import the graphic that you wish to use as a logo. Size your image to approximately 80px by 80px (obviously this may differ depending upon your chosen image). Place the image in the top left-hand corner of the canvas. This is where the animation will start.
To use the tweening you must first convert all of the objects that you wish to use into 'Symbols'. To do this, select the object and then choose 'Convert to Symbol' from the 'Insert' drop down menu. Name the symbol and make sure that the graphic radio button is checked.
Select 'Library' from the 'Window' drop down menu. This gives you a list of all of your symbols. Drag your logo from the library to the canvas and place in the bottom right-hand corner. This is where the animation will end.
There are now two instances of the same symbol on the canvas; one in the top left corner and the other in the bottom right. Select them both by holding down the shift key and clicking on the logos.
From the 'Modify' drop down menu choose 'Symbol' then 'Tween Instances'. Enter in the 'Steps' box 5, and check the 'Distribute to frames' box. This will make your animation have a total of 7 frames (the 5 you have added plus the first and last that you created by positioning the logos.
If you have done this correctly then you will see the 'Frame' panel displaying 7 frames. If you click on the frames in order you will see the logo animate across the page.
Select the 'Optimise' panel from the 'Window' drop down menu. Choose type of compression as 'Animated GIF' and then export the image.
Insert the image on an HTML page and test