Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
To start building my Data List I'll create a new project here in Flash Catalyst from an Illustrator file. I'll navigate to my Exercise Folder in Chapter 08 and I'll choose the Illustrator file called flavor_datalist. I'll click Open, I'll choose the default settings in the Illustrator Import Options dialog box and once the artwork comes in, I'll be ready to start building my Data List component. First, let's create the scrollbar. I'll select these two elements here on the bottom and using the HUD I'll convert this artwork to a Horizontal Scrollbar.
Now at this point I need to edit the parts, so I'll click on the Edit Parts button in the HUD. I'll select the olive bowl itself and turn that into the Thumb and I'll select the leaves and I'll turn that into the track. We're not going to be creating Right and Left buttons in this particular example. So now I'll double-click to exit the Isolation mode and I've completed the first step. Next, I need to actually create a Data List component itself. So I'll select all art here which is going to be my repeating element and I'll also select the Scrollbar.
With all these elements now selected, I'll use the HUD to convert all of this artwork into a single Data List component. At this point I need to tell Flash Catalyst which part of my artwork is going to be the repeating element. So I'll Edit Parts. I'll now select this artwork right here, and I'll convert that to Repeated Item. The default setting in Flash Catalyst is to repeat elements vertically, but in this case we want them to repeat in a horizontal fashion. To make it easier to work with right now, I'm actually going to collapse my Timelines panel and also the Pages/States panel.
I'll now come over to the Properties panel and I'll scroll down so I can view the settings for the layout of this Repeated Item. Rather than using a Vertical setting I'm going to choose Horizontal. I'm also going to resize the boundaries of the component, because that's all I need to do right here and I'll adjust the spacing to about two pixels between each of these elements. One thing which I will do here is I'm going to go back over here to the Pages/States panel, because as you can see when you create a Data List component, you have two states a Normal state and a Disabled state.
I'm not using the Disabled state right now, but if I were, I'd have to come here to click on it and repeat the same steps that I just applied to the Normal state. Of course, I can come right back over here to the Normal state and choose Make Same in All Other States to save myself some time. I'll double-click on the artboard to exit the Isolation mode, and at this point we actually have now a functional Data List component. I can press Ctrl+Enter on my keyboard to preview this in my web browser and I'll see that once it loads I can actually click here on the bowl of olives and drag it to scroll through those different elements.
So now we're ready to focus on the actual element itself. Let's go back to Flash Catalyst and see how we can work on that. The first thing I'm going to do is double- click on the component itself to isolate it. I want to work on the repeating element, so I'm going to double-click again on this area. Right now I've isolated just the repeating element itself. Notice that this repeating element has three states, a Normal state, an Over state and a Selected state. By default Flash Catalyst adds a rectangle that's tinted in a light-blue color.
It's an object that's called Item Highlight Rectangle here inside of your Layers panel. This way when I mouse over or select my artwork, I have some indication that that happened. However, I don't want to use the default settings here inside of Flash Catalyst. I'd like to define my own settings. So here in the Layers panel I'm going to click on that Item Highlight Rectangle and then click on the Trash Can to delete it. Let's go ahead now and change some of these settings. First of all in the Normal state I don't want the description to be visible. I only want that description to appear when I run my mouse over each flavor.
So with the Normal state highlighted, I'll come to Layers panel and hide that particular layer called Description of the flavor goes here. Next, I'd like to adjust the Selected state by adding a stroke to that outside green rectangle. So I'll come to the Layers panel. I'll reveal of the contents of this group here and select the Rectangle itself. In the Properties panel where it says Rectangle, I'll come down to the Stroke section, I'll apply a Solid Stroke and I'll change the color of that stroke to Black and I'll leave the weight of that Stroke set to 1 pixel.
So I've now defined all of my states. The Normal state does not have a description, the Over state makes a description appear, and the Selected state adds a stroke around the outside rectangle. However, I'd also like to add some transitions here. To do so I'm going to work with the Timelines panel. So I'll double-click on Timelines to open up that panel and I'd like to define a transition for when I go from the Normal state to the Over state. So I'm going to choose the Normal to Over transition here in the Timelines panel and I'll click on Smooth Transition.
If I preview that I can see that now that description text will slowly fade in, but I'd also like to add one other effect. I want this bar over here that contains the flavor to actually perform a rotate 3D effect. If I scroll up higher to my Layers panel here, I'll see these two elements Flavor and Rectangle. I'm going to hold my Shift key so that I can select both of these and just to make it easier to work with I'm going to press Ctrl+G or Command+G to turn them into a group. Now with that group selected on my artboard, I'm going to manually add an action in the Timelines panel.
I'm going to choose to add Rotate 3D effect and rather than rotating it around a vertical axis, I'll change this value here to 0. I want to rotate it around the horizontal axis, so I'll choose 360 degrees right here. Now I can click on the Play button and preview how that's going to look. Note the Flavor does a 3D rotate flip and the description text gradually appears. At this point I've added everything I need for this Data List. I'll double-click on the artboard to exit Isolation mode. I'll double-click again to exit the Isolation mode for this Data List component and I'll go to the File menu and choose to run this project in a browser.
Now I can test its functionality. I can use the bowl of olives to scroll back and forth and view the different flavors, and as I run my mouse over each of these, I'll see the description text fade in and the Flavor rotate in 3D. If I click on one of them, it becomes selected with a black stroke around the outside. At this point all I need to do is add some data to show different flavors. We'll do that back in Flash Catalyst in the next movie.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 59234 Viewers
61 Video lessons · 92190 Viewers
82 Video lessons · 104058 Viewers
56 Video lessons · 106759 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.