Beruflich Dokumente
Kultur Dokumente
Macromedia Flash was originally created in an effort to realize colorful animations for the web as well as to create animated GIFs. Designers, web professionals and amateurs have selected Flash 8 by many reasons. Further we will see why Flash 8 is interesting. Why should I use FLASH 8? The possibilities of Flash are extraordinary, each new version has outstripped the previous one, and the present Flash 8 is not an exception. Although its common usage is to create animations (during this tutorial we will see how easy it is) it has far more applications. They are so numerous that all web designers should learn how to use Flash. Flash has been made up in order to fix the great lack in the Internet: that is, Dynamism. This dynamism does not imply only animations but rather interactive animations, which allow users to see the web as something attractive, not static (unlike most of the pages that are made by the use of the HTML language). With Flash we can easily and quickly create animations of all types. It is easy to learn how to handle Flash, it has a friendly environment that invites us to sit down and spend hours making whatever our imagination suggests, but that is not sufficient to be preferred by professional designers. Then what is it? From Flash MX 2004 to Flash 8
There are companies that improve their products just by the economic necessity. When it happens, users promptly notice this by the few improvements in the newer version. That is not the case of Flash 8, which continues considerably improving the new versions of its products following the Macromedia tradition.
If we thought that Flash 8 MX was already insuperable, do not miss the improvements that Flash 8 provides. These improvements consist in: easy handling, higher graphic potency and integration with programs of image edition, in having ability to import video, possibility to emulate your mobile devices video oriented, and for the begginers, the ActionScript wizard has come back. Let us analyze these advantages in more details:
Attractive Designs: Flash 8 allows the using of visual effects that will ease the creation of animations, presentations and forms more attractive and professional. Moreover, it supplies a new set of tools that will help you doing this easily and faster, such us filters and blend modes, added in this version. Font Optimization: It also includes some readability options for small sized fonts, what makes our texts more comfortable to read. Also you can edit this optimization, allowing you to select the configuration preestablished for dynamic and static texts. Consolidated Libraries: Now you can search any object existent in our movies faster, browsing our open libraries from a single panel. More powerful animation: Flash 8 allows much more control of the interpolations setting a new edition mode form which you will edit the velocity the rotation, shape, color and movement are applied. More powerful graphics: Avoid the unnecessary representation of vectorial objects setting an object as a bitmap. Although the object is converted to a bitmap, the vectorial data remains the same, so, in every moment, you can convert it again to a vectorial object. Improvements in video importing: To ease the working with video formats, Flash 8 provides high-quality new independent codec, completely skinnable. Metadata Compatibility: Include your SWF files in searching engines defining a title, description and/or keywords. Mobile devices Emulator: Preview your Flash Lite compatible mobile devices movies oriented with the new emulator Flash 8 includes.
Flash 8 counts with the most handy and intuitive environment or working interface. Moreover it has an advantage because it is similar to other Macromedia programs (Dreamweaver, Freehand, Director), it makes easier to assuming Flash, and faster its management and control. We will see this after opening Flash 8 for the first time:
Working with Layers The standard View of a layer is the one that shows the image. Let's see for what the different buttons are used and how to use them. Insert Layers : As its name indicates, it is used for Inserting layers in the present scene. It inserts normal layers (in the following point the different types from layers will be seen). Add Guide Layer : Insert a kind of guide layer. It is discussed in detail the following point. Erase Layer : Erase the selected layer. Change Name: To change Name: of a layer, it is enough to double click the current name. Layer Properties: If we double click the icon , we'll be able to access a panel with the properties of the layer we've clicked. We'll be able to modify all the options that we've previously commented and some more of lesser importance.
1. Create a new flash movie (Cmd-N or Ctrl-N) and set the dimensions in the property inspector to be 400 x 400 pixels. 2. Use the oval shape tool and drag a circle out on the stage. (remember to hold down the SHIFT key to constrain your oval to a circle shape) 3. We do not need the circle to have an outline so switch to the selection tool (black arrow at the top of the tool panel - V shortcut) and click on the perimeter of the circle so that the outline is selected. Now press DELETE. 4. Make sure that your circle is 75 pixels wide. You can do this by clicking on the circle with the selection tool. Now look at your property inspector window. Click in the box that says W and type 75. Do the same for the H box.
Setting the width using the Property Inspector 5. Go to the colour panel (top right) and from the Type dropdown select radial. 6. Set up your gradient so it looks like the following. If you do not know how to do this then revisit the gradients tutorial of the drawing section of the flashworkshop website.
7. Use the bucket tool to fill your ball in with your gradient. Where you click on the ball will determine where the centre point of your gradient is. IMPORTANT - Before we can animate the ball with a motion tween it needs to be turned into a SYMBOL. 8. If the ball is still selected then press F8 to convert it to a symbol, else click on it with the selection tool then press F8. Give it the name ball and set it to be a graphic symbol. 9. Name the layer of your timeline that the ball is in as ball. You do this by double clicking on the name of the layer in the timeline. 10. Position the ball near the top of your window. 11. What we need to do is to create keyframes along the timeline at each key position of the bounce. 12. Click on frame 30 of the ball layer in the timeline. Choose Insert>Timeline>Keyframe from the menubar or press F6. If you have done this correctly your timeline should look like the following. 13. Click on the new keyframe and then use the selection tool to drag the ball to the bottom of the stage. 14. Now create another keyframe 5 frames along from the last one and select it. Click on the ball and squash it down using the free transform tool. 15. Repeat the process another 5 frames along but this time stretch the ball slightly vertically. 16. Next we are going to send the ball back to the top of the stage. In order for our animation to look smooth when it loops we need to make sure that the ball is in exactly the same place and has the same dimensions as the start frame. 17. To do this we can just copy the start frame. With the selection tool click on frame 1 of the ball layer so it turns black. Now right click and choose Copy Frames
18. 30 frames on from the last keyframe right click on the empty frame and select Paste frames 19. Your time line should now look like this.
20. All that is left to do is to create the tweens. Click on any of the grey frames of the ball layer between 2 keyframes. From the Tween dropdown of the Property Inspector select Motion. Do this for all of the sections between the keyframes.
21. Tweens are denoted by an arrow between the Keyframes of the timeline. The image below shows a motion tween. Motion Tweened frames have a BLUE background. Shape Tweens are green. If a tween has been set up incorrectly it will show a dashed arrow between the keyframes (see below).
22. Now publish your movie to see your animation - CTRL and ENTER or CMD and ENTER To Publish your flash movie and see your animation press CTRL and ENTER (pc) or CMD and ENTER (mac) 23. You will see that your animation does not look realistic because the ball does not slow down at the top of its bounce or speed up when it drops. We can control this using the ease slider. 24. Select the first tween by clicking between the first 2 keyframes. Now on the property inspector click on the ease slider and slide it all the way down to -100 (ease in). Now do the same for for the final tween but this time set it to 100 (ease out).
25. Publish your animation and see how it looks. More realistic right? 26. Is your animation too slow? If so click on the area outside of your stage and from the Property Inspector set the frame rate to 30 fps.
Step 1 First, save the photo below that we will use for this lesson as background.
Step 2 Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 420 pixels and the height to 263 pixels. Select any color as background color. Set your Flash movie's frame rate to 40 and click ok. Step 3 Call the current layer photo. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name! Step 4 Choose now File > Import > Import to stage (Ctrl+R) and import photo that you just saved in step 1 into a flash stage. While the photo is still selected, go to the Align Panel (Ctrl+K) and do the following: 1. Make sure that the Align/Distribute to Stage button is turned on, 2. Click on the Align horizontal center button and 3. Click the Align vertical center button.
Step 5 While the photo is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.
Step 6 Click on frame 50 and hit F6 key. Step 7 Go back on the first frame. Step 8 Select the Selection Tool (V) and click once on the photo to select it. Then, go to the Properties Panel (Ctrl+F3) below the stage. Select Filters tab from the left side. Click after that on the plus icon and select the Blur filter. Make the adjustments as follows:
Step 9
Right-click anywhere on the gray area between frame 1 and 50 on the timeline and choose Create Motion Tween from the menu that appears. Step 10 Create a new layer above the layer photo and name it mask. Step 11 Select mask layer and draw a circle shape like it is shown on the picture below!
Step 12 Click on frame 50 and hit F6 key. While You're still on frame 50, using the Free Transform Tool (Q) create a circle shape like it is shown on the picture below!
Step 13 Right-click anywhere on the gray area between frame 1 and 50 on the timeline and choose Create Shape Tween from the menu that appears. Step 14 Select now mask layer and convert it to a mask by right-clicking on the mask layer and selecting Mask. See the picture below.
Step 2 Press Ctrl+J key on the keyboard (Document Properties) and set your dimensions as whatever you like. Select any color as background color.Set your Flash movie's frame rate to 28 and click ok.
Step 3 Take the Text Tool (A) and type any text on the stage. For this example I have typed "flashfridge".
Step 4
While the text is still selected, press Ctrl+B key (Break Apart) to break apart it. See the picture below.
After that, choose Modify > Timeline > Distribute to Layers (Ctrl+Shift+D). Now you get this:
Step 5 Take the Selection Tool (V) and click on frame 5 of layer of the first letter and press F6 key. In my example that is letter "f". See the picture below.
Step 6 Take the Selection Tool (V) again and click once on the first frame.Then, go to the Properties Panel (Ctrl+F3). On the Left side for Tween drop down menu choose Motion, for Ease set 0 and for Rotate choose CW. See the picture below.
Step 7 Click on frame 3 of layer of the second letter, in my example that is letter "l", and press F6 key. After that, click on frame 8 and press again F6 key.
Step 8 Go back on the frame 3, and go again to the Properties Panel (Ctrl+F3).Then, repeat step 6. See the picture below.
Step 9 Click on frame 8 of layer of the first letter and press F5 key.
We're done with the first two letters. Repeat this process also for every other letters in text. Finally you have to get this:
Step 1 Open Flash and start a new project with dimension of 420 X50. Select #393838 as background color. Set your Flash movie's frame rate to 28 and click ok.
Step 2 Choose View > Rulers. Then, place the left side of background on the zero points of rulers. See the picture below.
Step 3 After that, take the Line Tool (N) and go to the Properties Panel (Ctrl+F3) below the stage. Then, make the adjustements as follows: 1. Enter #616060 for the stroke color, 2. Select Solid as the type of outline, with the line thickness set to 1.
Then, draw a vertical line on 140px points of rulers. See the picture below.
Do that also for 280px points of rulers. Now you have this:
Step 4 Take the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage again. Then, make the adjustements as follows: 1. Select a Static Text field, 2. Select a Antigoni as font, 3. Choose 20 as font size, 4. Select #858383 as color, 5. As the rendering option, select Anti-alias for readability.
Then, type on the left top corner of the first field "01". See the picture below.
Step 5 While the Text Tool (A) is still selected, go again to the Properties Panel (Ctrl+F3) below the stage. Then, make the adjustements as follows: 1. Select a Static Text field, 2. Select a Franklin Gothic Book as font, 3. Choose 12 as font size, 4. Select white as color, 5. As the rendering option, select Anti-alias for readability.
After that, type below the number "ABOUT US" or some other text. See the picture below:
Do that also for other two fields, but for 01, typ 02 and 03. Also, change the text. See the picture below.
Now, we have designed our menu, and its time for animation. Step 7 Take the Selection Tool (V) and select the first field (including text and number).
Then, press F8 key (Convert to Symbol) to convert this text and number into a Movie Clip Symbol.
Step 8 While the new made Movie Clip is still selected, go to the Properties Panel (Ctrl+F3) below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip AboutUs_mc.
Step 9 Double-click on the movie clip on stage with the Selection tool(V).You should now be inside the Movie Clip.
http://www.mothergoose.com/Games/jack_be_nimble.htm
The tutorial is mainly about how to make flash slide show with a flash slideshow software and embed it on website for sharing with more people and friends. Here we choose Wondershare Flash Gallery Factory to make website flash slideshow. So what you need are some digital photos, Flash Gallery Factory, and a piece of background music(optional). Follow the flash slideshow tutorial below to make your flash slideshow.
This tutorial will teach you how to create a drop shadow effect in Flash 8
Flash 8 has 3 drop shadow effects, i.e. inner shadow, knock out and drop shadow. You will learn how to create these effects in this tutorial. First, open a new Flash document in Flash 8 and use the text tool to write some sample text. Now convert this to a symbol by choosing the text clicking on Modify > Convert to Symbol... Give the symbol a name and click on ok. Choose the symbol and click on the Filters tab which is next to the Properties tab and use the plus (+) symbol to choose the Drop Shadow filter. You will see the Drop Shadow Filter options as shown below. Here you can change the drop shadow color, angle, distance, blur etc. Try out the options to see the changes.
You can also use Knockout and Inner shadow for different effects. See below.
lash Introduction
Macromedia's popular application Flash has redefined the way web developers approach web design. With flash the web developer is now able to create a user experience that is rich in media and relatively quick loading, especially compared to traditional methods like GIF animations. Websites made up of music, videos, and custom, graphic intensive interfaces are all possible with Macromedia Flash.
Advertise on Tizag.com
Flash Uses
In flash you can create unique text, animations, movies, web applications, games and more. Although flash is somewhat more complex than traditional web development technologies like HTML and CSS, this tutorial will give you the basics you need to immediately get started with designing your own flash projects.
Flash Pros
With flash you can entertain your users like never before. Your web site can transform from a bland text based web site into a graphical playground. Many companies that are based primarily on image and appearance have flash web sites to help show their company in the best light.
Flash Cons
If you are designing a site that you want to rank well in search engines, chances are a pure flash design will not be beneficial to you. Although search engines are getting better all the time, they still have trouble spidering and gathering information from flash sites. This difficulty usually results in flash pages performing below that of normal text based HTML web sites. Not everyone has the Macromedia Flash player installed, so it is a possibility that you will alienate some of your potential audience if you go with a pure flash design. Often web developers will create two sites: flash and normal HTML to prevent losing any visitors. Flash can also be very computationally intensive making animations and videos look great on your top of the line computer, but visitors with older technology may only see a choppy, slugglish slideshow that leaves them with a bad feeling.
Inserting KeyFrames
Select frame 25 in the timeline window and insert a KeyFrame. Select frame 50 and insert another KeyFrame. Notice that there is a shaded area from frame 1 to 50. This is your "active" area and the animation is going to occur within this area.
Now insert another KeyFrame at frame 26. Left click any frame from 27-49 and once again select the Shape Tween from the Properties window.
If you have a dotted line, rather than a solid line in your Timeline window, be sure that you followed the instructions up to this point exactly.
Tween Setup
Before we can create our tween we are going to need the shape that will be used in this Flash animation. First, create a simple oval like the one we have below in frame 1 of the timeline.
Convert to Symbol
Next, select the arrow tool and right click on the oval. Choose Convert to Symbol from the menu. When the conversion pop up appears name the shape My_Shape, select "type:" Graphic and be sure that the centered orientation is chosen from Registration.
With the circle selected, choose Window < Transform to open up the transform window. Here we will change the orientation of the circle to create a spinning effect! Leave the size the same, but change the Rotate to 170 and press ENTER (for some reason this window doesn't have a preview feature)
Control < Test Movie, you've now got a nice spinning red oval!
Flash Drawing
There are two main tools used to draw in Macromedia Flash: the Pencil tool and the Brush tool. This lesson will teach you all the need to know basics for both. Please create a new Flash file so you can follow along with this lesson.
Advertise on Tizag.com
Select a black stroke color from the Colors Window and ignore the fill color, as the pencil only uses the Stroke color.
Straighten - Straightens out your drawings as much as possible, and converts hand drawn ovals, rectangles and polygons into computer drawn ovals, rectangles and polygons.
Smooth - Finds the general curve of your strokes to smooth out the rough spots from by shaky hands or mouses that aren't very accurate.
Ink - Preserves the line you were drawing, but still smoothes out the rough spots a bit. Use this tool when the smooth option does not give you the accuracy you desire.
Here we have poorly drawn three squares using each of the line corrections mentioned above.
Straighten
Smooth
Ink
The difference between Smooth and Ink is much more subtle than either of those compared to Straighten.
Select the brush tool and notice that it too has an Options window, just like the Pencil tool. These options are:
Object Drawing - This is only selectable if you are using the normal draw mode. It functions the same as Pencils Object Drawing function, preventing unwanted interactions between your shapes and drawings. Lock Fill - Used when painting in gradients and if enabled will make use existing brush strokes to determine the gradient fill for subsequent brush strokes Brush Mode - Five modes of the Flash brush that will make many common tasks a great deal easier. More on this later Brush Size - Controls the size of the brush tool Brush Shape - Dictates the shape of your flash brush
We will be using the third from the top brush size and the circular brush shape.
Once you have the stage set up we will apply 5 brush stokes, using 5 different modes. Each line begins just below Tizag Tutorials and ends to the bottom left of the box.
1. Normal - Simply behaves like a default brush.
2. Fills - Ignores lines by only filling in the inside of shapes and areas
3. Behind - Ignores existing shapes and lines and only paints in blank areas of the Stage
5. Inside - Starting where the brush is first laid down, this brush will only paint inside that shape or area.
We are going to be working with a lot of area that isn't on the stage, so it will make your life easier if you change the viewing area to 50% to shrink the Stage and show more of the "imaginary" Flash Stage.
With Frame 1 selected in the Timeline window create a new textbox by click-dragging the Text Tool just below the the viewable stage area. Your box should be about same size as we have.
Copy and paste the following text into this new textbox: "In a tutorial far, far away there was a lesson that was so incomprehensible that not even the Great One could decipher its meanings and yet people still fussed over its text everyday in hopes of some revelation, but they were to be disappointed because the tutorial was written in jest by the Not So Great One to get back at the Great One for being less than great."
While still in frame 250, drag the text field above the viewable Stage area.
All you need to do now is just right-click any frame from 2-249 and choose Create Motion Tween and you have finished creating Text Scrolling! Go to Control < Test Movie to view your masterpiece. You may view our finished Flash project or download our Raw Flash file if you are having trouble doing it on your own.
Input Text from the Text Type drop down selector Enable - Show Border Around Text Multiline from the Line Type drop down selector
Now drag a Text Input Box like we have below. Note: We want to make it large enough so the scrollbar doesn't get squished inside this textbox.
To open up a list of the droppable interface components that Macromedia Flash has go to Window < Components. Inside the Components window, scroll down until you see User Interface and Expand this directory. Scroll to the very bottom of the User Interface directory until you get to UIScrollBar.
Drag and drop this scrollbar to the righthand inside area of the text input box. If you do not place it inside the input box then the ScrollBar will simply float and not function as we want it to. The scrollbar can be seen below, outlined in blue.
Next Control < Test Movie and type in a bunch of text until you need the scroll bar.
Flash Banner
This lesson will guide you through the process of creating a basic flash banner that meets the advertising industry standards.
Advertise on Tizag.com
Press OK
Motion Tween
We will actually be creating two types of motion tweens in this lesson. Before we begin, rename the default layer "Layer 1" that is in the Timeline window to "Potential".
Choose the Text Tool from the Tools menu and choose the following settings for your text from the Properties window: Static Text, Font: Verdana, Fill Color: Black, Font Size: 15
Left click on the stage and type "Unlock Your Potential" and center this text the best you can.
Now insert three keyframes at frames 57, 60 and 135. We will be using these frames soon. We are now going to add "Tizag Tutorials" to our flash banner. Create a new layer and rename the layer "Tizag Title".
Insert KeyFrames at 55, 60 and 135. Select frame 55 and choose the Text Tool from the Tools window. Set the following properties: Fill Color #FF6600 (orangey), Static Text, Font: Verdana, Font Size: 28
With your mouse just above the viewable Stage area Left-Click to create a new Static Text field and type "Tizag Tutorials" and center it.
Select the 60th KeyFrame in the Timeline window for layer "Potential" and select the text field which contains "Unlock Your Potential". We are going to squash this text down to about half of its original height. In the Properties window, enter 10 into the Height (marked with H:) text field and press enter. Then drag your text down a bit, as we have done.
Select the Tizag Title Layer, while still in frame 60, drag the text field "Tizag Tutorials" so that it rests right on top of "Unlock Your Potential".
Right click on frame 58 and select Create Motion Tween for both the Tizag Title and Potential layers.
Shape Tween
Let's move on to our shape tween. Add a new layer to the Timeline window and name it Bubbles.
Select the Oval tool from the Tools window and create to small blue circles (by holding the shift key when you create the shape). Place one circle in the top left.
Use the arrow tool to select that circle and then copy and paste an identical circle. Place this copy in the top right section of the banner. Insert KeyFrames at frame 60, 110 and 135 in the Timeline window for the Bubbles layer. In the Timeline window for the Bubbles layer select frame 60. We are now going to manipulate our shapes. With the Selection Tool from the Tools window select the left circle and drag it so it is just a bit to the left of "Tizag Tutorials". Next, select the right circle and drag it so that it is equally far away on the right side of "Tizag Tutorials".
Select the left circle and press Ctrl+T to bring up the Transform window, if it is not already displayed. Check the constrain checkbox, enter in 300% for the new size
Press enter. Your left circle should now look like this:
Left-click on any from frame 2-59 in the Timeline window for the Bubbles layer. Within the Properties layer is a Tween drop down selector, choose Shape from this selector to create a Shape Tween from frame 1-60 for the Bubbles layer. Left-click anywhere between frame 61 and 134 and choose the Shape tween from the Properties window.
Test It Out!
Now that you have completed this long and arduous tutorial, go ahead and choose Control < Test Movie from the menu and check out your flash animation! Hopefully you followed all the directions right, but if it doesn't look like ours you can download our tizagBanner.fla and see what's the matter.
Display:
You may view our finished Flash project or download our Raw Flash file if you are having trouble doing it on your own.
Flash Forms
Flash is great for showing movies and entertaining animations, but did you also know that you can gather information from your users with the use of Flash? Built into Macromedia Flash is the capability to do everything you can do with HTML forms.
Advertise on Tizag.com
This lesson will create a Flash Form that can be processed by ASP, PHP, or anything else that you want to use to process Form Data. If you would like to learn more about processing Form Data with PHP or ASP see our PHP Form Data Processing lesson or our ASP Form Data Processing Lesson.
Create two text input fields with the text "Name:" and "Homecity:". Your text fields should look something like this:
Now let's make sure they are lined up properly. With the arrow tool drag a box around both text fields to select them, then choose from the menu Modify < Align < Right to get a clean lineup.
Create two input boxes to the right of Name: and Home: that look something like this:
Now get them aligned by selecting both boxes with the arrow tool and going to the menu and choosing Modify < Align < Left
Use the arrow tool to select the text input field to the right of Name: and set Var: field to "Name".
Flash Button
This lesson will walk you through the process of creating a button in Macromedia Flash. Remember, Macromedia has included a large number of premade buttons in the common libraries. Access them by going to the menu and selecting Windows < Common Libraries < Buttons!
Advertise on Tizag.com
Select the red fill and the black stroke from the Properties window:
Hold shift and left click on the stage and drag to create a circle like the one we have below.
Select the arrow tool from the Tools menu and double click the circle to select both the red fill and the black stroke. Right click the circle and choose Convert to Symbol Name: My_Button, Behavior: Button, Registration: Center/Center
Press OK With the arrow tool, double click My_Button to bring up the symbol edit mode for My_Button. We are now going to change the behavior when the user mouses over the button. Choose the Over column from the timeline for My Button. Insert KeyFrame in the Over state. (A shortcut for inserting KeyFrames is the F6 key)
With frame Over still selected, double-click the circle to select it and choose a blue fill from the Properties window.
Select Down in the Timeline for My_Button and insert a KeyFrame for Down. With frame Down still selected, double-click the circle to select it and give it a yellow fill using the Properties window.
Double click getURL to create a new getURL action, which also brings up the text fields you will need to manipulate. In the URL field type in: http://www.tizag.com In the Window field type or select: _blank
Flash Animation
The overarching purpose of Flash is to add excitement to static and boring web site design. Although you can still make sparkling web pages with images, HTML code, and a bit of hard work you can't really create efficient animations that intrigue and excite your visitor.
Advertise on Tizag.com
Macromedia Flash provides a means for creating these interactive, entertaining web pages and movies by allowing web developers to create animations quickly and efficiently. These animations that Flash is so famous for are created with the use of tweening.
lessons will go into more detail on how to utilize these two types of tween to create Flash animations.