Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Sometimes a user interface will call for a slider. Examples for when you might use them would be to indicate maybe volume level or zoom control. Working with a slider involves some parts that you haven't seen before, so let's see how to create them inside of Flash Catalyst. I'll create a new project, click OK, and we'll begin by looking at the Wireframe Components specifically here: the Horizontal slider. I'll drag one out onto the screen, and we'll run the project so that we can see what it looks like in a web browser. You can see that I have one element here, a circle, and when I click on it, I can move it back and forth along this line.
So there are two main parts to working with a slider component. The element that you click on and move from left to right is referred to as the Thumb. The graphic that appears behind it, the line that it follows along, is called the Track. When you're working with the slider component, you need to help Flash Catalyst understand which part is the Thumb and which part is the Track. Let's go back to Flash Catalyst to see how we can create our own. I'll delete this element on my artboard and I'll go to the File menu, and I'll choose Import. We'll choose an Illustrator File, and I'll choose this file called leaves and click Open.
Once I bring it out on to my artboard, I'll see that in my Layers panel, I have two main elements. There are the Leaves and then there is the OliveBowl. I'm going to use the OliveBowl as the Thumb for my slider, and I am going to use this nice vine of leaves as the Track. I'm going to start by selecting the Leaves object and I'm going to hold down the Shift key and also select the OliveBowl object. In the HUD, I am now going choose to convert this to a Horizontal slider component. Now notice, by the way, the HUD tells me that I am not done yet. That's because I haven't told Flash Catalyst which part of this art is going to be the Thumb and which is going to be the Track.
So what I'll need to do is click on the Edit Parts button here and now I'll select on the Leaves and from the HUD where it says Convert to Horizontal slider Part, I'll convert that to the Track. Next, I'll click on the OliveBowl and I'll convert that to the Thumb Part. At this point, I now have all the elements in place to create a working slider component. I'll double-click to exit the Edit mode, and let's go ahead now and preview this in our browser by choosing File > Run Project. What started that in Illustrator as some plain artwork has now become a functional slider in my Web browser.
I can click on this bowl of olives and move it back and forth along the track of leaves. Now in this example, we've been working specifically with the Horizontal slider, but you'd follow the exact same steps when you're creating a Vertical slider. In that case, you'd be able to move elements up and down along the Track as well. So, if you've ever been bothered by the dull look of sliders on web sites or applications, know that in Flash Catalyst, you can change them up to anything you want.
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.