The SWF file currently contains only the graphical part of the UI, in the next part you will be creating the code to support it. This piece of code is executed in the beginning, it instantiates the ButtonTestClass and stores it in ButtonTest. This means the constructor is called, and that is where we will put everything we need to initialize. This overwrites the onPress function for the button with our own.
And finally, let's add a function to the constructor that can alter the text in the MessageBox for us:. Here is the full code for the ActionScript file:. This will inject the code into the given SWF file, and save it to the output file. It won't do much at this point because clicking the button will only generate an event that needs to be processed, but you can see how your UI looks like and if it runs without errors. If you have no background in your UI and the text is black, you won't be able to read it since the UI emulator's background is black as well.
So for testing purposes it is wise to add a background, or use colored elements. The last step is to get it actually running in your level and have the button responding to your clicks.
Now there is a blank sheet showing, your empty FlowGraph. Let's add nodes to start, end and configure the UI. You should have a UI now which responds when you click on the button. The result might be skewed due to your viewport settings, in the emulator you can view it at different resolutions and see an accurate result.
Technical Documentation. Page tree. Browse pages. A t tachments 27 Page History People who can view. Copy Page Tree. Jira links. Go To End This command causes playback of an animation to finish. All drawing tools are selected from the Drawing Toolbar, which is initially visible and placed in the left hand side of Giottos window. All drawing tools are used in pretty much the same way: select the drawing tool you want by left-clicking it and then do some action on the Stage e.
Each drawing tool is described in detail in the following subsections. Pen and Brush tools, which are located in the Colors Toolbar, are closely related to drawing tools. This toolbar is initially located just below the Drawing Toolbar. Some Pen and Brush options are located in the Shape window which is initially placed in the right hand side of Giottos window. Usage of Pen and Brush is also described in detail. Select Line Tool icon from the Drawing Toolbar and left-click on the Stage where you want the starting point of a line to be.
Then drag the mouse and release left button where you want the ending point of a line to be. The color of the line you have just drawn is a color that is selected as Pen color in the Colors Toolbar. By left-clicking the small black triangle just right of Pen label you can change the color of the line.
Now take a look at the Shape window. There you can change width, type, color, and transparency of the Pen. Note that those settings should be set before you draw the line. Width is a whole number between 0 and 10, inclusive.
Color can be changed by dragging the white square on the color palette or by typing values for Red, Green, and Blue components or by choosing those values from slider which opens after clicking small black triangle next to R, G, or B labels. Transparency is set in a similar fashion A label. You can see effects of different Pen widths and types in the picture. Select it and Windows will open standard dialog where you can choose which picture you want to insert.
Left-click the picture you want to insert and click Open. Giotto will insert the selected picture on the Stage. There is a chance that picture is too small or too large and you want to change its dimensions. This is done using the Free Transform tool so you can look for that section in this manual.
Text toolbar is closely related to this tool. At this toolbar you can change font and size of the text, select if text should be typed bold or italic, and choose alignment left, centered, right or justified. Typically, you will first choose desired font, size, and alignment from the Text Toolbar, Brush color from the Colors Toolbar and then select Text Tool.
Text toolbar is quite similar to text or formatting toolbars in text processors and you should have no difficulties using it. Mouse pointer becomes crosshair. Click and drag and you will see dashed rectangle being drawn. This is a visual aid to help you determine the width of the text. When you release left mouse button, you can start typing the text.
When you finish typing the text, you can choose 3. Another possibility to change color of typed text is using 3. You can use 3. As soon as you release the button an oval is drawn. Outline color of an oval is a color that is selected as Pen color. Fill color of an oval is a color that is selected as Brush color.
For description of Pen tool see description of 3. By left-clicking the small black triangle right of Brush label you can change fill color for the shapes that will be drawn afterwards. There you can change type and color of the Brush. If Brush type is None than a shape drawn afterwards will have no fill.
If Brush type is Solid than the fill will be single colored. Brush type Linear means that shape will be filled from left to right with several colors that transition smoothly from one another. Brush type Radial means that shape will be filled from center to edge with several colors that transition smoothly from one another. Finally, Bitmap type means that shape will be filled with bitmap picture you select.
Colors are changed just like Pen colors. The point where you have clicked will be one rectangle corner and the point where you have released mouse button will be diagonal corner. As soon as you release the button a rectangle is drawn. As you drag the mouse you will see a line being drawn. In the Shape window you can set width, type and color of the line. A few examples of solid, dotted and dash dotted lines with different widths are given below.
Brush Tool is very powerful and you can adjust many of its parameters to accomplish various effects. You should now be familiar with most of these parameters located in the Colors toolbar and Shape window.
Two additional parameters are Brushs size and shape. Giotto offers you 10 sizes and 9 shapes of Brush. Size and shape are adjusted through two drop down lists located at Brush toolbar. Choose size from upper list and shape from the list below that one. Some of possible shapes are: circle, ellipse, square, rectangle etc. This picture shows just a little fraction of many different effects you can accomplish with Brush Tool. Shown are variations in size, shape and type of Brush.
If you have drawn some shape e. Its Pen parameters are now changed. Then select Paint Bucket Tool from the Drawing Toolbar and click at the shape you have drawn earlier. Its fill parameters are changed. For example, there are a blue rectangle and a red oval on the Stage and you want fill color of an oval to be the same as rectangles. First, select Eyedropper Tool from the Drawing Toolbar. Then click at blue rectangle. Finally, click at red oval which instantly became blue. It should not be used to delete whole shapes.
Notice that mouse pointer is now shaped and sized just like eraser you have chosen. Click at the Stage and drag without releasing left mouse button. Notice that parts of shapes below eraser are literally erased. But there is one interesting side effect - one shape can be split to. This is done by erasing interior from one edge to another. In the left hand side of this picture is one shape that remained one shape after erasing and in the right hand side other that is split into two shapes after erasing.
Select Selection Tool from the Drawing Toolbar and move your mouse pointer over any shape on the Stage. Notice the small black outlined square just to the right of mouse pointer - this means that Selection Tool can now be applied by simply clicking the shape. A number of markers green filled dots have appeared around the shape. If you want to select more than one shape, after selecting the first one press and hold Ctrl key and click the other shape s.
Notice that multiple shapes now have markers around them. An alternative way of selecting shapes is to select Selection Tool, click anywhere on the Stage and drag. As you drag, notice a rectangle on the Stage. As soon as you release left mouse button, rectangle disappears and all the shapes that are touched by rectangle are selected. While a shape is selected you can: move, delete, change shapes Pen parameters width, type, color, transparency , and change shapes Brush parameters type, color.
It also can be used to do everything that Selection Tool can do. Select Subselection Tool from the Drawing Toolbar and move your mouse pointer over any shape on the Stage. Notice the small black outlined square just to the right of mouse pointer this means that Subselection Tool can now be applied by simply clicking the shape.
A number of markers green squares has appeared around the shape. Notice that markers are now not filled - that is visual difference between Selection and Subselection Tool. If you want to move markers, first place mouse pointer over one of the markers. Notice that pointer now looks like a hand with index finger pointing the marker. Click and drag the marker to desired position. When you release left mouse button the shape will be redrawn to reflect change. Shapes drawn using Brush or Pencil tools have even more possibilities of transforming.
Besides moving markers, you can also move control points in a similar fashion. Each marker has 2 control points which are visible only when you click on marker. Each control point and its corresponding marker form a tangent to shapes outline.
By moving control point you move that tangent, thus. Notice the small black outlined square just to the right of mouse pointer - this means that Free Transform Tool can now be applied by simply clicking the shape.
Bounding rectangle and eight black square handles has appeared around the shape as well as four arcs on the corners and one white dot in the center. Notice the black and white rectangle just to the right of mouse pointer - this means that Fill Transform Tool can now be applied by simply clicking the shape.
Select Lasso Tool and move mouse pointer, which now looks like pencil, to the Stage. Choose where you want the starting point for the Lasso to be and then click and drag. As you drag you will see a line being drawn.
When you release left mouse button the lasso will automatically close itself by connecting starting and ending point. All shapes that lasso touched are cut, effectively splitting them to two or even more shapes. In these pictures you can see how Lasso Tool works and how it affects the object. Rectangle and oval are split to two shapes each. Use Selection Tool to move split shapes. Changes are instantaneously visible. Notice that pointer is now double-arrowed.
Horizontal pointer means that you can change width, vertical mean that you can change height, and diagonal that you can change both width and height at the same time.
For example, to change width click one of the handles on vertical rectangle sides and drag it to the left or right. Notice the dashed rectangle that shows you the final dimensions of a shape. When you release left mouse. Move mouse pointer over one of four corner arcs. Notice that pointer is now shaped like arc with arrow. Click and drag and you will see that bounding rectangle is rotating. When you release left mouse button the shape will be rotated to its new position.
The effect is the same no matter what corner arc you use for rotating. Center of rotation is represented by white dot. Simply, white dot does not change its position when you rotate a shape. You can change center of rotation by moving the white dot. To move the white dot, move mouse pointer over it. Notice the small circle just to the right of mouse pointer. This means that you can click and drag in order to move white dot. When you release mouse button, the center of rotation takes its new place.
Center of rotation can be moved anywhere, even outside the Stage. To return center of rotation to its original position, just select Free Transform Tool again. You can simply control speed of rotation by moving arc-shaped mouse pointer closer to or further from the center of rotation. To rotate shape at higher speed, move pointer further from the center of rotation.
To rotate shape at lower speed, move pointer closer to the center of rotation. Part IV: Layers In this section you will see what layers are and how to use this simple yet effective animation technique. Using layers is essential in any complex animation but they can be useful in some simple animations too. The simplest way to understand layers is to imagine them as a stack of transparencies.
Each layer transparency represents an animation for itself but all the layers together make one big animation. Main point to remember here is that layers on the top of the stack cover layers at the bottom. This means that some of the bottom layers contents may not be visible if covered by top layers contents.
Default name for this layer is Layer 1. All those operations can be undo-ed recalled. Right-click on the timeline and select Insert Layer option from menu. A new layer is inserted with its default name. In this example, its name will be Layer 2. This new layer is located on top of stack, i. Choose Insert New from Layers dialog. First select layer you want to remove by left-clicking layer name below timeline. Notice that selected layer is now marked blue which shows that all future commands will refer to this layer!
Right-click and select Remove Layer option from menu. Selected layer and all objects it contains are removed from document. Invisible layer means that objects it contains are 29 Part V:. Changing visibility is very easy just left-click small black dot next to layer name an eye symbol is shown as column header. Dot changes to red X sign. This means that from now on layer is invisible.
If you want to make layer visible again, left-click red X. It reverts to black dot and layer is visible again. By default, all inserted layers are visible. Locking layer is very easy just left-click second black dot right of layer name a lock is shown as column header. Dot changes to lock symbol.
This means that from now on layer is locked. If you want to unlock layer, left-click lock. It reverts to black dot and layer is unlocked again. By default, all inserted layers are unlocked. Select layer you want to rename and type the name you want in Layer name edit field.
After that click Rename. Select layer you want to send back and click Send to back. Select layer you want to move and click Move to front.
Part V: Morphing In this section you will see what morphing is and how to morph objects in Vectorian Giotto. This transformation is done gradually in a series of steps and seamlessly. Certain chosen points of the first image are moved to the position of corresponding points in the second image.
In order to morph successfully you need at least two key frames. One key frame will be starting point for morphing and other key frame will be ending point for morph.
We will demonstrate morphing between a rectangle and an oval. On the first key frame by default it is frame number 1 : Draw a rectangle in the top left corner of the Stage with blue interior and black solid outline.
Also draw an oval in the bottom right corner of the Stage with yellow interior and red dotted outline. Your Stage should look like this:. Now insert second key frame for example make 24th frame a key frame. This command will open Morph Shapes window inside main Giotto window. Now lets look at the Morph Shapes window for a moment.
Notice 4 combo boxes from which you can choose important parameters for morphing. First choose on which layer morphing should be performed. This choice will affect next choice which key frames will provide shapes for morphing. After you have chosen key frames in our example Keyframes 1 to 24 , choose First shape and Target shape. Having all parameters set you can now preview morph by clicking Preview morph button and see how First shape will morph into Target shape.
On Preview Morph window you can click Play button to see complete morphing process or move slider with left mouse button pressed to see morphing frame-by-frame. When you are satisfied with results, click Create morph button on Morph Shapes window.
Also, you can remove morph by clicking Remove morph button. If you have done something else after creating the morph, you can still modify it or remove it. Just left-click on the timeline starting frame for the morph and select first shape from combo box or by clicking Pick shapes and selecting first and second shape for morph. Options for modifying and removing morph are available again. In such morphs one shape can be target for first morph and source for second morph which produces interesting effects.
To create consecutive morphs, create one rectangle on first key frame for example, 1st frame of animation , one oval on second key frame for example, 20th frame and one brush on third key frame for example, 40th frame. Left-click 1st frame on the timeline. Open Morph Shapes window if it is not already open. Choose Keyframes 1 to 20 from Keyframes combo box and click Pick shapes button. Select rectangle from first keyframe by left-clicking it.
Notice that mouse cursor has number 1, a square and a star next to it. Giotto will now automatically show second key frame 20th frame in this example , the one with oval in it. Select oval mouse cursor will show number 2 and click Create morph button in Morph Shapes window. Give social love: Digg Delicious Facebook Twitter.
Will I be able to use all the effects and filters? What is the support for text effects? Will all ActionScript functions work in Giotto? Powerful Drawing Tools. Vectorian Giotto gives you all the drawing tools you need to create a perfect drawing for your Flash movie. Full Support for Buttons and Movie Clips. Giotto enables you to make complex movie clips and buttons, that can be reused throughout your work in multiple projects.
Simple to Use Project Tools.
0コメント