In Photoshop, when saving different types of picture as jpeg a quality selection box appears.

From here you can choose various quality settings.

From here you can choose from various quality settings. On the top side of the Image Options sector you can click on a drop-down box to choose a basic level of image compression.

In the sector below this you can use a slider which enhances the control you have over the amount of compression.

At the bottom you have format options, this allows you to choose from Baseline (“Standard”), Baseline Optimized, and Progressive Scanning, from 3-5. Baseline (“Standard”) is used because it's a format recognized by most Web browsers, Baseline Optimized however, is optimized for color and is a slightly smaller file size. Progressive displays a series of increasingly detailed scans (you can specify the amount from 3-5) as the image downloads. Baseline Optimized and Progressive JPEG images are not always supported by all Web browsers so Baseline (“Standard”) is often the format to save as if publishing on the internet.

You can change the compression settings of the JPEG file format for various reasons, mainly due to size. This size issue is down to the internet, and download speeds. The basic fact is, if you have a larger file size, then it will take longer to download. So the image is often published so it has a decent quality, (doesn't appear too pixelated or aliased) but isn't too large. For example, a JPEG saved as a medium file size, and baseline (“Standard”) would be a more acceptable size, compared to a maximum quality JPEG with 5 progressive scans, as this may take some time to download onto the computer. This is also applicable to other file formats such as .MP3 compared to .WAV

GIF Transparency

The acronym GIF stands for Graphics Interchange Format. GIF format is a lossless compression file format. It uses repetition and redundancy in the file itself to reduce the size of an image, (substitution) rather than degrading the quality. For example, if it has a simple code, it might use the first part of that code instead of reproducing that code each time, so every time it repeats it thinks of the first part of code and repeats it.

To prepare to set transparency for GIF's you need to choose a color that doesn't occur naturally so that parts of the picture that you want to be seen don't accidentally get made transparent. Cyan is a color that doesn't normally occur naturally so choosing this color, we can delete all parts of the picture with this color and make it transparent, similarly to chroma-key, but to a GIF file instead of a video file.

The numbers in the color selection box regard to the intensity of the red, green, and blue colors.

Here you can see that the red slider has been left at an intensity of 0, green set to 255 and blue set to 255 also, (maximum).

This allows you to mix the three primary colors together to make any secondary colour you prefer with just three sliders.

Aswell as choosing the threshold of the mix of colors you can also set the tolerance of the transparency. This is done by clicking on the background box under “tolerance” and choosing an amount between 1-255. The higher the tolerance, the wider band of light frequencies it will make transparent, the lower the tolerance the smaller bandwidth of colours it will choose to make transparent.

When saving the GIF select the “Save For Web & Devices” and another screen will appear. Here on the left you will be able to decide between all the colours in the image that may contain traces of the flood fill colour you used earlier, in this case, Cyan.

You can choose the color that you wish to eliminate and click the transparent button.

When enlarging a Raster graphic, the software automatically tries to smooth out the pixels so that you don't notice its resolution easily, however, by doing this it creates the pixelated effect as seen below.

This proves the rule that Raster images work by editing pixels themselves, compared with Vector images working with mathematical equations and depending for which purposes you're using them for, each graphic format is as useful as the other. For example on a magazine like the image below, a Vector graphic might be used for the text and the boarder around the edge, whereas the photograph is a Raster image and as you can see has been photo manipulated.

Although when downloaded from the internet the image is most likely to be a Raster image (even if it previously included vector images) because of download speeds and for general ease of web use.

GIF Animation

A layer in regards to Adobe Photoshop is where you can overlay images to sit on top of each other, without having to render the images together. You can click on each layer and edit them individually, this is good for the photo editor because it gives you more flexibility to change each layer to allow the finished product to look more, (or less depending on the context) believable. For example in the above image of the Times Magazine, the picture of a telescope is layered on top of the persons face, and their eye, enlarged and in focus inside the telescope. The background layer is set to a blur, while keeping everything else in focus to add to the detail of the photograph.

Opacity is the percentage a layer (or image) can be seen/not seen. When set to 100% opacity the image is in full view and blocks out all images/layers below it. However, you can overlay images and set the opacity to any percent below 100 to allow you to see through the image as in the screenshot.

In the above image you can see the various layers (Tiger being the background, cigar, and smoke being two others). And the opacity editing, you can see the smoke layer has been highlighted and the opacity set to 54% to add to the effect of depth in the picture.

To create a GIF animation in Photoshop (CS3) you simply open an image and click upon the Windows tab and highlight the animation box. A second box will appear and from here you can create new frames and it gives you tweening options.

To make an animated GIF you need to create a new frame by clicking the duplicate frame button at the bottom.

After this you can change the opacity over in the Layers window (shortcut F7).

And create a motion tween between the frames, creating all frames in between the key frames for you.

When changing tweens you must apply each transition to a different frame, when applied to the same frame, the other keyframes will not change.

Tweening is simply a technique that when you create a beginning shape, and an end shape, the software creates the necessary frame in between the beginning frame and end frame shape. You can change the timing of tweening to give different effects by speeding up or slowing down a certain animation, perhaps to allow text to fade in slowly, or allow an image to flash in quick succession. One way of using this would be if you were animating a wheel, and wanted it to speed up or slow down at particular points, you simply create the keyframes necessary and then create a motion tween inbetween the frames. The only way to make it faster or slower is by changing the frame rate, or frame amount. A smaller amount of frames will result in a quicker transition.

Upon reflection I have noticed that the new Adobe Photoshop CS3 program is increasingly complex to use compared with the older versions of Photoshop. It does not lay out the Graphical User Interface, (GUI) in a manner that is simple, nor quick to use. Far too many actions are hidden behind windows, and when searching for the particular box, behind a window, behind another window that you want highlighted, you have to read the Photoshop CS3 manual only to execute more complex tasks, just to find out that you can't find the action necessary anyway. The earlier versions of Photoshop made it easier to use and create animations by having the function buttons at easy access and a simple to use manual which explains most things in a straight-forward linear manner. I would prefer to use a program like Flash instead of Photoshop for animation overall, just because of the way Adobe has designed the new version of CS3 Photoshop, making it a lot harder to achieve the same thing you can create in Flash in a matter of minutes. Image ready was a software previously released by Adobe which dealt with the animation side and used Photoshop as the Photo-manipulation suite, which I think makes more sense as it breaks up the amount of windows and sections behind sections of complex drop-down boxes.

 

 

 

 

HTML

W3schools is one of the most popular to visit if you need help with HTML, I highly recommend this website.

Bravenet is another popular sites for HTML Codes. There many features on this website, which you can use.

HTMLcodetutorial offers HTML codes for people who aren't quite familiar with making websites.

Webmonkey is a bit more advance and it goes into depth a bit more than the others.

Flashkit offers very good tutorials on how to use flash. This website also offers Flash Codes for your own use.

Flashadvisor allows members who aren’t quite into Flash, to ask questions, ask for codes and any other things which are related to flash. It also has a section for Javascript, DHTML and HTML.

Flashvalley is quite good in giving out flash game codes, flash components, flash tutorials and flash templates.

Freeflashintros allows you to make your own flash chatrooms, guestbooks, poll, games and even more!

Javascript

Some more resources for free Javascript.

I would recommend this website, as it’s very easy to navigate and the Javascripts are excellent.

Javascriptkit is another fantastic site for scripts. If you need more help, then this site does have a forum.

Javascript is laid out very well, and it’s very easy to navigate. Plus all scripts are free!

DHTML

Dynamicdrive is a popular site for DHTML Scripts. Its very good at helping people who haven’t used DHTML.

Dhtmlcentral has its own forum, tutorials and its own projects.

Dhtmlshock is a very good resource for DHTML. Scripts and Articles relating to DHTML is Simplythebest and has a few DHTML scripts for you to use.

Making An Animation Using Keyframes:

First, you have to draw the original shape you want to animate on the stage (the white area). This will be the first frame in your animation. When you are done, press Insert > Timeline > Keyframe (or push F6). Now, slightly change your shape (for example, move it slightly, or use the Free Transform Tool (Q) to modify the shape). Then insert another keyframe, and change you shape again. Repeat this until your animation is complete. You can press Control > Test Movie (or push ctrl + enter) to view your animation.

Making An Animation Using A Shape Tween:

A shape tween is used to blend one shape into another. It can also blend other factors of shapes together including color, size, position and alpha (transparency). To use a shape tween, you first have to create the first frame of your animation. Next, on the timeline, click on frame 50 (you can use any frame, but for the purposes of this tutorial, i will use frame 50), and create a new keyframe (F6). On this keyframe draw the last frame of your animation. Now, click on any frame on the timeline in between your two keyframes. On the Properties Inspector on the bottom of the screen, you should see a Tween option, with a drop-down menu. Select shape from the list.

Your time line should now look like the one shown below:

Your shape tween animation is now complete! You can press Control > Test Movie (or ctrl + enter) to view it.

Making an animation using a motion tween:

A motion tween is used to move a movie clip from one place to another. You can move the movie clip along a set path (called a motion guide), and make it rotate a custom number of times. First, you need to start by creating the first frame of your animation (see above). Now, you use the Selection Tool (V) to select what you have just drawn, and press Modify > Convert to Symbol (or push F8). Type in a suitable name to the box that comes up (e.g. tween_shape), and make sure "Movie clip" is selected as the type. Also, make sure the registration is set to center. It should look like the box shown below.

Next, on the timeline, click on frame 50 (again, you can use any frame, but I will use 50), and create a new keyframe (F6). Now, drag the shape you drew on the first frame (now a movie clip), to where you want it to move to in the animation. Just as you did in the shape tween, click on any frame in between your keyframes, and select Motion as the tween option in the properties inspector. Your timeline should now look the same as the timeline for the shape tween shown above, except the frames on the timeline should be a slightly different color. If you test your movie now (ctrl + enter), your movie clip should move from its position in the first frame, to its position in the last frame.

You can now do a few things to make it more interesting. If you click on any frame in between your keyframes on your timeline, and then look at the property inspector, there are a number of options here that you can use, including: rotations (make the shape rotate while it moves), easing (makes the shape accelerate while it moves, instead of moving at a flat speed), and the option to orient the shape to a path. We will look at this latter option in more detail.

Orienting A Motion Tween To A Path:

Orienting a motion tween to a path allows you to make whatever is in your tween (i.e. your movie clip) move along a certain path, that you can draw. To do this, right click on the layer that has your motion tween on it, and select "Add Motion Guide". Now, using the pen tool, brush tool, line tool, or similiar, draw a path for your movie clip to follow. Here's the path i drew for my movie clip:

Now, if you click anywhere on your motion tween in the timeline, you need to check the box that says "Orient to path", and also checking the box that says "Snap" may help. Next, you have to click on the first frame in your timeline, and drag your movie clip to the "start" position of your motion guide. Make sure you get the center of the movie clip as close to the line as possible. You then have to click on the last frame, and drag your movie clip to the "end" position on your motion tween. If you now test your movie (ctrl + enter), your movie clip should follow your motion guide! Hint: if you click the dot beneath the eye logo next to the motion guide layer, you can make the motion guide "invisible".

Improving The Quality Of Your Animations

You may find that your animations jolt and lag a little. This is because the animation has a low frame rate (12 frames per second by default). If you increase the fps, your animation will run much more smoothly. You can change the fps by double-clicking where it says "12.0 fps" beneath the timeline.

Also, when playing your animation, it will continuously loop. I think that this can ruin the animation, so here are two ways to solve this problem: You can make the animation's first and last frames the same, so that in one play, the animation makes a full circle.. in other words, where continuously looped, you cant tell where the start and end of the animation is. Or, alternatively, if you click on the last frame of your animation, you could push F9 (which opens the actions panel), and paste this code:

Stop();

You can now push F9 to close the actions panel. If you test your movie now (ctrl + enter), you will see that your animation only plays once, and then stops.

And that's about it for this tutorial! Don't forget that you can mix and match all of these forms of animation in flash. Have fun!

This is my first ever tutorial, so any comments or suggestions would be welcome, as they would help me improve future tutorials! Thanks!

1. Open up a new flash document.
2. Select the rectangle tool and look at the options in the tools panel and select "Set corner radius":
3. Set the corner radius to 10 and press OK
4. Draw a black rectangle on the stage with no outline, it will be rounded
5. Edit the rectangle via the properties panel and make the width 100 and the height 30: (The position doesn't matter)
6. Open up the color mixer panel, if you don't have it, then press SHIFT+F9:

   

7. Select the rectangle with the selection tool and at the "Type" drop down menu in the color mixer panel, select linear and make sure that the "Fill" in the color mixer is selected not the stroke (To select the "Fill", simply click on the bucket in the color mixer panel):
8. Change the gradient at the colour mixer to look like this (You can click and drag the tabs to move them):




9. Your rectangle should look something like this:
10. That looks alright doesn't it? Lets make it better, select the Gradient Transform Tool (Hotkey F):
11. Click on the rectangle with the tool and it should look like this:
12. Move your mouse to the top right corner of the rectangle and the mouse cursor should turn into a rotate symbol
13. Rotate the gradient 90 degrees anti-clockwise, it should look like this now:
14. Now, that arrow pointing to the right, click on it and drag it down until it meets the edge of the actual rectangle:
15. Convert the shape to a button using the F8 key and name it button:
16. Now you have a button, double click to go inside it
17. While inside the button click on the shape and convert it to a movie clip. Name it ButtonInside:
18. Click on your newly made movie clip that is inside your button and double click on it AGAIN
19. Convert the content into another movie clip (Last one I swear) name it ButtonInside2.
20. Now go back to the inside of ButtonInside (You should be here: Scene 1 > Button > ButtonInside), go down to the properties panel and click on Filters:
21. In the filters tab, click on the "+" and then click on Glow:
22. Now, there are many different filters so later on you can experiment with them but for now, let's use the glow filter
23. Edit the properties of the filter to look like this:
24. Add a keyframe while inside ButtonInside at frame 10 and frame 20:
    
25. At keyframe 10, select the movie clip that you just applied the "Glow" filter to and go to the filters tab
26. Change the properties of "Glow" to look like this:
27. Apply motion tweens to the 1st and 2nd keyframe and the 2nd and 3rd keyframe:
28. Go back to the stage and test your movie
29. You will see that the button has an animated glow. So far this button is good but it can be better.
30. Double click on the button in the stage so that you are inside the Button symbol:
31. Copy the movie clip in layer 1 of the button, don't paste it yet
32. Make another layer and place that layer on top of "Layer 1" and name it "Bevel"
33. Select the "Bevel" layer and push CONTROL+SHIFT+V. This will paste whatever you copied in the location in your current layer.
34. Select the object you just pasted if it isn't already selected and press CONTROL + B. This will break the movie clip apart, since the movie clip you just broke apart had an instance of the ButtonInside2 movieclip in it the movieclip on stage now will be the ButtonInside2. The "Break apart" function is great for many things. Like for example: You make a movie clip with a square. You want to make another movie clip with it but you spent a while drawing that square. So you break the movie clip apart back into the ungrouped form and make another symbol with it!
35. Anyways back on task, the broken apart movie clip is now the ButtonInside2 movie clip. You will realize it has a "glow" filter applied to it already. Delete that filter by selecting the "Glow" filter and pressing the "-" button next to the + button:
36. Add a "Bevel" filter to it:
37. Make the properties of the bevel look like this:
38. Bevel gives it a nice “3D” look. Now add a keyframe at the "Down" state of the button in the bevel layer and add frames to match it in the other layer:
39. At the "Down" state of the button in the "Bevel" layer, select the instance of the movie clip
40. Go to the filters tab
41. There should already be a "bevel" filter added from before, if not then you've done something wrong
42. Edit the properties of the bevel and change it to look like this
43. Return to the stage
44. Test your movie, while testing it, click on the button. You will see it looks like it has been pressed down.
45. Exit out of the testing screen and back to the stage
46. Right now it looks good but for the sake of learning, I will tell you how to apply alpha to it
47. Click on the button while at the stage, at the properties panel, look for "Colour". When you find it, select "Alpha":
48. Next to the alpha, set the % to 50:
``
49. You will see that the button has faded a bit. Alpha is for transparency, the 50% that you entered means the object is 50% transparent. 0% means that the entire object is transparent and 100% means it is not transparent at all.
50. Congratulations, you have gained knowledge of colours, gradients and filters. You can experiment around with those I will now leave you with a few notes.

NOTES:

• Linear is not the only type of gradient
• You can have alpha in colours
• You can have alpha in gradients
• The gradient transform tool isn't the only way to alter gradients
• You can have more than one filter

1. Open up a new flash document.
2. Draw a black rectangle on the stage using the rectangle tool.
3. Select the rectangle if it isn't already selected using the selection tool and press F8.
4. For the name, enter "button" and for the symbol type, select "Button":
5. Press OK.
6. Now you have your very own button! Test your movie.
7. As you place your mouse over the button, the mouse icon will change into a pointing hand. This is all it can do so far, now it's time to add some more stuff to it.
8. Exit out of the testing screen and back to the stage.
9. Double click on the button to edit it.
10. Unlike the movie clip, the time line will be displayed like this in a button:
11. You will see "Up", "Down", "Over" and "Hit". I will go over each one.
12. Now, "Up" is self explanatory, when the button is idle it will display the "Up" state.
13. Now, add a keyframe underneath the "over" state:
14. Now, at the "Over" state key frame, change the rectangle's colour to yellow
15. Now, go back to scene 1 and test your movie
16. Put your mouse over your button. You will see that it will turn yellow. That is because of the "Over" state, once your mouse goes over the button, the button will display the "Over" state.
17. Go back inside the button. (Double click on the button in the library for the forgetful ones)
18. Now put a key frame under the "Down" state:
19. In the down state key frame, change the rectangle color to red.
20. Go back to scene 1 and test your movie.
21. Move your mouse over to the button, the button will turn yellow as expected. Now click the mouse. Clicking the mouse on the button will activate the "Down" state key frame if it has one, in this case the button will turn red.
22. Once more, go back into the button.
23. Add a key frame under "Hit" state.
24. Now, draw 4 rectangles, housing the original rectangle, like this:
25. Now, you won't actually get to see the hit state when testing your movie, but the "hit" state acts like a "remote" trigger, the content in the "hit" key frame is where the button can be pushed.
26. Test your movie, start from the outside and move your mouse in towards the rectangle. But before you reach it, the rectangle should turn yellow. That is because of the "hit" stage, that border you placed around the button means you can push and view the button from there. (In this picture, the "X" represents my mouse):

Congratulations, you have made a simple button. Although it looks like junk we will improve on this later on.

MOVIE CLIPS

1. Open up a new flash document.
2. Draw a square anywhere on the stage.
3. Select the box with the selection tool (Hotkey V), go up and look at the toolbar (Where file, edit and all those other options are) and select "Modify" then "Convert to Symbol".
4. Name it box and select "Movie Clip" if it isn't already selected, it should look like this:
5. Click OK.
6. Now you have a movie clip! To edit this movie clip, double click it on the stage OR double click on it in the library. The library looks like this:
7. Once you double clicked on it, you're inside the movie clip; here you can edit the movie clip. NOTE: Any changes you do inside the movie clip will change all other instances of this movie clip (I will explain more later).
8. Now, in this movie clip create a key frame in frame 10 and another key frame in frame 20. It should look something like this:
9. Note the "Scene 1, Box":
This displays your current location; you are in Scene 1, in the "box" movie clip.
10. In keyframe number 10, change the color of the box to green.
11. Create a shape tween with the 1st and 2nd keyframe and another with the 2nd and the 3rd, if you don't know how to make a shape tween, refer to "Flash tutorial 2: Shape tweens"
12. Your timeline should look something like this:
13. We want to get out of the movie clip and back onto the stage, to do this we click on the "Scene 1" at the timeline and we will go to that location:
14. Test your movie by pressing Control + Enter/return. You will see your shape tweens that you created in the movie clip.
15. Here comes the big advantage of movie clips. Delete the instance of the movie clip on the stage. (Don't delete it from the library).
16. Your stage should look like this:
17. Now, click and drag from the library the box movie clip.
18. The box is now back. Drag 2 more boxes from the library to the stage. (Doesn't matter where you put them).
19. Your stage should like this:
20. Test your movie; you will see that ALL 3 of the boxes have the same shape tween<./li>
21. Back to the stage, double click on the movie clip in the library OR any instance of the movie clip on stage (Doesn't really matter, they will give the same result). An instance is like a projection, the movie clip in the library is the projector and they are both the same.
22. Once inside the movie clip, in frame 10 where the box is green, change it to red. It should look something like this:
23. Now, return to scene 1 and test your movie. You will discover that all 3 shape tweens will turn the box red.
24. This is the advantage of movie clips, when doing a large scale project; you can easily upgrade the graphics by modifying one symbol.

Note: All changes made to movie clips while INSIDE them will change ALL instances of that movie clip in the flash document. However, all changes made outside of the movie clip, such as resizing it using the transformation tool or applying filters (I will explain that later) will only change that ONE instance IF you edit it outside of the movie clip.

GRAPHICS

1. Open up a flash document
2. Go to "File", "Import" and then select "Import to library":
3. In this example, I will be using a "Windows Vista" wallpaper, which I have named example.jpg.
4. Find a picture that Flash can support, select it and then click "Open" to import it.
5. The imported picture will go into the library:
6. Imported graphics cannot be edited; however they can be updated by double clicking on the symbol in the library and clicking update.
7. Click and drag the graphic from the library to the stage as you would do with a movie clip.
8. Select the brush tool and scribble over the instance of the graphic.
9. Something like this will happen:
10. As you can see, imported graphics cannot be edited in flash.
11. Delete the graphic from the stage.
12. Draw a box on the stage anywhere using the rectangle tool.
13. Select the brush tool (Hotkey B).
14. Choose a different color for the brush than the color of the box.
15. Scribble all over the box using the brush tool.
16. Now select the selection tool (Hotkey V) and click on the BRUSH stroke./li>
17. Drag it away from the box and place it anywhere else.
18. It should look something like this now:
19. Now you see why imported graphics are good. Imported graphics cannot be edited within flash, BUT they can be edited if you use another program like PhotoShop and edit the .jpg picture and update it in flash.

Congratulations, you have now made a movie clip and gained knowledge of imported graphics.