Skip to main content
August 22, 2012
Answered

slide effect for stageWebView

  • August 22, 2012
  • 3 replies
  • 5066 views

Hi, everyone.

I'm in a flash builder mobile project.

Just want to ask if there is anyway to make stageWebView to "slide in" into stage?
This component is like another world, it cannot be added as Element(or Child), and the only way to set its position is viewPort.

If "Slide in" is not possible, then fade-in is also nice. Just need something fancier than just pop up like that.

PLEASE HELP ME!!

This topic has been closed for replies.
Correct answer Apocalyptic0n3

As it turns out, I was right. You can do it that way. You can view the proof-of-concept and my source code here.

http://flexsupreme.com/2012/08/23/slide-in-stagewebview/

3 replies

Inspiring
August 29, 2012

Another method is to take a picture of the stageWebView offstage, slide (tween) the pic object onto the stage, and then reposition the stageWebView rect onstage and remove the pic. I'm doing this in my app and it works quite well.

"You definitely won't be able to do a fade in (there is no alpha for StageWebView)"

I imagine you could use the technique I describe to achieve a fade-in or other transition effects, too.

If you're interested in this technique, however, it'd probably be much easier to write the "pic capture" code using the UIWebview ANE extension. (I know will for my next project)

http://darkredz.com/ios-uiwebview-and-videoplayer-native-extension-for-air-mobile/

Cheers!

Inspiring
August 29, 2012

Yes, the DarkReds UIWebView ANE is fantastic. But that assumes arieldudu is using iOS. If they aren't, I'm not sure if it is possible to screenshot a StageWebView using AS3.

Inspiring
August 29, 2012

My bad. I thought he said he was on iOS. Regardless, it is possible to take a screenshot of stageWebView. Like I said, I got it fully working in my app (of course, right before DarkRedz released his ANE which would have made my life a LOT easier and saved me a couple hours of struggle!!).

Out of the office so I don't have any code handy at the moment, but I believe you need to look into drawViewPortToBitmapData

Apocalyptic0n3Correct answer
Inspiring
August 23, 2012

As it turns out, I was right. You can do it that way. You can view the proof-of-concept and my source code here.

http://flexsupreme.com/2012/08/23/slide-in-stagewebview/

August 28, 2012

Thank you soooo much =DD

Inspiring
August 22, 2012

You definitely won't be able to do a fade in (there is no alpha for StageWebView), but a slide in is certainly possible.

This is entirely untested, but it should give the effect of a slide in.

private function addedToStage():void{

        var t:Timer = new Timer(1000/stage.frameRate,100); //100 is repeat count. The Timer will run 100 times before finishing. You can always change this

          t.addEventListener(TimerEvent.TIMER,this.slideIn);

          t.start();

}

private function slideIn(e:TimerEvent = null):void{

          swv.viewPort = new Rectangle(swv.viewPort.x + PER_FRAME_MOVEMENT,Y,WIDTH,HEIGHT);

}

swv is obviously your StageWebView. Make sure addedToStage() is not run until AFTER the parent has been added to the stage, otherwise stage.frameRate will error out with a null reference.

Just to give an idea of how to use this, say your SWV was 100px wide. You would set the initial viewport to be new Rectangle(-100,Y,WIDTH,HEIGHT). If you wanted to stick 100 frames (between 3 and 4 seconds if framerate is 24-30fps), you would set PER_FRAME_MOVEMENT to 1 and it would slide to x=0 in those 3-4 seconds, 1 pixel at a time.

Obviously you can make it move faster or slower by messing with the repeat count and the PER_FRAME_MOVEMENT but you get the idea. You could also work some math into this so that the PER_FRAME_MOVEMENT is automatically calculated based on the original X position and the repeat count (maybe PER_FRAME_MOVEMENT = ( TargetX - StartingX ) / RepeatCount would do it).

Hope that helps