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.
Related
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
Im currently building a practice responsive website, what I am doing is taking an exising website, building it up using twitter bootsrap js and css, meaning it will be fully responsive for mobile.
The issue is that there are some large carousels and images on the site. Ideally I would like to just completely remove certain elements, like a carousel for instance, and instead have the options within the carousel as a standard list menu.
It seems the main option is display:none based on media queries, but I am starting to foresee that I will run into big problems for loading time if the entire desktop site is still going to be loaded on the mobile, only elements hidden.
Are there ways to completely exclude html based on browser size? If anyone has any good links or articles that would be great. Or even just opinions, on whether there is actually need to exclude html or not.
Thank you
First off it is really good to see that although you're talking about display:none; you actually still want to display the content without the bells and whistles of the image. Well done you.
The next thing I would look at is if you don't want to load images for a mobile then why are you adding it for the larger sites. If the image isn't providing a function, assisting in explaining the content better, then why not just drop it for the desktop size as well?
If in fact it does help tell a story then you can include the images and some of the popular image services like adaptive images, hiSRC, or PictureFill which will serve the mobile version of the image first and replace with a larger image at higher viewports (but remember, there's no bandwidth test).
Finally, if you do want to serve some different content, then take the advice of fire around including more content with ajax. The South Street toolbox from Filament group can help you out, pay particular attention to the AjaxInclude pattern (it also has a link to the picturefill).
You could consider storing heavy data JSON-encoded, and then creating elements and loading them on demand like so
var heavyImage = new Image();
heavyImage.src=imageList[id];
Then you can append image element to a desired block. From my experience with mobiles this is more robust than requesting <img> via AJAX, since AJAX could be pretty slow sometimes.
You may also 'prefetch' images with this method (like 2-3 adjacent to visible at the moment), thus improving UX.
You could pull in the heavy elements via AJAX so they wouldn't sit on the page initially, making it load faster. You could decide to do the AJAX call only if the screen size is larger than X.
If you want you can use visibility:hidden, or if you use jQuery you can use
$(element).remove() //to remove completely
$(element).hide() //to hide
$(element).fadeOut(1) //to fadeout
I am sure this question has been asked but I can't find anything that suits.
I need continuous audio playback throughout page loads. I do not want to use flash or frames and I know this is possible due to the arise of the next soundcloud. Flash is a pain and frames would destroy my navigation buttons etc. You can't even take a look at soundclouds markup so I really have no idea how they've done it but it's impressive.
I would like to know how soundcloud has done this or a way to do this? To be honest I am intrigued by the new soundcloud and would love to take a look at there code but I'm pretty sure that's not going to happen
Soundcloud is probably using the new HTML5 history API for their magic. But implementing this is not as easy as putting your site into an iframe.
Here is a really great introduction to the API: http://diveintohtml5.info/history.html
I am also currently looking at this for a musician site that needs continuous audio playback whilst traversing through the site. If you are developing with Wordpress, I notice there are a few Wordpress themes that have been recently released to support this.
I have a feeling however that the continuous audio functions in these are supplied via Soundcloud - not 100% sure yet until I have a play with them in the coming weeks.
I want to create a website displaying grid-sorted videos (interviews - movies showed in rows and columns). I want it to be 'a page with talking heads'. When users clicks on a video it starts playing.
I consider two ways:
The whole website made in flash - dynamically assigned number of videos per row/column and page, depending on the user's screen resolution.
Website made in php/html with help of JS and CSS - videos are displayed by YouTube player or other player e.g. JW Player - videos position depends on screen resolution.
What do you think - which way is better (consider performance too, please)?
Have you got any other ideas?
Thank you in advance.
My opinion is that you have to use option 2. Creating HTML and CSS is much easier than Actionscript and as PimPee said Flash components are slower. I don't know any big commercial or entertainment site made entirely in Flash so my opinion is that you have to use PHP/HTML.
Also many Flash features could be replicated by using JS/Jquery which works faster and is easier to maintain. There is no point of creating sliders,dropdowns or other web behaviour functionalities in Flash when you can use Jquery. You should use Flash if you desire very sophisticated animation efects.
I'd say number 2.
Since Flash is kind of slow and doesn't work on an ipad / iphone etc.
But that's just my opinion :)
I'm creating a website from scratch and I was really into this in the late 90's but the web has changed alot since then! And I'm more of a designer so when I started putting this site together, I basically did a system of php includes to make the site more "dynamic"
When you first visit the site, you'll be presented to a logon screen, if you're not already logged on (cookies). If you're not logged on, a page called access.php is introdused.
I thought I'd preload the most heavy images at this point. So that when the user is done logging on, the images are already cached. And this is working as I want. But I still notice that the biggest image still isn't rendered immediatly anyway. So it's seems kinda pointless.
All of this has made me rethink how the site is structured and how scripts and css files are loaded. Using FireBug and YSlow with Firefox I see a few pointers like expires headers and reducing the size of each script. But is this really the culprit?
For example, would this be really really stupid in the main index.php? The entire site is basically structured like this
<?php
require("dbconnect.php");
?>
<?php
include ("head.php");
?>
And below this is basically just the body and the content of the site.
Head.php however consists of the doctype, head portions, linking of two css style sheets, jQuery library, jQuery validation engine, Cufon and Cufon font file, and then the small Cufon.Replace snippet.
The rest of the body comes with the index.php file, but at the bottom of this again is an include of a file called "footer.php" which basically consists of loading of a couple of jsLoader scripts and a slidepanel and then a js function.
All of this makes the end page source look like a typical complete webpage, but I'm wondering if any of you can see immediatly that "this is really really stupid" and "don't do that, do this instead" etc. :) Are includes a bad way to go?
This site is also pretty image intensive and I can probably do a little more optimization.
But I don't think that's its the primary culprit. YSlow gives me a report of what takes up the most space:
doc(1) - 5.8K
js(5) - 198.7K
css(2) - 5.6K
cssimage(8) - 634.7K
image(6) - 110.8K
I know it looks like it's cssimage(8) that weighs the most, but I've already preloaded these images from before and it doesn't really affect the rendering.
To speed a little, you could assemble all your images on the same image sprite, so that you have only 1 request to download all the images. But that requires you to fine tune your css to let display just the small subset of your image.
To have a better explanation, check out : http://css-tricks.com/css-sprites/
Another answer that could seem a little stupid but I like to think of this when I make a website : Just Keep It Simple. I mean do all your JS add real value, do all this images are fine, could you display less, make a lighter design ? I'm not criticizing your work at all, just suggest you...
I used the following approach on an extranet project:
Using jQuery and a array of file names, I ajax in all the images, .js and .css files so that they are preloaded in the cache. As I iterate through the array, I update a progress bar on the screen that indicates that the site is loading - much like a flash loader.
It worked well.
What I will do is show by default the loading page with pure CSS and HTML then wait for the jQuery to load and preload the images with ImageLoader. Once you are done redirect to the normal website since the images will be already in the cache they won't be loaded again.
Another optimization you can do is minify all JS files and combine all except the jquery.js. Put the jquery.js first into your HTML so it loads first. Also put your SCRIPT tags at the bottom of the HTML.
It sounds like you have pretty much nailed preloading, if you have loaded it once, and the expiry header is set correctly, you have preloaded it, no matter what kind of content it is.
File combination can be key to a quick website, each extra file will add load time, in the worst cases of network and server lag you might add up to a second extra for each separate file. More commonly it will be around 100 - 200 milliseconds per file.
If not already minified, minify the scripts, and put them in the same file, just remember to keep the order. I have no idea why Ivo Sabev wouldn't include jQuery.
Same thing with the CSS files.
How much have you done about testing image compression? There can really be a gain from trying out different compression settings and comparing size vs. quality. For PNG images IrfanView with PNGOUT can often make files 25% smaller than other programs, on top of that, a very big gain in size reduction can be achieved by reducing the image to 8 bit colour, with a lot of graphic elements you simply can't tell the difference. Right here on Stack Overflow there is a great example of well compressed and stacked images in the editor control buttons: http://sstatic.net/so/Img/wmd-buttons.png