I'm working with a project where we are running a projector from/on a CD, and this can't be changed, to run an e-learning program of sorts. Everything is included on the CD and it doesn't need anything else to run, ie all imgs and xml and whatnot is on the CD.
The problem is that on some computers, assumedly less powerful ones, the entire process clogs up and instead of showing the images just white blank areas appear. The imgs used have been downgraded to a lower resolution, from 1333x1000 to 800x600, and this has solved the problem from what we've found so far.
My question is, does anyone know of any other way to solve this without cutting down the img quality?
As it is right now all the pics (about 180 i think) are being loaded right when the process starts and one idea i have is that you load the pics gradually as needed, 2-3 in advance back and forward or maybe an entire chapter even (7 chapters with imgs are used), to always ensure smooth tweens without having to wait for loading.
But as I've read that there seems to be some memory issue when using a flash projector on a CD/DVD, I'd also like to get more details on what the actual problem is and if possible to find more solutions to it.
I found some links that were supposed to target Adobes own views on the problem, but these links were obsolete. (links found here http://www.flashjester.com/?section=faq&cPath=14_23#394).
Any ideas, help, links, tutorials and what not are welcome.
Yeah, you need to load your assets on-demand and be careful about references so unused things are really garbage collected when they aren't needed anymore.
If you are really running from a projector, then load times aren't totally a concern. Assets form the local filesystem are always available the next frame; they aren't streamed from the disk like from the network. However, bigs file or ones with lots of exports may end up with a longer frame time, or a noticeable delay.
You also need profile things to see if your changes are actually doing anything. Poke through the flash.system.System class to see how you can get info, or take a look at SWFProfiler.
Related
The thumbnails on my photos page take a long time to load, then if you scroll down the page and back up, they have somehow vanished and need to reload. I'm using an old version of chrome on Windows XP, so I'm sure that's half my problem, BUT, it still does this on my cell (galaxy S5). I'm a novice coder so please go easy on me lol. Here is the link to my website and the photos page:
http://www.mikemicalizzicontracting.com/photos.html
I can't really help you about your precise questions, as we don't have your code, but I am in a good mood so I'll just give you some tips to make your website quicker.
Some tips for optimize your images :
1) Resize your images
For now your images are displayed in 207 * 154, which is small, but you download them in their original size. You should resize them so the size of the image (in bits) would be much lower.
You can do that with a lot of online tools, or write a simple script for that in bash for instance. I think you will find a pre-made solution for the script very easily, or just have to download imagick (I am not sure of the name). This solution by scrip also depends on your distribution (wether you are usinc OSX, Windows, Linux..)
2) Cache your images first
It is always painful for the user to wait for images to display. So what you need to do is use browser cache (if you are novice you wil have some trouble but it will be worth it) to store the images data and then display them from this cache.
So the strategy is :
If there is the image in cache, just display it from there
If there isn't, download it from your server
once it is loaded, put it in cache; then display it from there.
3) (More advanced) Preload the images
If your home page is very easy to display (not a lot if images, not that much script to run etc), you can start download some images in the client and just store them in the cache.
This task should always be a second-hand task, it means it should not slow your user navigation. So depending on what the user is doing, you may will have to pause the request and start it again.
If the user go on the photo page when an image is currently downloading for cache, you don't need to start it all over again, just continue.
This last tip can be long to develop, but this is a good thing to do when you want to display very good quality images or just plenty of them.
I'm developing a little desktop app using Adobe Air and their HTML API.
The app has two window, one displaying a slideshow of images present in a folder on the local machine and the other window allows you to browse those images (one big image and prev/next buttons).
At first for a quick test I just loaded all images from the folder into the DOM of each window and it works just fine until I reach too many images (150+) as they are high resolution JPEGs from a DSLR. Obviously each image is taking a lot of memory and will probably kill the app from overleaking. So I started with optimising the browsing window, instead of loading them all I use just a single tag and replace the .src value with javascript. But this technique is just delaying issues because as I carry on browsing all images the memory usage is growing and growing. Replacing the src of the image does not release the memory used by the previous image. Same thing if I try to delete the image from the DOM and recreate it.
An idea I have but I don't like it too much is to display the image inside a frame loading another HTML file passing it the image src as parameter. Then reload the whole frame, hopefully it can reset the memory usage. Haven't tried yet.
Anyone has an idea of how to handle this?
This is a nice tool for optimizing your Adobe Air application. Adobe Air Tuner:
I'm not familiar with your project; or how it is being implemented. The Adobe AIR has several methods that are accessible to free memory. Which will allow you correctly remove or dispose of your objects. Those cleanups can be found here.
One thing that some people do when creating media players; especially ones with large media. Example:
Lets say your media player contains six pages of content; totaling 1GB of total data. That is a very, very large memory allocation for your project. So rather then call the entire 1GB at once; the first page loads and the second page loads.
The other four pages remain 'uncalled' not dynamically loading. Then the user switches to page two; page three the content begins preloading. The user switches to page three; page four will start to load. But it also disposes of the array or objects created in page one. This way it doesn't affect the application.
Obviously this way is tedious, as your controlling all aspects of the loading. Also it poses issues if your user starts moving to quickly through the pages.
So another possible solution; would be to create thumbnails so the size is drastically smaller. Then load full size images as stand alone streams that can be disposed of without any issues once they leave that area. That way the gallery is stand alone from that.
If you provide some code or some additional details I can possibly assist you above and beyond just interface / memory suggestions of implementation.
I've been working on a website, and we've managed to reduce the total content for a page load from 13.7MiB's to 2.4, but the page still takes forever to load.
It's a joomla site (ick), and it has a lot of redundant DOM elements (2000+ for the home page), and make 60+ HttpRequest's per page load, counting all the css, js, and image requests. Unlike drupal, joomla won't merge them all on the fly, and they have to be kept separate or else the joomla components will go nuts.
What can I do to improve load time?
Things I've done:
Added colors to dom elements that have large images as their background so the color is loaded, then the image
Reduced excessively large images to much smaller file sizes
Reduced DOM elements to ~2000, from ~5000
Loading CSS at the start of the page, and javascript at the end
Not totally possible, joomla injects it's own javascript and css and it does it at the header, always.
Minified most javascript
Setup caching and gziping on server
Uncached size 2.4MB, cached is ~300KB, but even with so many dom elements, the page takes a good bit of time to render.
What more can I do to improve the load time?
Check out this article.
http://www.smashingmagazine.com/2010/01/06/page-performance-what-to-know-and-what-you-can-do/
If the link gets removed or lost the tools mentioned are:
YSlow (by Yahoo)
Google's Page speed
AOLs web page test
Smush.it (Image compression tool)
It sounds like you've done a great job of working around the real problem: those giant graphics. You can probably squeeze some more efficiency out of caching, minifying, etc., but there has to be a way to reduce the size of the images. I worked with a team of some of the pickiest designers on Earth and they never required uncompressed JPEGs. Do you mean images cut out of Photoshop and saved on full quality (10)? If so, the real solution (and I appreciate that you may not be able to accomplish this) is to have a hard conversation where you explain to the design company, "You are not your users." If the purpose of the site is to only impress other visual designers with the fidelity of your imagery, maybe it's ok. If the purpose of the site is to be a portfolio that gains your company work, they need to re-asses who their audience is and what the audience wants. Which, I'm guessing, is not 2 minute load times.
Have you enabled HTTP Compression (gzip) on your web servers? That will reduce the transfer size of all text-based files by 60-90%. And your page will load 6-10x faster.
Search StackOverflow or Google for how to enable it. (It varies per server software: Apache, IIS, etc).
Are all the DOM elements necessary? If they are, is it possible to hide them as the page loads? Essentially, you would have your important need-to-be-there dom elements render with the page, and then when the document is loaded, you could unhide the rest of the elements as necessary
$('.hidden').removeClass('hidden')
Evidently, there are plugins for compressing and combining JS/CSS files:
http://extensions.joomla.org/extensions/site-management/site-performance
http://extensions.joomla.org/extensions/site-management/site-performance/7350
I would say you can't do anything. You're close to the absolute limit.
Once you get to a critical point, you'll have to compare the amount of effort you'd need to input into further compressing the site against the effort of throwing the most bandwidth expensive components out the window. For example, you might spend 20 hours further compressing your site by 1%. You might also spend 40 hours on throwing the Joomla theme away and starting again saving 50%. (though probably not).
I hope you find an easy answer. I feel your pain as I am struggling to finish a Drupal project than has been massacred by a designer who hasn't implemented his own code in years and has become institutionalized in a cubicle somewhere near a tuna salad sandwich.
I am making a flash game. And I want to know how big is too big for a swf file. Also, Ive been looking at my swf file and right now its at 38.2k. Is the swf file that gets created during debugging, is this the correct size for the file that will eventually be placed on the web.
thanks
Kilobytes is small stuff.
Anything less than a couple of megabytes is fine - once you get above that you might start worrying about loading times and keeping users interested during the preloader, but most portals accept files up to 10MB or so.
Yes, the file is the same. A game of 38.2 kb is pretty small, if you go on Flash game sites they regularly run in the multiple of megabytes.
The SWF is slightly smaller in release mode. The size difference is essentially nothing.
As for a guideline size, this depends on who you are expecting to play your game.
if you want your game to reach a very wide audience keep it as small as you possibly can.
a game without any heavy animation , embedded assets like png files or sound will usually be small.
a good discussion regarding Optimal swf size for flash games here at
http://board.flashkit.com/board/showthread.php?t=788271
The difference between debug and release builds is, according to my experience, some 30-40% in file size (debug version being bigger, of course), which is not insignificant.
Anyways, I think you're safe to assume that anything below 100kb is small enough to be considered an instant download, with no need to use preloaders. However, adding graphical and sound assets to the game will quickly push it up in size, at which point the preloader will probably be a good idea.
Is there any significant performance/load time impact if single web page will load, say, 10 identical flash objects? 20? 30?.. any evidential data on sustainability of such kind of setup?
This would be the same flash app, each instance serving its own stream.
There's definitely going to be some overhead in size as there is a certain amount of code that is contained in every swf regardless of it's developer created content.
I'm almost certain there would be speed issues as well, which would see frame rates drop right down the more swfs you add to the page.
To be honest the concept smells a little fishy and i would think there must be a better solution to your problem.
EDIT
Also there is a restriction on having two steams coming over http per domain. Sure you could get around this but it will definitely be an issue.
I found this post which might help. The trick is to use SWFObject to embed your swf files.
I ran into a strange problem today. On the music charts page on Muziboo, I was displaying a list of songs and a playlist on the right. Each song has a small button player done in OpenLaszlo. In firefox everything was fine and in IE (not unusually), the page would freeze for sometime. This would happen once and repeat only if I delete cache and try again. I googled a bit and learnt that it's a good idea to embed give each swf a unique id otherwise the browser misbehaves. I then went ahead and used swfobject to embed the swf files and everything started working great!
Yes, it'll likely nuke the browser if you go too far down that road.
If you want to deal in multiple streams, perhaps combining all your would-be applets into one giant one might work better. It'll certainly offset the serious overhead you'd have with 10-40 of the little blighters.
If this is a music player, you want to have a serious look at doing some JavaScript remoting. It's fairly trivial to control a flash app via JS so you could have standard HTML/CSS controls without having to load up a billion flash instances.
Design-wise this just sounds like a bad idea. You'd be running multiple instances of the Flash player inside a browser, each of which has an individual cost, and the host (in this case the browser) will run all of them on the same thread (with the exception of certain elective asynchronous processes), so you're almost surely going to run into problems of various kinds -- jittery playback, UI blocking, processor burden, memory bloat, consequent instability of the host, etc.
Unless the SWFs are very tiny, and doing very little work, it seems like a design that's just asking for trouble. Indeed you could test such a thing fairly easily; have you run any tests yet? Just curious.
Also curious as to the requirements; we might be able to offer more constructive alternatives if we knew a little more about what you were aiming for. Have you considered simply loading all the SWFs into a single container SWF requiring only a single browser-hosted instance of the Flash player?