Professional Documents
Culture Documents
This lesson will show you how to do two types of Text Scrolling in Macromedia Flash 8: Text
Symbol Scrolling and Form Text Scrolling. Text Symbol Scrolling will show you a proven
strategy for making scrollable Text created with the Text Tool, while the Form Text Scrolling
section will show you how to add a scroll bar to your Flash Textbox.
Advertise on Tizag.com
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."
Move Text Field
Now you need to insert a KeyFrame at Frame 250. With frame 250 selected drag the text box
above the stage's viewable area like we have:
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.
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.
You may view our finished Flash project or download our Raw Flash file if you are having
trouble doing it on your own.
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.
Select a black stroke color from the Colors Window and ignore the fill color, as the pencil only
uses the Stroke color.
• 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
Example:
Step 1
Create a new flash document, choose Modify > Document, and set Width to 430, and Height to
180px. Frame rate set to 22fps (Frames per Second).
Step 2
Find three picture and set their dimensions as background (430x180px), using the Photoshop or
some other graphic program.
Step 3
Step 4
Choose File > Import > Import to Stage (Ctrl+R), and Import the first picture. Then, using the
Align Panel (Ctrl+F3), center it with background.
Step 5
Step 6
Insert a new layer and name it line1. Select it, take the Rectangle Tool (R), Stroke color must be
switched off, under Fill color choose any color and draw a "rectangle" 10x20px. Then, using the
Align Panel, set it on the middle right position, like it is shown on the picture below.
Step 7
Click on frame 10 and press F6. Then, take the Free Transform Tool (Q), and do like it is shown
on the picture below.
Step 8
Click on frame 20 and press F6. Then, take again the Free Transform Tool (Q), and do like the
picture below shows.
Step 9
Go back on frame1, and after that on frame 10, open the Properties Panel (Ctrl+F3), and under
Tween choose Shape.
Step 10
Select line1 layer and convert it to a mask by right-clicking on the line1 layer and selecting
Mask.
Step 11
Select the line1 layer, insert a new layer and name it picture2
Step 12
Click on frame 60 and press F6. Then, press Ctrl+R (Import to Stage) and Import another
picture.
Step 13
Step 14
Insert a new layer and name it line2. Then Repeat steps 6-10, but for this time, the animation
("rectangle") will start from top left side. See the picture below.
We're done for the first two pictures. Repeat this steps for every other picture, that you want to
set on the banner.
Step 15
If you like to link the picture, first you must to convert it into a Movie Clip, select it, open the
Action Script Panel (F9), and paste this script:
on (release) {
getURL ("http://www.somewebsite.com","_blank");
}
Only one thing that you need is preloader. Set the preloader on the first frame, and tha banner
animation on the second frame. If you don't know how to create a loader, click here.
We're done!
How To Create Animated Highlight in Flash
Flash 31 January 2011 | 1 Comment
Sample Movie (The info below could be used in many applications, such as this logo)
Open A New Flash Document (550px x 400px @ 24fps) Name Layer 1 - 'Test' and Type the
word TEST in dark gray on stage
Make Layer Stretch to Frame 30 (Press F5 on frame 30)
Select Layer to Highlight Frames and Control(Right)-Click and Select Copy Frames. Make New
Layer Called "Test copy'
Select Test copy Layer and Control(Right)-Click and choose Paste Frames
Select Text on 'copy' Layer and Choose Break Apart, Repeat this Step Once More to Turn the
Text into Shape Object
Text Should Appear to Have White Dots in Fill (This is how you know it's a Shape Object)
Create a New Layer named 'Highlight'- Then Insert New Symbol from drop-down menu at top,
Name this Symbol 'Highlight' and choose the 'Movie Clip' option
On Movie Clip Editing Stage, Draw a Circle roughly 485px x 485px (at least larger than text
object)
Fill Circle with Linear Gradient w/ 3 stops (Left Stop- 0% White, Mid Stop- 75% White, Right
Stop- 0% White) Click to Add and Select Stops
Go Back to Scene 1 (Main Movie) and Drag New Symbol onto Stage in Layer 'Highlight' -
Create Motion Tween by Control(Right)-Click Symbol on stage
Drag Playhead to Frame 30 and move symbol (at angle) Above Top Right side of word "Test" to
Create the Motion
Control(Right)-Click the Layer 'Test copy' (which should be above 'Highlight' in layer stack) and
Select Mask
This Automatically Creates Clipping Mask with "Test" and 'Highlight' as well as Locking Both
Layers (Unlocking will reaveal Mask) Test Movie to view Preview of Finished Movie, Below is
Mine