Search the Community
Showing results for tags 'blitmask'.
-
Hello! After the release of the player version 20.0.0.306 (9 February 2016) was to pour a lot of mistakes #1508 in our game. The version of the library, we have updated, but it did not help. We hope to fix this error Stack Trace:ArgumentError: Error #1508 at com.greensock::BlitMask/_render() at com.greensock::BlitMask/_render() at com.greensock::BlitMask/update()
-
Hi, I have a small issue with my scroller withing my mobile app. The issue is if I'm pressing, holding and dragging (up or down to wanted position) in one action, and then lifting my finger - the scroll will continue the animation of scrolling. It's like it "stores acceleration" - If my drag action is bigger, than the scroll will continue the animation more. How can I disable this "after scroll" animation? I just want a smooth and linear scroll. Can someone help? Here is my current code: ThrowPropsPlugin.to(buttons_container_mc, {throwProps:{ y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:100} }, onUpdate:blitMask.update, ease:Expo.easeOut }, 100, 0.25, 0); Best regards, Roman
- 5 replies
-
- blitmask
- throwpropsplugin
-
(and 3 more)
Tagged with:
-
I am getting this weird error trying to use BlitMask when debugging on my android device: Error #2030: End of file was encountered. And it is coming from this part of the BlitMask code, on TOUCH_BEGIN event (when i put my finger down on the BlitMasked object): /** @private **/ protected function _mouseEventPassthrough(event:Event):void { if (this.mouseEnabled && (!_bitmapMode || (event is MouseEvent && this.hitTestPoint(MouseEvent(event).stageX, MouseEvent(event).stageY, false)))) { dispatchEvent(event); } } When debugging in emulator, the error does not happen, only when debugging on device. Does anyone know how to fix this issue?
-
Hi there, I'm stumped, and it's probably because I've been up all night with this code.. After staring at it and tinkering with it, borrowiing bits from other snippets and trying various combinations for so long it all seems like an ugly, jumbled mess to me now and I can no longer tell up from down. There's no denying it anymore, I need help. There's a bug in here that I can't pin down. At first it would seem everything is normal, but then you realize there is something gravely wrong with how the overlap or the offset is being massacred on mouseDown. Or mouseMove. I've given up, any help would be really appreciated. Ive also enclosed my practice fla. import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; import flash.geom.Rectangle; import flash.utils.getTimer; import flash.events.MouseEvent; import flash.text.*; import flash.display.*; TweenPlugin.activate([ThrowPropsPlugin]); var bounds: Rectangle = new Rectangle(100, 100, 1280, 600); var blitMask: BlitMask = new BlitMask(mc, bounds.x, bounds.y, bounds.width, bounds.height, true, false, 0, true); TweenLite.delayedCall(0.1, blitMask.update, [null, true]); blitMask.bitmapMode = false; var t1: uint, t2: uint, y1: Number, y2: Number, x1: Number, x2: Number, xOverlap: Number, xOffset: Number, yOverlap: Number, yOffset: Number; var isMoving: Boolean = false; var isCatched: Boolean = false; blitMask.stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); function mouseDownHandler(event: MouseEvent): void { TweenLite.killTweensOf(mc); blitMask.disableBitmapMode(); if (isMoving == true) { isCatched = true; isMoving = false; } x1 = x2 = mc.x; xOffset = this.mouseX + mc.x; xOverlap = Math.max(0.5, mc.width - bounds.width); t1 = t2 = getTimer(); mc.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function mouseMoveHandler(event: MouseEvent): void { isMoving = true; if (blitMask.bitmapMode == false) { blitMask.enableBitmapMode(); } var x: Number = this.mouseX - xOffset; if (x > bounds.left) { mc.x = (x + bounds.left) * 0.5; } else if (x < bounds.left - xOverlap) { mc.x = (x + bounds.left - xOverlap) * 0.5; } else { mc.x = x; } blitMask.update(); var t: uint = getTimer(); //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second if (t - t2 > 50) { x2 = x1; x1 = mc.x; //y2 = y1; t2 = t1; //y1 = mc.y; t1 = t; } event.updateAfterEvent(); } function mouseUpHandler(event: MouseEvent): void { mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); mc.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time: Number = (getTimer() - t2) / 1000; var xVelocity: Number = (mc.x - x2) / time; ThrowPropsPlugin.to(mc, { throwProps: { x: { velocity: xVelocity, resistance: 50 } }, onUpdate: blitMask.update, onComplete: throwComplete, ease: Strong.easeOut }, 10, 0.3, 1); } function throwComplete() { isMoving = false; isCatched = false; blitMask.disableBitmapMode(); blitMask.update(null, true); } mc.mc_1.addEventListener(MouseEvent.CLICK, onC); function onC(e: MouseEvent) { if (isMoving == false && isCatched == false) { mc.isc.text = "Item Clicked.."; mc.mc_2.play(); } else { mc.isc.text = ""; } } mc.mc_2.addEventListener(MouseEvent.CLICK, onD); function onD(e: MouseEvent) { if (isMoving == false && isCatched == false) { mc.mc_2.play(); mc.isc.text = ""; } else { // mc.isc.text = ""; } } It's supposed to wrap, and then on swipe just glide smoothely to a halt - doesn't matter where - ie not have any bounds. Please help? disableBitmapTest.zip
-
Hi, I am building a complex app for iOS with long scrolling sprites. Actually, using BlitMask instead of scrollRect on a large Sprite, on iOS iPad retina it destroys performance instead of improving it. Is it expected or am I doing something wrong? Actually, the flow is as follows: - create BlitMask once enableBitmapMode() once onEnterFrame apply BlitMask.scrollY apply BlitMask.scrollX onCompleteMotion disableBitmapMode() it works as expected, interaction is restored on motion complete, but performance is horrible... goes from 40fps to 3fps... I export in GPU mode. Am I doing anything wrong? Or is it related to parsing a complex BMP in a retina display and uploading to the GPU? thank you very much Filippo
-
Hi, Not sure how many questions get asked about flash these days but I have one. I have having issues on scrolling using the code below. It works but but its slow. I am thinking a "blitmask" would work great here but I don't know where I would put it. Can you give me some tips? Thanks -Ed /// SCROLL BAR /////////////////////// public function throwIt(clipContent:MovieClip) { // old code //var bounds:Rectangle = new Rectangle(_screenX - clipContent.width,0,_screenX,_screenY); // custom var var bounds:Rectangle = new Rectangle(0,0,_screenX,_screenY); //var mc:Sprite = meow.getChildByName("content") as MovieClip; var mc:Sprite = clipContent as MovieClip; addChild(mc); //some variables for tracking the velocity of mc var t1:uint,t2:uint,y1:Number,y2:Number; mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); function mouseDownHandler(event:MouseEvent):void { TweenLite.killTweensOf(mc); y1 = y2 = mc.y; t1 = t2 = getTimer(); mc.startDrag(false, new Rectangle(bounds.x, -99999, 0, 99999999)); mc.addEventListener(Event.ENTER_FRAME, enterFrameHandler); mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function enterFrameHandler(event:Event):void { //track velocity using the last 2 frames for more accuracy y2 = y1; t2 = t1; y1 = mc.y; t1 = getTimer(); } function mouseUpHandler(event:MouseEvent):void { mc.stopDrag(); mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); mc.removeEventListener(Event.ENTER_FRAME, enterFrameHandler); var time:Number = (getTimer() - t2) / 1000; var yVelocity:Number = (mc.y - y2) / time; var yOverlap:Number = Math.max(0,mc.height - bounds.height); ThrowPropsPlugin.to(mc, {ease:Strong.easeOut, throwProps:{y:{velocity:yVelocity, max:bounds.top , min:bounds.top - yOverlap - (littleLogo.height + littleLogo.height/3) , resistance:777}}}, 33, 0.25, .3); } } ////////////////// /// end SCROLL/////////////
-
I read a lot of articles after I decided to make my own scrollable DisplayContainer in mobileStyle. There are a lot of people who had problems with clickable Items they want to scroll and here is my solution after coding a bit around to find a solution. The Class isn't optimized yet but for those who wants to start with a similar project it could help. Feedback or optimisations are really welcome. Cheers package ui.components { import flash.display.Sprite; import flash.display.DisplayObject; import com.greensock.BlitMask; import flash.events.Event; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.ThrowPropsPlugin; import flash.ui.Multitouch; import flash.ui.MultitouchInputMode; import flash.events.GestureEvent; import flash.events.TransformGestureEvent; import flash.events.MouseEvent; import fl.transitions.Tween; import fl.transitions.easing.Elastic; import fl.transitions.TweenEvent; public class ScrollableDisplayContainer extends Sprite { Multitouch.inputMode = MultitouchInputMode.GESTURE; TweenPlugin.activate([ThrowPropsPlugin]); protected const MIN_WIDTH:Number = 20; protected const MIN_HEIGHT:Number = 20; private var _width:Number; private var _height:Number; private var _mask:BlitMask; private var _maskHolder:Sprite; private var _maskContent:DisplayObject; private var _maskContentHolder:Sprite; private var hScroll:Boolean = false; private var vScroll:Boolean = false; private var scrollBarV:Sprite; private var scrollBarH:Sprite; private var enableScrolling:Boolean = false; private var allowScrolling:Boolean = false; private var startingPointX:Number; private var startingPointY:Number; private var scrollContentPadding:Number = 50; private var bounceAnimation:Tween; public function ScrollableDisplayContainer(width:Number, height:Number, content:DisplayObject, name:String = "content") { super(); this._width = width; this._height = height; this._maskContent = content; this._maskContent.name = name; if(!Multitouch.supportsGestureEvents) { throw new Error("This Device doesn't support GestureEvents, please go home ... nothing to see here"); } this.addEventListener(Event.ADDED_TO_STAGE, added); } public function changeContent(content:DisplayObject, name:String = "content"):void { _maskContentHolder.removeChild(_maskContent); _maskContent = content; _maskContentHolder.addChild(_maskContent) } private function added(e:Event):void { this.removeEventListener(Event.REMOVED, removed); init(); } private function removed(e:Event):void { this.removeEventListener(Event.REMOVED, removed); _mask.dispose(); _mask = null; if (enableScrolling) { this.removeEventListener(TransformGestureEvent.GESTURE_SWIPE, scrollFast); this.removeEventListener(MouseEvent.MOUSE_DOWN, scroll); allowScrolling = true; } } private function init():void { _maskHolder = new Sprite(); this.addChild(_maskHolder); _maskContentHolder = new Sprite(); _maskHolder.addChild(_maskContentHolder); _maskContentHolder.addChild(_maskContent); _mask = new BlitMask(_maskContentHolder); _mask.x = 0; _mask.y = 0; _mask.width = this._width; _mask.height = this._height; _mask.bitmapMode = false; _mask.autoUpdate = true; setScroller(); } private function setScroller():void { _maskContent.width > _mask.width ? drawScrollBarH() : 0; _maskContent.height > _mask.height ? drawScrollBarV() : 0; if (enableScrolling) { allowScrolling = true; this.addEventListener(TransformGestureEvent.GESTURE_SWIPE, scrollFast); this.addEventListener(MouseEvent.MOUSE_DOWN, scroll); } } private function drawScrollBarH():void { enableScrolling = true; hScroll = true; var barWidth:Number = _mask.width/(_maskContentHolder.width/_mask.width); scrollBarH = new Sprite; scrollBarH.graphics.lineStyle(0, 0x333333); scrollBarH.graphics.beginFill(0x333333, 1); scrollBarH.graphics.drawRoundRect(0, 0, barWidth, 4, 3, 3); scrollBarH.graphics.endFill(); this.addChild(scrollBarH); scrollBarH.alpha = 0; scrollBarH.x = 1; scrollBarH.y = _mask.height - scrollBarH.height-1; } private function drawScrollBarV():void { enableScrolling = true; vScroll = true; var barHeight:Number = _mask.height/(_maskContentHolder.height/_mask.height); scrollBarV = new Sprite; scrollBarV.graphics.lineStyle(0, 0x333333); scrollBarV.graphics.beginFill(0x333333, 1); scrollBarV.graphics.drawRoundRect(0, 0, 4, barHeight, 3, 3); scrollBarV.graphics.endFill(); this.addChild(scrollBarV); scrollBarV.alpha = 0; scrollBarV.x = _mask.width - scrollBarV.width-1; scrollBarV.y = 1; } private function scrollFast(t:TransformGestureEvent):void { t.offsetX == -1 && hScroll && allowScrolling ? scrollFastToLeft() : 0; t.offsetX == 1 && hScroll && allowScrolling ? scrollFastToRight() : 0; t.offsetY == 1 && vScroll && allowScrolling ? scrollFastDown() : 0; t.offsetY == -1 && vScroll && allowScrolling ? scrollFastUp() : 0; } private function scrollFastToLeft():void { hScroll ? scrollBarH.alpha = 0.3 : 0; _maskContentHolder.x = Math.max( _maskContentHolder.x - (_maskContentHolder.width/3), (_maskContentHolder.width-_mask.width)*-1 ); if (_maskContentHolder.x < (_maskContentHolder.width-_mask.width)*-1) { _maskContentHolder.x = (_maskContentHolder.width-_mask.width)*-1; } scrollBarH.x = calcScrollBarXaxis(); checkFinish(); } private function scrollFastToRight():void { hScroll ? scrollBarH.alpha = 0.3 : 0; _maskContentHolder.x = Math.min(_maskContentHolder.x + (_maskContentHolder.width/3), 0); if (_maskContentHolder.x > 0) { _maskContentHolder.x = 0; } scrollBarH.x = calcScrollBarXaxis(); checkFinish(); } private function scrollFastDown():void { vScroll ? scrollBarV.alpha = 0.3 : 0; _maskContentHolder.y = _maskContentHolder.y + (_maskContentHolder.height/3); if (_maskContentHolder.y > scrollContentPadding) { _maskContentHolder.y = scrollContentPadding; } scrollBarV.y = calcScrollBarYaxis(); checkFinish(); } private function scrollFastUp():void { vScroll ? scrollBarV.alpha = 0.3 : 0; _maskContentHolder.y = _maskContentHolder.y - (_maskContentHolder.height/3); if (_maskContentHolder.y < (_maskContentHolder.height-_mask.height+scrollContentPadding)*-1) { _maskContentHolder.y = (_maskContentHolder.height-_mask.height+scrollContentPadding)*-1; } scrollBarV.y = calcScrollBarYaxis(); checkFinish(); } private function scroll(m:MouseEvent):void { if (allowScrolling) { allowScrolling = false; startingPointX = m.stageX; startingPointY = m.stageY; this.addEventListener(MouseEvent.MOUSE_UP, endScrolling); this.addEventListener(MouseEvent.MOUSE_MOVE, scrollToDirection); } } private function endScrolling(m:MouseEvent):void { this.removeEventListener(MouseEvent.MOUSE_UP, endScrolling); this.removeEventListener(MouseEvent.MOUSE_MOVE, scrollToDirection); checkFinish(); _mask.bitmapMode = false; } private function checkFinish():void { hScroll ? scrollBarH.alpha = 0 : 0; vScroll ? scrollBarV.alpha = 0 : 0; if (_maskContentHolder.y < (_maskContentHolder.height-_mask.height)*-1) { startAnimation("y", _maskContentHolder.y, (_maskContentHolder.height-_mask.height)*-1); } else if (_maskContentHolder.y > 0) { startAnimation("y", _maskContentHolder.y, 0); } else { allowScrolling = true; } } private function startAnimation(axis:String, start:Number, end:Number):void { bounceAnimation = new Tween(_maskContentHolder, axis, Elastic.easeOut, start, end, 1, true); bounceAnimation.addEventListener(TweenEvent.MOTION_FINISH, animationFinished); } private function animationFinished(t:TweenEvent):void { bounceAnimation.removeEventListener(TweenEvent.MOTION_FINISH, animationFinished); allowScrolling = true; } private function scrollToDirection(m:MouseEvent):void { m.stageX < startingPointX ? scrollLeft(m.stageX, m.stageY) : 0; m.stageX > startingPointX ? scrollRight(m.stageX, m.stageY) : 0; m.stageY < startingPointY ? scrollUp(m.stageX, m.stageY) : 0; m.stageY > startingPointY ? scrollDown(m.stageX, m.stageY) : 0; } private function setNewStartingCoordinates(xPos:Number, yPos:Number):void { startingPointX = xPos; startingPointY = yPos; } private function calcScrollBarXaxis():Number { var cont:Number = (_maskContentHolder.width+_maskContentHolder.x)-_mask.width; var base:Number = _maskContentHolder.width-_mask.width; var max:Number = _mask.width - scrollBarH.width; var act:Number = cont*max/base; return Math.floor(max - act); } private function calcScrollBarYaxis():Number { var cont:Number = (_maskContentHolder.height+_maskContentHolder.y)-_mask.height; var base:Number = _maskContentHolder.height-_mask.height; var max:Number = _mask.height - scrollBarV.height; var act:Number = cont*max/base; var ret:Number = Math.floor(max - act); ret < 0 ? ret = 0 : 0; ret > max ? ret = max : 0; return ret; } private function scrollLeft(xPos:Number, yPos:Number):void { _mask.bitmapMode = true; hScroll ? scrollBarH.alpha = 0.3 : 0; setNewStartingCoordinates(xPos, yPos); _maskContentHolder.x = _maskContentHolder.x -3; if (_maskContentHolder.x < (_maskContentHolder.width-_mask.width)*-1) { _maskContentHolder.x = (_maskContentHolder.width-_mask.width)*-1; } scrollBarH.x = calcScrollBarXaxis(); } private function scrollRight(xPos:Number, yPos:Number):void { _mask.bitmapMode = true; hScroll ? scrollBarH.alpha = 0.3 : 0; setNewStartingCoordinates(xPos, yPos); _maskContentHolder.x = _maskContentHolder.x +3; if (_maskContentHolder.x > 0) { _maskContentHolder.x = 0; } scrollBarH.x = calcScrollBarXaxis(); } private function scrollUp(xPos:Number, yPos:Number):void { _mask.bitmapMode = true; vScroll ? scrollBarV.alpha = 0.3 : 0; setNewStartingCoordinates(xPos, yPos); _maskContentHolder.y = _maskContentHolder.y -3; if (_maskContentHolder.y < (_maskContentHolder.height-_mask.height+scrollContentPadding)*-1) { _maskContentHolder.y = (_maskContentHolder.height-_mask.height+scrollContentPadding)*-1; } scrollBarV.y = calcScrollBarYaxis(); } private function scrollDown(xPos:Number, yPos:Number):void { _mask.bitmapMode = true; vScroll ? scrollBarV.alpha = 0.3 : 0; setNewStartingCoordinates(xPos, yPos); _maskContentHolder.y = _maskContentHolder.y +3; if (_maskContentHolder.y > scrollContentPadding) { _maskContentHolder.y = scrollContentPadding; } scrollBarV.y = calcScrollBarYaxis(); } } } Usage: import flash.display.Sprite; import ui.components.ScrollableDisplayContainer; import flash.events.MouseEvent; var a:Sprite = new Sprite(); a.graphics.lineStyle(0, 0xFF0000); a.graphics.beginFill(0xFF0000, 1); a.graphics.drawRect(0, 0, 1000, 800); a.graphics.endFill(); var aa:Sprite = new Sprite(); aa.graphics.lineStyle(0, 0xFF0000); aa.graphics.beginFill(0x00FF00, 1); aa.graphics.drawRect(0, 0, 1000, 500); aa.graphics.endFill(); aa.buttonMode=true; aa.addEventListener(MouseEvent.CLICK, clicked); function clicked(m:MouseEvent):void { trace ('clicked: '+m.target); } var c:Sprite = new Sprite(); c.addChild(a); a.x = 0; a.y = 0; c.addChild(aa); aa.x = 0; aa.y = 200; var b:ScrollableDisplayContainer; b = new ScrollableDisplayContainer(600, 560, c); addChild(;
-
Hi, I have been searching for a good example of creating a simple accordion menu, but everything I have come across seems over engineered. 1_I really like the simplicity of this menu: http://codepen.io/ewe1991/pen/agfqA but can't figure out how I could convert the jQuery code to AS3? Does anyone have any ideas? 2_ Could this be accomplished using the blitMask plugin? For example: Set up: 3 mcs that each contain a tab panel portion and a content portion. Have the blitMask to be 1/3 th size of each mc and then when the user hovers over, have the height of the blitMask itself animate top down to reveal the content. --> So based on which mcs is targeted, I would set up a function that would animate the height of the mask and position of the mcs. For example, if user rolls over mc1, blitMask1 would expand down and whatever previously hovered over mc was open would collapse - the blitMask of that mc contracting in height, while the other one is expanding. I have been losing hair over this... Thanks guys!
-
Hello, I am experimenting with the blitmask object and I am running into a little odd problem. When I run a very simple demo of simply scrolling a textfield using blitmask, the movement lags about every 4 seconds. The lag looks like a jitter and for maybe 1/2 a second I cannot read anything (almost like the object and the screen refresh get out of sync). When I watch and play with the demo on the website, I see a very very small amount of this lag, but its still much better than what I am seeing. I set my application to 60 fps and I am using embedded fonts. I am running an i7 with an nVidia 650M 2G graphics card on Windows 7 (all gaming is no problem for me, so this should not be a factor). Below is the code I am using. Any tips or an explanation would be great. The purpose of this code would be to display an RSS/Atom or other scrolling text feed. // Create Textfield var tf:TextField = new TextField(); // Setup Properties and Values tf.embedFonts = true; tf.autoSize = TextFieldAutoSize.LEFT; tf.text = "(Reuters) - Hurricane Odile ground its way up Mexico's Baja California peninsula on Monday, gradually losing strength after injuring dozens of people, forcing the evacuation of thousands and smashing shops open to looters in the popular tourist area. Fierce winds felled trees, buffeting homes and businesses, as one of the worst storms ever to hit the luxury retreats of Los Cabos battered Mexicos northwestern coast with heavy rains.";// The text is 3x as long but I had to cut it due to website thinking it was spam // Format the TextField var format:TextFormat = new TextFormat(); format.font = "arial"; format.size = 40; tf.setTextFormat(format); //Add it to the screen var uic:UIComponent = new UIComponent(); uic.addChild(tf); grpMain.addElement(uic); //Call the scrolling function blitmaskDemo(tf); //Scrolling Function private function blitmaskDemo(tf:TextField):void{ var bm:BlitMask = new BlitMask(tf, tf.x, tf.y, 1920, tf.height, true); bm.cacheAsBitmap = true; bm.bitmapMode = true; TweenMax.to(tf, 150, {x:-(tf.width) + tf.x, onUpdate:bm.update, ease:Linear.easeNone}); } Thank you!!
-
Hi everyone! First, congrats for the awesome new website.. very refreshing!! Second sorry for my english but that's not my native language.. Following your example using ThrowProps with BlitMask, I need to edit the content of the target DisplayObject on the fly but I can't manage it. My target is a MovieClip with datas from a contact form. At startup, I fill my target with datas saved previously (with a SharedObject- this is an AIR app). Then I create the BlitMask and everything works fine. But when I try adding more contacts, they don't add anymore in the target object. I guess I know why : because BlitMask is a bitmap version of my target, right? Can you help? (I hope my description is clear enough) Thank you. Sebastien
-
Hi there, I just discovered the new GreenSock website, and I'm wondering if anyone knows where the Blitmask page www.greensock.com/blitmask/ hides. I really need this page, because there is an example of how to create a touch carousel in the comments. Thanks !
-
I would like to replace Flex Spinner (sometimes called Picker or UIPicker) with something written in AS3 without Flex. ThrowProps and Blitmask should be a great help. Are there any examples of doing using Greensock?
-
ThrowProps and Blitmask really do work well together for scrolling, but most of my views have too much interactivity for Blitmask to be useful. The BlitMask would need to be updated with a forced recapture of the Blitmask each time any change is made to the view, and this is taking about 500ms, which interferes with a smooth scroll. Is there an example for using ThrowProps in a Scroller without using BlitMask?
- 2 replies
-
- throwprops
- scroll
-
(and 1 more)
Tagged with:
-
Hello. I have a problem and im not sure how to solve it (with the BlitMask technic). Currently Im trying to create a mask (which I can more around the stage) that shows only a fragment (lets say 50x50) of the main movie clip.The main MC (lets name it Rainbow) has elements that are moving in it (like i black ball that goes from 1 corner to the other corner and then repeats that infinitely ). So what it is supposed to be happening is this: There is the main MC which stays at stage.x and stage.y and then there is my little new element (lets name it frac ( from fraction )), which i can move freely anywhere on the stage. This element (frac) shows that portion of the main MC every single frame, so when the ball in the main MC moves through that area ( the area that frac specified to watch ), frac shows that movement in itself. I currently have made it work with using flash.geom.Matrix; and bitmapData;. it is something like this: public class Main extends MovieClip { private var bmd:BitmapData; private var countainer:Sprite = new Sprite(); private var bm:Bitmap = new Bitmap(); private var myRainbow:Rainbow = new Rainbow();//the moving MC public function Main() { this.addChild( myRainbow ) myRainbow.x = stage.x; myRainbow.y = stage.y; bmd = new BitmapData( 50, 50 ); bm.x = 0; bm.y = 0 countainer.addChild( bm ); addChild( countainer ) countainer.x = 100 countainer.y = 100 addEventListener(Event.ENTER_FRAME, onFrame); addEventListener(MouseEvent.MOUSE_UP, drop); } private function onFrame( event:Event ) { bmd.draw( myRainbow, new Matrix( 1, 0, 0, 1, 0, 0 ), null, null, new Rectangle( 0, 0, 50, 50 ) ); // the last two numbers of the Matrix show the starting point of where the mask will show bm.bitmapData = bmd; } } But with this solution the performance is extremely poor. So I searched the net in a more performance friendly solution and found the BlitMask technic. So is there a way of doing this with the BlitMask??? to be more clear I`ve uploaded the fla- file that I`ve made with the code above so you can see what Im doing the link is : https://drive.google.com/file/d/0B5u6hrR2w7UEYmFHbHdlWnlWNjA/edit?usp=sharing
-
First of all, thank you very much for this brilliant job! I use blitmask as Carl Schooff’s singleDigit.fla example, but I’m using the button to go forward number by number and another button to choose the number user wants. When user choose a number i need to 'disable' this number coloring it in grey for exemple, or modifying its alpha level. … var blitMask1:BlitMask = new BlitMask( strip1, strip1.x, strip1.y, strip1.width, 300, true, true, 0xffff00, true); … //if user choose the number three... strip1.three.alpha= 0.5; // I want to do that but it doesn't work and I don’t know how to modify or update the target bitmap. … Thank you very much for you help! Sorry for my poor English..
-
Hi! First of all, @Jack: thanks a lot for the awesome Greensock framework! Currently I'm building an application that supports swiping. It's has a fairly large resolution. The application itself has a screen size of 1920x1080, but the swipable content is roughly 15000px wide (height being 1080). So I was thinking, since the swiping was not very smooth, that I could use BlitMask to reduce the unneccessary calculations. However, I'm doing something wrong, since the mask itself doesn't seem to work correctly for dragging and swiping gestures. I have the following line in my code ('bm' is defined at the top of the class): this.bm = new BlitMask(this.mc, this.mc.x, this.mc.y, 1920, 1080, true, true, 0, false); However, the BlitMask seems to be an object laying over all the other objects, meaning my EventListeners on the content are not recognized. Is there some workaround for this or am I mistaken here and the error lies somewhere else?
-
Let's say I have a image slider that I want it to scroll when I click on a button. But I do not want it to be the same order every time I click on the image. If the image width is about 100px, can blitMask just cut out 100px from it and random rearrange it when it scrolls? And if the image have an event I want to trigger, I need to remove the 'disableBitmapMode' when the animation stop. But when I disable it, the 'copied' image will be removed making the slider be out of the screen, or in a different position when it stopped. Or a better way to do it would be using enter Frame?
-
hello everyone, I'm trying to mask a Sprite containing some TextFields. TextFields are cut off. the width is the same as the Sprite, but even if I give it + 100 pixels, it will not change. without the BlitMask, it's not cut off. what can I do? thanks in advance.
-
Hi all, I have created an infinite scrolling background with 4 layers. For giving the wrapping effect on each layer, I am using 2 copies of the same image and during the loop i am shifting the x positions. Now i want to use BlitMask for this, and i have sccuessfully implemented it too. I just want to have one doubt cleared : - there are 4 sprites for each layer updating in an update loop - these 4 layers are a child of BGScreen sprite should I use the BlitMask for just the BGScreen sprite or should I create 4 instances for each layer so that i can use the wrapping feature and then blit them each. And finally blit the whole BGScreen sprite too ?? any other suggestions are also welcome thanks I am attaching the two as files... just for your reference
-
Hi, I am trying to create a smooth scroll effect: I have a wall that moves horizontally, and I am using 3 pieces with the old-school method. While shifting the wall rotates from x to y degrees. The result is ok, but I want to maximize performances: can I use BlitMask to create a shifting+rotating wall? Is it correct to create the BlitMask for an item, add the item to a DisplayObject, and rotate the DisplayObject? It seems to work ok, even if there is a minor glitch on the top side of the wall, showing the lowest pixels of the wall BMP and certain angles of the rotation (fixable with wrapOffsetY I suppose). Thanks
-
Hi, I am working on this slot machine effect based on this tutorial: http://www.snorkl.tv/2011/10/use-blitmasks-wrap-feature-for-easy-bitmap-scrolling-and-looping/ and it works great: var blitMask:BlitMask = new BlitMask(strip1, strip1.x, strip1.y, 94, 105, true, true, 0, true); TweenMax.to(strip1, 2, {y:960}); //blur to 40 and then back to 0. TweenMax.to(strip1, 0.8, {blurFilter:{blurY:20}, repeat:1, yoyo:true}); My issue is that I can't figure out how to have a ease:Bounce.easeOut applied. I tried: TweenMax.to(strip1, 2, {y:960, ease:Bounce.easeOut}); but this looks too rough...All I would like to achieve is a slight bounce effect, when the number is locking into the slot. How would I be able to achieve this? Thanks, C
-
i use ThrowPropsPlugin and blitmask , and its wow scrollview for my background but it disabled every listeners and every movieClips animation inside the background movieClip i dont know why ? this line of code which disable every thing .. blitMask = new BlitMask( mcBg, bounds.x, bounds.y, bounds.width, bounds.height, false); please help me , i need the smooth blitmask scroll , and also i need the children inside the background -mcBg- to work .
- 2 replies
-
- action script 3
- blitmask
-
(and 2 more)
Tagged with:
-
Hi guys, So i've made a draggable object that looks like a top down view of a tire, it has a blitmasked artwork mc inside, this mc wraps so that when you drag it gives the illusion of the tire rolling. That all works fine but i want the user to be able to switch between a few styles of tires by changing to a new frame of the artwork mc like so: blitMask.dispose(); artworkMc.gotoAndStop(whichTire); artworkMc.x = 0; blitMask = new BlitMask(artworkMc,-artworkMc.width/2,-artworkMc.height/2,artworkMc.width,artworkMc.height,false,false,0,true); some of the tires are different sizes so i was hoping stating 'artworkMc.width' would get that information, but the mask is staying the original size. Also is seems that the artwork of the original tire frame is still in the background behind the new frame. I reckon it's more a problem with my logic than anything else but if anyone can throw me some pointers that'd be great! Thanks