Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Let's take a moment to think about building a more complex data list component, rather than just a list of dates that scroll up and down. Take a look at this data list component. It lists the flavors that are sold by this particular olive oil farm. As I run my mouse over each of these repeated elements, you can see that a description appears and the name of the flavor does a 3-D rotate. I can see that up here as I move across each of these. Also the scrollbar that appears across the bottom looks like a vine of leaves with a bowl of olives here. The bowl actually serves as the thumb for this scrollbar.
Notice that in this case, the repeating list also repeats in a horizontal fashion not a vertical fashion. Besides the rollovers and descriptions that fade in, I can also click on one of these and you can see it gets highlighted with a black outline. So, before we actually build this inside of Flash Catalyst, let's talk about how we will build the initial artwork so that we can create our data list component. I'll switch over to Illustrator here and I have a file called flavor_datalist which shows the artwork that I'm going to use. Remember that a data list is always made up of a scrollbar component and the repeated element, and I've indicated that here by using two different layers in my document.
Inside the SCROLLBAR layer I have the OliveBowl which I am going to use as the thumb and the Leaves which I'll use as the track of that scrollbar. Now there is one thing to note here, inside of the REPEAT folder and if I look inside of this group here, I'll see that I actually have an image. The artwork here actually is an image. It's a PNG that I have brought in from Photoshop. I can click over here to select the image and since the Embed button is grayed out, you can see that image is actually embedded in my Illustrator file. You don't need to embed your images, but these are so small anyway that usually when I'm working I'll embed the images in my Illustrator file and again it's really going to act as a placeholder as I am going to be bringing in additional images when I get to Flash Catalyst.
So with everything in place here inside of Illustrator, I am now ready to start putting this stuff together inside of Flash Catalyst.
Get unlimited access to all courses for just $25/month.Become a member
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.