I am rendering an image to a Sprite inside of an Iterator. I'd like each render (iteration) to remain on the canvas indefinitely, so that each successive render layers on top of the previous ones. How can I do this?
There are no Clears or any other layers in my composition.
In Quartz Composer, you'll almost always want to use a Clear patch — don't assume that you can rely on the prior contents of the framebuffer. So, to accomplish this, you'll need to load all of your images into a structure (probably by using JavaScript to feed an Image Loader patch and build a Queue from that), and then display all of the images each frame using an Iterator.
Check out Apple's "Image TV" sample composition, available in the OS X Developer Library in the Quartz Composer Conceptual Compositions bundle. This example demonstrates how to load a series of images into a structure and then display them.
Related
I'm currently testing the downloadcache and this really looks great.
I have some questions regarding this plugin (I'm pretty new to C# and don't understand the full source code of the plugin):
1) ProgressView
I would like to show a progressview on the image until it has been loaded.
To do that, I need to be notified when the image is loaded.
In the "MvxImageViewLoader" I see there is an Action "afterImageChangeAction" (null by default).
However, I don't understand if and how I can access that Action from "MvxImageView"?
(how to set it)
2) Don't load old image
When using Tables or Cellectionviews in iOS, it's important to check if the URL has been changed before setting the image (because iOS reuses the objects). I looked at the source code of the downloadcache and I don't see this check.
However, in the "MvxDynamicImageHelper.cs" class, I see that when a new URL is set, it calls "ClearCurrentHttpImageRequest();" which removes the "update" Events.
So I assume this is enough to prevent that an image is set to the wrong UIImageView?
3) ImageCache size in (mega)bytes
The ImageCache does not have a property to define the mamiximum size (megabytes for example) of the persistent image store (on the HD). I prefer to use a maximum size in (mega)bytes instead of a maximum amount of files because the user will care more how much space an app takes instead of how many files are stored by the app.
I assume the easiest for me is to define a "TimeSpan PeriodSaveInterval" independent from the one in MvxFileDownloadCache to just check the size of the folder defined for the Image Cache or any other recommendations?
Is it dangerous for performance to scan the folder and calculate the size of all the images in a folder?
Regards,
Matt
1) ProgressView
I would like to show a progressview on the image until it has been loaded. To do that, I need to be notified when the image is loaded.
There is a DefaultImagePath which provides the path of an image that should be shown during loading.
But if you need a dynamic animation or other custom view, then afterImageChangeAction can be used
As you've seen, you can't do this in MvxImageView - the Action wasn't really a suitable candidate to be a bindable property so it wasn't exposed as a property.
However, you can:
do this by using MvxImageViewLoader directly in your View - there are several samples of using this in views in the N+1 samples - https://github.com/slodge/NPlus1DaysOfMvvmCross/search?q=MvxImageViewLoader
do this by creating your own MyImageView class - it's not a big class to write - https://github.com/slodge/MvvmCross/blob/v3/Cirrious/Cirrious.MvvmCross.Binding.Touch/Views/MvxImageView.cs
As an alternative to using the Action callback, you can also inherit from MvxBaseImageViewLoader<T> and provide an override for the ImageHelperOnImageChanged method - see https://github.com/slodge/MvvmCross/blob/v3/Cirrious/Cirrious.MvvmCross.Binding/Views/MvxBaseImageViewLoader.cs#L49
2) Don't load old image
3) ImageCache size in (mega)bytes
The interface-driven and plugin structure of MvvmCross is defined to allow you to implement alternatives.
In the case of loading images from HTTP, there are many alternatives - you don't have to use the MvvmCross download cache for image loading.
The only docs available for the download cache plugin currently is https://github.com/slodge/MvvmCross/wiki/MvvmCross-plugins#downloadcache
For Android, some suggestions for alternative implementations are listed in: https://github.com/slodge/MvvmCross/issues/416
For iOS, it may be useful to read https://developer.apple.com/library/ios/documentation/FileManagement/Conceptual/FileSystemProgrammingGuide/FileSystemOverview/FileSystemOverview.html including the section on <Application_Home>/Library/Caches
I know Stuart already provided an excellent answer. But what I did, when I needed the exact same feature, was to subclass MvxImageView and override the UIImageView.Image property. When the image is set I fire an event which is caught by the viewcontroller.
I am currently working on a rather large, UI-heavy Flash game. Our team has been working on this for about 9 months now. None of us had any previous experience with Flash, so we have continually improved our workflows during this time. However, we still feel that what we are doing now is not optimal, especially the interface between coders and artists, so I am wondering how other teams are working.
The ideal workflow should satisfy the following requirements:
1. Reused UI elements are defined only once
This means, if we want to change a font or a button style, we do not want to go trough all of our menus and change them manually. We want them defined in one central place and only referenced from there. Bonus points if the assets are shared not only at edit time but also at runtime, i.e. they are downloaded only once.
2. Everything is loaded on demand
Currently, we have two different loading steps: First, we load the menu libraries. When this is done, the players can already interact with all the menus. Then, we start loading the actual gameplay data. The initial loading time is still too long, though, and causes us to lose many potential players. What we really want to do is to load only the bare minimum required for the main menu and then load everything else only when the player tries to actually open the respective menus. Zuma Blitz does this really well.
3. Artists can perform minor changes without help from coders
If a menu should be re-designed without changing the actual functionality, it should be possible for artists to do that on their own in Flash CS6. This requires a clear interface between art and code, and it should also be possible for artists to test and debug their changes before sending them to the coders.
-
Our current workflow looks like this: The artist build the screens as MovieClips in Flash CS6 and export them as SWFs. On the code side, load the MovieClips from the screen SWFs and use them as the View classes in our PureMVC-based system. The Mediators access the elements like text fields in the Views by their instance names.
This is error-prone because there is no central place to define the interface (i.e. the instance names). A lot of communication overhead between coder and artist is required. Also, it creates a dependency between the code and the internal structure of the movieclip. The artists cannot attach the text field to a different sub-movieclip when they want to apply some effects to it.
We are experimenting with an event-based interface that requires the artist to add a few lines of code to the movieclip. This is less error-prone and interdependent than before, but it still does not completely satisfy (3) unless we write additional tools for testing and debugging. This must be a common problem and I can hardly imagine that there is no easier way.
For (2), we also started building a home-brewed solution but again, this is such a common task, there has to be something out there already that we can use.
So, how do experienced Flash developers manage such large projects?
I have some thoughts, but they are based on my coding style, which is unique to me.
1. Reused UI elements are defined only once
Depending on what you're reusing, this can be as simple as defining a library symbol and just using it. Fonts can be replaced without digging with a search and replace, and you can also simply swap out the font in the Font Embedding menu.
For sharing across xfl's, you can use a Flash Pro Project. Keep in mind that there's a certain amount of time overhead involved in this (files will want to update when you open them or save them, Flash crashes more with Projects, and it can be a bad idea to try to work on two files from the same project at once).
Some people use swcs, but doing so requires that you instantiate things in it in code, which might not work for your workflow. I use them for audio only, and I find that the objects in it have to be compiled on or before the frame you designate as the AS compile frame, or the sound can't be properly instantiated. I suspect this is going to be the case for anything instantiated from a swc.
2. Everything is loaded on demand
One of the best-kept secrets of Flash is that this is trivially easy to accomplish using the timeline and educated use of the complier. Here's how it works:
If your ActionScript compile frame is a frame greater than 1, then here is how things will compile:
Before Frame 1:
Any visual assets and embedded sounds used on frame 1
Your main Document Class, plus any Classes directly referenced from the Document Class (which is a good reason to code to Interfaces)
Before your AS compile frame (N):
Your AS Classes (the code, not necessarily the visual/audio assets)
The visual and audio assets for any library symbols set to Export for AS in frame N (even if they are not used in the swf)
Before the frame where the asset is first used on the timeline:
The visual/audio assets in all library symbols where Export for AS in frame N is not checked.
If you put a spinner loading graphic on frame 1 and you have selected frame 10 as your export frame, then if you just let the movie play until it hits frame 10, here is how it will load:
If you have any heavy assets in your spinner or directly referenced in your main Document Class, users will see a blank screen while this stuff downloads
The spinner will become visible and spin
Once your AS Classes have loaded, along with the Library Symbols set to Export in Frame 10 and the assets that are actually on Frame 10, you'll see those assets, and everything you need to use them will be ready.
The rest of the swf will continue to load in the background, updating framesLoaded.
I actually use a combination of a setter for the object that's on frame 10, plus an ENTER_FRAME handler to check to see if we're on frame 10 yet. There are certain things that I have to do that are easier based on one and others that work better to do the other way.
3. Artists can perform minor changes without help from coders
If the code is all in the Base Class for the library symbol, artists don't need to understand it, as long as they don't remove or change a needed instance name. I try to minimize dependence on instance names by watching ADDED_TO_STAGE (capture phase) and watching for Display Objects by type. Once I have a reference to an object of the appropriate type, it's easy enough to watch for REMOVED_FROM_STAGE on that object to dereference it. This is similar to how frameworks such as RobotLegs and Swiz work.
Further, I use a concept I call "Semantic Flash," where I do a lot based on labels. I have a base Class, FrameLabelCip, which has built-in nextLabel() and previousLabel() functionality, as well as dispatching FRAME_LABEL_CONSTRUCTED events. It's really easy to go from storyboard event name to Flash label name and just build out the graphics bang-bang-bang.
I make heavy use of Graphic Symbols for synchronizing graphics across multiple labels (for example, bulleted lists), instead of relying on code. This animator's trick makes these things both robust and approachable to less-technical teammates.
Please bear in mind that I have never used Web Workers before and I'm having some trouble wrapping my head around them.
Here's an explanation of a simplified version of what I'm doing.
My page has links to various files - some are text, some are images, etc. Each file has an image showing a generic file icon.
I want the script to replace each generic icon with a preview of the file's contents.
The script will request the file from the server (thereby adding it to the cache, like a preloader), then create a canvas and draw the preview onto it (a thumbnail for images, an excerpt of text for text files, a more specific icon for media files...) and finally replace the generic icon's source with the canvas using a data URL.
I can do this quite easily. However, I would prefer to have it in the background so that it doesn't interfere with the UI while it's working.
Before I dive right in to this, I need to know: can Workers work with a canvas, and if so how would I create one? I don't think document.createElement('canvas') would work because Workers can't access the DOM, or am I misunderstanding when all the references I've found say they "can't access the DOM"?
You cannot access the DOM from web workers. You cannot load images. You cannot create canvas elements and draw to them from web workers. For now, web workers are pretty much limited to doing ajax calls and doing compute intensive things. See this related question/answer on web workers and canvas objects: Web Workers and Canvas and this article about using webworkers to speed up image manipulation: http://blogs.msdn.com/b/eternalcoding/archive/2012/09/20/using-web-workers-to-improve-performance-of-image-manipulation.aspx
Your simplest bet is to chunk your work into small chunks (without web workers) and do a chunk at a time, do a setTimeout(), then process the next chunk of work. This will allow the UI to be responsive while still getting your work done. If there is any CPU consuming computation to be done (like doing image analysis), this can be farmed out to a web worker and the result can be sent via message back to the main thread to be put into the DOM, but if not, then just do your work in smaller chunks to keep the UI alive.
Parts of the tasks like loading images, fetching data from servers, etc... can also be done asynchronously so it won't interfere with the responsiveness of the UI anyway if done properly.
Here's the general idea of chunking:
function doMyWork() {
// state variables
// initialize state
var x, y, z;
function doChunk() {
// do a chunk of work
// updating state variables to represent how much you've done or what remains
if (more work to do) {
// schedule the next chunk
setTimeout(doChunk, 1);
}
}
// start the whole process
doChunk();
}
Another (frustrating) limitation of Web Workers is that it can't access geolocation on Chrome.
Just my two cents.
So as others have stated, you cannot access the DOM, or do any manipulations on the DOM from a web worker. However, you can outsource some of the more complete calculations on the web worker. Then once you get your return message from the web worker inside of your main JS thread, you can extract the values you need and use them on the DOM there.
This may be unrelated to your question, but you mentioned canvas so i'll share this with you.
if you need to improve the performance of drawling to canvas, I highly recommend having two canvas objects. One that's rendered to the UI, the other hidden. That way you can build everything on the hidden canvas, then draw the hidden canvas on the displayed one. It may not sound like it will do much if anything, but it will increase performance significantly.
See this link for more details about improving canvas performance.
Okay, so I've been busting my hump the last week or so on this project for my OOP/AS3 course and this past Sunday I realized that my approach wasn't going to work so I scrapped the better part of it and started over.
Our assignment is to create an XML based flash menu that demonstrates an understanding of the OOP patterns we've just learned. It was kind of a 'test the waters' project where he gave us a ton of tutorials and information and told us to make our best attempt at making sense of it so I'm certain there are more efficient ways to do what I'm doing, but that's a moot point.
We need to employ at least two patterns in our menu, though at the moment I'm just focusing on MVC so that I can get the mainUI working before I finalize the second part of the UI. It essentially flows like so:
MainUI has 4 menus that slide out.
Each slider has 3 thumbnails on it.
Clicking on any of the thumbnails will move to the next part of the UI. This functionality is currently disabled.
The program runs with 0 compiler errors, but the images are not being placed on the stage correctly and I can't figure out why. All the image paths are being pulled and stored from the XML properly. The main background image is pulled once and is supposed to be only placed once (if statement that uses a count to determine whether to run the placement function or not), but it is being placed 4 times with the sliding menu image. The sliders are being placed in the correct positions (switch statement that iterates through the mainUI function in the View class and creates a separate loader for each one), but the thumbnails are not all showing up. So here is what I'm seeking help with:
The mainPanel image should only be placed once, rather than 4 times with each slider.
The sliders, while being placed correctly, must be tweened in different directions through the as (using TweenMax), but each instance is unidentifiable from the other so right now they all have an eventListener that calls the same tween method. How can I distinguish them in a way that lets me apply a different tween to each (This will likely be a concern with the thumbnail functionality later as I will need to load different XML data based on which thumb is clicked).
I have added what I hope are very informative comments to each script so hopefully people can help. Also included are images of what I want the mainUI to eventually look like and how it's coming out currently.
pastebin with all 3 classes and XML (2 hyperlink limit) - http://pastebin.com/u/crookedparadigm
top image is how the stage is outputting, bottom image is what I'd like to to be - http://imgur.com/a/bOmsS
Last quick note, stage is currently set to 600x480 with a black background. Ideally, to reinforce OOP principles, our professor wants us to avoid using the timeline or library if possible.
Any advice at all will be greatly appreciated! Thanks!
Install FlexPMD This is a very good add on( sometimes hard to install ) It basically is used to show areas of your code that you are not following standards. For example your classes lack the use of "this". And you should avoid passing parameters in constructors. It would be good practice to develop standardized writing skills while you are still new.
Looking at your code I see you are calling buildUI from within a loop.
buildUI is assigning a MainView object to mainUI.
So each time you go through a loop iteration you are reassigning mainUI.
In the end mainUI will only be the last iteration of that loop.
Not sure this is your issue but is an issue.
[EDIT]
Excellent Singleton guide for Flex SDK
Part 1
Part 2
Some Good writing on pure AS3 Singletons.
I would prolly start from scratch as your XML data is miss formatted.
your XML should resemble something like this.
<MainProject>
<MainUI>
<Thumbnail Name="Spring">
<Destination Name="Spring" Price="99" ratingPath="images/SP1/SP1rating.png" />
</Thumbnail>
<Thumbnail Name="Winter">
<Destination Name="Winter" Price="152" ratingPath="images/SP1/SP2rating.png" />
</Thumbnail>
</MainUI>
</MainProject>
Then you should have the following structure on your stage. These movieclips should be empty and already placed inside on your stage with instance name.
Stage
MenuUI MovieClip
ThumbNail1 MovieClip <- feed it thumbnail from the XML
ThumbNail2 MovieClip <- feed it thumbnail from the XML
ThumbNail3 MovieClip <- feed it thumbnail from the XML
ThumbNail4 MovieClip <- feed it thumbnail from the XML
This might be a bit too vague, just tell me if you need more details.
Hope this helps !
There is powerful HTMLLoader component for AIR wrapped in mx:HTML for Flex.
I want to supply images manually (ideally from bytes) for mx:HTML, which will display my generated content. The point is to pack all resources in the application without external files. I can pack different html pages in the app and switch them when mx:HTML dispatches Event.LOCATION_CHANGE. Now I want the same for images. What do you suggest?
Solved! Went through several stages:
Make HTMLLoader's background transparent with paintsDefaultBackground="false" and backgroundAlpha="0". Get notified of pictures location with javascript and draw them on HTMLLoader's graphics. This is complex and has problems with resizing (pictures get shifted), but was almost done...
Next idea - use <canvas> to draw images on them, sending data to javascript.
While reading canvas tutorials, stumbled upon data URI scheme, which does exactly what I needed in simplest possible way. Images are embedded in html page in base64 encoding.