Do not use, republish, in whole or in part, without the consent of the Author. TheTAZZone policy is that Authors retain the rights to the work they submit and/or post…we do not sell, publish, transmit, or have the right to give permission for such…TheTAZZone merely retains the right to use, retain, and publish submitted work within it’s Network

Code: Select all

This tutorial is the original work of Valhallen. He has kindly allowed us to host his work on The TAZ.


OK been a while since have written a tut so here goes…..

I have posted a previous tut on creating a preloader in flash which checked frames loaded but I thought I would right a more advanced one that checks BytesLoaded against BytesTotal and also incorporates a loading bar and percent loaded figure to give people viewing your file an idea of how long is left till its all loaded…..ok on with the tutorial – I am going to assume that your familiar with the Flash MX enviroment and are able to use the basic tools as well as give objects instance names……

right lets set the scene

your preloader is going to need 3 layers – I’m going to name them

Loader

Text

Actions

now the Loader layer is going to contain the actual loading bar and the precent box so lets start with it…..

create a new rectangle with the border and fill set at the same color. Now select the border and make it a graphic (windows press F8 ) called container.

Now select the fill and convert it to a movie clip (F8 again) called bar – now you need to give it an instance name as well so we can refer to it in our action code later…….to give something an instance name select it and down in the bottom left of the properties bar you should see a text box for instance name….write it in there. We also need to make sure that it registration point is at the far left. A registration point is the lil white dot when u click on the movie clip.

To do this select the bar mc (movie clip) and hold shift drag it to the left so that the lil white dot is level with the far left of the container. now you should see that the container is half filled and half not (its sticking out the left) so double click on the bar mc to edit and move the fill so that is once gain filling the entire container

now on your text layer add your text – you know something like now loading
usual kinda thing…..

thats the main thing set up so lets get down to the action scripting……

ok gonna scare you now and paste the entire code but don’t worry will go thro it after
this code all goes inside the first frame on your actions layer….

Code: Select all

stop();
myInterval = setInterval(preloader, 10);
function preloader(){
if (getBytesLoaded()>=getBytesTotal()){
play();
clearInterval(myInterval);
}
bar._xscale = (getBytesLoaded()/getBytesTotal())*100;
}

right aint that complex…..lets break it down

stop(); self explanitary, stops the movie so it doesn’t go on until all the criteria have been met – in this case BytesLoaded is equal to BytesTotal

myInterval = setInterval(preloader, 10); this tells it to call it every 10 milliseconds

if (getBytesLoaded()>=getBytesTotal()){ this simply means if The Bytes Loaded is more than or equal to the Total Bytes then carry out the next action….

which is….

play();
clearInterval(myInterval); simple enough plays the movie – the clear interval just gets rid of the myInterval now we dont need it as its all loaded….

bar._xscale = (getBytesLoaded()/getBytesTotal())*100; controls the x scale of the bar mc depending upon Bytes Loaded divided by Bytes Total multiplied by 100

ok give it a shot – put some large graphic or something in the next scene so it has something to load and then go to control > Test Movie
now you need to see it as you would on the web so select view > show streaming
you can alter the conection speed to test under debug

right so all good so far the more loaded the bigger the bar gets right lets add our percentage box…..

on your loader layer draw a dynamic text box and call it myTextField (once agin in the instance box)
now we just need to add a lil bit more code…..

in the code you just entered place after….

bar._xscale = (getBytesLoaded()/getBytesTotal())*100;

this code….

Code: Select all

myTextField.text = Math.round(getBytesLoaded()/getBytesTotal()*100)+"%";

this just tells the flash movie what it should show in the text box in this case Bytes Loaded divided by Bytes Total multiplied by 100 and then after that a precentage sign.

ok so your complete code should now look like this….

Code: Select all

stop();
myInterval = setInterval(preloader, 10);
function preloader(){
if (getBytesLoaded()>=getBytesTotal()){
play();
clearInterval(myInterval);
}
bar._xscale = (getBytesLoaded()/getBytesTotal())*100;
myTextField.text = Math.round(getBytesLoaded()/getBytesTotal()*100)+"%";
}

give it another test same as before – there ya go

well hope that was helpful to someone

v_Ln

Do not use, republish, in whole or in part, without the consent of the Author. TheTAZZone policy is that Authors retain the rights to the work they submit and/or post…we do not sell, publish, transmit, or have the right to give permission for such…TheTAZZone merely retains the right to use, retain, and publish submitted work within it’s Network

Code: Select all

This is the original work of Valhallen, whom has allowed The TAZ to host his work on our site.
Please find the original here:
http://www.antionline.com/showthread.php?s=&threadid=246123

OK this is tutorial is written by me but has been adapted from script taken from ActionScript for Flash MX (book) by Friends of ED

Ok basically what I am going to show you is a way of creating a dragable movieclip in Flash MX that in conjuction with flash’s ability to record collisions can be used to create a help function type tooltip

Now yes I know it could be done using the on(Rollover) function as well but this is just to show a different way and also to give some people a taste of dragable movieclips (mc) and detecting collisions….

Ok first of all lets set up the movie

Open a new flash document and create 2 layers named Graphics & Actions

Ok the graphics layer is going to hold your dragable movieclip and the buttons and the top layer is going to be just for your actions.

Now your going to need two mc’s in your graphics area one will be your Hit area and the other your dragable mc

give your hitarea the instance name hitarea
and your dragable mc the instance name Ques01

The hit area mc can contain whatever you want – in the example .fla is just text but you can place a button anything in it

The Ques01 must have a dynamic text field in it to display your tooltip

ok now lets add your code to the top layer

tooltip = function () {
this.onPress = function() {
this.startDrag(”");
this.onMouseMove = function() {
updateAfterEvent();
};
};
this.onRelease = function() {
this.stopDrag();
this.onMouseMove = undefined;
[color=green]};
this.onReleaseOutside = function() {
this.stopDrag(); };
this.onEnterFrame = function() {
this.coll = “”;
if (this.hitTest(”_root.hitarea”)) {
this.coll = “links”;[/color]
}
};
};
tooltip.apply(ques01);

ok the blue part of the code defines a new function called tooltip
the red sets up the dragable mc
the Green tells it to display the text links whenever a collision is detected over the hitarea
& the purple area of the code tells it to apply the rules set out in the function tooltip to the mc called Ques01

test your movie when you click and drag the mc Ques01 over the hit area it should display the text links

ok I know I aint gone into it into too much depth but it should be enough to get you started if you want to add multiple hit areas then you need to alter your code slightly

Code: Select all

if (this.hitTest("_root.hitarea")) {
this.coll = "links";
}

just alter this code and place it after the original for example if we had 3 hit areas labeled hitarea, hitarea2 & hitarea3 then our code would be…..

Code: Select all

if (this.hitTest("_root.hitarea")) {
this.coll = "links";
}
if (this.hitTest("_root.hitarea2")) {
this.coll = "links 2";
}
if (this.hitTest("_root.hitarea3")) {
this.coll = "links 3";
}

the _root tells flash that the mc it is looking for is on the main time line – if your movie clip was inside another which was on the main timeline the code would look something like _root.firstclip.yourclip

thanks

v_Ln

Do not use, republish, in whole or in part, without the consent of the Author. TheTAZZone policy is that Authors retain the rights to the work they submit and/or post…we do not sell, publish, transmit, or have the right to give permission for such…TheTAZZone merely retains the right to use, retain, and publish submitted work within it’s Network

Code: Select all

With kind permission from Valhallen we are glad to be able to host this tutorial of his on The TAZ.


Ok this tut will use the old Flash 5 way of coding (may work in earlier versions to tho not sure) simply for the fact I taught myself in Flash 5 and have still not completly transfered to Flash MX coding

Ok basically what this will allow you to do is have a cross hair follow the mouse around the screen – in the example I have used it to find locations on a map but really is just to show you a little of how to use flash’s ability to move movieclips (mc) depending on mouse postion.

In the example you can see there are 5 main elements

Crosshair

Vertical bar

Horiz bar

Map

I know I said 5 and there are only 4 there but the crosshair is actiualy made of tewo parts the inner circle and the lines.

ok lets set up our movie -
your gonna need 8 layers :::

Map

Border

Horiz bar

Vert bar

circle

lines

Buttons

actions

ok the first 2 are self explanitary as is the two bars (just make sure they are long enough) also as we will be applying actionscript to the bars please make sure they are movieclips

the circle and lines mc’s will contain the animation for when you mouse over an active area

the first frame in each mc should be when it is at rest make sure to also add a

Code: Select all

stop();

function on the first frame
now animate it when you rollover and rollout making sure to add another stop at the end of the rollover animation (not following me – take a look at the .fla while reading this tutorial for a better idea)

ok once you have your mc made add them to the main timeline on the correct layers (by giving everything its own labeled layer and mc now it makes editing one element at a later time alot easier and is good practice for when you try more advanced flash projects)

right now we got to add our buttons – i drew roughly round the different areas on the map but if you want (and are better at geography than me) you could add lil dots for actual places etc

once you have your buttons made set their alpha to 0 (unless you want them to be seen)

ok time to add our code :::

click once on the horiz bar mc and add this code

Code: Select all

onClipEvent (enterFrame) {
_y += (_parent._ymouse-_y);
}

This tells flash to move the mc along with the mouse along the Y axis

ok now the vert bar :::

Code: Select all

onClipEvent (enterFrame) {
_x += (_parent._xmouse-_x);

}

exactly same thing but now is getting postion along X axis

ok adding the code to our circle and lines mc is just the same except we need it to get both the X & Y postions – the code for both movies is the same

Code: Select all

onClipEvent (enterFrame) {
_x += (_parent._xmouse-_x);
_y += (_parent._ymouse-_y);
}

dont forget to give your mc’s instance names (i just used circle & lines) as we will be refering to them in our code a little later

now we have got to tell the flash movie what to do when you move over one of our buttons

the code is the same for all the buttons :::

Code: Select all

on(rollover){
_root.circle.gotoAndPlay(2);
_root.lines.gotoAndPlay(2);
}
on(rollout){
_root.circle.gotoAndPlay(6);
_root.lines.gotoAndPlay(8);
}

now the frame numbers are just waht i used in my .fla and these will need to be changed depending upon the set up og your own mc’s

a quick break down of the code :::

on(rollout){ – tells flash to perform the following function when the mouse is placed over the button

_root.circle.gotoAndPlay(6); – this means that flash is to look for the mc (instance) name circle and go to the 6 frame and play

simple

***Flash Mx only***
I’m not sure as I have not tested but if you wanted to code it in flash MX i think instead of placing the rollover & rollout code on each button you could use

Code: Select all

display = function () {

and then define the function before using

Code: Select all

display.apply(button);

to attach the function to each button?

****End of Flash MX only****

Ok if you test it now you should see that the horiz line, vert line and both mc’s follow the cursor but lets get rid of the cursour as well

in your actions layer place the following code

Code: Select all

Mouse.hide();
stop();

so there you go thats it now there are other things that could be done with this – add a mc at the bottom to display different flags depending what country you are over etc – it could even be used as the basis of a lash shooting game!!

v_Ln

Do not use, republish, in whole or in part, without the consent of the Author. TheTAZZone policy is that Authors retain the rights to the work they submit and/or post…we do not sell, publish, transmit, or have the right to give permission for such…TheTAZZone merely retains the right to use, retain, and publish submitted work within it’s Network

[code]Valhallen had very kindly allowed us to host his tutorial on The TAZ.

Enjoy!
[/code]

Ok now this is not the easiest way of doing this in Flash Mx but it does use the new switch function so thought would let everyone see it
original tut is at -> [url]http://www.actionscript.org/tutoria…ime/index.shtml[/url]

thought I would rewrite it to make it a bit easier to understand and also add some extra functionality to it……

ok so lets start your new movie ::::

first create a new movieclip called date_mc – this will hold your actual display so in it create a dynamic text box called date_txt

set the proporties (text font/color etc) and then name it as date_txt – this is done in the proporties menu were it says var

ok now still in your date_mc create a new keyframe on frame 2 – change the date_txt’s name in this frame (not first one) to date_txt2

ok now drag an instance of this movieclip onto the main timeline – give it an instance name of date_mc

ok almost done now just to make our button – create a new layer above the one holding date_mc and use the fill rectangle tool to draw a large rectangle covering your date_mc – set line to off and pick any color you wish – doesn’t matter wont be seen.

Now select the rectangle and convert it to a button (press F8 in windows) called date_btn – now set its instance name to the same (date_btn) and then change its alpha (in proporties menu) to 0% so is invisible

ok now for the code ::::

in the date_mc movieclip insert a stop action on frame 1 like so

[code]stop(); [/code]

and then on your main timeline create a new layer called actions and insert this code :::

code:——————————————————————————–[code]function howlong(arg) {
if (length(arg)==1) {
arg = "0" + arg;
return arg;
}
else {
arg = arg;
return arg;
}
}
myDate = new Date();

hr = howlong(String(myDate.getHours()));
mnt = howlong(String(myDate.getMinutes()));

daytext = myDate.getDay();
dd = myDate.getDate();
mm = myDate.getMonth();
yyyy = myDate.getFullYear();

switch (daytext) {
case 0: daytext = "Sunday";
break;
case 1: daytext = "Monday";
break;
case 2: daytext = "Tuesday";
break;
case 3: daytext = "Wednesday";
break;
case 4: daytext = "Thursday";
break
case 5: daytext = "Friday";
break;
case 6: daytext = "Saturday";
break
}

switch (mm) {
case 0: mm = "January";
break;
case 1: mm = "February";
break;
case 2: mm = "March";
break;
case 3: mm = "April";
break;
case 4: mm = "May";
break
case 5: mm = "June";
break;
case 6: mm = "July";
break
case 7: mm = "August";
break
case 8: mm = "September";
break
case 9: mm = "October";
break
case 10: mm = "November";
break
case 11: mm = "December";
break
}

_root.date_mc.date_txt = (hr + ":" + mnt)
_root.date_mc.date_txt2 = (daytext + "," + dd + " " + mm + " " + yyyy)

date_btn.onRollOver = function(){
_root.date_mc.gotoAndStop(2);
}
date_btn.onRollOut = function(){
_root.date_mc.gotoAndStop(1);
}
[/code]

ok the code is pretty much self explanitary – and is explained here -> [url]http://www.actionscript.org/tutoria…ime/index.shtml[/url]

but i will go over the changes i made ::: the last part

[code]_root.date_mc.date_txt = (hr + ":" + mnt)
_root.date_mc.date_txt2 = (daytext + "," + dd + " " + mm + " " + yyyy)

date_btn.onRollOver = function(){
_root.date_mc.gotoAndStop(2);
}
date_btn.onRollOut = function(){
_root.date_mc.gotoAndStop(1);
}
[/code]

as you can see the original tut just had a static display showing date/time – now i have altered it so that time is displayed until you mouseover and then it switches to date – this is easily done

the first 2 lines assign the values to the 2 different txt fields
then the button actions tell it which frame in date_mc to look at – now because the different txt fields are on different frames only one is visible either date/time

could also have been done using visible = false;

eg ::::

code:——————————————————————————–[code]date_btn.onRollOver = function(){
date_txt._visible = false;
date_txt2._visible = true;
}
[/code]

but i like to keep everything neatly in its own movieclips

v_Ln

Do not use, republish, in whole or in part, without the consent of the Author. TheTAZZone policy is that Authors retain the rights to the work they submit and/or post…we do not sell, publish, transmit, or have the right to give permission for such…TheTAZZone merely retains the right to use, retain, and publish submitted work within it’s Network

Code: Select all

This tutorial is written by Valhallen who has kindly allowed us to host it on the TAZ in the hope it may benifit members of our community!


I haven’t written anything for a while so I thought i’d do YET ANOTHER Flash Tutorial
In this tutorial I’ll describe how to make an old movie style effect like the one seen here in my web-site intro…am afraid however that due to a hosting problem the rest of the site is down atm but I hope to get it back up very soon
Anyways on with the tutorial

Create your flash movie

Insert a new layer above the rest used in your movie

Create a new movie clip and name it speckles

Create another new movie clip and call it dots

Ok now in the speckles movie clip draw well your speckles obviously – not too many as you don’t want your movie to look too crowded…..

Do the same for the dots movieclip

Now place both movieclips in your new layer outside of the movie….

Click on speckles and give it an instance name – I’ll just call it speckles again

Open the actions panel and insert this actionscript….

Code: Select all

onClipEvent(load){
if (this._name<>"speckles"){
this._x=random(600);
this._y=random(400);
deedee=random(100);
this._xscale=deedee;
this._yscale=deedee;
}
}

don’t forget to change the instance name in bold to whatever you have called it and the numbers in blue to the dimensions of your movie clip

now you need to create another new movieclip name it actions
this movieclip does not need anythign inside it as it will simply control our speckles action.

Place a copy of actions in the layer outside of the movie same as you have done for speckles and open the actions panel
insert this actionscript

code:——————————————————————————–

Code: Select all

onClipEvent(enterFrame){
for (l=0; l<=2; l++)
{
_root.speckles.duplicateMovieClip( "speckles"+l, l+1);
}
if (l=2){
l=0;
}
}


remember once again to change the name in bold

Now just do the same for the dots movie clip

You will need a new action movieclip as well tho

!! Remember to change the instance letter in the actionscript !!

the instance letter is in blue and needs to be different for each movieclip!

Also by changing the number in green you can alter the number of copies of the movieclip that appear on screen at any one time.

well hope somebody found this of use =^_^=

v_Ln