How would I go about making a flash image uploader/editor in ActionScipt 2, not 3? I want the user to be able to upload a PNG or JPG image and then display it on the screen. They can then crop it, and if possible, add text and use other normal editing tools. I have an idea on how to do this, but I'm not quite sure on some parts. Any ideas?
well, if I was you I would separate this task into two,
so one will be the uploading on images, and then the next is to create the cropping and editing..
Unless you want to make the whole project in actionscript, the fundamentals are still the same. If so then just find some file uploading thing in actionscript.
Uploading
So look up on how to make a simple uploading project, So you will come across "AJAX", I have done a few it's very easy, but its also good if you use "jquery" if you want to use ajax (so you don't have to reload the page every time the user has to upload a image) there are millions of tutorials and examples on the internet, after you get this working without any problems then you have to work out the fundamentals of the project, for example how am I going to crop the image, use javascript (Im pretty sure you can't but worth a look around, well you will be able to do it action script I think.)
so here is some examples of file uploading..
Without reloading the page "AJAX"
I use this one, when I was learning it was really helpful.
nettuts+
csstrinks
zurb
with reloading the page
SO...purejs
Purejs
The next Task is making the whole editing and cropping bit and intergrate it with your test upload project
Editing
Just make the ui up in flash and google the stuff you don't know how to do...
Im not very good with actionscript so I can't help you there.
But if you want a javascript way, then you will have to do the cropping server side as javascript can't (as far as I know) do cropping.
and editing Im not quite sure what you are meaning by this, but If you want simple editting like, changing brightness then use google and search it up, im sure someone has done it..
Remember when in doubt Google it out :-P
Related
Okay, I know questions like this exist in multiple forms across StackOverflow and other places on the web, but none of them is pointing me to what I actually need (maybe I missed a question that was more catered to my problem).
I need a Facebook-style image upload mechanism, using Codeigniter and javascript/jquery. Here's what it's supposed to do -
Using a single file upload control (or for that matter any clickable control), open up the "Choose Files" dialog window, and allow the user to select multiple images from it. (I know this cannot yet be done in IE, and I do not really care about the multiple file selection not working in IE).
Once the user has selected the files, the page should display a series of progress bars (like Facebook does). As each image gets uploaded, the corresponding progress bar reaches 100% (if it's simpler to implement, I am willing to forego the graphical progress bar for a text that displays the progress percentage), and the thumbnail of the image is displayed next to the completed progress bar (or text). At this point, the user should have the option to delete the uploaded image by clicking a cancel button (I think I can get this part working on my own).
The upload can be sequential (like Facebook does), or asynchronous (some upload libraries I found work this way).
What's most important (and the part that is stumping me) is the thumbnail generation. I know that there's some HTML5/CSS3 technique that allows you to display the thumbnail before the files have actually been uploaded, pulling them directly from the user's hard drive. But that won't work in IE8, and while I am not concerned about the multiple image selection not working in IE8, I need for the thumbnail generation to work cross-browser, and that includes IE8 (deciding on the browser compatibility is not something I can command, so please don't come up with a "screw IE!" solution).
I have tried using uploadify (I have no constraints against using Flash), but cannot seem to able to customize it to my needs. While uploadify does indeed display progress bars, I was unable to find a way to generate (and display) thumbnails on the fly, in accordance with the behavior I described above. I know how thumbnail generation works on PHP, just cannot figure out how to implement this together with the progress indicators. Am I looking for a suitable jQuery/ajax call?
Any help and/or pointers would be appreciated. I admit that I might have missed a StackOverflow question that would solve my issue, so please direct me to that page, or to any other page you believe will help me. Please feel free to suggest upload libraries other than uploadify, which you believe I might find useful.
Thanks in advance. And thanks for reading through all this - I tried my best to make the question properly descriptive!
I have used Jquery file upload with good results. It does need IE to be in compatibility mode, but worked well for chrome/firefox.
UPDATE. It now claims to support IE 6.0+.
I'll focus on point 4 here. It can be done, but you'll end up using iframes (yeah, I now).
They can be 1px small, but you'll need them if you want to create thumbnail previews.
A good starting point would be here: http://www.zurb.com/playground/ajax_upload
As for creating the actual preview images (smaller versions) you can use CI's image library.
Let me know how it works out.
I am trying to find some sort of plug-in for Ajax upload with a file preview. The image will be saved into a MySQL dataBase. Is that even possible? I guess all things are possible with certain requirements. Have you guys ever come across anything like that?
Let me tackle your question one bit at a time:
I am trying to find some sort of plug-in for Ajax upload...
BAM!
...with a file preview.
Yep, from the page above, although I might wonder why this is necessary and if it isn't remove it (I believe minimalist design is usually better) and go with fancy upload which seems to be more popular (sorry, I don't have much experience with ajax uploaders)
The image will be saved into a MySQL dataBase. Is that even possible?
Unfortunately, it is; you will have to use the blob data type (alternate tutorial). Personally though I would just create a directory and save the images there, because then you don't have to query MySQL every f***ing time you want to display the image (I would feel bad for hat server). In which case I suggest you use class.upload.php (I have good experiences with it), in conjunction with whatever ajax uploader you chose to use.
I guess all things are possible with certain requirements. Have you guys ever come across anything like that?
...yes
I also store the uploaded images in a directory and their names in the database.
I have developed a jQuery plugin that performs a dynamic upload of an image when it is selected, and previews it.
You can find a demo of the UploaderPreviewer plugin here:
http://dondedeportes.es/uploader-previewer
Hope it is useful for you or for anyone with the same problem.
I want to use a flash preloader for my php website. I have seen some javascript examples; but I want something attractive and cool. So I want use flash preloader which will show the percentage of the website loaded.My website is kinda heavy(with lot of images). It looks bad when the contents load. So I want to show a flash preloader while the site loads. Any help?
If you have a working javascript example it would not be that hard to change it so it calls a flash movie and tell it to update a progressbar or whatever.
Some example code can be found here:
http://www.permadi.com/tutorial/flashjscommand/
Not sure about the coolness of a flash preloader though. :)
instead of adding some annoying and useless flash-stuff you should think about optimizing your site to load faster so you don't need a loading-indicator (there are some nice artices on this on code.google.com) - i don't want to sound offensive, but if a site isn't loaded within a maximum of 2-3 seconds, a lot of users will be annoyed, leave your site and never come back, even if you have the coolest loading-bar ever.
what would be nice to know is waht makes your site so big. the biggest site i can think of is some kind of image-gallery, but even in that case, there is a much easier solution: show thumbnails of your pictures and open the "big" version only on clicking these.
I'm trying to create a mosaic type script in Javascript and PHP, which makes up a big image with many different images made from small square tiles. The idea was to "fake" the effect by having a background image and laying over the tiles on top of it, and making their opacity 50% or so. This works decently enough, but it definitely doesn't look as good as I want.
My question is, does anyone have any recommendations on alternatives to this method? I know there are definitely ways to do this in Flash, such as the Mario Lemieux mosaic:
http://www.mariomosaic.com/mosaic/
But I would like to avoid flash if possible.
edit: added live example
So I haven't touched the JS layer yet, this has all been server-side stuff. There's no pre-loader or anything really in terms of making it more usable, that will come soon. But here's what I've got so far:
http://www.mtimofiiv.net/mosaic_example/
The little tiny image tiles are created from images uploaded by a user, and they're run through a class I've built to generate them. I used GD2 to make them grayscale so they will absorb the color of the background image better, and I "pixelated" the background image in Photoshop.
If anyone wants to see any part of the code let me know and I'll add it to this post. Also when this project's done I intend to make it available on Github in its entirety for whoever wants to do the same.
Perhaps the fact that your demo HTML is 733KB might dissuade you from this particular approach. I think if you want to do something like this, you really ought to employ the canvas element, and work in some kind of "ajax" loading. That could actually be kind of interesting. However, if you are going to generate this much HTML...you might consider having a client-side script do it, if possible. Just some thoughts...
i use CodeIgniter 2.0 framework and i would like when i upload a picture to see a progress bar or even just a percentage. I dont care if its strait php or Javascript or jquery as long as it works!
i would like example code or a link to a good tutorial if possible.
Have you checked out Uploadify:
http://www.uploadify.com/
You can integrate this quite nicely with CodeIgniter to provide exactly what you're looking for as well as multiple uploads etc.
As far as I know the only way to easily show percentage of uploads is to use a flash file of some kind to deal with the upload process. This is what Uploadify does.