You are on page 1of 27

Flash Text Scroll

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

Flash Static Text Scrolling


To create effect of scrolling text we are going to use a Flash Motion Tween of a text symbol. We
will take the text at one point in frame 1 to the end of our animation frame 350. Begin with a
clean Stage and select the Text Tool from the Tools window. Choose static text, black text color,
font size of 15 and a Verdana font from the Properties window.

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.

Flash Textbox Input Scrolling


Creating a Textbox Input that scrolls is very easy in Flash because Macromedia has gone to the
trouble to create everything for you. All you need to do is drag and drop the right components in
the right place and Macromedia Flash Magic will do the rest.
Creating a Flash Textbox Input
With a clean Stage, select the Text Tool from the Tools window and choose the following from
the Properties Window:
• 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.
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.

Flash Pencil Tool


The first tool we will be looking at is the Flash Pencil tool, which is located on the Tools
window. Left click the pencil tool or press the associated hot-key (y) to active the pencil tool.

Select a black stroke color from the Colors Window and ignore the fill color, as the pencil only
uses the Stroke color.

Flash Pencil Options


This is where the functionality of many Flash tools are defined. The pencil tool is no exception
and has two options that you should get to know. The first option is object drawing, which
allows you to draw lines and shapes on the Stage that will remain independent from the rest of
your existing items.
In old versions of Flash you could draw two shapes on the same layer, and if they overlapped
they would not look the same when separated. Object drawing corrects this situation when
enabled.
Pencil Correction Options
The neat thing about Flash is that it automatically smoothes your line drawings after you release
the left mouse button. Next to the object drawing option is an icon that looks like part of some
stairs. This is where you can choose between three different types of drawing aides:
• 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.

Flash Brush Tool


The Flash Brush tool is next to the Pencil tool in the Tools window.

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

Flash Brush Modes


To really show you the difference between the various brush modes of Macromedia Flash 8 you
should create a shape like the one we have below, or simply download our example.fla file and
load it up to play around on.

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

4. Selection - Only paints with the active selection


5. Inside - Starting where the brush is first laid down, this brush will only paint inside that
shape or area.
Full flash Banner
3.12.2006, 16:32 Total views: 146329
In this tutorial you will see how to create full flash banner. To create this tutorial, you don't have
to use Action Script. You will also learn how to aligned picture with the background, how to use
Free Transform Tool (Q), how to convert any layer into a mask and more.

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

Double click on layer1 to rename its name in picture1.

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

Click on frame 80 of layer picture and press F5.

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

Click on frame 160 of layer picture2 and press F5.

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

You might also like