Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So we have successfully created a pretty cool Data List component. It has a customized scrollbar, the repeating elements appear in a horizontal format, and when I mouse-over each entry, some text fades in and other text does a 3-D flip. All I need to do now is add the data which I can do through the Design-Time Data panel. I will select the Data List component on my artboard and right away you will notice something different. In addition to both text elements, the text for the flavor and for the description of that flavor, I have an entire column set for each image.
This is because the artwork that I've used to depict each flavor is actually an image; it's a JPEG file. And I'm actually going to use a different JPEG file for each of the flavors. However at this point in time, I don't have those images inside of my project. So the first step will be to import the other JPEG files that I need for each of these flavors. To do that, I'll go to the File menu, I'll choose Import > Image, and then inside of Chapter 8 of my Exercise Files, I have a folder called images.
I actually have six images here representing the 6 different flavors I am going to use in my Data List. I am can actually press Ctrl+A or Command+A to select all the different files now in this folder and then click on the Open button to import them all at once. Now where do those images just go? They went into my Library panel. I will expand the panel just a bit so we can see its contents and you notice right now that where it says images, I now have images in addition to basil, for garlic, jalapeno, lemon, orange and, hiding beneath over here, rosemary.
So the first thing we're going to do now is actually change the images inside the Data List component. Now I'm going to leave the first flavor here as basil, but to make it easier to work with this, I'm going to expand my Design-Time Data panel. Since I know I am going to have six flavors here, I am also going to add another row. Remember that the numbers start at 0 so, because it says five here I actually have six different rows for flavors. In row number one, I am now going to click on this image. When I do so, the Select Asset dialog box appears.
It shows me a list of all images that are currently in my library. Instead of the basil image here, I am going to choose garlic and then I am going to click OK. I'll just temporarily hide the Design- Time Data panel by double-clicking on the tab so you can see that change happens now inside the component. Let's go back now and change the other images. I will click on this one here, change it to jalapeno, click OK and I'll add the remaining three flavors as well. Lemon, click here, choose orange, and then finally in the bottom, choose the rosemary image and click OK.
Next I want to enter in the text. So over here where it says Flavor, I am going to change this one to say Basil. I will hit Tab twice to go with the next flavor and I will type in Garlic. I will hit Tab two more times again, type in Jalapeno. The next one is going to be Lemon, Orange and the final one is Rosemary. Now I will type in descriptions for each one of these flavors. Remember these are the descriptions that are going to slowly fade in as I mouse-over each of these flavors.
So for Basil here, I am going to type in something like: A lovely scent with full flavor. I will hit Tab two times to advance to the next description and for this one I'll type in: Wakes up the flavor of any food. I will advance to the next description: Just the right amount of heat. Let's add the remainder of the descriptions here. A citrus taste perfect for all. Delicious mandarin flavor, and finally: A flavor for any meal.
So great, now I have added all the images and the text as well. So I am going to collapse the Design- Time Data panel and to see and preview my final Data List component, I will choose File > Run Project so I can actually see this and interact with it inside of a web browser. Notice I can now use the bowl of olive to scroll between the different flavors, I see the different images clearly and as I mouse-over each of these I'll see the description text fades in and the flavor itself does a 3D rotate.
It takes a little bit of planning up front, but you can quickly see that building something even as complex as a Data List like this is something that virtually anyone can do.
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.
Your file was successfully uploaded.