flash as3 电子书（模拟翻书页）功能模块

 先上效果图：

 

    

 

    这几天没没得什么事，就来写了一个 flash电子书页， 当然这个还只是功能演示的！ 等以后全部完成了在把完整版上传上来的！

 

代码如下：

  import flash.geom.Point;import flash.display.Sprite;import flash.events.MouseEvent;import flash.events.Event;var book_x = 50;var book_y = 55;var book_page_width = 300;var book_page_height = 400;var hot_area_width = 70;var hot_area_height = 70;var friction = 0.3;var mx,my:Number;var direction,flag:int;var key:int;var areaY:Number;var aimP:Point;var points:Array = new Array(9);for (var i=1; i<=9; i++){points[i] = new Point();}points[1] = new Point(book_x,book_y);points[2] = new Point(points[1].x + book_page_width * 2,points[1].y);points[3] = new Point(points[1].x,points[1].y + book_page_height);points[4] = new Point(points[1].x + book_page_width * 2,points[1].y + book_page_height);points[5] = new Point((points[1].x + points[2].x)/2, (points[1].y +points[3].y)/2);var book:Sprite= new Sprite();DrawLine(book,points[1],points[2]);DrawLine(book,points[2],points[4]);DrawLine(book,points[4],points[3]);DrawLine(book,points[3],points[1]);book.graphics.lineStyle(2, 0x000000, 1);book.graphics.moveTo(points[5].x, points[1].y);book.graphics.lineTo(points[5].x, points[3].y);stage.addChild(book);var draw:Sprite= new Sprite();book.addChild(draw);var hotArea:Array = new Array(4);for (i=1; i<=4; i++){hotArea[i] = new Sprite();hotArea[i].graphics.beginFill(0x0066CC);hotArea[i].graphics.drawRect(0,0, hot_area_width, hot_area_height);hotArea[i].graphics.endFill();hotArea[i].name = i.toString();hotArea[i].alpha = 0.2;hotArea[i].addEventListener(MouseEvent.MOUSE_OVER,mouseOver);hotArea[i].addEventListener(MouseEvent.MOUSE_DOWN,mouseDown);//hotArea[i].addEventListener(Event.EXIT_FRAME,drawing);stage.addChild(hotArea[i]);}//stage.addEventListener(MouseEvent.MOUSE_UP);hotArea[1].x = points[1].x;hotArea[1].y = points[1].y;hotArea[2].x = points[2].x - hot_area_width + 1;hotArea[2].y = points[2].y;hotArea[3].x = points[3].x;hotArea[3].y = points[3].y - hot_area_height + 1;hotArea[4].x = points[4].x - hot_area_width + 1;hotArea[4].y = points[4].y - hot_area_height + 1;function mouseOver(e:MouseEvent):void{trace("over");//trace(book.mouseX);key = int(e.target.name);direction = 1;//trace(key);hotArea[key].addEventListener(MouseEvent.MOUSE_OUT,mouseOut);hotArea[key].addEventListener(Event.EXIT_FRAME,drawing);closeEvent(true);hotArea[key].mouseEnabled = true;points[9] = points[key].clone();}function mouseDown(e:MouseEvent):void{trace("down");stage.addEventListener(MouseEvent.MOUSE_UP,mouseUp);hotArea[key].removeEventListener(MouseEvent.MOUSE_OUT,mouseOut);}function mouseUp(e:MouseEvent):void{//trace(e.target.name);closeEvent(true);if ((e.target.name == "1" || e.target.name == "2" || e.target.name == "3" || e.target.name == "4" )){trace("realease");direction = 2;}else{//trace("realeaseoutsider");if ((key == 1 || key == 3) && mx > points[5].x || (key == 2 || key == 4) && mx < points[5].x){trace("realeaseoutsider1");direction = 2;}else{trace("realeaseoutsider2");//aimP = points[key].clone();direction = -1;}}stage.removeEventListener(MouseEvent.MOUSE_UP,mouseUp);//stage.mouseEnabled = true;//hotArea[key].removeEventListener(Event.EXIT_FRAME,drawing);//hotArea[key].mouseEnabled = false;}function mouseOut(e:MouseEvent):void{trace("out");//hotArea[key].removeEventListener(Event.EXIT_FRAME,drawing);direction = -1;//stage.removeEventListener(MouseEvent.MOUSE_UP,mouseUp);}function drawing(e:Event):void{getPoints();draw.graphics.clear();if (points[7].x > points[1].y && points[7].x < points[4].x){DrawLine(draw, points[6],points[9]);DrawLine(draw, points[8],points[9]);DrawLine(draw, points[6],points[7]);DrawLine(draw, points[7],points[8]);}else{DrawLine(draw, points[6],points[9]);DrawLine(draw, points[6],points[7]);DrawLine(draw, points[7],points[9]);}// end else if*/if ((direction== -1 || direction== 2) && Math.abs(Point.distance(aimP,points[9])) < 10){hotArea[key].removeEventListener(Event.EXIT_FRAME,drawing);draw.graphics.clear();var a,b,c,d:Boolean;a = mx > points[1].x && mx < points[1].x + hot_area_width;b = my > points[1].y && my < points[1].y + hot_area_height;c = mx > points[2].x - hot_area_width && mx < points[2].x;d = mx > points[3].x - hot_area_height && mx < points[3].x;closeEvent(false);//trace(stage.mouseX > points[1].x && stage.mouseX < points[1].x+hot_area_width);if (c && d || a && d || b && c || a && b){direction = 1;points[9] = points[key].clone();hotArea[key].addEventListener(Event.EXIT_FRAME,drawing);}}}function getPoints():void{var xSide,ySide,opKey,yOpSide,k,b,mPX,mPY,endPX,endPY;var xspeed,yspeed;mx = stage.mouseX;my = stage.mouseY;if (mx <= points[1].x){mx = points[1].x;}// end ifif (mx >= points[4].x){mx = points[4].x;}// end ifif (direction == 1){aimP = new Point(mx, my);if (isOutArea()){aimP.y = areaY;}}else if (direction == -1){aimP = points[key].clone();}else if (direction == 2){aimP = points[ (key==1 || key==3)? key+1:key-1 ].clone();}xspeed = aimP.x - points[9].x;yspeed = aimP.y - points[9].y;xspeed *= friction;yspeed *= friction;points[9].x += xspeed;points[9].y += yspeed;//trace( aimP.x);if (points[9].y == points[1].y || points[9].y == points[4].y){if (key == 1 || key == 2){points[8].x = points[9].x;points[8].y = points[4].y;points[7].x = (points[9].x + points[key].x) / 2;points[7].y = points[4].y;points[6].x = points[7].x;points[6].y = points[9].y;}else{points[8].x = points[9].x;points[8].y = points[1].y;points[7].x = (points[9].x + points[key].x) / 2;points[7].y = points[1].y;points[6].x = points[7].x;points[6].y = points[9].y;}}else{k = -(points[key].x - points[9].x) / (points[key].y - points[9].y);b = points[key].y - (points[key].y - points[9].y) / 2 - k * (points[key].x - (points[key].x - points[9].x) / 2);if (key == 1 || key == 3){xSide = points[1].x;}else{xSide = points[2].x;}if (key == 1 || key == 2){opKey = key + 2;ySide = points[1].y;yOpSide = points[4].y;}else{opKey = key - 2;ySide = points[4].y;yOpSide = points[1].y;}// end else ifpoints[6].x = (ySide - b) / k;points[6].y = ySide;points[7].x = xSide;points[7].y = k * xSide + b;if (points[7].y < points[1].y || points[7].y > points[4].y){points[7].x = (yOpSide - b) / k;points[7].y = yOpSide;mPX = (points[opKey].x + points[opKey].y * k - k * b) / (k * k + 1);mPY = k * mPX + b;endPX = mPX * 2 - points[opKey].x;endPY = mPY * 2 - points[opKey].y;points[8].x = endPX;points[8].y = endPY;}else{points[8].x = -1;}}}function DrawLine(mc:Sprite, p1:Point, p2:Point):void{mc.graphics.lineStyle(1, 0x000000,1);mc.graphics.moveTo(p1.x, p1.y);mc.graphics.lineTo(p2.x, p2.y);}function isOutArea():Boolean{var PO:Point = new Point();var r:Number;var v:Boolean;PO.x = points[5].x;if (key == 1 || key == 2){if (my >= points[1].y){PO.y = points[1].y;r = book_page_width;areaY =PO.y + Math.sqrt(r*r - (mx - PO.x) * (mx - PO.x));v = areaY < my;}else{PO.y = points[3].y;r = Math.sqrt(book_page_width * book_page_width + book_page_height * book_page_height);areaY =PO.y - Math.sqrt(r*r - (mx - PO.x) * (mx - PO.x));v = areaY > my;}}else{if (my <= points[3].y){PO.y = points[3].y;r = book_page_width;areaY =PO.y - Math.sqrt(r*r - (mx - PO.x) * (mx - PO.x));v = areaY > my;}else{PO.y = points[1].y;r = Math.sqrt(book_page_width * book_page_width + book_page_height * book_page_height);areaY =PO.y + Math.sqrt(r*r - (mx - PO.x) * (mx - PO.x));v = areaY < my;}}return v;//flag = (mx-points[5].x) * (mx-points[5].x) + (my-points[3].y)*(my-points[3].y) - book_page_width * book_page_width > 0}function closeEvent(b:Boolean):void{for (var i:int = 1; i<=4; i++){if (b){hotArea[i].mouseEnabled = false;}else{hotArea[i].mouseEnabled = true;}}} 

如果想要测试的朋友，直接拷贝代码到第一帧就可以了！ 欢迎大家一起交流的！

 在代码中点point1~9 对应在下图中标注位置，其中point6 7 8 是根据 point9 算 出来的。且他们的位置是不固定的！上图中只是一种情况的！大家在研代码的时候，最好要根据这个图来理解的哈！不然空想太困难了 ！

 最后，这个好像还有点BUG的 ，我就不说了，大家可以找找的！如果把BUG解决了，请一定要我留言哦！大家一起学习嘛!

 

参考资料：http://design.yesky.com/flash/257/2566757.shtml