http://www.mono-1.com/monoface/main.html
http://okaydave.com/
http://pascalcampion.com/door.swf
http://www.youtube.com/watch?v=sbRom1Rz8OA
Enjoy
Tuesday, April 28, 2009
Saturday, April 25, 2009
Thursday, April 23, 2009
Car with rotating wheels step by step
This is a slightly different way, hopefully easier to understand.
Create a new document.
On the stage draw a wheel using the oval tool. Make a few spokes with the line tool in order to be able to see the rotation.
Select the wheel and convert it into a graphic symbol (under the modify menu)
Under the insert menu select new symbol. Make it a movie clip.
This will put you inside the symbol. Notice the mc icon next to the scene 1.
Drag the wheel from the library(the graphic you made before) to the empty white space. Now you have a graphic symbol inside a movie clip.
On the timeline of the movie clip (make sure you are still inside it) animate the graphic applying a rotation.
Next click on scene 1 under the timeline. This will bring you to the main timeline.
If the graphic is still there get rid of it. Then pull from the library two instances of the movie clip and set them side by side as wheels. Draw a body for your car.
Select both wheels and the car body and turn them into a graphic symbol called car.
Animate the car on the main timeline.
Create a new document.
On the stage draw a wheel using the oval tool. Make a few spokes with the line tool in order to be able to see the rotation.
Select the wheel and convert it into a graphic symbol (under the modify menu)
Under the insert menu select new symbol. Make it a movie clip.
This will put you inside the symbol. Notice the mc icon next to the scene 1.
Drag the wheel from the library(the graphic you made before) to the empty white space. Now you have a graphic symbol inside a movie clip.
On the timeline of the movie clip (make sure you are still inside it) animate the graphic applying a rotation.
Next click on scene 1 under the timeline. This will bring you to the main timeline.
If the graphic is still there get rid of it. Then pull from the library two instances of the movie clip and set them side by side as wheels. Draw a body for your car.
Select both wheels and the car body and turn them into a graphic symbol called car.
Animate the car on the main timeline.
Monday, April 20, 2009
CLASS3
About symbols
A symbol is a graphic, button, or movie clip that you create once in the Flash authoring environment.
A symbol can include artwork that you import from another application. Any symbol that you create automatically becomes part of the library for the current document.
An instance is a copy of a symbol located on the Stage or nested inside another symbol. An instance can be different from its parent symbol in color, size, and function. Editing the symbol updates all of its instances, but applying effects to an instance of a symbol updates only that instance.
Using symbols in your documents dramatically reduces file size; saving several instances of a symbol requires less storage space than saving multiple copies of the contents of the symbol. For example, you can reduce the file size of your documents by converting static graphics, such as background images, into symbols and then reusing them. Using symbols can also speed SWF file playback, because a symbol needs to be downloaded to Flash® Player only once.
Share symbols among documents as shared library assets during authoring or at runtime. For runtime shared assets, you can link assets in a source document to any number of destination documents, without importing the assets into the destination document. For assets shared during authoring, you can update or replace a symbol with any other symbol available on your local network.
Graphic symbols and Movie clips
Use graphic symbols for static images and to create reusable pieces of animation that are tied to the main Timeline. Graphic symbols operate in sync with the main Timeline. Interactive controls and sounds won’t work in a graphic symbol’s animation sequence. Graphic symbols add less to the FLA file size than buttons or movie clips because they have no timeline.
Use movie clip symbols to create reusable pieces of animation.
Movie clips have their own multiframe Timeline that is independent from the main Timeline—think of them as nested inside a main Timeline that can contain interactive controls, sounds, and even other movie clip instances. You can also place movie clip instances inside the Timeline of a button symbol to create animated buttons. In addition, movie clips are scriptable with ActionScript®.
A symbol is a graphic, button, or movie clip that you create once in the Flash authoring environment.
A symbol can include artwork that you import from another application. Any symbol that you create automatically becomes part of the library for the current document.
An instance is a copy of a symbol located on the Stage or nested inside another symbol. An instance can be different from its parent symbol in color, size, and function. Editing the symbol updates all of its instances, but applying effects to an instance of a symbol updates only that instance.
Using symbols in your documents dramatically reduces file size; saving several instances of a symbol requires less storage space than saving multiple copies of the contents of the symbol. For example, you can reduce the file size of your documents by converting static graphics, such as background images, into symbols and then reusing them. Using symbols can also speed SWF file playback, because a symbol needs to be downloaded to Flash® Player only once.
Share symbols among documents as shared library assets during authoring or at runtime. For runtime shared assets, you can link assets in a source document to any number of destination documents, without importing the assets into the destination document. For assets shared during authoring, you can update or replace a symbol with any other symbol available on your local network.
Graphic symbols and Movie clips
Use graphic symbols for static images and to create reusable pieces of animation that are tied to the main Timeline. Graphic symbols operate in sync with the main Timeline. Interactive controls and sounds won’t work in a graphic symbol’s animation sequence. Graphic symbols add less to the FLA file size than buttons or movie clips because they have no timeline.
Use movie clip symbols to create reusable pieces of animation.
Movie clips have their own multiframe Timeline that is independent from the main Timeline—think of them as nested inside a main Timeline that can contain interactive controls, sounds, and even other movie clip instances. You can also place movie clip instances inside the Timeline of a button symbol to create animated buttons. In addition, movie clips are scriptable with ActionScript®.
Clarification about Shapes and Drawing objects
The default drawing mode automatically merges shapes that you draw when you overlap them. When you draw shapes that overlap each other in the same layer, the top-most shape cuts away the part of the shape underneath it that it overlaps. In this way, drawing shapes is a destructive drawing mode. For example, if you draw a circle and overlay a smaller circle on top of it, and then select the smaller circle and move it, the portion of the second circle that overlaid the first circle is removed.Creates shapes referred to as drawing objects. Drawing objects are separate graphic objects that do not automatically merge together when overlaid. This lets you overlap shapes without altering their appearance if you move them apart, or rearrange their appearance. Flash creates each shape as a separate object that you can individually manipulate.
When a drawing tool is in Object Drawing mode, the shapes you create with it are self-contained. The stroke and fill of a shape are not separate elements, and shapes that overlap do not alter one another. When you select a shape created using Object Drawing mode, Flash surrounds the shape with a rectangular bounding box to identify it.
When a drawing tool is in Object Drawing mode, the shapes you create with it are self-contained. The stroke and fill of a shape are not separate elements, and shapes that overlap do not alter one another. When you select a shape created using Object Drawing mode, Flash surrounds the shape with a rectangular bounding box to identify it.
Monday, April 13, 2009
CLASS 2
SHAPE TWEENS STEP BY STEP
The following steps show how to create a shape tween from frame 1 to frame 30 of the Timeline. However, you can create tweens in any part of the Timeline that you choose.
1. In frame 1, draw a square with the Rectangle tool.
2. Select frame 30 of the same layer and add a blank keyframe by choosing Insert > Timeline > Blank Keyframe or pressing F7.
3. On the Stage, draw a circle with the Oval tool in frame 30. You should now have a keyframe in frame 1 with a square and a keyframe in frame 30 with a circle.
4. In the Timeline, select one of the frames in between the two keyframes in the layer containing the two shapes.
5. Choose Insert > Shape Tween. Flash interpolates the shapes in all the frames between the two keyframes.
6. To preview the tween, scrub the playhead across the frames in the Timeline, or press the Enter key.
7. To tween motion in addition to shape, move the shape in frame 30 to a location on the Stage that is different from the location of the shape in frame 1. Preview the animation by pressing the Enter key.
8. To tween the color of the shape, make the shape in frame 1 a different color from the shape in frame 30.
9. To add easing to the tween, select one of the frames between the two keyframes and enter a value in the Ease field in the Property inspector. Enter a negative value to ease the beginning of the tween. Enter a positive value to ease the end of the tween.
11. Control shape changes with shape hints
To control more complex or improbable shape changes, you can use shape hints. Shape hints identify points that should correspond in starting and ending shapes. For example, if you are tweening a drawing of a face as it changes expression, you can use a shape hint to mark each eye. Then, instead of the face becoming an amorphous tangle while the shape change takes place, each eye remains recognizable and changes separately during the shift.
Shape hints contain letters (a through z) for identifying which points correspond in the starting and ending shapes. You can use up to 26 shape hints.
Shape hints are yellow in a starting keyframe, green in an ending keyframe, and red when not on a curve.
For best results when tweening shapes, follow these guidelines:
• In complex shape tweening, create intermediate shapes and tween them instead of just defining a starting and ending shape.
• Make sure that shape hints are logical. For example, if you’re using three shape hints for a triangle, they must be in the same order on the original triangle and on the triangle to be tweened. The order cannot be abc in the first keyframe and acb in the second.
• Shape hints work best if you place them in counterclockwise order beginning at the top-left corner of the shape.
Use shape hints
1. Select the first keyframe in a shape-tweened sequence.
2. Select Modify > Shape > Add Shape Hint. The beginning shape hint appears as a red circle with the letter a somewhere on the shape.
3. Move the shape hint to a point to mark.
4. Select the last keyframe in the tweening sequence. The ending shape hint appears somewhere on the shape as a green circle with the letter a.
5. Move the shape hint to the point in the ending shape that should correspond to the first point you marked.
6. To view how the shape hints change the shape tweening, play the animation again. To fine-tune the tweening, move the shape hints.
7. Repeat this process to add additional shape hints. New hints appear with the letters that follow (b, c, and so on).
View all shape hints
Select View > Show Shape Hints. The layer and keyframe that contain shape hints must be active for Show Shape Hints to be available.
Remove a shape hint
Drag it off the Stage.
Remove all shape hints
Select Modify > Shape > Remove All Hints.
The following steps show how to create a shape tween from frame 1 to frame 30 of the Timeline. However, you can create tweens in any part of the Timeline that you choose.
1. In frame 1, draw a square with the Rectangle tool.
2. Select frame 30 of the same layer and add a blank keyframe by choosing Insert > Timeline > Blank Keyframe or pressing F7.
3. On the Stage, draw a circle with the Oval tool in frame 30. You should now have a keyframe in frame 1 with a square and a keyframe in frame 30 with a circle.
4. In the Timeline, select one of the frames in between the two keyframes in the layer containing the two shapes.
5. Choose Insert > Shape Tween. Flash interpolates the shapes in all the frames between the two keyframes.
6. To preview the tween, scrub the playhead across the frames in the Timeline, or press the Enter key.
7. To tween motion in addition to shape, move the shape in frame 30 to a location on the Stage that is different from the location of the shape in frame 1. Preview the animation by pressing the Enter key.
8. To tween the color of the shape, make the shape in frame 1 a different color from the shape in frame 30.
9. To add easing to the tween, select one of the frames between the two keyframes and enter a value in the Ease field in the Property inspector. Enter a negative value to ease the beginning of the tween. Enter a positive value to ease the end of the tween.
11. Control shape changes with shape hints
To control more complex or improbable shape changes, you can use shape hints. Shape hints identify points that should correspond in starting and ending shapes. For example, if you are tweening a drawing of a face as it changes expression, you can use a shape hint to mark each eye. Then, instead of the face becoming an amorphous tangle while the shape change takes place, each eye remains recognizable and changes separately during the shift.
Shape hints contain letters (a through z) for identifying which points correspond in the starting and ending shapes. You can use up to 26 shape hints.
Shape hints are yellow in a starting keyframe, green in an ending keyframe, and red when not on a curve.
For best results when tweening shapes, follow these guidelines:
• In complex shape tweening, create intermediate shapes and tween them instead of just defining a starting and ending shape.
• Make sure that shape hints are logical. For example, if you’re using three shape hints for a triangle, they must be in the same order on the original triangle and on the triangle to be tweened. The order cannot be abc in the first keyframe and acb in the second.
• Shape hints work best if you place them in counterclockwise order beginning at the top-left corner of the shape.
Use shape hints
1. Select the first keyframe in a shape-tweened sequence.
2. Select Modify > Shape > Add Shape Hint. The beginning shape hint appears as a red circle with the letter a somewhere on the shape.
3. Move the shape hint to a point to mark.
4. Select the last keyframe in the tweening sequence. The ending shape hint appears somewhere on the shape as a green circle with the letter a.
5. Move the shape hint to the point in the ending shape that should correspond to the first point you marked.
6. To view how the shape hints change the shape tweening, play the animation again. To fine-tune the tweening, move the shape hints.
7. Repeat this process to add additional shape hints. New hints appear with the letters that follow (b, c, and so on).
View all shape hints
Select View > Show Shape Hints. The layer and keyframe that contain shape hints must be active for Show Shape Hints to be available.
Remove a shape hint
Drag it off the Stage.
Remove all shape hints
Select Modify > Shape > Remove All Hints.
Thursday, April 9, 2009
Resources for class 1
About Raster and Vector Images:
http://en.wikipedia.org/wiki/Raster_to_vecto
http://www.logodesignworks.com/blog/vector-graphics-and-raster-graphics-difference
Video Describing the CS4 Workspace:
http://previews.learnflash.com/previews/introduction-flash-cs4/4.html
http://en.wikipedia.org/wiki/Raster_to_vecto
http://www.logodesignworks.com/blog/vector-graphics-and-raster-graphics-difference
Video Describing the CS4 Workspace:
http://previews.learnflash.com/previews/introduction-flash-cs4/4.html
Monday, April 6, 2009
Class 1 April 2009
• Using Flickr as the source of shared images
• Matching color, perspective, direction and size when combining images
• Duplicating a layer in Photoshop
• Using the Navigator tool
• Using the Pen tool to create a path
• Using the Direct select and the Bezier curve tools.
• Changing the path into a selection
• Using the Select Menu
• Manipulating layers
• Using the Blending Options/ Layer Effex
Cutting out the elephant figure from the jpg image
Duplicate the background layer by dragging the layer to the new layer symbol at the bottom of the Layer Window and letting it go or under Layer Menu duplicate layer. Take the Pen Tool from the tool box (make sure it is the Pen Tool and not one of the sub menu tools). Under the top menu, second row select path. You want to make a path not a shape. With the pen start laying anchor points around the elephant till you close the path. Use the Direct Select Tool to reposition the points and the Convert Point Tool to create Bezier curves where needed.
After your path is completed click on the Path Window tab. If the Path window is not opened you’ll find it under the Window menu. Make sure you have the path selected. At the bottom of the path window you will find a dotted circle. In order to load the path as a selection click on it. The path changes into a selection. Under the Select menu select inverse and you are ready to cut the background around the elephant.
• Matching color, perspective, direction and size when combining images
• Duplicating a layer in Photoshop
• Using the Navigator tool
• Using the Pen tool to create a path
• Using the Direct select and the Bezier curve tools.
• Changing the path into a selection
• Using the Select Menu
• Manipulating layers
• Using the Blending Options/ Layer Effex
Cutting out the elephant figure from the jpg image
Duplicate the background layer by dragging the layer to the new layer symbol at the bottom of the Layer Window and letting it go or under Layer Menu duplicate layer. Take the Pen Tool from the tool box (make sure it is the Pen Tool and not one of the sub menu tools). Under the top menu, second row select path. You want to make a path not a shape. With the pen start laying anchor points around the elephant till you close the path. Use the Direct Select Tool to reposition the points and the Convert Point Tool to create Bezier curves where needed.
After your path is completed click on the Path Window tab. If the Path window is not opened you’ll find it under the Window menu. Make sure you have the path selected. At the bottom of the path window you will find a dotted circle. In order to load the path as a selection click on it. The path changes into a selection. Under the Select menu select inverse and you are ready to cut the background around the elephant.
Subscribe to:
Comments (Atom)
