I have a page that displays data about an object. At the top of the page is room for an icon, showing a picture of that object. Tapping this icon brings up a new page that allows the user to take a new picture, and save it as a temporary new picture for the object (not put in database, but should persist for the session)
Initial page:
private var source:Object = new Object();
protected function onInitialize():void {
source = navigator.poppedViewReturnedObject;
}
When setting source for the image later...
if (source != null) {
pic.source = source.object;
}
else {
pic.source = "no_picture_available_image.png";
}
2nd Page (User can take picture, and view new picture):
[Bindable]
private var imageSource:Object = null;
<s:Image id="pic" width="90%" height="75%" horizontalCenter="0" source="{imageSource}" />
After taking picture...
protected function mediaPromiseLoaded(evt:Event):void {
var loaderInfo:LoaderInfo = evt.target as LoaderInfo;
imageSource = loaderInfo.loader;
}
This does show the picture just taken correctly on this page.
To get back to old page, i use navigator.popView, and use:
override public function createReturnObject():Object {
return imageSource;
}
Unfortunately, it doesn't work. The imageSource isn't null when it is read from navigator.poppedViewReturnedObject, but no image is shown.
Does the LoaderInfo not persist after popping the view? Are the camera pics not automatically saved? I can't find answers to any of these questions, and I can't debug using the phone in my current environment.
After thinking about this a bit, don't return LoaderInfo.loader as the poppedViewReturnedObject. If I remember correctly, a DisplayObject can only be set as the source of one Image. Instead, return LoaderInfo.loader.content.bitmapData. That BitmapData should be the raw data used to display the image. This data can be used repeatedly to create images and can be set as the source of an Image.
Problem turned out to be in my first page's image declaration - I didn't set a width. Seemingly, the object being displayed couldn't handle not having a specified width.
Note that passing back the loader did work fine.
Related
I am working with a digital book application. I make use of swf loader to load swf pages created from pdf. I use TextSnapsot to draw inline text highlight on the pages. The highlight is thoroughly retained on the respective pages throughout the session and later it can be updated/deleted without any problem. Everything was working great till I made the following changes in the swf loading approach to enable page caching:
I am now loading swf loader object into application memory and while doing jumping from one page to other page I am just copying the content of the next page to the current swf loader which is on the display to the user. There are two sets of swf loaders - one for displaying the page and other to cache the next/previous page(s). On the caching side, I load the swf into application memory and after getting it loaded I pick all the contents of the loaded swf page (the children of it's movie clip) into an array collection. While changing the page I copy the cached content into the swf loader's movie clip which is displaying the page.
Now when I highlight on the page on display and navigate back/forth from the page and comeback again to the page where I did the highlighting: It shows the highlight I did. But as soon as I try to draw another highlight on that page, the previous highlight is instantly disappears from the page.
I suspect that the Textsnapshot object which draws highlight while navigating (to the target display page) is different from the one which redraws/update the highlight on the same page next time. Although the Textsnapshot object id for both the objects is same.
Here are some code snippet:
For copying the content from the swf loader object cached in application memory:
private function copyPageContent():void
{
var contentCollection:ArrayCollection = new ArrayCollection();
_pageContentVO = new PageContentVO();
_pageContentVO.contentHeight = MovieClip(_swfPageLoader.content).height;
_pageContentVO.contentWidth = MovieClip(_swfPageLoader.content).width;
var count:int = MovieClip(_swfPageLoader.content).numChildren;
for(var i:int=0;i<count;i++)
{
var dispObject:DisplayObject = MovieClip(_swfPageLoader.content).removeChildAt(0);
contentCollection.addItem(dispObject);
}
_pageContentVO.pageContentCollection = contentCollection;
_swfPageLoader = null;
}
For copying the content to the swf loader which is displaying the page:
private function copyContent(pageContentVo:PageContentVO):void
{
for(var i:int = 0;i<pageContentVo.pageContentCollection.length;i++)
{
var dispObject:DisplayObject = pageContentVo.pageContentCollection.getItemAt(i) as DisplayObject;
MovieClip(this.content).addChild(dispObject);
}
this.content.height = this.height;
this.content.width = this.width;
}
after this I dispatch swf loader's complete manually and in the handler of that event I take the text snap shot object.(highlightManager.as)
Code I use to draw highlight manually(using mouse drag on the page).
public function setHighlight():void
{
removeAll();
if(_textSnapShot!=null && _textSnapShot.getText(0,_textSnapShot.charCount)!="")
{
if(_isCoveredTextSelectedAtAnyInstance)
{
_textSnapShot.setSelected(_beginIndex,_endIndex+1,false); //this is the global variable to the class
}
else
{
_textSnapShot.setSelectColor(0xfff100);
_textSnapShot.setSelected(_beginIndex,_endIndex+1,true);
}
if(saveHighlight)
{
countHighlightedSegments();
}
}
}
Code I use to redraw previously drawn highlight when I return to the page:
public function showHighlights(textSnapShot:TextSnapshot,currentPageNum:int):void
{
if(currentPageNum >= 0)
{
textSnapShot.setSelected(0,textSnapShot.charCount,false);
var pageVO:PageVO = _model.eBookVO.eBookPagesVO.getItemAt(currentPageNum) as PageVO;
var objColl:ArrayCollection = new ArrayCollection();
objColl.source = pageVO.highLightSelection;
for(var i:int=0;i<objColl.length;i++)
{
var highlightVO:HighlightVO = new HighlightVO();
highlightVO.beginIndex = objColl.getItemAt(i).beginIndex;
highlightVO.endIndex = objColl.getItemAt(i).endIndex;
setHighlightedSegment(textSnapShot,highlightVO.beginIndex,highlightVO.endIndex);
}
}
}
private function setHighlightedSegment(textSnapShot:TextSnapshot,beginIndex:int,endIndex:int):void
{
textSnapShot.setSelectColor(0xfff100);
textSnapShot.setSelected(beginIndex,endIndex,true);
}
Looking forward to your support to resolve this issue.
Regards,
JS
What you're doing is not 'caching', it's preloading previous/next pages. Also, what you're doing is really bad practice. I'm not even sure why you're casting these things into MovieClips unless the SWFs are that; if they're Flex SWFs, they'll be UIComponents. I would recommend you rethink your approach. I wouldn't even bother copying the children or anything over. Once the browser loads a SWF, it is now part of the browser cache, meaning the next time it's requested, it won't actually download it.
If you want to 'cache' your SWFs for a quicker next/previous page flipping, I would recommend you use something like SWFLoader to just load the other SWFs without actually adding it to the display, then removing it from memory. That will cache the SWFs for you in the browser. Then when the user click previous/next, just change the url of the main swfloader of the currently displayed page and it will load it up really quickly. No downloading since it's already cached, it will just need to instantiate.
How can I copy or duplicate the bitmapdata from a mx:image component?
I need to display the same image in multiple screens of my application and don't want to have to download the image multiple times.
I could just use a urlrequest to download the image as a bitmap and copy that but I like the way you can can just set the source of the image component.
Image extends SWFLoader which has a content property that will contain the Bitmap object that was loaded. Wait for the image to load, cast the content to Bitmap and read its bitmapData
public function imageLoadCompleteHandler(e:Event):void
{
var bitmap:Bitmap = img.content as Bitmap;
if(bitmap == null) {
trace("loaded content is not an image");
return;
}
bmpData = bitmap.bitmapData;
//hurray..!
}
Actually after reading the message above (and trying stuff out) I think this is wrong. The Complete listener fires on my second image so I guess it is loading it twice. Oh well.
I couldn't place the whole Flex doc, but this seemed to work. I added this to the Application tag: applicationComplete="Run();"
The following is wrapped in a mx:Script tag:
import mx.controls.Image;
private function Run():void
{
var i:Image = new Image();
i.source = first.source;
addChild(i);
}
And this is just a Image outside of the script tag:
<mx:Image x="12" y="125" source="e53c04a51d5992fb77ab1e20c45ddc9f.jpeg" id="first" />
I also tried this after setting the i source:
first.source = null;
Just to see what happens, the i image keeps it's source
I have a flex Air program that loads external content with the HTMLLoader. Now for some reason whenever I load a page that has any flash content a blank system window pops up outside of my program. It's completely blank, all white with min, max and close buttons. If I close it any flash content I loaded stops working. For the life of my I can't figure out what's happening and there's no messages in the console and no title for the window.
Does anyone have any ideas? I appreciate any help you can give. Here's the code I'm using:
private var webPage:HTMLLoader;
private function registerEvents():void
{
this.addEventListener(gameLoadEvent.GAME_LOAD, gameLoad);
//webPage = new HTMLLoader();
}
//function called back from Game Command to load correct game
private function gameLoad(event:Event):void
{
var gameEvent:gameLoadEvent = event as gameLoadEvent;
loadgame(gameEvent.url, gameEvent.variables);
}
private function loadgame(url:String, variableString:String):void
{
DesktopModelLocator.getInstance().scaleX = 1;
DesktopModelLocator.getInstance().scaleY = 1;
//var url:String = "http://pro-us.sbt-corp.com/aspx/member/LaunchGame.aspx";
var request:URLRequest = new URLRequest(url);
//var variables:URLVariables = new URLVariables("gameNum=17&as=as1&t=demo&package=a&btnQuit=0");
if(variableString != null && variableString != ""){
var variables:URLVariables = new URLVariables(variableString);
variables.exampleSessionId = new Date().getTime();
variables.exampleUserLabel = "guest";
request.data = variables;
}
webPage = HTMLLoader.createRootWindow(true, null, true, null);
webPage.height = systemManager.stage.nativeWindow.height - 66;
webPage.width = systemManager.stage.nativeWindow.width;
webPage.load(request);
webPage.navigateInSystemBrowser = false;
flexBrowser.addChild(webPage);
}
]]>
</mx:Script>
<mx:HTML id="flexBrowser" width="1366" height="658" backgroundAlpha="0.45" creationComplete="registerEvents();" x="0" y="0">
</mx:HTML>
you're not using any of the capabilities of your html component. As is, it may as well be a canvas since all you're doing is addChild to flexBrowser, a DisplayObjectContainer. Though I wouldn't do it this way, you can pretty simply set the flexBrowser.htmlLoader.load(request); and get rid of all that webPage stuff.
Is your application using a transparent window? air won't display flash content in the HTMLLoader in that case, see http://bugs.adobe.com/jira/browse/SDK-15033
One workaround is to use http://code.google.com/p/adobe-air-util/source/browse/trunk/src/net/tw/util/air/HTMLOverlay.as.
I had to do some changes to get it to work well with our app. I sent an email to the project owner to contribute the changes, if you are still on it I can send you the patch. The most important change, is that the html overlay window does go behind other apps when switching i.e. alt-tab or opening another app.
Update: I committed the changes to the overlay above, check it out as it should work for you as well. I know it seems like an awful workaround, but there doesn't seem to be anything better until adobe fixes the issue. If you do see something better, make sure to post the update :)
This problem has been fixed in AIR 1.5.2:
Before AIR 1.5.2, SWF content embedded in and HTML container in a transparent window could not be displayed. With AIR 1.5.2, SWF content can be displayed with certain wmode settings.
I've reviewed all the documentation and Google results surrounding this and I think I have everything setup correctly. My problem is that the symbol is not appearing in my app. I have a MovieClip symbol that I've embedded to my Flex Component. I need to create a new Image control for each item from my dataProvider and assign this embedded symbol as the Image's source. I thought it was simple but apparently not. Here's a stub of the code:
[Embed(source="../assets/assetLib.swf", symbol="StarMC")]
private var StarClass:Class;
protected function rebuildChildren():void {
iterator.seek( CursorBookmark.FIRST );
while ( !iterator.afterLast ) {
child = new Image();
var asset:MovieClipAsset = new StarClass() as MovieClipAsset;
(child as Image).source = asset;
}
}
I know the child is being created because I can draw a shape and and that appears. Am I doing something wrong? Thank you!
You should be able to simply set child.source to StarClass:
child = new Image();
child.source = StarClass;
See the MovieClipAsset Language Reference for more details:
you rarely need to create MovieClipAsset instances yourself
because image-related properties and
styles can be set to an
image-producing class, and components
will create instances as necessary.
For example, to set the application
background to this animation, you can
simply write the following:
<mx:Application backgroundImage="{backgroundAnimationClass}"/>
Flex has built in drag-n-drop for list controls, and allows you to override this. But they don't cover this in examples. The built-in functionality automatically drags the list-item, if you want to override this you find the handlers are being set up on the list itself.
What I specifically want to do, is my TileList shows small thumbnails of items I can drag onto a large Canvas. As I drag an item from the list, the drag proxy should be a different image.
So, I followed the technique suggested and it only works if I explicitly set the width/height on the proxy Image. Why?
It's not obvious until you've tried it =) I struggled with the same thing just a few weeks ago. This was my solution:
The list:
<List>
<mouseDown>onListMouseDown(event)</mouseDown>
</Tree>
The mouse down handler:
private function onMouseDown( event : MouseEvent ) : void {
var list : List = List(event.currentTarget);
// the data of the clicked row, change the name of the class to your own
var item : MyDataType = MyDataType(list.selectedItem);
var source : DragSource = new DragSource();
// MyAwsomeDragFormat is the key that you will retrieve the data by in the
// component that handles the drop
source.addData(item, "MyAwsomeDragFormat");
// this is the component that will be shown as the drag proxy image
var dragView : UIComponent = new Image();
// set the source of the image to a bigger version here
dragView.source = getABiggerImage(item);
// get hold of the renderer of the clicked row, to use as the drag initiator
var rowRenderer : UIComponent = UIComponent(list.indexToItemRenderer(list.selectedIndex));
DragManager.doDrag(
rowRenderer,
source,
event,
dragView
);
}
That will start the drag when the user clicks an item in the list. Notice that I don't set dragEnabled and the other drag-related properties on the list since I handle all that myself.
It can be useful to add this to the beginning of the event handler:
if ( event.target is ScrollThumb || event.target is Button ) {
return;
}
Just to short circuit if the user clicks somewhere in the scrollbar. It's not very elegant but it does the job.
I found a simpler answer here. That example extends a DataGrid control, but you can do the same with a List control. In my case, I use an image source instead of Class:
public class CustomDragList extends List {
[Bindable]
public var dragProxyImageSource:Object;
override protected function get dragImage():IUIComponent {
var image:Image = new Image();
image.width = 50;
image.height = 50;
image.source = dragProxyImageSource;
image.owner = this;
return image;
}
}
Then use that custom list like this:
<control:CustomDragList
allowMultipleSelection="true"
dragEnabled="true"
dragProxyImageSource="{someImageSource}"
dragStart="onDragStart(event)"/>
Where 'someImageSource' can be anything you'd normally use for an image source (embedded, linked, etc.)