Load an Image in Multiple movie clips using as3 - arrays

I am really curious of asking a particular question to everyone of you. I am creating an Application in flash that is lot similar to this Application Zazzle Case Cover
I am almost ready with what i was supposed to do and How i have to do. But, still i am ain't a very big Tech_geek to handle all these . I list out some of the things which i could`nt achieve. Kindly help me if possible.
I know that inorder to load unlimited number of images in a Movie Clip, we need Array. But to go with it, I am not sure of framing it properly.
I have Merged certain codings from internet and encoded it to act as the Application in that Site for a Single image in a Single view, but when i try to add child or make it display the same image in all other views i can't frame the coding. It is not behaving properly .
Last but not the Least, I am confused of displaying the Bitmap data in as3... I wanted to show the Uploaded Panel Image in the below thmbnail area but i am not so sure of it.
The Questionnaire format of the Above problems are
How to upload unlimited number of images in a Movie Clip using Array ?
Is it is possible to Display the same image in two Movie Clips simultaneously using addChild ?
I had lots of blah and blah but this area plays the 2nd Question and even Answer for it. But i am ain't sure revealing the Answer.
function onMovieClipLoaderComplete(event:Event):void
{
// Hide progress bar
progressBar.visible=false;
var loadedContent:DisplayObject=event.target.content;
var loader:Loader=event.target.loader as Loader;
loadedContent.x=-37.625;
loadedContent.y=-37.625;
loadedContent.width=75.25;
loadedContent.height=75.25;
trace("loadedContent.width="+loadedContent.x);
trace("loadedContent.height="+loadedContent.y);
mcOnStage=true;
con1.container.addChild(loader);
clears.addEventListener(MouseEvent.CLICK, removeMC);
function removeMC(MouseEvent):void {
trace("Its Removed");
if (mcOnStage )
{
con1.container.removeChild(loader);
con1.textcontainer.removeChild(txt);
mcOnStage=false;
}
}
}
"con1.container.addChild(loader);"
Can i add "con1.container2.addChild(loader);" for the same loaded image.
How to Clone a Movieclip's Bitmap data and Display it in another area or Movieclip ???
Guide me if possible...
I have included the SWF file along with this Question...
https://docs.google.com/file/d/0B5jnHM1zpP4MOHRCeWFqX05sSTA/edit?usp=sharing
Can Someone check the first Site and gimme little notes of how can i bring all those modules in this flash as3 based application.

Here's how you would display the same image twice, with reference to the code you included in your post:
//here's your code
var loadedContent:DisplayObject=event.target.content as DisplayObject;
//create bitmap data instance same size and as the loaded content
var transparent:Boolean = true;
var fillColor:uint = 0xFFFFFFFF;
var bitmapData:BitmapData = new BitmapData(loadedContent.width, loadedContent.height, transparent, fillColor);
//draw the loaded content into the bitmap data
bitmapData.draw( loadedContent );
//create new bitmap
var bitmap:Bitmap = new Bitmap( bitmapData);
//add the loaded content
con1.container.addChild(loader);
//add your 'cloned' content
con1.container2.addChild( bitmap );

Related

how to distinguish which picture put in the right position

I am using preloadjs, but I have a question that when I store the images in the queue object. How do I distinguish which image put in the right place.
here is storing the images code
queue.loadFile('https://s3.amazonaws.com/coursetro/stuff/mountains-clouds.jpg');
queue.loadFile('https://s3.amazonaws.com/coursetro/stuff/adventure-alpine-alps-714258.jpg');
queue.loadFile('https://s3.amazonaws.com/coursetro/stuff/170407220921-07-iconic-mountains-pitons-restricted.jpg');
queue.loadFile('https://s3.amazonaws.com/coursetro/stuff/170407220916-04-iconic-mountains-matterhorn-restricted.jpg');
here is setting the image Dom to html
const handleFileComplete=(event)=>{
const type=event.type;
if (type=="fileload"){
galleryRef.current.appendChild(event.result); //this is just a simple traversal How to distinguish
};
}
queue.on("fileload",handleFileComplete);
Thank you for helping me :)
=============================FIXED===============================
Thank for Lanny's answer. We can just set the id when we load the image
queue.loadFile({id:"dance1",src:'https://s3.amazonaws.com/coursetro/stuff/170407220916-04-iconic-mountains-matterhorn-restricted.jpg'});

Embedding loads of images

I got 42 images that I want to embed and then put on an array.
I tried to do it within a for loop, but it doesn't seem to work.
How exactly can I avoid to have 42 embed lines + a very long line for the array ?
The only way to embed multiple images without an embed line for each one is to use a Sprite Sheet (sometimes called a 'Texture Atlas', or simply a 'Sprite'). This will take a folder of images, and generate one large image. And also give you a data file (use XML or JSON) of all images in your folder and where they're positioned inside the Sprite Sheet.
You can then embed the Sprite Sheet once.
For this you need 2 things:
1/ Software to create your sprite sheet... There are many tools available, the one I use for example is Texture Packer: http://www.codeandweb.com/texturepacker
2/ An actionscript class or framework, designed to handle referencing images from your sprite sheet... This is a native feature of Starling, but if you're not ready to support Flash Player 11 then you can find some publicly available frameworks for this:
For example: Spriter: http://abeltoy.com/projects/spriterAS3/usage.html has a class called BitmapSpriter to handle sprite sheets natively in AS3.
You could use a for each loop.
var items:Array = ["hi", "there", "bob"];
for (var index in items) {
trace(index+" => "+items[index]); // traces "0 => hi", "1 => there" and "2 => bob"
}

Trouble referencing movieClips

I am working on a flash project that dynamically generates navigation from an XML. For now I am trying to get it to work with arrays so that I can adapt it to xml once I know the logic works. I am new to as3 and learning has been a tiny bit bumpy. I have been searching for a solution to this but many of the examples I have seen have either been too simple to answer my question or too complex to understand since I am on the new side. This is the code I am working with.
var clientList:Array = new Array("Client1","Client2","Client3","Client4","Client5","Client6","Client7","Client8","Client9","Client10","Client11","Client12","Client13","Client14","Client15");
for each (var cName in clientList){
var newClientBtn:btnClientNav = new btnClientNav();
newClientBtn.x = workX;
newClientBtn.y = workY;
workY += newClientBtn.height;
newClientBtn.mcClientName.text = cName;
lContent.mcWork.addChild(newClientBtn.name);
trace(newClientBtn);
}
I can't fingure out how to properly refernce the dynamically created clips. I have a dynamic text box in the button but can't figure out how to reference it properly to change it, then my next issue will be referencing the buttons to make rollover and click code. I know this probably something simple to fix but I have been looking at it for too long and my eyes are starting to cross.. Thank you in advance for any advice you can give.
Why not store the clips you are creating in an object you can access later?
If you want to reference a movie clip by name though, one way to do it is:
var referenceMC:MovieClip = MovieClip(containerMC.getChildByName(“targetMC”));
If it was a text field or a button you were after, I believe you would do the same but instead cast the result of getChildByName to your desired control.
I also believe you want to add the button itself as a child, not pass its name into your addChild call?

Showing processed images from an IP camera

I have an IP-camera that serves images. These images are then processed via EmguCV and then I want to display the processed images.
To show the images, I use this code:
Window1(){
...
this.Dispatcher.Hooks.DispatcherInactive
+= new EventHandler(Hooks_DispatcherInactive);
}
Hooks_DispatcherInactive(...)
{
Next()
}
Next() the calls calls the image processing methods and (should) display the image:
MatchResult? result = survey.Step();
if (result.HasValue)
{
Bitmap bit = result.Value.image.Bitmap;
ImageSource src = ConvertBitmap(bit);
show.Source = src;
...
}
This works fine when I hook up a normal 30fps webcam. But, the IPCam's images take over a second to get here, also when I access them via a browser. So, in the mean time, WPF shows nothing, not even the previous image that was processed.
How can I get WPF to at least show the previous image?
You can copy the image's buffer into a new BitmapSource image of the same format (PixelFormat, Height, Width, stride) using Create (from Array) or Create (from IntPtr) and display that BitmapSource in WPF's Image control,
or you can use DirectX to do that faster (for 30fps (and 1fps) the BitmapSource approach should do).
Also, consider NOT using events in the view, instead use bindings and commands.

How to generate and print large XPS documents in WPF?

I would like to generate (and then print or save) big XPS documents (>400 pages) from my WPF application. We have some large amount of in-memory data that needs to be written to XPS.
How can this be done without getting an OutOfMemoryException? Is there a way I can write the document in chunks? How is this usually done? Should I not be using XPS for large files in the first place?
The root cause of the OutOfMemoryException seems to be the creation of the huge FlowDocument. I am creating the full FlowDocument and then sending it to the XPS document writer. Is this the wrong approach?
How do you do it? You didn't show any code.
I use an XpsDocumentWriter to write in chunks, like this:
FlowDocument flowDocument = . .. ..;
// write the XPS document
using (XpsDocument doc = new XpsDocument(fileName, FileAccess.ReadWrite))
{
XpsDocumentWriter writer = XpsDocument.CreateXpsDocumentWriter(doc);
DocumentPaginator paginator = ((IDocumentPaginatorSource)flowDocument).DocumentPaginator;
// Change the PageSize and PagePadding for the document
// to match the CanvasSize for the printer device.
paginator.PageSize = new Size(816, 1056);
copy.PagePadding = new Thickness(72);
copy.ColumnWidth = double.PositiveInfinity;
writer.Write(paginator);
}
Does this not work for you?
Speaking from perfect ignorance of the specific system involved, might I suggest using the Wolf Fence in Alaska debugging technique to identify the source of the problem? I'm suggesting this because other responders are not reporting the same problem you are experiencing. When working with easy-to-reproduce bugs Wolf Fence is dead simple to do (it doesn't work so well with race conditions and the like).
Pick a midpoint in your input data and try to generate your output document from only that data, no more.
If it succeeds, pick a point about 75% into the input and try again, otherwise pick a point at about 25% of the way into the input and try again.
Lather, rinse, repeat, each time narrowing the window to where the works/fails line is.
You may find that you fairly quickly identify one specific page -- or perhaps one specific object on that page -- that is "funny." Note: you only have to do this log2(N) times, or in this case 9 times given the 400 pages you mention.
Now you probably have something you can attack directly. Good luck.
You cannot use a single FlowDocument for generating large documents because you will run out of memory. However if it is possible to generate your output as a sequence of FlowDocument or as an extremely tall ItemsControl, it is possible.
I've found the easiest way to do this is to subclass DocumentPaginator and pass an instance of my subclass to XpsDocumentWriter.Write:
var document = new XpsDocument(...);
var writer = XpsDocument.CreateXpsDocumentWriter(xpsDocument);
writer.Write(new WidgetPaginator { Widget = widgetBeingPrinted, PageSize = ... });
The WidgetPaginator class itself is quite simple:
class WidgetPaginator : DocumentPaginator, IDocumentPaginatorSource
{
Size _pageSize;
public Widget Widget { get; set; }
public override Size PageSize { get { return _pageSize; } set { _pageSize = value; } }
public override bool IsPageCountValid { return true; }
public override IDocumentPaginatorSource Source { return this; }
public override DocumentPaginator DocumentPaginator { return this; }
public override int PageCount
{
get
{
return ...; // Compute page count
}
}
public override DocumentPage GetPaget(int pageNumber)
{
var visual = ...; // Compute page visual
Rect box = new Rect(0,0,_pageSize.With, _pageSize.Height);
return new DocumentPage(visual, _pageSize, box, box);
}
Of course you still have to write the code that actually creates the pages.
If you want to use a series of FlowDocuments to create your document
If you're using a sequence of FlowDocuments to lay out your document one section at a time instead of all at once, your custom paginator can work in two passes:
The first pass occurs as the paginator is constructed. It creates a FlowDocument for each section, then gets a DocumentPaginator to retrieve the number of pages. Each section's FlowDocument is discarded after the pages are counted.
The second pass occurs during actual document output: If the number passed to GetPage() is in the most recent FlowDocument created, GetPage() simply calls that document's paginator to get the appropriate page. Otherwise it discards that FlowDocument and creates a FlowDocument for the new section, gets its paginator, then calls GetPage() on the paginator.
This strategy allows you to continue to use FlowDocuments as you have been, as long as you can break the data into "sections" each with its own document. Your custom paginator then effectively treats all the individual FlowDocuments as one big document. This is similar to Word's "Master Document" feature.
If you can render your data as a sequence of vertically-stacked visuals
In this case, the same technique can be used. During the first pass, all visuals are generated in order and measured to see how many will fit on a page. A data structure is built to indicate which range of visuals (by index or whatever) are found on a given page. During this process each time a page fills up, the next visual is placed on a new page. Headers and footers would be handled in the obvious way.
During the actual document generation, the GetPage() method is implemented to regenerate the visuals previously decided to be on a given page and combine them using a vertical DockPanel or other panel of your choice.
I've found this technique more flexible in the long run because you don't have to deal with the limitations of FlowDocument.
I can confirm that XPS does not throw out-of-memory on long documents. Both in theory (because operations on XPS are page-based, it doesn't try to load whole document in memory), and in practice (I use XPS-based reporting, and seen run-away error messages add up to many thousands of pages).
Could it be that the problem is in a single particularly large page? A huge image, for example? Large page with high DPI resolution? If single object in document is too big to be allocated at once, it will lead to out-of-memory exception.
Have you used sos to find out what is using up all the memory?
It could be that managed or unmanaged objects are being created during the production of your document, and they're not being released until the document is finished (or not at all).
Tracking down managed memory leaks by Rico Mariani could be of help.
like you say: probably the in-memory FixedDocument is consuming too much memory.
Maybe an approach in which you write out the XPS pages each individually (and make sure the FixedDocument gets released each time), and then use a merger afterwards could prove fruitful.
Are you able to write each page separately?
Nick.
ps. Feel free to concact me directly (info#nixps.com); we do a lot of XPS stuff at NiXPS, and I'm very interested in helping you getting this issue resolved.

Resources