Copy link to clipboard
Copied
Hello. First, so everyone knows what I'm trying to accomplish, I have a Flash website I am building usingover 300 .png's (named home0264.png, home0265.png, etc.) in my flash folder inside a folder called "images" that were output from a 3D animation program to create my animation. The animation is a metal wheel that rotates towards the user based on the link they are currently hovering over (seen here- teamsuperior.org).
The problem is that using all the frames I need to create the animation has resulted in a huge file that makes the functionatlity of the website non existent for a typical user. I asked about this a while back and a good hearted soul provided me with the following code to perform those functions as opposed to using frames to do it:
var tl:MovieClip=this;
var imageNum:int=0260;
var imageTotal:int=0524;
loadF();
function loadF():void{
tl["loader_"+imageNum]=new Loader();
tl["loader_"+imageNum].contentLoaderInfo.addEventListener(Event.COMPLETE,loadcompleteF);
tl["loader_"+imageNum].load(new URLRequest("images/home"+imageNum+".png"));
}
function loadcompleteF(e:Event):void{
if(imageNum<imageTotal){
imageNum++;
loadF();
} else {
// loading of the images is complete. you can now display any sequence without delays. ie, start your app
startF();
}
}
/* Mouse Over Event
Mousing over the symbol instance executes a function in which you can add your own custom code.
Instructions:
1. Add your custom code on a new line after the line that says "// Start your custom code" below.
The code will execute when the symbol instance is moused over.
*/
function displayF([0260,0261,0263,0264,0265,0266,0267,0268]):void{
tl.imageA=imageA;
tl.currentIndex=0;
tl.addChild(tl["loader_"+imageA[0]]);
tl.addEventListener(Event.ENTER_FRAME,enterframeF);
}
function enterframeF(e:Event):void{
tl.removeChild(tl["loader_"+tl.imageA[tl.currentIndex]]);
tl.currentIndex++;
if(tl.currentIndex<tl.imageA.length){
tl.addChild(tl["loader_"+tl.imageA[tl.currentIndex]]);
} else {
tl.removeEventListener(Event.ENTER_FRAME,enterframeF);
}
}
SO HERE"S MY QUESTION (FINALLY):
First, I am fairly new to action script so I use snippets a lot but these larger functions I have no idea where to put them or how to call them using an event (i.e. do I use the full code for the function on the event or just the function name? Anyone willing to type out an example I would apprecaite so I see the format and syntax for this)
Second I get these errors when trying to run the animation:
expecting identifier before left bracket
expecting rightparen before leftbrace
This occurs for the top line of code that reads:
function displayF([0260,0261,0263,0264,0265,0266,0267,0268]):void{
tl.imageA=imageA;
tl.currentIndex=0;
tl.addChild(tl["loader_"+imageA[0]]);
tl.addEventListener(Event.ENTER_FRAME,enterframeF);
}
Will someone who knows syntax help me figure out what the issue is? I think that's all I need. Thanks very much in advance.
Copy link to clipboard
Copied
if you want to pass an Array into a function,
it would be sth. like this:
function displayF(_arr:Array):void{
tl.imageA=imageA;
tl.currentIndex=0;
tl.addChild(tl["loader_"+imageA[0]]);
tl.addEventListener(Event.ENTER_FRAME,enterframeF);
}
displayF(new Array(0260,0261,0263,0264,0265,0266,0267,0268));
but since you are doing nothing inside the function with the argument, I don`t really see what you want to achieve
Copy link to clipboard
Copied
Well I recieved the code from someone else, so really maybe he expected me to fill in certain values (which I tried to do which is probably why the function isn't typed correctly). So the
displayF(new Array(0260,0261,0263,0264,0265,0266,0267,0268)); do I put this inside the event or just typ this in the script as you have it then assign it to an event some other way?
Copy link to clipboard
Copied
And as far as the argument goes I basically need the wheel to rotate by playing 8 images (i.e. 0260,0261,0262 etc) when they hover over a button (the logo for the company). So if you understand that by looking at our website I posted which curently goes way too slow (teamsuperior.org) I basically just need a couple of things to happen:
They hover over a button and the rotating animation for that button plays. From there they will be able to visit a website by clicking a button that appears after the rotation part of it is done playing.
Copy link to clipboard
Copied
To be honest: There are many (hidden) problems in the code that are "problematic".
These problems are so basic that I fear, you will have to abandon the thought to build sth. even remotely working purely by using snippets.
While throwing no immediate errors a line like:
var imageNum:int=0260;
is wrong in many ways. An integer has no leading zero (in AS3 at least)
if you trace it out the zero will vanish and thus never finding a potential 0260.jpg in an image folder.
you should use instead:
var imageName:String="0260";
I´m not saying that nobody on this forum will give you a helping hand.
But you will either need much patience to achieve your goals step by step, or let somebody do it for you completely.
It depends what you have in mind: learning to program or getting your site running.
Copy link to clipboard
Copied
I appreciate the snippet of help you gave here. My main goal of course for now is to make thewebsite work. That's all I want. So whether that means some vigialnt scripters want to take a crack at it or I have to piece together the little pieces people give like what you did above, then that's what I'll do. But I'm in no way determined to become a scripting pro through this one project so it won't break my heart if someone wants to offer up the code I would need or to point out all the errors in the one I was already given (such as string vs. integer). Thanks
Copy link to clipboard
Copied
If I understand right the metal wheel is this one shown at teamsuperior.org ?
And you are trying to use 300 huge/uncompressed png files to get a fluid (24fps) animation.
I`m guessing the resulting swf is way over 25MB?
In theory, the preloading of the pictures would also work,
but in reality: letting the user wait more than a few seconds to get the Navigation loaded is considered rude.
OK first you will need to convert your PNG Sequence to a flv/f4v-Video with Cuepoints.
Creating cupeoints will show the encoder where you want to have the keyframes, that is important.
Because whereas a PNG-Sequence can theoretically be paused anywhere, a video can only pause at a keyframe.
And you will need these cuepoints later to be targeted with ActionScript.
I think its clear that you have to have exactly 16 cuepoints: since you can`t know where the user starts his navigation you will have to
eencode 8 transitions, with a Cuepoint at the beginning and at the end.
Default->sds
Default->rwd
etc.
Actually it has to be even 16 transitions (32 cuepoints) since I forgot there is no easy way to play an flv backwards.
sds->Default
rwd->Default
You will also need a VideoEdit Program like AfterEffects/Premiere. (Flash is ill-prepared for jobs like this)
Get a trial from the Adobe Website, follow this tutorial and get back here if you`re done.
Copy link to clipboard
Copied
Okay I have an F4V video with markers at all the spots I would typical place keyframes.
Copy link to clipboard
Copied
How large is the fv4-file?
Copy link to clipboard
Copied
3mb
Copy link to clipboard
Copied
Use Import ->Video to stage and place it on the timeline.
Give the instance a name of "Navigation".
Make a layer above the video where you insert a stop() action and a framename like "start1"..."end1""start2...end2"...
at exact the position the cue points exist.
If you did that: post a screenshot that shows at least 50 frames of your timeline.
Copy link to clipboard
Copied
I think I'm starting to see where you're going with this. I changed out al my images for the video on the timeline and already have seen a drastic cut in file size. Every 8 frames or so is my start and stop point along with the buttons. (those light blue panels).
Copy link to clipboard
Copied
Looks very promising!
Now instead of putting all the buttons in one Layer:
Give every button its own Layer, and make it so the button is reachable across the whole timeline:
(this will be important later, when you programm the logic, also since the background (your wheelanimation) moves, you will have to move every button accordingly, that it stays over its target [the segment of the wheel that belongs to it, use Motion Tweens to achieve that]).
Avoid any overlapping of your buttons.
Post another screenshot if you have done this.
Another tip: Use the new XFL format instead of FLA, it tends to crash a lot less, and depending on your hardware scrubbing the timeline could sometimes cause Flash to crash.
Also enable auto-saving every 5 Minutes or so.
Copy link to clipboard
Copied
Just to further elaborate I had previously turned all my buttons into symbols and place new versions of those symbols at each keyframe since the button's functions needed to change based on the keyframe the user was on. Will changing all that so that it movement tweens make much of a difference or will the method I already used work just as well...in saving memory I mean?
Copy link to clipboard
Copied
That is not what you want to do.
Basically you will reuse one "Button" (that should be of type MovieClip) for all buttons on the stage.
You will only give them different instance names "btn1","btn2" etc.
Every button has to be put on the first frame in its own layer and stretch out to the end of your timeline (when the video is done)
Copy link to clipboard
Copied
Okay thanks. Ill get started on it and let you know when I've gone to tht point
Copy link to clipboard
Copied
Okay sorry it took me so long, I kept getting pulled off this project to finish on some other ones but I finally set it up as you said I should.
Copy link to clipboard
Copied
Now assign a clickhandler function to your buttons.
//assuming your buttons are named btn1...btn8, this code goes into the first frame of your timeline
for (var i:uint = 1;i<=8;i++){
this.getChildByName("btn"+i).addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
this.getChildByName("btn"+i).addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
this.getChildByName("btn"+i).addEventListener(MouseEvent.CLICK,clickHandler);
this.getChildByName("btn"+i).buttonMode = true;
}
//Now every one of these 3 Listener functions does sth similar
function rollOverHandler(e:MouseEvent):void{
// this will tell you which button was rolled over
trace(e.currentTarge.name);
//this will give you the number at the end of the buttons name
var currentBtnIndex:String = e.currentTarge.name.substr(3,1);
//which you use to jump to a certain point in the timeline and play the animation from there to the next stop
this.gotoAndPlay("start"+currentBtnIndex);
}
(Try to figure out the other by yourself.)
Find more inspiration, events, and resources on the new Adobe Community
Explore Now