flash触摸屏

tech2024-06-23  76

flash触摸屏

故意的错误 (Deliberate Mistakes)

In the very first article of this series, I gave you a quick tour of the Flash toolbox, and explained what the various tools were used for. However, if you were paying attention, you’ll know that I deliberately missed out the Text tool, used when adding text to your Flash movie.

在本系列的第一篇文章中,我快速介绍了Flash工具箱,并解释了各种工具的用途。 但是,如果您注意的话,您会知道我故意错过了在Flash影片中添加文字时使用的“文字”工具。

In this week’s article, I’ll be spending some time with this tool, demonstrating how it can be used with the tweening techniques you learned last time to create interesting text effects. Keep reading!

在本周的文章中,我将花一些时间使用此工具,以演示如何将其与您上次学习的补间技巧一起使用来创建有趣的文本效果。 继续阅读!

写方式 (The Write Way)

The Text tool, activated with the keyboard shortcut T, is primarily used to insert text into your Flash movie.

使用键盘快捷键T激活的文本工具主要用于将文本插入Flash电影中。

Text is placed in one or more blocks, which come in two varieties — a fixed-width block, and a variable-width block. A variable-width block expands horizontally as you type text, while a fixed-width block has a rigid border and automatically wraps text to the next line when it reaches the border.

文本被放置在一个或多个块中,有两个变体-固定宽度的块和可变宽度的块。 当您键入文本时,宽度可变的块会水平扩展,而宽度固定的块具有刚性边界,当到达边界时,文本会自动换行到下一行。

In order to create a variable-width block, simply activate the Text tool and begin typing on the Stage.

为了创建可变宽度的块,只需激活文本工具并开始在舞台上键入即可。

In order to create a fixed-width block, you need to first draw the outline of the block on the Stage by click-dragging the mouse pointer with the Text tool active. Once the block is defined to your requirements, click within it to begin inserting text.

为了创建固定宽度的块,您需要先在舞台上单击并拖动鼠标指针,然后在活动的“文本”工具上绘制该块的轮廓。 在根据需要定义了块之后,在其中单击以开始插入文本。

You can easily alter the characteristics of the inserted text via the Window -> Panels -> Character panel — this panel allows you to specify attributes like typeface, colour, size, emphasis and tracking.(the space between individual characters of the font). You can also adjust the character position — normal, superscript or subscript — and, in the case of paragraphs, the alignment, margin widths and line spacing.

您可以通过“窗口”->“面板”->“字符”面板轻松地更改插入文本的特征-该面板允许您指定诸如字体,颜色,大小,强调和跟踪(字体中各个字符之间的间距)之类的属性。 您还可以调整字符位置(常规,上标或下标),以及段落的对齐方式,边距宽度和行距。

Flash also allows you to create dynamic text boxes, and text boxes which accept user input. You can play with these by selecting the appropriate option in the Text Options tab of the Character panel — they’ll be explained in detail later.

Flash还允许您创建动态文本框以及接受用户输入的文本框。 您可以通过在“字符”面板的“文本选项”选项卡中选择适当的选项来玩这些游戏-稍后将对其进行详细说明。

高保真度 (High Fidelity)

There is an important point to be noted here, related to your usage of fonts within your Flash movie. Typically, the fonts that you use are embedded within the Flash movie, so that they appear correctly in the user’s browser; this adds to the file size of the final .SWF file, but ensures maximum fidelity when the movie is played back.

这里有一个重要的要点,与Flash电影中字体的使用有关。 通常,您使用的字体嵌入在Flash电影中,以便它们正确显示在用户的浏览器中。 这会增加最终.SWF文件的文件大小,但可以确保在播放影片时具有最高保真度。

The alternative here is to use Flash’s in-built "device fonts", generic fonts in the "sans", "sans-serif" and "monospace" font families. These fonts are named _sans, _sans-serif and _typewriter in the font selection box of the Character panel, and using them can substantially reduce the size of your Flash file. The downside: since these fonts are not embedded within the file, the Flash player will "approximate" to the most similar font found on the user’s system, and display text in that font. Obviously, this means a loss in fidelity, since text in the final Flash movie may look completely different from the original.

这里的替代方法是使用Flash的内置“设备字体”,“ sans”,“ sans-serif”和“ monospace”字体家族中的常规字体。 在“字符”面板的字体选择框中,这些字体分别命名为_sans,_sans-serif和_typewriter,使用它们可以大大减小Flash文件的大小。 缺点:由于这些字体未嵌入文件中,因此Flash Player将“近似”到用户系统上找到的最相似的字体,并以该字体显示文本。 显然,这意味着保真度的损失,因为最终Flash电影中的文本可能看起来与原始文本完全不同。

To use device fonts, check the "Use Device Fonts" option in the Text Options tab of the Character panel. You’ll also see a check box below that marked "Selectable" — check this if you’d like the user to be able to select the text as it appears in the final Flash movie.

要使用设备字体,请在“字符”面板的“文本选项”选项卡中选中“使用设备字体”选项。 您还将在标记为“可选”的下方看到一个复选框-如果希望用户能够选择最终Flash电影中显示的文本,请选中此复选框。

Finally, you can link text blocks to Web site URLs — simply enter a URL into the URL field on the main Character panel. Here’s an example:

最后,您可以将文本块链接到网站URL —只需在“字符”主面板上的URL字段中输入URL。 这是一个例子:

Copyright Melonfire, 2000. All rights reserved.

版权所有Melonfire ,2000。保留所有权利。

分解 (Breaking It Down)

Typically, you cannot shape or apply a gradient fill to a text block. If you plan to do this, it becomes necessary to first break apart the block to create individual shapes that can be modified with the various shape tools.

通常,您不能为文本块定形或应用渐变填充。 如果您打算这样做,则有必要先将块拆开以创建可以用各种形状工具修改的单个形状。

In Flash 5, this is accomplished by selecting the text block with the Arrow tool and then breaking it into its component pieces via the aptly-named Modify -> Break Apart command.

在Flash 5中,这是通过使用“箭头”工具选择文本块,然后通过适当命名的“修改”->“分离”命令将其分解为各个组成部分来完成的。

Once the individual components of the block have been separated, you can use the drawing and colour tools to apply different kinds of effects to the object. Breaking apart a text block is a necessary precursor to applying a shape tween to the object.

块的各个组成部分分离后,即可使用绘图和颜色工具将不同种类的效果应用于对象。 拆分文本块是将补间形状应用于对象的必要先决条件。

How did I do this? Very simple.

我是怎么做到的? 很简单。

First, activate the text tool and place some text on the stage. Use your favourite font and colour.

首先,激活文本工具并在舞台上放置一些文本。 使用您喜欢的字体和颜色。

Next, select the text block with the Arrow tool and break the text apart — you’ll see that each element of the text block becomes a distinct object. You now have an initial shape for your tween.

接下来,使用“箭头”工具选择文本块并将文本分开-您将看到文本块的每个元素都变成一个不同的对象。 现在,您的补间具有初始形状。

Move to a new frame (say, frame #10), and insert a new keyframe. Delete the previously-created text block, and create a new block containing the end result of your tween. Break apart this text block as described above, too.

移至新框架(例如第10帧),然后插入新的关键帧。 删除先前创建的文本块,然后创建一个包含补间最终结果的新块。 也可以如上所述拆分此文本块。

Go back to the first keyframe, and insert a shape tween. Now, when you play the clip, the word(s) in the first keyframe will morph into the word(s) into the second keyframe, as in the example above.

返回第一个关键帧,并插入补间形状。 现在,当您播放剪辑时,第一个关键帧中的单词将变成第二个关键帧中的单词,如上例所示。

消退 (Fade Out)

If you need to apply a motion tween to the text object, you need to first convert it into a symbol via the Insert -> Convert To Symbol command. Once it is a symbol, you can go ahead and apply regular motion effects.

如果需要将补间动画应用于文本对象,则需要首先通过“插入”->“转换为符号”命令将其转换为符号。 一旦成为符号,您就可以继续应用常规的运动效果。

Consider the following example, which uses a motion tween to simulate a simple scrolling tickertape.

考虑下面的示例,该示例使用补间动画模拟简单的滚动字幕。

In this case, I’ve first created a text box containing the tickertape text. I’ve then selected the box, converted it to a symbol, inserted a new keyframe a few frames down, and moved the symbol to the other side of the Stage. By applying a motion tween to the intermediate stages, you can simulate the effect of a scrolling tickertape.

在这种情况下,我首先创建了一个包含薄纱文本的文本框。 然后,我选择了该框,将其转换为元件,向下插入了几帧新的关键帧,然后将元件移到了舞台的另一侧。 通过在中间阶段应用补间动画,可以模拟滚动条的效果。

This technique truly comes into its own when you can dynamically change the content of the tickertape a topic that I’ll be covering when we move to ActionScripting and the database capabilities available in Flash.

当您可以动态更改标语的内容时,这项技术才真正发挥作用。当我们转向ActionScripting和Flash中可用的数据库功能时,这个话题将涉及在内。

Yet another interesting effect is the so-called "text fade" effect. Here’s what it looks like:

另一个有趣的效果是所谓的“文本淡入淡出”效果。 看起来是这样的:

This is again accomplished via a motion tween — actually, two of them. Create a symbol containing the text, and place three instances of it on the Stage, at appropriate distances from each other in the timeline. The first and third instance should have an alpha level of 0% (fully transparent), while the second instance should have an alpha level of 100% (fully opaque). Finally, add a motion tween between the first and second instances, and another between the second and third instances.

这又是通过补间动画来实现的,实际上是其中两个。 创建一个包含文本的符号,并将其三个实例放置在舞台上,并在时间轴上彼此保持适当的距离。 第一个和第三个实例的alpha等级应为0%(完全透明),而第二个实例的alpha等级应为100%(完全不透明)。 最后,在第一实例和第二实例之间添加一个补间动画,在第二实例和第三实例之间添加另一个补间动画。

Copyright Melonfire, 2000. All rights reserved.

版权所有Melonfire ,2000。保留所有权利。

按钮人 (The Button Man)

OK, enough of the Text tool. Let’s move on to something else. Thus far, I’ve restricted you to creating and using graphic symbols in your Flash movies. It’s time to move to the next level, with another symbol type known as a "button".

确定,足够的文本工具。 让我们继续前进。 到目前为止,我已经限制您在Flash电影中创建和使用图形符号。 现在是时候进入另一种符号类型,称为“按钮”的下一个阶段了。

A button, in Flash, is just like a regular symbol – you can create it, drop it into your Flash movies, and edit it – with one important difference: unlike the graphic symbols you’ve been creating, a Flash button comes with some pre-defined characteristics. These characteristics define the behavior of the button when a mouse pointer moves over it, or when a user clicks it.

Flash中的按钮就像常规符号一样-您可以创建它,将其放到Flash电影中,然后对其进行编辑-有一个重要的区别:与您一直在创建的图形符号不同,Flash按钮带有一些预定义的特征。 这些特性定义了当鼠标指针移到按钮上或用户单击按钮时按钮的行为。

Let’s take a look. Pop open a new Flash movie, and draw something which looks like this.

让我们来看看。 弹出一个新的Flash电影,然后绘制如下所示的内容。

Fill it with a gradient fill to give it that three-dimensional effect every good button needs.

用渐变填充对其进行填充,以使其具有每个良好按钮所需的三维效果。

Now, select the image and convert it to a symbol. Remember to select "Button" as the symbol type this time. When you’re back on the Stage, right-click the symbol and select the "Edit" option to switch to symbol-editing mode. You should see something like this on the Timeline.

现在,选择图像并将其转换为符号。 请记住这次选择“按钮”作为符号类型。 当您返回舞台时,右键单击该符号,然后选择“编辑”选项以切换到符号编辑模式。 您应该在时间轴上看到类似的内容。

As you can see, every button comes with three pre-defined frames — "Up", "Over", and "Down" (yes, I know there’s something called "Hit" as well, you can ignore it for the moment.)

如您所见,每个按钮都带有三个预定义的框架-“上”,“上”和“下”(是的,我知道也有一个名为“命中”的东西,您暂时可以忽略它。)

These three states allow you to specify the appearance of the button, depending on where the user’s mouse pointer is. To see how this works, do the following:

这三种状态使您可以指定按钮的外观,具体取决于用户的鼠标指针所在的位置。 要查看其工作原理,请执行以下操作:

Leave the "Up" state as is – this is the state the button will appear in by default.

保持“向上”状态-这是默认情况下按钮将显示的状态。

Select the frame marked "Over" and right-click it to insert a new keyframe. Select the button and fill it with a different colour. This is the colour that will appear when the user’s mouse pointer "hovers" over the button.

选择标记为“ Over”的框架,然后右键单击以插入新的关键帧。 选择按钮,并用其他颜色填充它。 这是用户的鼠标指针悬停在按钮上时将出现的颜色。

Select the frame marked "Down", insert a new keyframe, and change the colour of the button again. If you feel like it, use the Text tool to insert a line of text under the button as well – like this:

选择标记为“向下”的框架,插入一个新的关键帧,然后再次更改按钮的颜色。 如果您愿意,也可以使用文本工具在按钮下方插入一行文本,如下所示:

This is what the button will look like once a user clicks it with the mouse pointer.

这是用户一旦用鼠标指针单击按钮后的外观。

The last frame, "Hit", actually defines the "hit area" of the button symbol – this is the area that will trigger the "Over" and "Down" states when the pointer moves over it. You can define a hit area that is smaller or larger than the dimensions of your button.

最后一帧“命中”实际上定义了按钮符号的“命中区域” –当指针移到该区域时,它将触发“ Over”和“ Down”状态。 您可以定义一个小于或大于按钮尺寸的点击区域。

All done? Switch back to the Stage, and make sure that the Control -> Enable Simple Buttons menu item is activated – this will allow you to test the button within the Flash authoring environment itself. Now try it out – you should see something like this:

全做完了? 切换回舞台,并确保已激活“控制”->“启用简单按钮”菜单项–这将使您能够在Flash创作环境本身中测试按钮。 现在尝试一下–您应该看到类似以下的内容:

Pretty cool, huh?

太酷了吧?

Copyright Melonfire, 2000. All rights reserved.

版权所有Melonfire ,2000。保留所有权利。

点击我 (Click Me)

Of course, a button which does nothing when clicked is a lot like a broken clock – useless. And the guys who created Flash knew this too – which is why they built in a whole bunch of "actions" that you can attach to your button. One of the most popular of these is the "Get URL" action, which directs the browser to open a new URL.

当然,单击时不执行任何操作的按钮很像是破碎的时钟-无用。 而且创建Flash的人也知道这一点-这就是为什么他们构建了许多可以附加到按钮上的“动作”的原因。 其中最流行的一种是“获取URL”操作,该操作指示浏览器打开新的URL。

To attach the "Get URL" action – or any other action – to your button, right-click the button on the Stage, and select "Actions" from the pop-up menu. From the window that opens up, double-click the "Get URL" item in the Basic Actions section — Flash will write some code on the right side of the panel, and display a couple of text fields at the bottom for you to enter the URL and the window name(if any).

要将“获取URL”操作(或任何其他操作)附加到按钮,请在舞台上右键单击该按钮,然后从弹出菜单中选择“操作”。 在打开的窗口中,双击“基本操作”部分中的“获取URL”项-Flash将在面板的右侧编写一些代码,并在底部显示几个文本字段,供您输入URL和窗口名称(如果有)。

Once you’ve entered a URL, you can see how it works with the button below – it will open a new Web site in a new browser window.

输入URL后,您可以通过下面的按钮查看其工作方式-它将在新的浏览器窗口中打开一个新的网站。

In order to test actions in the Flash authoring environment, you need to make sure that the Control -> Enable Simple Frame Actions menu item is activated.

为了测试Flash创作环境中的动作,您需要确保已激活“控制”->“启用简单框架动作”菜单项。

There are a bunch of other actions available as well, and I’ll be exploring them next week. So stay tuned — this is just getting interesting!

还有许多其他动作, 下周我将进行探讨。 因此,请继续关注-这正变得越来越有趣!

Note: All examples in this article have been tested on Macromedia Flash 5.0. Examples are illustrative only, and are not meant for a production environment. YMMV!

注意:本文中的所有示例均已在Macromedia Flash 5.0上进行了测试。 示例仅是说明性的,并不意味着用于生产环境。 YMMV!

Copyright Melonfire, 2000. All rights reserved.

版权所有Melonfire ,2000。保留所有权利。

翻译自: https://www.sitepoint.com/flash-101-4-dont-touch/

flash触摸屏

相关资源:jdk-8u281-windows-x64.exe
最新回复(0)