i am trying to design a website in flash , and would like to know how to design a loading flash movie , something like a circle rotating till the website loads . I might not be able to explain properly , but its like when you install a software , the installation bar that you get , how to get that on a website using flash or java script?
Alright so you would need a preloader ( I am assuming you are using ActionScript 3.0). This will be a small SWF file that loads your main Flash file. Smallest implementations (like the following) are around 1-2 KB
So in your Flash IDE (Flash CS3,CS4,CS5) you want to create a new fla, lets call it preloader.fla. In this file you will want to have two layers. Name the first layer as actions and the second layer as content.
In your content layer just place a dynamic text field on the stage. Name it txt/percent or whatever you feel like... I am using txt.
In your actions layer you want select the first keyframe and open the actions (code) panel
Then you want to use the loader class to load the external file (your main flash movie) as follows
var ldr:Loader = new Loader();
To handle animations and so forth you will want to listen to the ProgressEvent. You will do this by listening to loading information within the contentLoaderInfo as follows
ldr.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, update);
So as you main file's data gets loaded this event is fired . 'update' will be the function we will call to handle the progress in data.
A next event to listen to will be for when the loading of the main file has completed and we want to display it.
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, display);
Then we have a function display which handles the completion and displays the main file.
The last thing will be to load the content ,e.g. main.swf.
ldr.load(new URLRequest("main.swf"));
Here we will have text field just show a loading of the bytes from 0 - 100%;
function update(e:ProgressEvent):void {
var percent:Number = e.bytesLoaded / e.bytesTotal;
txt.text = Math.ceil(percent*100).toString();
}
Below is the function that removes the textfield (txt) and adds the main.swf to the display list.
function display(e:Event):void {
removeChildAt(0);
txt=null;
addChild(ldr);
}
Now you can change the txt in the content layer to something different if you want for example as you said a circle rotating...depends on how you want it displayed so I have placed some links below you can follow. Cheers.
Example 1 : [ Demo ] [ Source Code and Files ]
Example 2 : [ Demo ] [ Source Code and Files ]
If you just want a circle rotating until the website loads, please don't use flash.
You should just have an animated gif that waits for the page to load then disappears and shows the content when everything is loaded.
Animated gifs are fully supported accross browsers and will be about 1/100th of the size of the flash animation.
Related
I am trying to change the image by hovering the mouse over the image through the javascript functions. It was working properly fine till yet. But lately when I hover the mouse over the image, the main image disappears that means the javascript code doesn't work somehow. I have debugged it on the browser and got to know about the error which I have mentioned above. I have tried to change the path of the image inside javascript and also tried to change the path of the javascript file. But it doesn't work for me.
P.S. - I am working on an ASP.Net core mvc website So my javascript file is bound with the layout page.
Here is the code of the javascript functions which I use :
function SwitchOn() {
pic = "../images/switchon.png";
document.getElementById('headImg').src = pic;
}
function SwitchOff() {
pic = "../images/logo.png";
document.getElementById('headImg').src = pic;
}
These both functions exist in webvalidations.js file which is bound with the layout page.
This is how the image disappears and error looks like when I hover the mouse over it :
This is the way I use both the functions via event in the img tag :
<img src="~/images/logo.png" id="headImg" onmouseover="SwitchOn()" onmouseout="SwitchOff()" style="height:100px;width:100px;" />
P.S. Image only disappears when I hover over it.
So I have a web page with some photos of people. When you click on a photo of the person the JavaScript is executed and produces a popup with some more detailed information such as a description etc.
The link for each photo is as follows:
First I want to start with the basics, of just extracting the description etc. from one single person. So I want to execute the JavaScript above to write the popup window, and when I'm on the popup window I can then extract the content of the div's on the popup.
I've looked at PhantomJS and I really don't know where to start. I've used Cheerio to get some simple information from the page, and I want to move on to executing the popup window through JS and then extracting data from that.
Any help would be appreciated as I'm a bit of a newbie to screen scraping in general.
You can do this analogous to how CasperJS does it.
page.open(yourUrl, function(success){
// mainPage is loaded, so every next page could be a popup
page.onPageCreated = function onPageCreated(popupPage) {
popupPage.onLoadFinished = function onLoadFinished() {
popupPage.evaluate(function(){
// do something in popup page context like extracting data
});
};
};
// click to trigger the popup
page.evaluate(function(){
document.querySelector("a.seeMore").click();
// or something from here: http://stackoverflow.com/questions/15739263/phantomjs-click-an-element
});
});
Do not forget to overwrite/nullify page.onPageCreated before navigating away from the main page.
I'm trying to develop a page template with a slideshow, static text content, and more text content in (up to 4) tabs. Slideshow is not in the tab panel area.
When page loads, I'd like it to play a "main section" slideshow
When tab 1 is clicked, I'd like the slideshow to switch to a "tab-1" set of images
When tab 2 is clicked, "tab-2" set of images...
etc...
I have a working script that a friend wrote for me that lets me specify which images to play in the slideshow upon page load, and it determines a random play order upon page load, crossfades images, and loops.
Now I'd like the same thing to be triggered upon tab selection, with different specified images.
So I'd like:
Page loads: see "main section" slideshow of specified images, random order, crossfading, looping
Click tab X: see "tab-X" slideshow of other specified images, random/fade/loop, in place of previously running images.
Click tab X again: text panel collapses and "main section" slideshow is restarted - doesn't have to be same order or in the same place as where it left off, just that group of images.
Sorta like this (JSFiddle):
$(document).ready(function(){
$('#thumbOne').on("click", function(){
var main = document.getElementById("mainPhoto");
main.className = "mainPhoto";
});
});
$(document).ready(function(){
$('#thumbTwo').on("click", function(){
var main = document.getElementById("mainPhoto");
main.className = "mainPhoto mainPhotoTwo";
});
});
$(document).ready(function(){
$('#thumbThree').on("click", function(){
var main = document.getElementById("mainPhoto");
main.className = "mainPhoto mainPhotoThree";
});
});
but thumbnails = tabs for content panels, and large images = slideshows.
So are the tabs basically pagers? I don't want/need prev/next navigation for the slideshow - just constant flow...
I'm really new to js, and while I can see what a good amount of code is doing, I'm not able to wrap my head around what I'd need to make this work.
Asked this before, maybe not too clearly, but with more specifics: jQuery Responsive Tabs to start new slideshow/replace existing slideshow upon tab selection?
Got this JSFiddle up, but being new to this stuff, I didn't get the Responsive Tabs working right in the result pane - didn't get separation of html/js right, so I left it up, mostly functional like this...
Slideshow script is in the HTML on my JSFiddle. For Responsive Tabs (tabs switch to accordion based on media query) info, see here.
My first instinct would be to repopulate the slideshow from a JSON document. The slideshow would read the state of the tabs, and load the relevant content into the array driving the slideshow.
I'll try to work up a fiddle to demonstrate this a bit later - at which point I'll edit this answer.
Matthew is on the right track. You only need a single slideshow, and you want to repopulate it with different data for each tab. There's no need to actually have multiple sets of markup or multiple containers.
There are also a bunch of issues with your javascript - you only want a single $(document).ready function, in which you can stick all the other stuff. There's also really no good reason to do a getElementById if you're already using jQuery - $("#mainPhoto") is much nicer.
Make a bunch of slideshow objects or arrays which point to your images (could be Matthew's json files, could just be variables)
So here's pseudocode for what I would do:
var slideShowOne = {
images: ["img1.jpg", "img2.jpg", "img3.jpg"],
name: "Cats"
};
var slideShowTwo = {
images: ["img4.jpg", "img5.jpg", "img6.jpg"],
name: "Dogs"
};
Then in your click actions you could do something like
$("#tabOne").click(function(){
stop the slideshow;
clear out the #slideshowContainer;
slideShowOne.images.foreach(function(img)
{$("#slideshowContainer").append("<img src='"+img+"'/>")})
start the slideshow back up;
})
I have a javascript function which creates an image dynamically, then shows that image either in a div or on a separate page.
Since the image creation takes a few seconds I'd like to display a simple 'please wait' message so that the user knows something is happening, and I am doing this by replacing the contents of an initially empty div with some text.
$('#chartImage').html('Please wait...');
This works fine on it's own - the div contents are displayed immediately when the triggering link is clicked. The problem is when I add the actual image creation code after it, the 'please wait' does not show up until after the image creation is complete, and only for a split second, so it's kinda pointless.
Is there something like a flush method to make sure all actions have taken effect before continuing?
Alternatively if there is a better way to do this I'm happy to hear it...
-------------EDIT-----------------
Here is a more complete description of what I'm doing, using open flash chart to make an image:
function createChartImage(chartid)
{
$('#chartImageDiv'+chartid).html('Please wait...');
ofc = findSWF("ofc_chart_"+chartid);
x = ofc.post_image( getUploadChartURL(chartid), 'doneChartUpload', false );
setTimeout("",1000); //allow some time for upload to complete
window.location.href = getViewChartImageURL(chartid);
}
The 'please wait' appears to take effect immediately before the final line. If I change the div's contents again at that point, the 'please wait' never shows at all.
(According to the docs for the charts I'm using, the function 'doneChartUpload' should be called when the upload is complete which would remove the need for the setTimeout, but I spent a long time trying to get it working, even copying code verbatim from the page below, to no avail.)
http://teethgrinder.co.uk/open-flash-chart-2/adv-upload-image.php
From assessing your code i would definitely split it up:
function generateChartImageProcess(chartid){
displayLoader();
createChart(chartid);
}
function createChart(chartID){
ofc = findSWF("ofc_chart_"+chartid);
x = ofc.post_image( getUploadChartURL(chartid), 'doneChartUpload', false );
setTimeout("",1000); //these two lines here to be replaced by your chart generations complete process
window.location.href = getViewChartImageURL(chartid);
}
function displayLoader(){
$('#chartImageDiv'+chartid).html('Please wait...');
}
function chartGeneratedComplete(arguments){
//TODO
}
This happens because the image isn't loaded yet, and it takes some time for the browser to load it before it can be displayed.
You could try using the jquery.load() method to add a callback for the event of the image being loaded like this, (supposing the div containing the image has the id #imageContainer):
$('#imageContainer img').load(function() {
// Remove the Please wait
});
BlockUI is a good tool to use for these situations: http://jquery.malsup.com/block/. In both cases (using BlockUI or rolling your own), trigger the "waiting" code first, run your image generator, and then remove the waiting effect after the image is loaded.
I have a js script on my blog page that scans the page, looks for special snippets similar to bb code and translates it into an image. For example, i search for all instances of [ ] and replace it with a box image, or all images of :) and replace it with a smiley.
I also have a live preview script for my comments. My problem is that in my live preview DIV, if the user uses :) or [ ] it won't turn them into images since this .js file only scans the page after it loads. Is there a jquery or javascript command I can do to have it run this script again and analyze this live preview DIV ?
cheers for any aide
The same code that updates the contents of the live preview div should also call your "replace" function. To keep things speedy, you can direct the function to scan only the contents of the live preview div, and not the whole page.
you could use setInterval to run a javascript function every x seconds and looks for things to replace, or you could check on the keyup event.
function analyzePage()
{
// do analyze page stuff here
}
$(document).ready(function()
{
// cause analyzePage(); to be called every 2000 milliseconds
setInterval(function(){ analyzePage(); }, 2000);
});