Proposal

download proposal

Contoh-Contoh Action Script Adobe Flash

Action script untuk lagu:

Pada frame di beri action seperti berikut:

================

musik = new Sound();

musik.attachSound(“morning glories”);

musik.start(0);

================

Pada libraries : untuk file yang akan di jadikan lagu klik kanan pilih linkage, Pastikan musik.attachSound (“nama”) sama.

————————————————————————————————————————————————–
Action script untuk load movie:

================

on (release, keyPress “<Enter>”) {

loadMovieNum(“standarkompetensi.swf”, 0);

}

================

Pastikan nama (“*.swf”, 0) sama dengan yang di file.

………………………………………………………………………………………………………………………………………………………………….

Action script untuk next dan prev frame baik bila di klik maupun lewat keyboard:

Untuk next frame

===============

on (release, keyPress “<Right>”) {

nextFrame();

}

===============

Untuk prev frame

===============

on (release, keyPress “<Left>”) {

nextFrame();

}

===============

Catatan: pastikan di setiap frame yang kita buat di beri action: stop();

————————————————————————————————————————————————–

Tutorial Vectorian Giotto Cara Membuat Efek Teks Filter

First create a new blank document in which you will make your animation by clicking File from the menu, then New (Ctrl+N).

• Change the document properties:
  Click Modify from the menu, then Document. This will open a Document Properties dialogue screen (shortcut Ctrl+J).
  Change the color of the background to black.
  Change the value in the Frame rate box to 25 fps.

• Now enter a text that will be an object of animation.
  Select Text Tool (T) and click your mouse anywhere on your stage and drag to the right. You can se a rectangular area forming in which you can enter your text. Release the mouse button to confirm the size of your textbox.
  Type in the box (for example) “King for a day foll for a lifetime”.
  In the properties window change the font and size (we changed it to Century Gothic and 30 size).
  Change the color of the text in the Brust menu (we used silver gray).

• Now convert your text to a movie clip by pressing F8.
  Convert to Symbol window will appear, type in the name of your movie clip (“My Text” for instance), select Movie clip, then click OK.
  Double-click on your movie clip in the Library to enter its timeline.

• Now select the text and check your Filters window. You will see this icon on it. When you click on the icon you will get the list of available text filters. In this tutorial we are interested only in Blur and Drop Shadow. Find more on filters and filter options in the Giotto user manual.

• Add the Blur filter.
  In the Blur Y box type value 100.
  Under the Quality select High.

• Now add the Drop Shadow filter.
  In the Strength box type value 60.
  Under the Quality select High.
  Under Color select other color than black (we chose Dark Red).
  In the Distance box type value 15.

• Select frame 35 and click F6 to create a Keyframe.
• In the newly created keyframe click on the text and then on the Blur filter in the Filters window.
  Change the value in the Blur X and Blur Y to 0.
• Now click anywhere between two keyframes and create motion tween.

• That’s it! Now click Ctrl+Enter to play your animation in the external viewer.

This tutorial gives a general idea of how these effects in Giotto work. We encourage yo to experiment with these effects and their options as you like. If some of the options are unclear to you please consult Giotto user manual.

Tutorial Vectorian Giotto Cara Membuat Animasi Teks Part 2

First create a new blank document in which you will make your animation by clicking File from the menu, then New (Ctrl+N).

• Change the document properties:
  Click Modify from the menu, then Document. This will open a Document Properties dialogue screen (shortcut Ctrl+J).
  Change the color of the background to black.
  Change the value in the Frame rate box to 25 fps.

• Select Text Tool (T) and type your text on the stage (our text was Vectorian Inc.).
• Now change the font to some other (we changed it to Helvetica Slim Black Italic YU) and change the font size to 30.

• Center your text on stage by cutting it (Ctrl+X) and than pasting it (Ctrl+V).
• Select your text and press F8 to convert the text to symbol (movie clip).
  Convert to Symbol window will appear, type in the name of your movie clip (“My Text” for instance), select Movie clip, then click OK.
  Double-click on your movie clip in the Library to enter its timeline.

• You don’t need to worry about the color of the text because almost each effect can take control of this aspect of your object/text.
• Right-click on the text and from the dropdown menu select Effect. A new dropdown submenu will appear, from it select Add.
  A new Effects screen will appear. From here you can select, customize and preview any effect on your object.
  For more information on this screen and options in it, please consult the Giotto user manual.

• In the Presets box choose Spin in and unspin preset.
  In the Settings box change the following values:
  In Effect sub-box:
  
  • Color Effect to Change Transparency
  • Set Alpha in Color to 64

• In Text Color sub-box:
  • Custom brush to Three-color gradient
  • Brush Color 1 to Blue (0,75,196,255)
  • Brush Color 2 to Yellow (255,194,14,255)
  • Brush Color 3 to Red (139, 0, 0, 255)
  • Custom pen to Custom pen
  • Pen color to Black
  Now click OK to apply this effect on your text.
  You now have an independent movie clip that you can put in your main timeline.
• Try if your animation works by clicking Ctrl+Enter.

This tutorial gives a general idea of how these effects in Giotto work. We encourage yo to experiment with these effects and their options as you like. If some of the options are unclear to you please consult Giotto user manual.

Tutorial Vectorian Giotto Cara Mengatur Canvas

First create a new blank document in which you will make your animation by clicking File from the menu, then New (Ctrl+N).

• Optionally you can open the preexisting animation file and change the frame rate within it by clicking File menu, then Open (Ctrl+O), then select the existing Vectorian Giotto animation file.

• When you create a new blank document in which you will make your animation, click Modify from the menu, then Document. This will open a Document Properties dialogue screen (shortcut Ctrl+J).
• Third option on the screen is Frame rate. Default is 12 fps.
• Change the value in the Frame rate box by typing in wanted frame rate.
• Note that the higher the frame rate of an animation the file will be larger in size.

STAGE

What is stage?

Stage is the blank panel on a gray background that you see when you open a new document in Giotto. Only that what is shown on the stage will be visible in the final output of your animation. You can create an animation all over the workspace, including gray background area, but only the elements that pass the stage will be visible in the final animation.

How do I change the size of the stage?

• While your document is open click Modify, then Document (Ctrl+J) to open the Document Properties panel.
• In this panel you can see the first option is called Dimensions. The dimensions are width and height, and they are presented in pixels by default (to change ruler units see tutorial 1.23)
• Change the values in the appropriate boxes as you see fit.

How do I change the background color of the stage?

• While your document is open enter the Document Properties panel (Ctrl+J).
• Second option on the panel is Background color. You can choose from the drop menu any default color for your background or you can click Custom Color option to pick the color from the advanced color mixer.

How do I change the ruler units of my document?

• In the Document Properties panel (Ctrl+J) the fourth option is Ruler units.
• From the dropdown menu choose the wanted units for your document.
• You can choose between pixels, points, inches and millimeters.

Tutorial Vectorian Giotto Cara Membuat Animasi Teks

First create a new blank document in which you will make your animation by clicking File from the menu, then New (Ctrl+N).

• Change the document properties:
  Click Modify from the menu, then Document. This will open a Document Properties dialogue screen (shortcut Ctrl+J).
  Under Dimensions enter values 250 for width and 150 for height.
  Change the color of the background to a light shade of gray.
  Change the value in the Frame rate box to 25 fps.

• Now enter a text that will be an object of animation.
  Select Text Tool (T) and click your mouse anywhere on your stage and drag to the right. You can se a rectangular area forming in which you can enter your text. Release the mouse button to confirm the size of your textbox.
  Type in the box (for example) “Cell@r Door”.

• Select your text by clicking on it by mouse – note that the properties panel (under your stage by default) now has many available options. These are the tools for modifying your text. For each option in detail please consult Giotto help file.
  Now we will modify our text a little bit. We chose Harrington font and changed the size to 16.
  You may now need to resize your textbox for your text to be in the same line. Just double-click on the textbox with Selection Tool (V). You will see four squares in the corners of the textbox. You can use this points to click and drag to resize your textbox.

• To center your text on the stage select your textbox then cut (Ctrl+X) and paste (Ctrl+V).
• As we are working in our main timeline, it would be easier if we would convert the text to a symbol (movie clip) to make it have its own independent timeline. Select your textbox and click Modify than Convert to Symbol (shortcut F8).
  Convert to Symbol window will appear, type in the name of your movie clip (“My Text” for instance), select Movie clip, then click OK.
  You will see that the textbox is now outlined in red, this indicates that a symbol in the main timeline.
  Double-click on your movie clip in the Library to enter its timeline.

• For us to create the animation from the beginning of the tutorial we will need to animate each letter separately. This is why we need to break apart the letters of the word so that each letter would be a separate animation object.
  To do this follow these steps:
  With your Selection Tool (V) select the textbox.
  Click Modify, then click Convert Text to Curves (Ctrl+Shift+C).
  You can now see in your Movie Browser window that under the layer you now have several more shapes (10 in our case) and the original text. This means that now each letter is made to be an individual shape and that the original text box is still preserved. These two now overlap.
  Select the text and delete it (Del). There are now only individual letter shapes in your movie clip.

• Now with the Selection Tool select all letters and right-click on any of the letters. From the drop-down menu select “Distribute to layers” option. This will move each individual letter to a separate layer. You can then rename your layers by the letters for more convenient work.
  Layers enable separate timelines in one movie clip. For more information on layers refer to the Giotto help file.
  You can also resize your timeline window if you can’t see all the layers.

• Now we will start with animating. The goal of our animation is the appearance of the text “Cellar Door” at the end, this means that our static position of the letters in the first frame should be the final position of our letters in the last frame of the animation.
  Select the 75th frame of the timeline of every layer in our movie clip by clicking the topmost layer at frame 75 and dragging down.
  Right-click on the selection and select “Insert Keyframe”.
  You can now see that the timeline of your layers is colored in gray and ends with a frame with a black dot which denotes the Keyframe.

• Now click on the first frame on any layer and begin designating starting positions of your letters. First select layers with two letters “o” in “Door”. We will make them appear on the stage without any movement. But, we also need to make them begin appearing after all the other letters are in place.
  Select both “o” letters and then from the Shape window click on the A (Alpha) option. You will see a slider, drag it to the opposite end until the letters disappear.
  Alpha is the parameter of each shape designating its transparency, 255 value means fully opaque and 0 means total transparency. For more information on Transparency refer to the Giotto user manual.

• Now select frame 50 of all layers and add Keyframe.
• Click again on the first frame and start rearranging letters of the text.
  Optionally (in our case):
  We moved symbol @ to the left of the stage and all other letters up or down with different starting positions (“altitude”).
  Select the layer “a” with the @ symbol in it. Add a Keyframe in the frame 25.
  Now click on the frame 50 and select the @ symbol. Change the color of the letter to orange. Do this by selecting the @ symbol and then clicking on the Brush option in the toolbar, from the dropdown menu select color orange.

• With all letters rearranged we need to make them transparent too, so that their appearance would look more smooth.
  Select frame 1 of all off the letters in all the layers and drag the Alpha slider in the Shape window from 255 to 0.
• On each part of the timeline of each layer right-click and select Create Motion Tween. This will create the animation of the letters.

• Check your work by pressing Ctrl-Enter. This will show your animation in an external player. It should look something like this:

• Now let’s make this animation more fun! Select frame 120 of all layers and create keyframes.
• On each layer take the appropriate letter, move it away from the text in a random direction and apply Alpha 0 to each except the @ symbol.
• Create motion tween on each timeline from 75 to 120.
• Click Go to Movie. This will get you to the main timeline screen.

• To be able to control your animation from the player (options like loop or similar) you must designate how long will the main movie last.
  Right-click on the frame 120 and create a keyframe.
• Play your animation. We got something like this:

The goal of this tutorial was to show you how easily simple text animations can be made with Giotto, without using advanced options. In next tutorial we will create simple animation by using drawn shapes.

Tutorial Vectorian Giotto Cara Menggunakan Shape Tweening

In Giotto create a new empty document (Ctrl+N).

• Select Rectangle Tool (R) and draw a medium sized rectangle on the stage.
• Select the rectangle with the Selection Tool (V). Change the color of the brush in the rectangle by choosing the color from the Brush menu in the Shape window or by clicking Brush dropdown menu on the toolbar.

• Optionally you can convert the rectangle into a symbol by clicking F8 (Modify/Convert to Symbol). This will open Insert into library panel where you can name the symbol and decide whether it will act as a separate movie clip or a button. For our purposes now we need to make it a separate movie clip.
• This will be very useful for you in the future because in this way you can make separate animation from an object that will be stored in a separate file in the Library for you to use later with other animated objects. For this simple animation, however, it is not necessary.

• If you created a symbol from the object double-click new movie clip that appeared in your Library.
• Right-click on 40th frame on the timeline. From the drop menu choose Create Keyframe.
• Select this keyframe if it is not selected already.
• Now pick Subselection Tool (A) from the toolbar. You will see your object will be covered in white dots (as it is selected) and its border will be green with four green dots in the corners of the rectangle.

• Now select the object with Selection Tool (V) and change the brush of the object into any other color.

• Right-click anywhere on the gray strip between frames 1 and 40. From the drop menu choose Create Motion Tween.

• Now the gray strip has turned blue and there is a straight line on it – this means that shape tween is in place.

• You can now test your animation by clicking on the first frame and then pressing Enter on your keyboard, or you can test it in an external player by pressing Ctrl-Enter.
• Your animation should now look something like this.

• You can save your animation in a vgd format as a Vectorian Giotto Document or export it as a swf movie file.

Tutorial Vectorian Giotto Menggunakan Motion Tweening

In Giotto create a new empty document (Ctrl+N).

• Select Oval Tool (O) to draw a circle right of the stage in the gray area.
• Select the circle using the Selection Tool (V) – note that the object is now covered with a net of white dots, this shows that the object is selected.

• Optionally you can convert the circle shape into a symbol by clicking F8 (Modify/Convert to Symbol). This will open Insert into library panel where you can name the symbol and decide whether it will act as a separate movie clip or a button. For our purposes now we need to make it a separate movie clip.

• This will be very useful for you in the future because in this way you can make separate animation from an object that will be stored in a separate file in the Library for you to use later with other animated objects. For this simple animation, however, it is not necessary.
• If you created a symbol from the object double-click new movie clip that appeared in your Library.
• We will now use the timeline above the stage to create the motion tween animation.

• At frame 1. you can see a black dot, it means that this frame is a keyframe. Keyframes here will represent target destinations for our object of animation.
• Right-click, for instance, on frame 40. You will open a drop menu with various timeline options.
• Now click Insert Keyframe option.

• You can now see that there is another dot on the frame 40 and that frames between 1 and 40 are now shaded gray.

• Now click on frame 40 (if it is not selected already).
• Your circle is still in its original position. Use the Selection Tool (V) to drag it on the other side, left of the stage.

• You have now determined the finish position of the circle. All you need to do now is to animate this movement.
• Right-click anywhere on the gray strip between frames 1 and 40. From the drop menu choose Create Motion Tween.

• Now the gray strip has turned blue and there is a straight line on it – this means that motion tween is in place.

• You can now test your animation by clicking on the first frame and then pressing Enter on your keyboard, or you can test it in an external player by pressing Ctrl-Enter.
• Your animation should now look something like this.

Tutorial Vectorian Giotto Cara Membuat Tombol

How to make a button in Giotto?

This is what you will get after finishing this tutorial:
So, let’s begin!

• First create a new blank document in which you will make your animation by clicking File from the menu, then New (Ctrl+N).

• Change the document properties:
• Click Modify from the menu, then Document. This will open a Document Properties dialogue screen (shortcut Ctrl+J).
• Change the color of the background to black.

• Create a circle by using the Oval tool (O).

• Convert the drawn circle to a button by pressing F8.
• Convert to Symbol window will appear, type in the name of your button (“The Button” for instance), select Button, then click OK.

• Double-click on your movie clip in the Library to enter its timeline.
• You can now see that the timeline has changed considerably. You can now see only 4 frames: Up, Over, Down and Hit.

• The button only needs these four conditions to function. In each frame you should specify what will the button look when in the specified condition: Up – when there is no interaction between the user and the button; Over – when the cursor hovers above the button; Down – when button is pressed; Hit – designated area where the button can be activated (can be larger or smaller than the drawn object).
• Change the brush of the circle to some shade of blue and from the brush window dropdown menu select Radial brush. For the second color we chose red.

• Select Text Tool (T) and write “The Button!!!” with white font.
• With Selection tool (V) move the text on the button.
• Now right-click on the “Over” button timeline frame and from the context menu select Insert Keyframe.

• The exact copy of the button you created will appear.
• Select the circle and change its two colors of its radial brush to be a little brighter.
• Also add new text with Text Tool (T) in the circle “Hovering…”.
• Now right-click on the “Down” button timeline frame and from the context menu select Insert Keyframe.
• Select the circle and change its two colors of its radial brush to be darker than the original.
• Also, change the “Hovering…” text with “Clicked!”.
• We will leave the “Hit” frame empty because we want our whole circle to act as a button. To make the click area smaller or larger just insert a new keyframe in the “Hit” frame and change the size of the circle to designate the click area.
• You can now test your button by clicking Ctrl+Enter.