slide effect for stageWebView

[Guest]

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!!

[Apocalyptic0n3]

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

[Apocalyptic0n3 · Accepted solution]

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/

[Guest]

Thank you soooo much =DD

[gtr]

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!

[Apocalyptic0n3]

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.

[gtr]

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

[Apocalyptic0n3]

Then that may be a better option than what I suggested, if it works the way it sounds like it does. It'd be a little more work, but be infinitely faster and more flexible.

1. Load page in StageWebView
2. On complete (use the event listener), drawViewPortToBitmapData
3. Set StageWebView viewport to null
4. Draw bitmapdata to stage
5. Tween the hell out of it
6. Discard the bitmap data and set the final viewport location for the StageWebView

[gtr]

That's about it! My only issue that the first time this function is called, the tween is a little jerky, kinda like it needs to be pre-loaded somehow. All subsequent calls of the animation are smooth as butter. But I think that's an issue I'm having with tweening and not really due to the stageWebView usage...

[Guest]

This is a very good info. I will use it also.!!

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------

http://www.BriefApps.com Reviews on Apple's iPhone and iTouch Apps including videos, news, screenshots, prices and more.

[leejk]

Hello,

I like the sound of the approach you described and I'm trying to implement it into my app. But I can't get a good capture of the StageWebView viewport... the capture is always a gray image. I'm doing the capture on the StageWebView's complete handler, which is fired before the Slide transtion's transition start event, so it should be working but it's not. I'm loading a pdf into StageWebView... I wonder if that is somehow affect it? Anyway, do you have any more detail on how you've gotten this to work?

thx

[Apocalyptic0n3]

I didn't test it, but I am 99% sure you can't screenshot a PDF in StageWebView. Basically, the "drawViewportToBitmap" method draws the web view's viewport to a BitmapData object. The problem is that a PDF is not rendered in the viewport of the web view. When you load a PDF into a StageWebView object, it actually tries to load a plugin (Acrobat on desktop, the built-in plugin on iOS, and nothing on Android since it isn't supported) and that plugin is what renders the PDF. The plugin isn't in the webview's viewport either, I believe, but being displayed above it (much in the way StageWebView is displayed above your app). I also do not believe you would be able to screenshot a video in iOS's StageWebView for the same reasons.

[leejk]

It does allow you to capture a screenshot of a pdf, or at least on iOS it's working that way. I do this already when I need to float a callout over it. I'm using Flex, and I've tried doing the capture in different parts of the components creation & complete handlers, yet I can't get a capture of the pdf. I'm thinking that evidently it must be because there's not enough time between the component's complete handler and the transition start for the capture to properly initialize like it does whenever the pdf has been loaded for more than a 500ms.