have you ever seen a html page that loads unstyled and a second (sometimes more) after it “loads” its gets reorgenized ?
well this problem refered as “flash of unstyled content”.

it happens when the page content starts to load before the css files are completely loaded. you won’t see much of this problem using ie or any other browser other then firefox, thats because the way firefox renders the page is different then the other browsers. it rerender the page every time a new css rule is loaded, ie for example waits for all the page content(includes images) to be loaded and then it plots the rendered result (skipping the FOUC)

ok – so what can be done to avoid this annoing problem ?

i did some research on this issue – trying to find the best solution , and there is no 1 ultimate solution, you will have to optimize your page – reducing the loading size of the page, but more important is moving the css files to the top of your html, acutally to the top of your head section, css files must be loaded first, then the js files and other content.
normally we wont use javascript functions untill the domready event is thrown – so that won’t be a problem.

now, after doing so, we should try to compress the files,
search the web for a css compressor in your preferred language,
examples :
PHP : http://davidwalsh.name/css-compression-php
ASP.NET : http://madskristensen.net/post/Combine-multiple-stylesheets-at-runtime.aspx

the last one is a great example for combining and compressing the css files,
resulting in 1 css file that holds few files in it.

the same can be done with js files (compressing and mergin)
online js compressing can be done using Yahoo’s YUI Compressor (http://developer.yahoo.com/yui/compressor/)

or you can search for a php / .net server side js compressor.

Now, after doing these steps your page would weight alot less then it did before – maybe this step already solved your problem.

i would go on and load the images in photoshop and use the save for web method without the max resultion checked.

Hope this article helped you,

Ady.

Hi friends,

in the past months i’ve been busy with work & life, so my time on this project was limited.
i managed to do some things , but i’m not so satisfied from the final result, thats why it took long time to upload the version.

new in this version -

xml file for configuration :

<?xml version=”1.0″ encoding=”utf-8″ ?>
<uploaderSettings lang=”en”>
<maxFilesForUpload>5</maxFilesForUpload>
<autoPlayMp3>1</autoPlayMp3>
<language id=”en”>
<browse>Browse</browse>
<choose>Choose file to upload :</choose>
<remove>Remove</remove>
<upload>Upload</upload>
<uploading>Uploading ..</uploading>
<uploadFailed>Upload Failed.</uploadFailed>
<encoding>Encoding ..</encoding>
<upload_deny_error_is_encoding>Wait for encoding to end.</upload_deny_error_is_encoding>
<uploadDenyErrorMaxUploadExceeded>Max number of files uploaded.</uploadDenyErrorMaxUploadExceeded>
<rotate>Rotate</rotate>
<no_files_to_upload>No files to upload..</no_files_to_upload>
</language>
<sizes>
<size default=”false” name=”640×480″ width=”640″ height=”480″></size>
<size default=”true” name=”1024×768″ width=”1024″ height=”768″></size>
</sizes>
</uploaderSettings>

it’s kinda self explainable..

i’m using zend amf for the uploading progress – so you can see each file upload progress (with this i’m not so pleased as each connection takes few milliseconds which causes upload to be delayed a bit)

you can add more languages to the config file (or submit a language in the comments and i’ll add it to the config file)

i really think of dumping the amf + progress and return to the old upload method – waiting for your comments on that.

another improvement – you can specify the height and the flash will stretch to the desired height (means more then 3 file strips)
from now you can upload mp3 files (with client side preview of the songs)

watch the demo, or download the pack here (multiple file uploader)

let me know if you want to be a part of the development for this component, i am thinking of uploading it to an svn server for ppl to contribute.

Ady.

as some of you may know one of flash player 10 updates “fixed a security hole” that allowed sending
URLLoader in the oncomplete of the last request.
now every URLLoader load function must be triggered with a mouse click – initiated by the user..

that fix broke some file uploaders (like Jonathan Marston nirvanix bytearray uploader) (and some other pieces of code) creating an exception on the second request.

now – i was looking for a solution that will allow me sending multiple – client side – reencoded images to the server, still showing some progress bar (as i can’t use the filereference.upload method).

after hours of playing with the 2176 Error, i decided to take another approch,
and welp – what do you know – it’s possible doing it with the Zend Amf framework for php, using flash’s Netconnection Object to send byteArray (’s) to the server !

I’ll upload an example soon – and i’ll connect it to the multiple file upload component i have here on the site , so it will show upload progress for each file ! (plus might add mp3 uploading as well)

Anyway – solution coming soon !

Hi,

well it took a month but i’ve added some features to the image uploader,
so now it support multiple file upload , it still doesn’t have any progress bar as adobe decided to add the security feature (bug ?!) that allows uploading or downloading data from the server only triggered by a mouse click,
ok .. so the upload button supplies the click, but then after the first chunk is uploaded it should (and i read alot about it ..) continue the next chunk as it was triggered by the same click, but no no, it throws Error #2176 !!!
i sat hours trying to break this devil but nada …
so at the end, i packed all of the files in one post being sent to the server all at once to pass the damn bug!

the jpg encoding still needs some tweeking as it causes the computer to freeze for a second,

for now i added only a rotate function to the image, but you can add as much features as you want as you can download the source files.

feel free to comment and request features.

Source : multiple files uploader with preview on client side
Demo : multiple files uploader with preview on client side

update : v2.01 is out (29/9/09)

First i’d like to thank you all for the suggestions,  requests and support  for the work,

thanks to Swen for the french translation of the uploader , you can download the fla file here with the original v2.0 files here

i came across a great fix for adobe’s JPEGEncoder class , making it async – by Derrick Grigg ,

so i’ve implemented it in my uploader, so now it’s faster and has better performance.
plus some minor bug fixes.

i’ll try to implement xml language file so it will be easier to translate it to any language,
and will implement a better  javascript support + hopefully i’ll have time to create uploading preloader …

ENJOY!

* if you find this script usefull, help spread the word , use your favorite social bookmark tool to tell the rest ! *

Hi,
well in the latest version of flash (cs4) there are some improvment to the actionscript classes, with some security changes.
i noticed that there are no sources for client side image manipulation tools that uses this great feature.

i did came accross a brilliant work of someone (i don’t remember where it was :( … ) that used the filereference.data to play mp3 files with some nice mainipulations to the audio from the user hard-drive, i’ll try to find a reference for it soon…

anywayz , i wrote a nice demo that loads an image from the user harddrive , show a preview of the image (scaled to max_height and max_width) , have a rotate option, and upload option that encodes the file to a 90% quality jpg which reduce the image size dramaticly , that way a normal image, that has been take with a camera (around 3-4 megs) will be uploaded as a 80k – 100k jpg file.
that will save alot of time , and eliminates the need for a server side image resizing (wasted server time & disk space)
more, you can use the script to add color transform manipulation to the image (b/w etc…),
cropping features, (maybe content awareness – image retargeting ).

attached is the fla (cs4), actionscript classes, php source files.

still things that i intend doing , upload precentage bar, and status msgs (jpg encoding / image scaling / uploading …)

if you want to use the code, and improve it be my guest. but let me know and it will be nice if you leave some credit.

the demo : Client side image resize demo

package : Client side image resize Source

Important !!

version 2 is up, check out : Multiple files uploader with client side resize

Hi,
well i did this thing for me & friends few months ago, and decided today to open it to the public.
i’ve lunched the vbook (Vbook) as an expirement.

this app allows to view ‘hidden’ user albums and pictures.
now hidden are simply albums with there privacy setting set to public, connected to a user which disable his profile being watched by others. means, you can see the user’s albums and pictures even if his profile is private.

i’d say it’s a nice feature provided by them users :)

well , have a ride and tell me what you think..

Ady.

my little extension to connect firefox error console to flash / silverlight application .

download add on:

Install Extension!

after installing this add on, you can simply call a trace function from flash, and send the message to the firefox error console.
it come up really handy in debugging live sites, when you must not use an output box on the screen.

flash as3 code :

import flash.external.ExternalInterface;
function tracer(msg:String){
ExternalInterface.call('fsTrace',msg);
}

that’s it, you will see your message in the error console.

after installing the add on you can use this simple flash demo to see how it works:

A SQL query goes into a bar, walks up to two tables and says, “Can I join you?

in order to read a div from your html document,
first you to add the ‘allowScriptAccess’ in the flash injection (like swfobject) to sameDomain
some thing like : so.addParam(’allowScriptAccess’,’sameDomain’);

(will try to write more about using swfobject soon..)

then in the flash you include the ExternalInterface class:
include flash.external.ExternalInterface;

then you can use something like :
var myDivContent = ExternalInterface.call(’function(){ return document.GetElementById(’flashDiv’);}’);

and in the html file :

you can add style=’display:none’ in you want this div to be hidden.

it’s good for the page seo as the text will be html text, but you show it thru the flash …

this is a simple scroller class i wrote that helps me in attaching a scroller to every movie clip i want very easily.

the usage is very simple :

var myScroller = new Scroller(source Movie Clip ,  Width ,  Height , Scroller Face MovieClip , Align );

the scroller uses the tweenlite tweening class that can be found at : http://www.TweenLite.com

at the moment it only support left side positioning and no horizontal scrolling, but it’s really easy to fix the code so it can fit anyones needs. i might do it one day…

anyways you can download the scrollbar component here