Monday, May 23, 2011

Action script 3 Flash Tutorial - Scrollbar content

If you have so much content but,you have little space in which to display this content.Then you need to creat scrollbar content.


This tutorial, intend to explaine the basics of creating scrollable content with ActionScript 3. we are going to explaine creating scrollable content that may include text, images, movie clips, and so on.


Store Your Content in a Movie Clip
  •  create your content with text,image and movie clip so as to extend past the bottom of the stage.
  • select all of it and go to Modify > Convert to Symbol."Movie Clip" type, and call it "mcContent" .
  • IMPORTANT: be sure to set the registration point to the upper-left corner of your Movie Clip when you create it, like so:



Select the movie clip which you have created on the stage, go to the Properties Panel, and give it an instance name of content_mc. On the stage, your content will look something like this:











Mask Your Content
  • Now you should create a mask that reveals only the section that you want to be visible.everything outside of the mask will be invisible In this case.
  •  our mask will be a simple rectangle with a fill and no stroke that takes up most  of the height of the stage itself.
  •  select the mask then convert it to a Movie Clip Symbol. Your mask should look like this:

     Be sure to create your mask on a new layer directly above your content layer. I like to use a bright green fill color for my masks, but that's just a personal preference. It doesn't matter what color you use

  •  Then, right-click the mask layer and click on the "Mask" option. If done properly, the green rectangle should disappear, and you should see only the content that was inside the rectangle, like so:


Notice that all of the extent content is now invisible. Only the content that was behind the mask is visible. Now, in order to scroll the content, we just need to animate it behind the mask in response to interaction with a scrollbar.


Build the Scrollbar
  • Your scrollbar will contain two elements nested into one Movie Clip: the background and the scroller. Each of these items are simple rectangles.
  •  you will end up with two separate Movie Clips: one for the background of your scrollbar and one for the draggable handle that you will use to do the actual scrolling.
  • Give this handle an instance name of scroller_mc. Then select both the scroller and the background and hit F8 to combine them into a single scrollbar Movie Clip. Give this Movie Clip an instance name of scrollbar_mc.

 Dragging the Scroller

Now you need to  determine  the maximum and minimum distance your scroller will be able to move.

  • to figure this out,double-click on your scrollbar to go into the Movie Clip. Inside the Movie Clip, you should have two more Movie Clips: the background and the scroller.
  •  place your scroller at it's beginning location, as in the image above, then you should already be able to determine its beginning y-coordinate. Simply click on the scroller and look at the y-coordinate shown in your Properties panel.
  • write down the y -coordinate as well as the x coordinate(you will need this in feww minutes)
  • now you have (x,y) of the begining location of the scroller

 Next,the ending point y coordinate
  •  select your scroller and drag it down to the lowest possible point within the bounds of your background rectangle. This time, you will only need the y-coordinate,
  • now calculate the whole distance the scroller can wok,this can be done by calculating the difference between the begining and ending y-coordinate.
now the time of using actionscript and f9 pannel
 

  • First of all, move your scroller back to its original position. Then go back to your main timeline, create a new layer, rename the layer Actions, and with frame 1 of that layer selected, hit F9  to open up your Actions panel. Enter the following code:

var rect:Rectangle;


scrollbar_mc.scroller_mc.buttonMode = true;
scrollbar_mc.scroller_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragIt);


function dragIt(e:MouseEvent):void {
rect = new Rectangle(4, 3, 0, 309);
scrollbar_mc.scroller_mc.startDrag(false, rect);
stage.addEventListener(MouseEvent.MOUSE_UP, dropIt);
}


function dropIt(e:MouseEvent):void {
scrollbar_mc.scroller_mc.stopDrag();
}

The first line of code creates a variable where we will store a rectangle that will determine the draggable bounds of our scroller. This variable is being created outside of all functions, because once we actually create the rectangle, we will need to access its properties in more than one place. More on that later.


The next line sets the buttonMode property for the scroller Movie Clip to true. This will cause the scroller to behave like a Button in that it will cause your mouse cursor to turn into the hand cursor when you hover over it.


The third line adds a MOUSE_DOWN listener to the scroller. Think about how a scrollbar works. When you press your mouse button down on the scroller, that's when you want it to start dragging, so that's when our code triggers the "dragIt" function.


Inside the dragIt function I've created a rectangle object. This rectangle will not be drawn on the stage; it will simply be used to determine the bounds of our draggable area for the scroller. When the "new Rectangle()" method is called, you'll notice I entered four different numbers. The first two numbers (4 and 3) determine the x,y coordinates of the rectangle. This should be the same as the beginning x,y coordinates that you wrote down earlier for your scroller Movie Clip. The next two numbers (0, 309) determine the width and height of the rectangle. Since we don't want to be able to drag the scroller left and right, the width of our rectangle is 0. The height of my rectangle, as calculated before, is 309. As you can see, this rectangle was created and stored in a variable called rect.


After creating the rectangle object, we are calling on the startDrag() method and passing in two parameters. The first parameter determines whether or not the center of the object you're dragging will snap to where your mouse cursor is. We don't want this to happen, so we entered false. The second parameter is simply the variable name we gave to the rectangle we just created. Basically, we're telling the startDrag() method to use rect to determine the draggable boundaries of our scroller.


After creating the drag functionality, you need to create the functionality to stop dragging. Notice that I've added this particular listener to the stage instead of to the scroller itself. If you add the MOUSE_UP listener to the object itself, then it will only be triggered if you're still hovering over the Movie Clip when your mouse cursor is released. Adding the listener to the stage, on the other hand, assures us that no matter where our mouse cursor is when we release the mouse button, the dropIt function will be called, and dragging will cease.


Step 5 – Making the Scrollbar Work
In order for your scrollbar to function properly, there is a little bit of math involved. The y-coordinate of your content is going to change in response to the y-coordinate of your scroller. As you drag your scroller up and down, your content will move up and down in the opposite direction. But how much will it move?


Instead of thinking in terms of the number of pixels moved, let's think in terms of percentages. This will make things much easier. For example, if you have dragged your scroller 50% of the way down its scrollable range, then you want your content to move up 50% of its total range. When you think in terms of percentages, this whole solution become easier to wrap your head around.


So, in order to determine a percentage for your scroller, you need two numbers:


1.The total range of movement for the scroller.
2.The current y-coordinate within that range, adjusted for it's starting position.
The reason we need to adjust for the starting position is because our scroller doesn't start off at a y-coordinate of 0. In my file, it is at a y-coordinate of 3 within the scrollbar Movie Clip. Let's take a look at a beautifully-rendered Photoshop illustration of what we're doing here:






Okay, so it's not technically a percentage we're calculating; it's more of a ratio. But you get the point. According to the example above, the current position of the scroller (adjusted for its minimum y-coordinate) is roughly 49.5% of the way down its total range of movement. As a response, we want the content to move to a position 49.5% of the way up its own range of movement, so we'll simply use the same ratio (0.495) to calculate where it needs to be.


Now that I've properly over-explained everything, let's take a look at the final code. Before entering the following code, be sure to give an instance name to the Movie Clip you're using to mask your content. I've given mine an instance name of mask_mc.


var rect:Rectangle;
var scrollerMinY:Number = scrollbar_mc.scroller_mc.y;
var contentMaxY:Number = content_mc.y;
var padding:Number = 40;


scrollbar_mc.scroller_mc.buttonMode = true;
scrollbar_mc.scroller_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragIt);


function dragIt(e:MouseEvent):void {
rect = new Rectangle(4, 3, 0, 309);
scrollbar_mc.scroller_mc.startDrag(false, rect);
stage.addEventListener(MouseEvent.MOUSE_UP, dropIt);
scrollbar_mc.scroller_mc.addEventListener(Event.ENTER_FRAME, scrollIt);
}


function dropIt(e:MouseEvent):void {
scrollbar_mc.scroller_mc.stopDrag();
scrollbar_mc.scroller_mc.removeEventListener(Event.ENTER_FRAME, scrollIt);
}


function scrollIt(e:Event):void {
var scrollerRange:Number = rect.height;
var contentRange:Number = content_mc.height - mask_mc.height + padding;
var percentage:Number = (scrollbar_mc.scroller_mc.y - scrollerMinY) / scrollerRange;
var targetY:Number = contentMaxY - percentage * contentRange;
content_mc.y = targetY;
}Once you have added the code in bold, you should have a working scrollbar, Flash style!


Hopefully, most of this code speaks for itself, but there are a couple things worth pointing out. First of all, you'll notice a variable I created called "padding". Sometimes, when you create your own custom scrollbar, the content doesn't always scroll up as far as you like when you drag the scroller all the way to the bottom. The padding variable adds a little bit more room to the total range of movement for the content, as seen in the scrollIt() function. The value entered here is completely optional, depending on how your text looks when scrolled.


Also, notice that we've added another line of code inside the dragIt() function. As soon as we start dragging the scroller, this line of code triggers an ENTER_FRAME event, which causes the scrollIt() function to run over and over again at the current framerate. That's how we get the smooth scrolling as we drag up and down. Also, since we've created this event listener, we need to delete it when we're done dragging. This is done in the dropIt() function.


Finally, inside the scrollIt() function, once we calculate the percentage that we discussed before, we use that percentage to place the content where it needs to be. We do this using the following calculation:


contentMaxY - percentage * contentRangeMultiplying the percentage by the contentRange gives us how far the content needs to be moved. This number is subtracted from the maximum y-coordinate of your content to properly offset it.


Here is your final result:






Click here to download the source files

No comments:

Post a Comment