sql catalyst
Flash Catalyst, formerly codenamed Thermo, promises to make the process of converting an interface design to code a smooth and easy experience. In this tutorial, spread over two parts, Andrew Muller shows us how to build a nifty Flash application that retrieves music chart data from Yahoo!, using Illustrator, Flash Catalyst, and Flash Builder. Pay attention – there’s a quiz at the end!
Flash Catalyst(以前的代号为Thermo)有望使将界面设计转换为编码的过程变得顺畅而轻松。 在本教程中，Andrew Muller分为两部分，向我们展示了如何使用Illustrator，Flash Catalyst和Flash Builder构建一个漂亮的Flash应用程序，该应用程序从Yahoo!检索音乐图表数据。 注意- 末尾有一个测验！
Note: To play along at home, you’ll need to grab the following:
注意：要在家中进行游戏，您需要掌握以下内容：
Our sample design, in Illustrator format
我们的示例设计，以Illustrator格式
A copy of Illustrator CS4, if you’d like to edit the sample project Illustrator CS4的副本(如果您想编辑示例项目)A copy of the Flash Catalyst beta
Flash Catalyst测试版的副本
A copy of Flex Builder or Flash Builder – grab a demo of Flash Builder here.
Flex Builder或Flash Builder的副本– 在此处获取 Flash Builder 的演示。
Designers have a variety of tools they use on a regular basis to do their day job, often sticking to the one that they know best. Adobe’s Illustrator and Photoshop are two that dominate the software list of choice for interface designers of all stripes, whether they’re involved with site design, rich internet application (RIA) development, or any other kind of screen-based experience. Then, the design is handed over to a developer to convert into a working interface.
设计师会定期使用各种工具来完成日常工作，通常会坚持使用自己最了解的工具。 Adobe的Illustrator和Photoshop是这两种工具的主导者，无论他们参与站点设计，丰富的Internet应用程序(RIA)开发还是任何其他基于屏幕的体验，它们都是所有类型界面设计人员的首选软件列表。 然后，将设计移交给开发人员以转换为工作界面。
A shortcoming of this design process is that, while it allows the designer to create a look for a web application, it’s impossible to see the feel or interactivity of an application until a developer has implemented it. The translation of that design is often imperfect, with designer and developer sometimes at odds over an object being a pixel out or the wrong color shade. How can we build stronger bridges between the two? Enter Flash Catalyst.
该设计过程的一个缺点是，尽管它允许设计人员为Web应用程序创建外观，但直到开发人员实现该应用程序时，才能看到应用程序的感觉或交互性。 该设计的翻译通常是不完善的，设计师和开发人员有时会因某个物体出现像素不足或错误的颜色阴影而产生分歧。 我们如何在两者之间建立更牢固的桥梁？ 输入Flash Catalyst。
Adobe has recently released the first public beta of Flash Catalyst, a new tool to help designers become more involved in the process of building RIA interactions. Designers can use Catalyst to build interactive interfaces for the Flash Player from work they’ve created in either Illustrator or Photoshop, with support for Fireworks slated to follow in a later release. Catalyst is capable of maintaining virtually all the characteristics of the original artwork; users can create interfaces in the applications with which they’re most comfortable, import them to Catalyst for more changes, then complete the round-trip back to the original design tool for further design alterations. Of course, since Catalyst is still in beta, there are some missing options that should come in later beta releases, but it still will give the user a good feel for what’s to come.
Adobe最近发布了Flash Catalyst的第一个公开测试版，这是一种新工具，可以帮助设计人员更多地参与构建RIA交互的过程。 设计人员可以使用Catalyst从在Illustrator或Photoshop中创建的工作为Flash Player构建交互式界面，并在以后的版本中支持Fireworks。 催化剂几乎可以保留原始艺术品的所有特征； 用户可以在最舒适的应用程序中创建界面，将其导入Catalyst进行更多更改，然后完成返回原始设计工具的往返以进行进一步的设计更改。 当然，由于Catalyst仍处于beta中，因此在更高的beta版本中应该会有一些缺少的选项，但它仍将使用户对即将发布的产品有很好的感觉。
As well as converting artwork into a Flash interface, Catalyst includes tools to add interactive elements to the design. This initial release has the ability to convert objects into a limited but useful number of UI components, including data lists, buttons, and scrollbars, with extra UI controls available for wireframing interfaces directly in the Catalyst design view. Catalyst also includes tools for managing state and animated effects. Developers are likely to enjoy Catalyst because the designer can now turn objects into buttons before handing over the design, thus reducing a developer’s workload. It will also mean that there should be less possibility of designs being improperly applied to Flash applications, since all the visuals have been prepared in advance.
除了将图稿转换为Flash界面外，Catalyst还包括在设计中添加交互式元素的工具。 此初始发行版具有将对象转换为数量有限但有用的UI组件的能力，包括数据列表，按钮和滚动条，并且额外的UI控件可直接在Catalyst设计视图中用于线框图界面。 Catalyst还包括用于管理状态和动画效果的工具。 开发人员可能会喜欢Catalyst，因为设计人员现在可以在移交设计之前将对象变成按钮，从而减少了开发人员的工作量。 这也将意味着将设计不适当地应用于Flash应用程序的可能性应该降低，因为所有的视觉效果都是事先准备好的。
We’re going to create a simple Flash application that will display information retrieved online via Yahoo’s YQL (Yahoo Query Language) service. For dynamic content we’ll use four YQL queries to retrieve a variety of music chart information. To help make this tutorial easier, we’ve decided to use example queries from the YQL site. Yahoo also provides design stencils that you can use to prototype your next RIA masterpiece; the tab stencils from the Yahoo design kit were part of the inspiration for the design of this application.
我们将创建一个简单的Flash应用程序，该应用程序将显示通过Yahoo的YQL(雅虎查询语言)服务在线检索的信息。 对于动态内容，我们将使用四个YQL查询来检索各种音乐图表信息。 为了帮助简化本教程，我们决定使用来自YQL网站的示例查询。 雅虎还提供设计模版 ，您可以使用它们来制作下一个RIA杰作的原型。 Yahoo设计工具包中的标签模板是该应用程序设计灵感的一部分。
To begin, I’ve taken a vertical tab design out of the Yahoo stencil kit and imported that into Illustrator. The next task is to create the outline shape of the application – in this example I’ve used Illustrator’s drawing tools to design a box for that, with two rounded corners and a gradient fill to lift it up a bit. The app we’re building will be retrieving multiple rows of data from the YQL service as XML, so the next job is to define a way to display that repetitive data. Depending on the type of data, the typical interface pattern is to display information in either rows or tiles – here I’ve used rows.
首先，我从Yahoo模板工具包中提取了垂直标签设计，并将其导入到Illustrator中。 下一个任务是创建应用程序的轮廓形状–在此示例中，我使用了Illustrator的绘图工具为此设计了一个框，该框具有两个圆角和渐变填充以将其抬起一点。 我们正在构建的应用程序将以XML形式从YQL服务检索多行数据，因此下一个工作是定义一种显示重复数据的方法。 根据数据类型的不同，典型的界面模式是在行或图块中显示信息-在这里我使用行。
We’ll then need to create artwork to represent a single row of music chart data. The data that we’ll receive could include chart position, a URL for album cover artwork, a chart position shift indicator, and the names of the artist and track. Lastly, there’s a scrollbar, designed to match the curvy corners of the application.
然后，我们需要创建艺术品来表示音乐图表数据的单行。 我们将收到的数据可能包括图表位置，专辑封面插图的URL，图表位置偏移指示器以及艺术家和曲目的名称。 最后，还有一个滚动条，旨在匹配应用程序弯曲的角。
Next, we’ll need to create artwork to represent the detail view state for the application. In Catalyst, we’re able to specify different states using different files or different layers within the file. Catalyst also has a simple timeline, which may be used to control the timing of objects fading in and out as we switch between states.
接下来，我们需要创建艺术品来表示应用程序的详细视图状态。 在Catalyst中，我们可以使用不同的文件或文件中的不同层来指定不同的状态。 Catalyst还具有一个简单的时间轴，可用于控制在状态之间切换时对象淡入和淡出的时间。
With that done we’re ready to show the mockups to a client for feedback, finalize the design, and bring it into Catalyst for some interactivity! Here’s the mockup displaying both states of our app.
完成此操作后，我们准备向客户展示样机以征求反馈，完成设计，并将其带入Catalyst进行交互！ 这是显示我们应用程序的两种状态的模型。
Next, it’s time to start adding interactivity in Catalyst.
接下来，是时候开始在Catalyst中添加交互性了。
Time to jump into Catalyst! Use the option to create a new project from an existing design file, and open the Illustrator file that we’ve created. It’ll take a moment or two to parse the file – naturally you should pay attention to the prompts for options like canvas size and editable regions, but in this example we’ll leave everything set at default.
该跳入Catalyst了！ 使用该选项可从现有设计文件创建新项目，然后打开我们创建的Illustrator文件。 解析文件将花费一两分钟的时间–自然地，您应该注意提示的提示，例如画布大小和可编辑区域，但是在本示例中，我们将所有设置保留为默认设置。
Let’s begin with the track/artist chart display part of the design. We’ll convert this into a predefined Catalyst component called a Data List. Select any object in the design, and you’ll see a floating gray panel called the Heads Up Display (HUD) appear. This is used to create and manage interactive components.
让我们从设计的曲目/艺术家图表显示部分开始。 我们将其转换为名为Data List的预定义Catalyst组件。 选择设计中的任何对象，您将看到一个名为Heads Up Display (HUD)的浮动灰色面板。 这用于创建和管理交互式组件。
The column of options on the right of the screen contains a series of panels that may be familiar if you’ve used Flash previously. In here you’ll find layers, library panels, and property panels as you normally would in Flash to manage various aspects of your content. As in Flash, the higher an object is in the Layers panel, the closer it is to the top of the stack of objects – that’s an important point to remember. The Layers panel is also a good way of quickly selecting specific objects, especially if they’re small or otherwise difficult to click on.
屏幕右侧的选项列包含一系列面板，如果您以前使用过Flash，可能会很熟悉。 在这里，您将找到图层，库面板和属性面板，就像通常在Flash中管理内容的各个方面一样。 与在Flash中一样，“ 层”面板中的对象越高，则离对象堆栈顶部越近-这是要记住的重要点。 “ 图层”面板也是快速选择特定对象的好方法，尤其是当它们很小或难以单击时。
The list is made up of repeated items with a scrollbar to move through the content. We’ll start by converting the scrollbar art into a working scrollbar. Select the elements that make up the scrollbar design. In our slider, we have a track, a thumb, and three small lines representing the thumb’s grip; we’ll select all these, and choose Convert Artwork to Component > Vertical Scrollbar from the HUD. You might find that it’s easier to grab the items from the Layers panel, especially when they’re quite small, like the tiny texture on our scrollbar.
该列表由重复项组成，并带有滚动条以在内容中移动。 我们将从将滚动条图稿转换为工作滚动条开始。 选择组成滚动条设计的元素。 在滑块中，我们有一个轨迹，一个拇指和代表拇指握持力的三行小线。 我们将选择所有这些，然后从HUD中选择“ 将图稿转换为组件 > 垂直滚动条 ”。 您可能会发现，从“ 图层”面板中抓取项目会更容易，尤其是当它们很小时，例如滚动条上的微小纹理。
Once converted, you should see a small yellow message in the HUD indicating that there are some component issues: this is because we still need to identify the individual parts that make up our scrollbar. Choose Edit Parts from the HUD, and select the track, then define it as the scrollbar’s Track from the Convert Artwork drop-down. Select the thumb image and the gripper artwork, and set them as the Thumb part from the same set of options.
转换后，您应该在HUD中看到一条黄色的小消息，表明存在一些组件问题：这是因为我们仍然需要识别组成滚动条的各个部分。 从HUD中选择“ 编辑零件 ”，然后选择轨道，然后从“ 转换图稿”下拉列表中将其定义为滚动条的轨道 。 选择拇指图像和机械手插图，然后从同一组选项中将它们设置为“ 拇指”部件。
Now that we’re finished with the scrollbar, we’ll need to return to the main Design window to continue building the application. There’s a breadcrumb-like indicator at the top left of the design area listing which part of the application you’re in; click on the first item in the breadcrumb to return to the whole application.
现在，我们已经完成了滚动条，我们需要返回到“ 设计 ”主窗口以继续构建应用程序。 在设计区域的左上方有一个类似面包屑的指示器，列出了您所处应用程序的哪一部分； 单击面包屑中的第一项，以返回整个应用程序。
The next component that we’ll use within the design is the repeated list item, representing how each row of information will look within our Data List. We’ll only need one of the rows that we created for the mockup, as this is all Catalyst requires to determine how the items should look, so we’ll delete the bottom three and just keep the first one. Then select all the graphics for that first row, plus the scrollbar component that we’ve just created, and use the HUD to convert the artwork to a Data List component.
我们将在设计中使用的下一个组件是重复列表项，该列表项表示每行信息在数据列表中的外观。 我们只需要为模型创建的行之一，因为这是Catalyst决定项目外观的全部要求，因此我们将删除底部的三行，而只保留第一行。 然后选择第一行的所有图形， 再加上我们刚刚创建的滚动条组件，然后使用HUD将图稿转换为“数据列表”组件。
Once again, a yellow message appears to indicate that there’s an issue with the component – we need to identify what element will form the repeated item. Select the artwork for the whole row, click Edit Parts, and define the row with the HUD to a Repeated Item. You should see that item will repeat down the window.
再次出现黄色消息，表明组件存在问题–我们需要确定将构成重复项的元素。 选择整行的图稿，单击“ 编辑零件” ，然后将HUD定义为重复项的行 。 您应该看到该项目将在窗口下重复。
The size of the Data List affects what’s currently displayed, including the way that content will be cropped as you scroll up and down later on, so now’s the time to adjust the size of the data list to taste. Using the breadcrumbs above, double-check to see that you’re still within the Data List component, then use the drag handles to adjust the height of the list accordingly. We’ll extend the height of the Data List component to just inside the application itself; that way the list will appear to be masked by the application when it’s in use.
数据列表的大小会影响当前显示的内容，包括稍后向上和向下滚动时裁剪内容的方式，因此现在是时候调整数据列表的大小以进行品尝了。 使用上面的面包屑，仔细检查一下您是否仍在“数据列表”组件中，然后使用拖动手柄相应地调整列表的高度。 我们将数据列表组件的高度扩展到应用程序内部。 这样，在使用该列表时，该列表似乎会被应用程序掩盖。
Let’s see how that looks. From the File menu, select Run Project. Flex will begin building your application, and a new browser window will appear. If all went well, you should find that you can scroll up and down the Data List using your scrollbar.
让我们看看它的外观。 从“ 文件”菜单中，选择“运行项目” 。 Flex将开始构建您的应用程序，并且将出现一个新的浏览器窗口。 如果一切顺利，您将发现可以使用滚动条上下滚动“数据列表”。
The next step in our application is to start adding the interactions to the design – but you’ll have to stay tuned for the next part of this tutorial for that! In Part II, we’ll add more interaction, show you how to take your Catalyst project into Flash Builder, and populate the application using queries generated via Yahoo’s YQL service.
我们应用程序的下一步是开始将交互添加到设计中-但是您必须继续对此教程的下一部分进行调整！ 在第二部分中，我们将添加更多交互，向您展示如何将Catalyst项目带入Flash Builder，并使用通过Yahoo的YQL服务生成的查询来填充应用程序。
For now, save your project, and relax – we’ll see you in Part II!
现在，保存您的项目，然后放松–我们将在第二部分中与您相见！
Think you have what it takes to be a Flash Catalyst guru? Prove it with our quick quiz!
认为您有能力成为Flash Catalyst专家？ 用我们的快速测验证明！
翻译自: https://www.sitepoint.com/flash-catalyst-flash-builder/
sql catalyst
