Dreamweaver and Web design tutorials

I have started to work with my students on the development of websites using Adobe Dreamweaver and directing the students to explore HTML5 and CSS3. The following links are the result of some searching for a range of tutorials and web-design tips for the students to access as they work through completing a project.

http://www.byol.com.au/tutorial/dreamweaver-cc-tutorial.html#.VVLOA_mqqkp

http://layersmagazine.com/category/dreamweaver

http://www.tutorialspoint.com/shorttutorials/8-web-design-tricks-that-will-knock-your-socks-off

http://www.1stwebdesigner.com/30-html5-tutorials/

FLASH CS6 – Layer Mask

This is a fun and interesting way to increase the visual value of an animation or web banner. It uses a number of the previous techniques covered including a bitmap trace, symbol use and a motion tween. This technique can be used to show any number of possible things through the masking space so be creative.

 

1. Set yourself up two layers, one (the top one) called ‘MaskLayer’ and the second (below it) called ‘Picture’.

    

2. Place an image, text or photo onto the Picture layer

   

    

3. On the MaskLayer create a shape that will act like a window to see through. This will be your mask element.

   

4. Make the shape a Graphic Symbol

   

    

5. Right click on the Mask Layer and set its properties to be a ‘Mask’.  This should grab the layer below and use it as an image layer.  If it doesn’t follow the following step.

    

6. Now select your Picture layer and drag it slowly onto the Mask layer. It should visually grab and when you let the button go it will change its properties to be a Masked Layer.

    

7. Finally to make your mask more interesting you can add animation to the Mask symbol that is on the MaskLayer. NOTE: To add the animation you will need to unlock the layers.

    

8. I have also added a bitmap trace below my masked layer to add the illusion that you are seeing a different image over the top. Play and have fun.

    

    

FLASH CS6 – Animating text – Shape Tween

To continue to extend the potential use of animation and text it is important to remember the use of a shape tween. To use a shape tween with text you need to break apart the text one step further so it loses any of the text tool properties and becomes like a drawn image. The following steps give a brief breakdown of how to do this:

 

1. Enter the text you wish to use and break it apart twice

   

    

2. Leave a time on the timeline so your text can be read (eg. 20 frames) and press F6 to copy the keyframe.

   

    

3. Now leave a few frames for the animation to be done and press F7 to create a Blank Keyframe.

   

    

4. In the new Blank Keyframe enter the next piece of text and break it apart twice

    

5. In the frames between the two keyframes right mouse click and select Shape tween

   

FLASH CS6 – Animating text – Motion Tween

In order to animate text, or to add some special effects it is important to Break Apart text. The reason for this is that text in flash is treated as a special (different) element from symbols and vector content. To solve this problem you just need to use the Break Apart option in Flash. The following steps give a brief breakdown of how to do this:

 

1. Enter the text you wish to use and break it apart and distribute each letter to a different layer.

   

    

2. Now for each letter you can extend the timeline and use a motion tween to animate each letter. Eg:

   

Things that to consider:

• Using layer folders for each set of text is a good idea
• You can alter the start and ending point of letters to make it more interesting

FLASH CS6 – Breaking apart text

 

In order to animate text, or to add some special effects it is important to Break Apart text. The reason for this is that text in flash is treated as a special (different) element from symbols and vector content. To solve this problem you just need to use the Break Apart option in Flash. The following steps give a brief breakdown of how to do this:

 

1. Enter the text you wish to use

   

    

2. Right click on the text and from the menu select Break Apart

   

    

3. This will separate all the different letters into individual spaces

   

    

4. From here you can then choose to distribute each letter to a layer, or you can break it apart even further to become a vector object.

    

5. To break apart further, right click on the text and choose Break Apart again.

    

Things that can be done from here include:

• Animating letters using motion tweens
• Break right down and then use a shape tween
• Anything else creative you can think of….

FLASH CS6 – Bitmap tracing an image

Often people wish to include images derived from photographs or JPEG files. This can cause problems when wishing to edit an image in Flash as these are generally bitmapped image types and Flash is vector based. A strategy to overcome this is to perform a Bitmap trace where the bitmap image is transformed into a vector-based picture. This will simplify the picture and will change its look:

 

1. Place a copy of the desired image onto the stage

 

1. Click once on the image then from the menu’s at the top select, Modify – Bitmap – Trace Bitmap.

 

1. Now you can change and edit the settings. For this example I am going to leave them as default.

 

1. Flash will now go and perform a trace on the image. In simple terms this means it will trace and group colours into a limited palette range.
2. Now you can select and edit the image as if you had drawn it yourself

    

FLASH CS6 – Motion Tween

Once you have mastered creating a symbol it is time to get animating. One of the most common methods of animation in Flash is to use a Motion Tween:

 

1. Place a copy of your symbol into an empty frame on the Stage and position it where you want to start its animation

   

    

2. Click in a later frame on the main timeline, frame 25, and press F5 to insert frames.

   

    

3. Right mouse-click in the middle of the grey timeline and select Create Motion Tween

   

    

4. On the timeline, click on the last frame.

   

    

 

1. Now drag the symbol to the position on the stage you wish the animation to finish. You will notice that a dotted-line appears after your symbol that indicates how Flash has calculated the distribution sequence of the animated frames

   

    

2. Press CTRL + ENTER to test your movie.

    

    

FLASH CS6 – Convert to Symbol

When animating objects and characters on the Flash Stage it is important to know how to convert drawings and objects to symbols. It is just as important to know what the different symbols do. Follow these steps to convert an object/drawing to a symbol and to understand the different uses of each symbol:

 

1. Select the object/drawing you want to turn into a symbol

   

    

2. From the menu’s at the top select Modify – Convert to Symbol, or use the shortcut and press F8

   

    

 

1. Give the object/drawing a name

    

   

    

2. Now specify which type of symbol it will be; a Graphic, a Button or a MovieClip

    

3. Once you have made the object a symbol it will be located in the Flash Library for future use

   

    

4. To explain these three options in brief
   1. Graphic Symbol – Use for static content. These can be used to animate on the main timeline
   2. Button Symbol – These are used when making navigation elements or objects that have responses to a limited number of conditions such as a mouse roll-over, a button press, etc.
   3. MovieClip Symbol – These are commonly used to contain their own internal animation as their properties allow for animating on their internal timeline. This means that they can animate independently of the main timeline. They can also be used to respond to most aspects of Actionscript.

FLASH CS6 – Shape Tween

To create a basic shape tween in Flash CS6 you just need to follow these simple steps:

1. In Frame 1 draw a simple shape, eg. A square

   

    

2. In Frame 30 insert a new ‘Blank Keyframe’, Shortcut F7

   

    

 

1. In the new Blank Keyframe draw a circle

   

    

2. Right Mouse click in the middle of the grey timeline and select Create Shape Tween

   

    

3. Now you have a basic shape tween

   

Adobe Illustrator Tutorials

Adobe Illustrator Tutorials

This series of sites (click on the images) provide an interesting and varied set of tutorials for Adobe Illustrator. They range in level from Basic to Advanced and are suitable for students / people wishing to develop their Illustrator skills through realistic and interesting design work.