sql catalyst
Adobe® Flash® Catalyst™ CS5 represents a revolution in the designer-developer workflow. In the first instalment of this three-part series, you’ll discover how to import your existing mockup artwork into Flash Catalyst and convert the various elements into working Flex components. We assume some basic familiarity with Flex and its component library, and an elementary understanding of Photoshop and Illustrator. You can download the design file and the finished Flash Catalyst project and make sure to test yourself on the quiz afterwards.
Adobe®Flash®Catalyst™CS5代表了设计师-开发人员工作流程的一场革命。 在这个由三部分组成的系列的第一部分中，您将发现如何将现有的模型艺术品导入Flash Catalyst并将各种元素转换为有效的Flex组件。 我们假定对Flex及其组件库有一些基本的了解，并且对Photoshop和Illustrator有基本的了解。 您可以下载设计文件和完成的Flash Catalyst项目 ，并确保随后进行测验 。
The catch-22 of web and software development is that the client always wants to see what they’re paying for before it exists. Up until now, we have done the best we can to represent our applications with screenshots and mockups to demonstrate any actual functionality. In the best case, when there’s time and budget for a prototype, a developer works closely with a designer to build a working facade from the mockups. Flash Catalyst changes all that, allowing a designer to create original artwork in Photoshop, Illustrator, or Fireworks, then import it into Flash Catalyst and turn it into a working prototype, complete with moving parts, transitions, and components. This lets the client see it all working and moving, which can make all the difference in delivering exactly what they want.
Web和软件开发的陷阱22是，客户始终希望在付款之前就知道要付款什么。 到目前为止，我们已尽力通过截图和模型来表示我们的应用程序，以演示任何实际功能。 最好的情况是，如果有时间和预算来制作原型，开发人员会与设计师紧密合作，从模型中构建出可行的外观。 Flash Catalyst改变了所有这些，允许设计人员在Photoshop，Illustrator或Fireworks中创建原始作品，然后将其导入Flash Catalyst并将其转换为可运行的原型，其中包括移动的零件，过渡和组件。 这样一来，客户就可以看到所有工作和运行中的信息，这可以在交付他们所需要的一切方面有所作为。
As an example, we’ll be creating a prototype for a very simple contact list that the client will put on their intranet. After consultation, the client has indicated that they’d like the following features:
举个例子，我们将为客户创建一个非常简单的联系人列表原型，该列表将被放置在客户的Intranet上。 经过咨询，客户已表明他们想要以下功能：
A list of contacts ordered by name.
按姓名排序的联系人列表。
The contact pane to be displayed on the right-hand side once you have clicked on a contact in the list.
单击列表中的联系人后，联系人窗格将显示在右侧。
Each contact has these fields: name, address, phone, email, and place for a photo.
每个联系人都有以下字段：姓名，地址，电话，电子邮件和照片的放置位置。
A search box for searching contacts.
用于搜索联系人的搜索框。
From this brief, our designer has come up with the fabulous mockup in Adobe Illustrator that you can see in Figure 1, “Adobe Illustrator mockup”.
通过此简短的介绍，我们的设计师提出了Adobe Illustrator中出色的模型，您可以在图1“ Adobe Illustrator模型”中看到它。
The client is happy with the look, but they want to be able to test it out before agreeing to go ahead with the rest of the project. To see the job over the line, we need to provide a working prototype without spending money on engaging our developer. Flash Catalyst to the rescue!
客户对外观很满意，但是他们希望能够在同意继续进行其余项目之前对其进行测试。 要在线查看工作，我们需要提供一个有效的原型，而无需花钱吸引我们的开发人员。 Flash Catalyst进行救援！
Open Flash Catalyst, and on the Welcome screen under the Create New Project From Design File header on the right-hand side, choose From Adobe Illustrator AI File.
打开Flash Catalyst，然后在右侧的“从设计文件创建新项目”标题下的“ 欢迎”屏幕上，选择“ 从Adobe Illustrator AI File” 。
Browse to the location where you extracted the project archive from this tutorial, and choose the file mockup.ai. Click the OK button, and when the Illustrator Import Options dialog pops up, leave the defaults in place and click OK. Flash Catalyst will take a few moments to import the Illustrator file, and then you’ll be presented with the interface shown in Figure 2, “Flash Catalyst Interface”.
浏览到从本教程中提取项目档案的位置，然后选择文件mockup.ai 。 单击确定按钮，然后弹出Illustrator导入选项对话框，将默认值保留在原位，然后单击确定 。 Flash Catalyst将需要一些时间来导入Illustrator文件，然后您将看到图2“ Flash Catalyst界面”中所示的界面 。
As the name indicates, the PAGES/STATES panel, shows the pages or states available in the application. There’s just the default base state to start with, but you can add new states here. This works the same way as modifying states in the design mode in Flash Builder. If you duplicate the base state, select the new state, and delete some visual components from it—they’ll be removed from just that new state, remaining available on the base state. We’ll see an example of this later in the tutorial.
顾名思义， PAGES / STATES面板显示应用程序中可用的页面或状态。 开始时只有默认的基本状态，但是您可以在此处添加新的状态。 这与在Flash Builder中的设计模式下修改状态的方式相同。 如果您复制基本状态，请选择新状态，然后从中删除一些可视组件-它们将从该新状态中删除，并在基本状态上保持可用。 在本教程的后面，我们将看到一个示例。
This is the artboard, which is where your imported artwork appears. You can drag and drop artwork around and use a limited selection of Illustrator style tools to manipulate it, as well as create new artwork, including simple lines, shapes, and text.
这是画板 ，这是您导入的图稿出现的地方。 您可以拖放图稿，并使用有限的Illustrator样式工具进行操作，以及创建新图稿，包括简单的线条，形状和文本。
When an artwork element or component is selected on the artboard, a Heads Up Display or HUD (like the one shown in Figure 3, “The HUD”) will appear, offering you options related to the selected item.
在美工板上选择艺术品元素或组件时，将显示平视显示器或HUD( 如图3所示，“ HUD” )，为您提供与所选项目相关的选项。
This is the LAYERS panel; you can see that the layers from the original Illustrator file have actually been imported and preserved. This panel lets us play with the individual elements of the mockup and convert them to components. The LIBRARY panel works similarly to the library panel in Adobe Flash Professional, showing the various components you have available in the application. At first, you won’t have any components defined so this will be empty.
这是“ 图层”面板； 您可以看到原始Illustrator文件中的图层实际上已被导入并保留。 该面板使我们可以处理模型的各个元素，并将其转换为组件。 LIBRARY面板的工作方式类似于Adobe Flash Professional中的库面板，显示了应用程序中可用的各种组件。 首先，您将没有定义任何组件，因此将为空。
The bottom pane contains the DESIGN-TIME DATA panel, which lets you add data items that can be used in list components, for example. The other panel is the TIMELINES, which will allow you to manipulate artwork in a similar manner to the timeline in Adobe Flash Professional, and create transitions and behaviors.
底部窗格包含DESIGN-TIME DATA面板，例如，该面板可让您添加可在列表组件中使用的数据项。 另一个面板是“ 时间线” ，它允许您以与Adobe Flash Professional中的时间线类似的方式操纵图稿，并创建过渡和行为。
The PROPERTIES panel will show the properties of selected components or artwork elements and allow you to edit them. The WIREFRAME COMPONENTS panel is a small library of components you can add to the design, such as scrollbars, buttons, and text inputs.
“ 属性”面板将显示所选组件或插图元素的属性，并允许您对其进行编辑。 WIREFRAME COMPONENTS面板是一个小的组件库，您可以将其添加到设计中，例如滚动条，按钮和文本输入。
One of the greatest strengths of Flash Catalyst is the way it lets you designate items of artwork as actual Flex components. To begin with, we’ll make a very simple component by turning the search box into a TextInput element. Click on the search box underneath the “Contacts” text, or select its layer in the LAYERS panel. Your HUD should change to look like Figure 3, “The HUD”. Click on the Convert Artwork to Component button, and from the drop-down menu, choose Text Input. Now save your project, open the File menu, and choose Run Project. This will compile an SWF file from the project. You should now be able to click inside the search box and see that it works as a proper TextInput element!
Flash Catalyst的最大优势之一是它使您可以将艺术品指定为实际Flex组件的方式。 首先，我们将搜索框变成一个TextInput元素，使它成为一个非常简单的组件。 单击“联系人”文本下方的搜索框，或在“ 图层”面板中选择其图层 。 您的HUD应该更改为类似于图3“ HUD” 。 单击将图稿转换为组件按钮，然后从下拉菜单中选择文本输入 。 现在保存您的项目，打开“ 文件”菜单，然后选择“运行项目” 。 这将从项目中编译一个SWF文件。 现在，您应该能够在搜索框中单击并看到它可以作为适当的TextInput元素使用！
Believe it or not, Flash Catalyst has just converted the rectangle in our artwork into a genuine Flex TextInput component, and even generated the code for it. In the top right-hand corner of the Flash Catalyst interface is the Workspaces pop-up menu (shown in Figure 4, “Design workspace”), which allows you to switch between design and code workspaces. Currently, it will say DESIGN.
信不信由你，Flash Catalyst刚刚将我们作品中的矩形转换为真正的Flex TextInput组件，甚至为其生成了代码。 在Flash Catalyst界面的右上角是“ 工作区”弹出菜单(如图4所示，“设计工作区” )，它使您可以在设计工作区和代码工作区之间进行切换。 目前，它将显示DESIGN 。
Click on it and switch to the CODE workspace shown in Figure 5, “Code workspace”.
单击它，然后切换到图5“代码工作区”中所示的CODE工作区 。
You can see (on or near line 91) that Flash Catalyst has generated a proper <s:TextInput/> MXML tag, even adding a skinClass attribute value. If you expand the PROJECT NAVIGATOR panel on the right-hand side you can find the skin as well, and you’ll see that a full Spark skin has been created.
您可以(在第91行上或附近)看到Flash Catalyst生成了正确的<s:TextInput/> MXML标签，甚至添加了skinClass属性值。 如果在右侧展开PROJECT NAVIGATOR面板，则也可以找到该外观，并且您会看到已创建完整的Spark外观 。
Best of all, the skin is rendered using the Flash drawing API instead of embedded images, making our application that much lighter and more scalable.
最重要的是，皮肤是使用Flash绘图API而不是嵌入式图像进行渲染的，这使我们的应用程序更轻便，更可扩展。
Go back to the Design workspace in Flash Catalyst and select both the Search button and the text on it (make sure you have both selected). Then use the HUD to convert them into a Button component. When you’ve done this, the HUD will change to show four new buttons (shown in Figure 6, “Button state editing”); these new buttons represent states of your new button, and we can edit these various states here.
返回Flash Catalyst中的“设计”工作区，然后选择“ 搜索”按钮和其上的文本(确保同时选择了两者)。 然后使用HUD将它们转换为Button组件。 完成此操作后，HUD将更改为显示四个新按钮(如图6所示，“按钮状态编辑” )。 这些新按钮代表您新按钮的状态，我们可以在此处编辑这些不同状态。
Click on the Down button, and Flash Catalyst will move you into isolation mode for editing on the Down state of the button. When in the Down state, select the button and move it one pixel down and to the right. This will give us a bit of movement in the button when we click it, so we can see that it’s working.
单击“ 向下”按钮，Flash Catalyst将带您进入隔离模式，以便在按钮的“ Down状态下进行编辑。 处于“ Down状态时，选择按钮并将其向下和向右移动一个像素。 单击按钮时，这将使我们在按钮上有一些移动，因此我们可以看到它正在工作。
In normal development you’d ideally create each of the states as layers in Illustrator, then assign them in Flash Catalyst—but we’re going to keep it simple for now. If you now run your project again, you can click on the button and see it respond.
在正常开发中，理想情况下，您将在Illustrator中将每个状态创建为图层，然后在Flash Catalyst中将其分配-但是我们现在将使其保持简单。 如果现在再次运行项目，则可以单击按钮并看到它的响应。
Now we come to the more complicated part. Buttons and TextInputs are fairly straightforward, but the real functionality of our little application centers around the list of contacts. Flash Catalyst can actually convert our artwork into a working List component, complete with data and an itemRenderer.
现在我们来讨论更复杂的部分。 Buttons和TextInput相当简单，但是我们的小应用程序的真正功能围绕联系人列表进行。 Flash Catalyst实际上可以将我们的图稿转换为一个工作的List组件，其中包含数据和itemRenderer 。
Make sure you’re out of isolation mode by hitting the Escape key, or going to the Modify menu and choosing Exit Editing. Start by selecting the following layers on the right-hand side: List, little @, list item name, and Item. When they’re all selected, use the HUD to convert the artwork to a Data List. You should see the HUD change to look like Figure 7, “Data List HUD”.
按下Escape键，或进入“ 修改”菜单并选择“ 退出编辑” ，以确保您退出隔离模式。 首先从右侧选择以下几层： List ， little @ ， 列表项名称和Item 。 全部选中后，使用HUD将图稿转换为“ 数据列表” 。 您应该看到HUD更改看起来像图7，“数据列表HUD” 。
At the top-right of the HUD you can see a warning message, telling us that there are issues with the component. Click on the Edit Parts button and you’ll find yourself in isolation mode with the four layers you previously selected. Select all the layers except the List layer and you’ll see the HUD change to show a button labeled Convert Artwork to Data List Part. Click it, then from the drop-down list choose Repeated Item. Flash Catalyst will think for a moment, then some cool stuff happens.
在HUD的右上方，您会看到一条警告消息，告诉我们组件存在问题。 单击“ 编辑零件”按钮，您将发现自己处于先前选择的四层的隔离模式。 选择除“ 列表 ”层以外的所有层，您将看到HUD更改以显示一个标记为“ 将图稿转换为数据列表零件”的按钮。 单击它，然后从下拉列表中选择重复项 。 Flash Catalyst会思考片刻，然后发生一些很酷的事情。
Flash Catalyst recognizes that the repeated item is a data item in the list and generates a few more for you, so now you’ll have five items in the list all looking the same. If you escape out of the isolation mode and click on the DESIGN-TIME DATA panel, you’ll see it has even separated the little image and text for us! Change the text of the four new items to other names so we can tell the difference, like I have in Figure 8, “Add fictional names to the list”.
Flash Catalyst认识到重复项是列表中的一个数据项，并且会为您生成更多项，因此现在您将在列表中有五个项看起来都一样。 如果您退出隔离模式并单击DESIGN-TIME DATA面板，您会发现它甚至为我们分隔了少量图像和文字！ 将四个新项的文本更改为其他名称，以便我们可以分辨出它们的区别，就像我在图8中“将虚构名称添加到列表中”所示 。
You can even add more data items or remove some from the list by using the controls at the bottom of the DESIGN-TIME DATA panel. If you switch to the code workspace briefly, you’ll be able to see that the list component has been created with its own skin, which specifies the item renderer skins and all the subcomponents we need.
您甚至可以使用“ 设计时数据”面板底部的控件来添加更多数据项或从列表中删除某些数据项。 如果您短暂切换到代码工作区，您将能够看到列表组件是使用其自己的皮肤创建的，该皮肤指定了项目渲染器皮肤以及我们需要的所有子组件。
Ideally, you’d now modify the item renderer to include a hover state and selected state for usability, but again we’ll just keep it simple for this example.
理想情况下，您现在将修改项目呈示器以包括hover状态和selected状态以提高可用性，但是对于此示例，我们再次将其保持简单。
Finally, we’ll try our hand at adding a new state to the application. You’d expect that when the application is loaded the contact pane on the right-hand side is hidden, as the user has yet to select a contact. We’ll set up that panel to work with a new state, triggered by the selection of an item in the list.
最后，我们将尝试向应用程序添加新状态。 您希望在加载应用程序时，右侧的联系人窗格被隐藏，因为用户尚未选择联系人。 我们将设置该面板以使用新状态，该状态由列表中项目的选择触发。
Right-click on the state thumbnail in the PAGES/STATES panel at the top of the interface, and choose Duplicate State. Double-click the new state thumbnail and rename it to contactView. Double-click the original state, which should be already named Page1, and rename it listView. Make sure that the listView state is selected, then in the artboard go and delete the big @ symbol and the contact details on the right-hand side. Don’t worry, they’ll be preserved in the contactView state.
右键点击界面顶部“ 页面/状态”面板中的状态缩略图，然后选择复制状态 。 双击新的状态缩略图，并将其重命名为contactView 。 双击原始状态，该状态应该已经命名为Page1 ，并将其重命名为listView 。 确保已选择listView状态，然后在画板中删除大的@符号和右侧的联系方式。 不用担心，它们会保留在contactView状态。
That’s all there is to it—Flash Catalyst has now created the state code behind the scenes telling Flex to remove those components from the screen when the user is viewing the listView state, and add them when they move to the contactView state.
这就是全部内容-Flash Catalyst现在在后台创建了状态代码，告诉Flex在用户查看listView状态时从屏幕上删除这些组件，并在它们移至contactView状态时添加它们。
Now click on the TIMELINES panel at the bottom of the interface and you’ll see the state transitions listed there, as shown in Figure 9, “State transitions”.
现在，单击界面底部的TIMELINES面板，您将看到在那里列出的状态转换， 如图9中的“状态转换”所示 。
Click on the listView > contactView layer on the left-hand side.
单击左侧的listView> contactView层。
You can see in the middle of the timeline, Flash Catalyst has added a transition for us for each element that we removed from the listView state. If you mouse over the little vertical bar to the left of the words “Fade In” on one of the layers, you’ll see a resize handle appear, as in Figure 10, “Resize handle”.
您可以在时间轴的中间看到，Flash Catalyst为我们从listView状态中删除的每个元素添加了一个过渡。 如果将鼠标悬停在其中一层上的“淡入”一词左侧的垂直小条上，则会看到一个调整大小的手柄， 如图10中的“调整大小的手柄” 。
Click on the resize handle and drag the bar out to the right until the tooltip shows Duration 2.0s, and it will look like Figure 11, “Increasing the duration”.
单击调整大小手柄，然后将栏拖到右侧，直到工具提示显示Duration 2.0s为止，其外观类似于图11，“增加持续时间” 。
If you hit the play icon now you’ll see the transition take effect. It will look a bit simple as we’ve only adjusted the one component, but you can still see that it’s working.
如果您现在点击播放图标，您将看到过渡生效。 看起来有些简单，因为我们只调整了一个组件，但是您仍然可以看到它正在工作。
Go down and make the same adjustment for every layer on this transition. Then switch to the contactView > listView transition and do the same with the Fade Out effects that are there.
向下进行此过渡上的每个图层相同的调整。 然后切换到contactView> listView过渡，并使用其中的“ 淡出”效果进行相同的操作。
Now all we need to do is hook up the transitions to a user interaction. In the artboard, right-click on the contact list component, and choose Add Interaction. A dialog will pop up to allow you to set the interaction rules; change the values to match Figure 12, “Setting interaction rules”.
现在，我们需要做的就是将转换过渡到用户交互。 在美工板上，右键单击联系人列表组件，然后选择添加交互 。 将弹出一个对话框，允许您设置交互规则。 更改值以匹配图12，“设置交互规则” 。
Now save and run your project, and try clicking on an item in the contact list. You should see the contact details fade in nicely on the right-hand side, showing our transition to the new state.
现在保存并运行您的项目，然后尝试单击联系人列表中的项目。 您应该会在右侧看到详细的联系方式消失，这表明我们已过渡到新状态。
Already we can see how powerful Flash Catalyst can be, both for prototyping and for the initial set up of a Flex project. The code that Flash Catalyst generates can actually be opened directly in Flash Builder and manipulated because the two applications share a common project format. In the next article in this series, we’ll examine the code in Flash Builder and look at some of the PHP-specific functionality Flash Builder provides to help us start hooking the application up to some real data.
我们已经看到Flash Catalyst的功能强大，无论是用于原型设计还是Flex项目的初始设置。 实际上，Flash Catalyst生成的代码可以直接在Flash Builder中打开并进行操作，因为这两个应用程序共享相同的项目格式。 在本系列的下一篇文章中，我们将检查Flash Builder中的代码，并查看Flash Builder提供的一些特定于PHP的功能，以帮助我们开始将应用程序连接到一些实际数据。
In the meantime, play around with the demo application in Flash Catalyst. Try adding some new transitions and complete states for the various components. And remember to take the Adobe-sponsored quiz to test your knowledge.
同时，试用Flash Catalyst中的演示应用程序。 尝试为各个组件添加一些新的过渡并完成状态。 并记住参加Adobe赞助的测验以测试您的知识 。
翻译自: https://www.sitepoint.com/prototype-with-flash-catalyst/
sql catalyst
562
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
