flash 接口
Many people have tried to create interfaces in Flash, but have become overwhelmed by the whole process and never come back to it. That’s a real shame. This article outlines tips and methodologies for creating Flash interfaces using graphics applications, good planning and simple logic.
许多人试图在Flash中创建接口，但整个过程不知所措，再也没有回到过。 真是可惜。 本文概述了使用图形应用程序，良好的计划和简单的逻辑创建Flash接口的技巧和方法。
The Flash drawing tools have been around since the earliest versions of the software, and have not progressed a great deal over the past few years. The creation of an effective interface using only the tools in Flash can be painstaking, difficult and downright frustrating for newbies and hardened professionals. This is why most people tend to develop their graphics in external graphics packages and then import them into Flash for fine-tuning.
Flash绘图工具自最早的软件版本以来就已经存在，并且在过去几年中没有取得很大进步。 仅使用Flash中的工具来创建有效的界面对于新手和刚入门的专业人员而言可能是艰苦，艰辛和彻底的挫败。 这就是为什么大多数人倾向于在外部图形包中开发其图形，然后将其导入Flash进行微调的原因。
Interface design for any end medium can be a tricky business; finding an effective balance between usability, functionality and aesthetics is the Holy Grail for designers. There are several different platforms for which you might create a design, but none is as tricky to design for as the Flash Player.
任何终端介质的接口设计都是一件棘手的事情。 在可用性，功能和美观之间找到有效的平衡是设计师的圣杯。 您可以为几种不同的平台创建设计，但是没有哪个平台像Flash Player那样设计复杂。
I don’t know how many times I’ve seen a good concept let down by poor execution and hap-hazard interface planning, but both issues can easily be remedied if you follow a few simple rules of thumb. These rules aren’t set in stone, but they will help you along the path to designing effective interfaces in Flash.
我不知道有多少次我因良好的执行力和偶然的界面规划而失望了一个好的概念，但是如果您遵循一些简单的经验法则，就很容易解决这两个问题。 这些规则并不是一成不变的，但是它们会帮助您在Flash中设计有效的界面。
I’ve packaged up the files we’ll use in the tutorial — download the working files here.
我已经打包了将在本教程中使用的文件- 在此处下载工作文件 。
There’s an old maxim that my father used to tell me: ‘Prior Planning Prevents Poor Performance’. It’s so true! If your interface design is poorly planned (or largely unplanned), it will take much longer to create, and you’ll undoubtedly introduce flaws that will require additional work to fix. If you take time to plan the interface — the way it looks and the way it will function — you are already most of the way to an effective design.
父亲曾经告诉我一个古老的格言：“事先计划可以防止绩效不佳”。 是真的！ 如果您的界面设计计划不周(或者很大程度上是计划外)，那么将需要更长的时间来创建，并且无疑会引入一些缺陷，而这些缺陷将需要额外的工作来进行修复。 如果您花时间计划接口(外观和功能)，那么您已经是实现有效设计的大部分方法。
What’s the simplest way to plan out a design? Well, for me, its either old fashioned paper and pencil or, if I’m at my computer, my tablet and pen. I usually start by sketching out the interface, its components, menu system and content areas. I then create extra sketches for each section, as can be seen below.
计划设计的最简单方法是什么？ 好吧，对我来说，它要么是老式的纸和铅笔，要么，如果我在电脑旁，则是我的平板电脑和笔。 我通常首先勾勒出界面，其组件，菜单系统和内容区域。 然后，我将为每个部分创建额外的草图，如下所示。
This process may take several iterations before I’m happy with the plans, but, being a bit of a hoarder, I never throw anything away. This way, I can always refer to interface ideas and sketches I made years ago (though my office does tend to become a bit of a maelstrom of paper during my design phases).
在我对这些计划感到满意之前，此过程可能需要进行多次迭代，但是由于有点a积，所以我从不丢弃任何东西。 这样，我总是可以参考我几年前制作的界面想法和草图(尽管在设计阶段，我的办公室的确有点像纸上的纸)。
Once I’m happy with the initial layout, I move into a digital format — usually Fireworks or Illustrator — to create a compositional interface.
对初始布局感到满意后，我将其转换为数字格式(通常是Fireworks或Illustrator)以创建合成界面。
The concept of wireframing may already be familiar to many of you. You may already wireframe your designs subconsciously without realising it.
线框的概念可能已经为您许多人所熟悉。 您可能已经在意识不到的情况下对设计进行了下意识的构造。
To put it simply, wireframing involves creating tangible skeleton structures that acts as placeholders for content. For example, if your design will hold a lot of text, you may need to consider a scrolling design rather than a paging design (in which content is held on different pages).
简而言之，线框图涉及创建有形的骨架结构，该结构充当内容的占位符。 例如，如果您的设计将包含大量文本，则可能需要考虑滚动设计而不是分页设计(其中内容保存在不同的页面上)。
There are many points to consider during the creation of a layout for your designs. These issues are outside the scope of this article, but once you start to layout your designs in this manner, you’ll soon see what works and what doesn’t.
在为您的设计创建布局时，有很多要考虑的方面。 这些问题不在本文讨论的范围之内，但是一旦您开始以这种方式布局设计，您很快就会看到哪些有效，哪些无效。
You can create your interfaces using any of the wide range of tools that are now available; I usually plump for Fireworks MX 2004. This program makes it easy to create interface prototypes, then resize and repurpose elements quickly using Flash’s vector tools. Everyone has their favourite application, but Fireworks MX 2004 really does make the creation of complex vector graphics a painless exercise.
您可以使用现在可用的各种工具来创建界面。 我通常对Fireworks MX 2004充满信心。此程序可轻松创建接口原型，然后使用Flash的矢量工具快速调整元素的大小和用途。 每个人都有自己喜欢的应用程序，但是Fireworks MX 2004确实使复杂矢量图形的创建变得轻而易举。
Consider the following interface. While it may seem simple, it was created from a series of rounded rectangles that were aligned and joined using the Union tool (Modify > Combine Paths > Union). Standard vector and text tools were then used to create the composition as a usable interface.
考虑以下接口。 它看起来很简单，但是它是由一系列圆角矩形创建的，这些矩形使用“并集”工具(“修改”>“合并路径”>“并集”)进行对齐和连接。 然后使用标准的矢量和文本工具将组合物创建为可用的界面。
At first glance, it doesn’t appear complex, yet the creation of this type of interface using Flash’s standard tools would be a daunting task. Just look at the number of curves and control points that are present in this close-up of the design.
乍一看，它看起来并不复杂，但是使用Flash的标准工具创建这种类型的接口将是一项艰巨的任务。 只需看一下该设计特写中存在的曲线和控制点的数量即可。
In the below design (source PNG files can be found in the code archive), I have create a series of simple rounded and non-rounded rectangular boxes. The content areas in which the logo, extra icons and main content areas are to be positioned are clearly noted, as are the main and sub-menu options.
在下面的设计中(可以在代码档案中找到源PNG文件)，我创建了一系列简单的圆形和非圆形矩形框。 标志，附加图标和主要内容区域将要放置的内容区域以及主要和子菜单选项均已明确指出。
Creating this design with a series of solid fills and simple strokes took about 15 minutes from start to finish and, because Fireworks MX 2004 makes it so easy to group interface components (such as each main menu), I could fine tune the attributes and positioning until I was happy with the final design.
从头到尾，用一系列的实心填充和简单的笔触来创建此设计大约需要15分钟，并且由于Fireworks MX 2004使得对界面组件(例如每个主菜单)进行分组变得如此容易，因此我可以微调属性和位置直到我对最终设计满意为止。
One of the beauties of the Macromedia range of products is their tight integration, and the integration between Flash and Fireworks is no exception.
Macromedia产品系列的优点之一是它们的紧密集成，而且Flash和Fireworks之间的集成也不例外。
From the initial concept (and using the relevant layer structure within Flash), I can copy and paste quickly between applications. Because the design was created in vector format (and provided no live effects, such as drop shadows or glows, are applied to the items), integrity is maintained between the applications, and vector format imagery is imported successfully into Flash.
从最初的概念(并使用Flash中的相关层结构)，我可以在应用程序之间快速复制和粘贴。 由于该设计是以矢量格式创建的(并且未向项目应用任何活泼效果(如阴影或光晕))，因此可以在应用程序之间保持完整性，并且可以将矢量格式图像成功导入Flash中。
To pull into Flash the interface elements we created in the external application, we need to understand how the individual interface elements fit together.
为了将我们在外部应用程序中创建的界面元素引入Flash中，我们需要了解各个界面元素如何组合在一起。
In the following diagram, you can see how the interface constituents layer on top of each other to create the interface. From the header bar forwards, items are stacked on top of each other to produce the final effect.
在下图中，您可以看到接口组成部分如何彼此叠加以创建接口。 从标题栏向前，将项目堆叠在一起以产生最终效果。
Depending upon how you work in Flash, the easiest way to create an interface rapidly is to import integral parts of the design as single components, arranging the items in separate layers within the stage. Not only does this make your design more scalable and easier to manage, it also gives you much more control over the position of each individual part of the interface relative to the others.
根据您在Flash中的工作方式，快速创建界面的最简单方法是将设计的组成部分作为单个组件导入，将项目布置在舞台中的不同层中。 这不仅使您的设计更具可扩展性且易于管理，还使您可以更好地控制界面中各个部分相对于其他部分的位置。
Note in the above diagram how the sections of the interface sit atop each other; this is called the stacking order of the layers. Those that appear at a lower point in the stacking order will essentially be hidden from view if a larger object is placed in a higher layer. This can be a useful concept – you can use the layers to mask other layers without changing layer types or using complex masking techniques. This ability can allow you to create an interface rapidly.
注意上图中的界面各部分如何彼此叠置； 这称为层的堆叠顺序。 如果将较大的对象放置在较高的层中，则按堆叠顺序出现在较低位置的那些对象实际上将不可见。 这可能是一个有用的概念-您可以使用图层来遮罩其他图层，而无需更改图层类型或使用复杂的遮罩技术。 此功能可以使您快速创建界面。
Because Fireworks and Flash support layers, we can migrate content from Fireworks to Flash easily. By recreating the layers in Flash and placing the content into each subsequent layer, we can mirror the design we created in Fireworks with a minimum of fuss.
由于Fireworks和Flash支持图层，因此我们可以轻松地将内容从Fireworks迁移到Flash。 通过在Flash中重新创建图层并将内容放置到每个后续图层中，我们可以在Fireworks中创建的设计镜像最少。
Take a look at this exploded view of the interface we saw above.
看看我们上面看到的接口的分解图。
We can create these layers, from the top down, in Flash. We can then begin to import and lay out each element relative to the others.
我们可以从上至下在Flash中创建这些图层。 然后，我们可以开始导入每个元素并相对于其他元素进行布局。
The following diagram outlines the simple process flow. Once we’ve created the interface in Fireworks, we then create the layers to hold the structure in Flash. From this point, it’s simple to copy content from Fireworks and paste it into Flash.
下图概述了简单的流程。 在Fireworks中创建接口后，我们将创建图层以在Flash中保存结构。 从这一点来看，很容易从Fireworks复制内容并将其粘贴到Flash中。
Once the content is in Flash, we can fine-tune the attributes and position of the imported graphics. Once we’re satisfied with our work, we can go back to Fireworks and repeat the process until all the integral elements are in Flash.
一旦内容进入Flash，我们就可以微调导入图形的属性和位置。 对工作感到满意之后，我们可以返回Fireworks并重复该过程，直到所有不可分割的元素都在Flash中。
Note that, when you’re importing directly from Fireworks to Flash, objects are imported as Movie Clips or bitmaps and are placed in a folder called ‘Fireworks Objects’. The naming of the imported objects leaves a little to be desired (‘Symbol 1’, ‘Symbol 2’ etc.), so, after you import each element, it’s a good idea to give the item a more descriptive name for the sake of scalability.
请注意，当您直接从Fireworks导入到Flash时，对象将作为影片剪辑或位图导入，并放置在名为“ Fireworks对象”的文件夹中。 导入对象的命名还有一点不足之处('Symbol 1'，'Symbol 2'等)，因此，在导入每个元素之后，为方便起见，给该项目起一个更具描述性的名称是个好主意。可扩展性。
This procedure also makes the files more usable in the event that you return to the project at a later date.
此过程还使文件在以后返回项目时更加可用。
We can name the instances of any of the clips we’ve added to the stage for manipulation via ActionScript. In the following example, after we name the movie clips in the Primary Menu and Secondary Menus layers, we simply add the ActionScript to the Actions layer, and away we go!
我们可以命名已添加到舞台上以通过ActionScript进行操作的任何剪辑的实例。 在下面的示例中，我们在“主菜单”和“辅助菜单”层中命名了影片剪辑之后，只需将ActionScript添加到“动作”层，就可以了！
Note that, in the included example (contained in the article code archive), no control code is present for the sub-menu items; it’s provided for example only.
请注意，在包含的示例中(包含在商品代码档案中)，子菜单项没有控制代码。 仅作为示例提供。
Using Flash to create gradients for your interfaces can be a tiresome and long-winded process and, while Illustrator is good at some things, nothing is as suited to creating complex and easily controlled gradients as Fireworks MX 2004.
使用Flash为您的界面创建渐变可能是一个繁琐而漫长的过程，尽管Illustrator擅长某些方面，但是没有什么比Fireworks MX 2004更适合创建复杂且易于控制的渐变了。
With Fireworks MX 2004, you can rapidly create compelling interface elements. The program offers a series of simple gradients, with different colors and opacities, which can be overlaid to create subtle effects.
使用Fireworks MX 2004，您可以快速创建引人注目的界面元素。 该程序提供了一系列具有不同颜色和不透明性的简单渐变，可以将其叠加以创建细微的效果。
These creations can then be imported into Flash either by a simple copy and paste, or by export as an Illustrator format file that’s subsequently imported into Flash.
然后，可以通过简单的复制和粘贴将这些创建的内容导入到Flash中，也可以将其导出为Illustrator格式的文件，然后将其导入到Flash中。
The difference between a design that works and one that doesn’t usually lies in its subtleties. Use subtle gradients as the fill type for vector paths fading from 100% opacity to 0% opacity and alter the drag handles for the gradient to produce very interesting and subtle effects.
可行的设计与通常不可行的设计之间的差异在于其微妙之处。 对于从100％不透明到0％不透明的矢量路径，请使用微妙的渐变作为填充类型，并更改渐变的拖动手柄以产生非常有趣且微妙的效果。
Experimenting with the opacity markers for the gradient fill type, as well as the color and Blend mode, can help you achieve realistic effects, whatever the design.
对渐变填充类型，颜色和混合模式进行不透明度标记试验，无论采用哪种设计，都可以帮助您实现逼真的效果。
If you import bitmap-based drop shadows into Flash, they can look grainy at best — dreadful at worst! While it may take a few minutes to create a vector-based alternative, the benefits far outweigh this extra investment in time.
如果将基于位图的阴影导入Flash，则它们充其量只能看起来颗粒状-最糟的是可怕的！ 虽然创建基于矢量的替代方法可能需要几分钟，但这样做的好处远远超过了这种额外的时间投入。
The quickest way to create a vector drop shadow in Flash is to make a solid fill (e.g. black) duplicate of the shape to which you want to add a shadow, then place it on a layer beneath the original object
在Flash中创建矢量投影的最快方法是对要添加阴影的形状进行纯色填充(例如黑色)复制，然后将其放置在原始对象下方的图层上
Then, select the shape, select Modify > Shape > Soften Fill Edges, and select the following settings:
然后，选择形状，选择“修改”>“形状”>“柔化填充边”，然后选择以下设置：
This produces a clean gradated shadow, instead of a hard solid vector line, but play around with the settings to create a look that suits your project.
这将产生干净的渐变阴影，而不是硬的实线矢量，但请根据设置进行调整以创建适合您的项目的外观。
Once you’re happy with the effect, select all the objects you’ve just created with the ‘Soften Fill Edges’ command. Group them together and convert the resulting group to a movie clip, altering the opacity of the clip to around 40% for a soft effect.
对效果满意后，请使用“柔化填充边”命令选择刚创建的所有对象。 将它们组合在一起，然后将结果组转换为影片剪辑，将剪辑的不透明度更改为40％左右，以获得柔和的效果。
That’s it! While we’ve only scratched the surface of interface design in this article, hopefully it has given you a taster — and a few shortcuts for creating interfaces and getting objects into Flash. For more shortcuts and tips, look out for the next instalment!
而已！ 虽然我们在本文中仅介绍了界面设计的表面，但希望它能给您带来一些体会-以及一些用于创建界面和将对象导入Flash的快捷方式。 有关更多快捷方式和提示，请注意下一批！
翻译自: https://www.sitepoint.com/flash-interface-design/
flash 接口
相关资源：基于FPGA的flash接口设计