In this tutorial I will be showing you how can we create a bookmark effect of html in flash using ActionScript 3.0. As you know bookmark effect in html is basically creating links in html which when clicked goes to a specific area of the contents. We will be creating same effect using flash. I am assuming that you will be having basic flash and scripting knowledge.
First, lets take a new flash file (ActionScript 3.0) and define dimensions of your choice. For this tutorial I will be taking width as 600px and height 600px as dimension. Now lets create few buttons which will be used as links for going to specific content and give instance name to each button.
Now lets create movieclip for flash contents and once you create it add contents of your choice in it. Above the flash content movieclip layer add new layer and create another movieclip for content area which we will be masking so that the contents are visible in that area hence make it smaller in size then your contents movieclip. Don”t forget to give instance name to both as we are going to use instance name in ActionScript to make the content area active.
Now the most important part for creating bookmark effect, lets create a scrollbar. So now again create another movieclip for scrollbar and give it an instance name. Inside the scrollbar movieclip casinos in australia create two movieclips, one for scrollbar handle and another for scrollbar area. After creating both movieclips give them instance name of your choice I am giving instance name as flash_scroller for scollbar handle movieclip and flash_scrollable_area for scollbar area. Now we will create actionscript for our scrollbar. Below is the code for the same.
var scrolling_speed:Number; // 0.00 to 1.00
//flash_scroller.buttonMode = true;
function scrolling( ct:String, ct_area:String, speed:Number ):void
scrolling_speed = speed;
if( scrolling_speed < 0 || scrolling_speed > 1 ) scrolling_speed = 0.50;
flash_content = parent[ct];
flash_content_area = parent[ct_area];
flash_content.mask = flash_content_area;
flash_content.x = flash_content_area.x;
flash_content.y = flash_content_area.y;
flash_scroller.x = flash_scrollable_area.x;
flash_scroller.y = flash_scrollable_area.y;
sr = flash_content_area.height / flash_content.height;
flash_scroller.height = flash_scrollable_area.height * sr;
sd = flash_scrollable_area.height – flash_scroller.height;
cd = flash_content.height – flash_content_area.height;
cr = cd / sd * 1.01;
drag_area = new Rectangle(0, 0, 0, flash_scrollable_area.height – flash_scroller.height);
if ( flash_content.height <= flash_content_area.height )
flash_scroller.visible = flash_scrollable_area.visible = false;
flash_scroller.addEventListener( MouseEvent.MOUSE_DOWN, scroller_drag );
flash_scroller.addEventListener( MouseEvent.MOUSE_UP, scroller_drop );
this.addEventListener( Event.ENTER_FRAME, on_scroll );
function scroller_drag( me:MouseEvent ):void
function scroller_drop( me:MouseEvent ):void
function up( me:MouseEvent ):void
function on_scroll( e:Event ):void
new_y = flash_content_area.y flash_scrollable_area.y * cr – flash_scroller.y * cr;
flash_content.y = ( new_y – flash_content.y ) * scrolling_speed;
Once you add that code to the actionscript layer inside scrollbar movieclip lets go the our main scene. On the main scene by default Scene 1 add new layer and add actionscript code as shown below.
flash_sb.scrolling("flash_content", "content_area", 0.45);
function on_scroll1( e:Event ):void
var new1:Number = 0;
flash_sb.flash_scroller.y = new1;
function on_scroll2( e:Event ):void
var new2:Number = 110;
flash_sb.flash_scroller.y = new2;
function on_scroll3( e:Event ):void
var new3:Number = 155;
flash_sb.flash_scroller.y = new3;
The code above will activate our flash scrollbar and the buttons which we first created will be activated by adding event listeners to them. Important thing to remember is the flash_scroller.y value in each function. The bookmark effect is because of the different values given to each flash_scroller.y value in each function.
This brings us to the end of the bookmark effect tutorial. You can even create a flash site using this effect. I hope this helps you in your projects. Let me know your valuable feedbacks through comments and thanks for reading.