Archive for the ‘Tutorial’ Category

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/

Advertisements

FLASH CS6 – Layer Mask

Posted: December 5, 2013 in Adobe Flash, Tutorial
Tags: ,

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.

     

     

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

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

 

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….

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

     

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.