Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So here is my portfolio as it stands right now. I have two thumbnails and what I'm going to want to do is I'm going to start to add more thumbnails on down the line, until they actually go off the screen, and then I want to add a scroll pane component, so I can scroll those images. What this allows for is an unlimited number of images for your portfolio. So I'm going to go into the code, this first frame of the AS layer, and I'm going to go to Window>Actions, and right in here, you can see that I have the current two thumbnails.
All I'm going to do is just paste in code for a total of ten images. I'll just review how these change from thumbnail to thumbnail. As you can see, thumbLoader2 moves over 100 pixels. So this thumbLoader3, I had to create. Again, give it an instance name, and it moves over 200 pixels. So it's not on top of the previous one. Not only that, I've changed the thumbnail image, the large image, and then the content that goes in the text fields.
So that's what happens for each one. It's a matter of changing the instance name, the JPEGs, and then the functions as well. So that's kind of how it goes on down the line, and make sure you just change the instance names from one to the next. So I'm going to run this, just so you can see all of the various images. There they all are. You can tell that, actually, it does start to run off. If I expand that out, you can see this street trends image, which the user just wouldn't be able to get to, not unless I add a way to scroll to it, but otherwise, all of these are working just fine.
So I'm going to go ahead and add a UIScrollBar Component. So let me close that Actions panel, but before I do, I'll just pin the code to it. It does stay up when I open it back up. What I want to do is go to Window, down to Components. In my Components panel, I want to select this ScrollPane component. So I'm just going to scroll down the page, and click and drag this on to my stage. Now I can close that panel.
From here, what I can do is I can start to resize it. In fact, I can use the Free Transform tool. I'll double click on that center point, just to move it to the upper left-hand corner, so I can scale it out appropriately. I can go ahead and scale that out and do a Command+Minus to zoom out some, and I can start to position this in its appropriate place. I could even use my arrow keys to adjust it, but in general, it's going to just exist at the base of this page, kind of like that. That looks pretty good.
For the most part, it's set up. What I need to do is I need to give it an instance name, so I can reference it in my Actionscript. So with this component selected in the Properties panel, I am going to give it an Instance Name of myScrollPane. All right, myScrollPane. So I'm going to go ahead and do a Command+C to copy that. Now let me go into my Actions. That's that first frame, and what I want to do is I want to go ahead and attach all of these thumbnails to myScrollPane.
So at the very top of your code, just paste in myScrollPane, so that's the instance name, and I want to set the source equal to allThumbnails. So all the thumbnails that are in there, just copy that and paste it. That's what's going to go in the source for the myScrollPane. So, it's going to go ahead and attach appropriately. So let's do a Control>Test Movie, and what I'm going to do is I'm going to right-click and I'm going to do a Show All, because my screen size is a little small, and I can start to just scrunch that down.
The scroll pane is actually there, but you don't really see it working, because what you'd need to do is you need to update the scroll pane as each image gets loaded in. So I want to do that, now I want to update it. So myScrollPane, when it loads in this thumbnail, I want to update my scroll pane. So it's as simple as myScrollPane.update, just like that.
Now I'm going to copy this line of code, Command+C, because I want to update it as they get placed in here. So I'm going to update it after it's placed in at that position. This third one, it's going to update. So again, it's just a matter of adding this line of code for each one of these functions, right after if it's placed on the stage. The ScrollPane Component will actually reference the size of these thumbnails, and adjust its scrollbar accordingly.
So paste that last one in, and we are looking pretty good. So let's do a Control>Test Movie. I do need to kind of scrunch this down some and I need to Show All, just to get it our viewable area, but you can see that I do have a scrollbar and I can easily scroll from left to right. Now notice it also added this vertical scrollbar. Well, that's easy to fix as well, because I can just close this SWF file. And I could probably write some code to do that, but the easiest way to do that is just to select your component, go to window and open up Component Inspector.
And right in here, I can adjust the horizontal and even the verticalScrollPolicy, because I don't want it to automatically add that scrollbar. I always want it to be off. So I'm going to change that verticalScrollPolicy. Never show me that vertical scrollbar. I'll go ahead and do a Test Movie. Scrunch this down, just so we can see this really fast. Show All, and the vertical scrollbar is gone, but the horizontal one is still there.
It works like a charm, because now I can click on each of these and I can finally get down to this last image, and this is really built for unlimited images. So the more I add to my code, the more I can scroll, but in general, this is really flexible and it's suited to fit whatever size portfolio you might have.
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.