webForumDet fria alternativet

Hjälp med skript för karusell

11 svar · 526 visningar · startad av ALeaf

ALeafMedlem sedan maj 200720 inlägg
#1

Tjena!

Jag är hyffsat ny inom flash och håller på att exprimenterar lite med en karusell tutorial ifrån goandtolearn. Jag är färdig med själva karusellen och allt fungerar. Klippet är 900x603 och som ni ser har jag angivigt i skriptet vart i klippet jag vill placera centrum (karusellen). Men...då till mitt problem, i skriptet finns inget som anger vart "function mover" ska upphöra. Så när jag öppnar klippet i html så kan jag snurra karusellen fast jag är utanför klippet, detta händer även fast jag loadar swf i ett annat Mc.

Kort och gott vill jag bara kunna manuvrera karusellen inom klippets område. Och när man har pekaren utanför ska den stanna (eller möjligen snurra sakta).
Hur kan jag lösa detta lättast? :OO

Tack på förhand :)

..............................................................

import mx.utils.Delegate;

var numOfItems:Number;
var radiusX:Number = 240;
var radiusY:Number =140;
var centerX:Number =480;
var centerY:Number = 450;
var speed:Number = 0.05;
var perspective:Number = 150;
var home:MovieClip = this;

var tooltip:MovieClip = this.attachMovie("tooltip","tooltip",10000);
tooltip._alpha = 0;

var xml:XML = new XML();
xml.ignoreWhite = true;

xml.onLoad = function()
{
var nodes = this.firstChild.childNodes;
numOfItems = nodes.length;
for(var i=0;i<numOfItems;i++)
{
var t = home.attachMovie("item","item"+i,i+1);
t.angle = i * ((Math.PI*2)/numOfItems);
t.onEnterFrame = mover;
t.toolText = nodes*.attributes.tooltip;
t.icon.inner.loadMovie(nodes*.attributes.image);
t.r.inner.loadMovie(nodes*.attributes.image);
t.icon.onRollOver = over;
t.icon.onRollOut = out;
t.icon.onRelease = released;
}
}

function over()
{
home.tooltip.tipText.text = this._parent.toolText;
home.tooltip._x = this._parent._x;
home.tooltip._y = this._parent._y - this._parent._height/2;
home.tooltip.onEnterFrame = Delegate.create(this,moveTip);
home.tooltip._alpha =100;
}

function out()
{
delete home.tooltip.onEnterFrame;
home.tooltip._alpha = 0;
}

function released()
{
trace(this._parent.toolText);
}

function moveTip()
{
home.tooltip._x = this._parent._x;
home.tooltip._y = this._parent._y - this._parent._height/2;
}

xml.load("icons.xml");

function mover()
{
this._x = Math.cos(this.angle) * radiusX + centerX;
this._y = Math.sin(this.angle) * radiusY + centerY;
var s = (this._y - perspective) /(centerY+radiusY-perspective);
this._xscale = this._yscale = s*90;
this.angle += this._parent.speed;
this.swapDepths(Math.round(this._xscale) + 100);

}

this.onMouseMove = function()
{

speed = (this.\_xmouse-centerX)/3000;

}***

andyoumaydieMedlem sedan dec. 2006608 inlägg
#2

Välkommen till wf :)

Du kan lösa det ganska enkelt genom att lägga en kontroll i mover().
Dvs du kontrollera om musen är innanför vissa punkter.

Ungefär:

function mover() {
	[B][red]if (_xmouse>100 && _xmouse<200 && _ymouse>100 && _ymouse<200) {[/red][/B]
		this._x = Math.cos(this.angle)*radiusX+centerX;
		this._y = Math.sin(this.angle)*radiusY+centerY;
		var s = (this._y-perspective)/(centerY+radiusY-perspective);
		this._xscale = this._yscale=s*90;
		this.angle += this._parent.speed;
		this.swapDepths(Math.round(this._xscale)+100);
	[B][red]}[/red][/B]
}

Det i röd fetstil är det du ska lägga till. numrena får du ändra efter behov.
glöm inte den avslutande }
Du får nog också lägga samma kod i:

this.onMouseMove = function()
{

speed = (this._xmouse-centerX)/3000;
}

Och fortsättningvis rekommenderar jag dig att använda [kod]-taggar så blir det en sån fin ruta runt koden ;)

Lycka till /Patrik

doridoriMedlem sedan juni 2006244 inlägg
#3

Detta borde gå att lösa ganska enkelt.

Rita först upp en rektangel i flash med valfri fyllningsfärg. Rektangeln ska täcka det område du vill att man ska ha musen i för att animationen ska fungera.
Gör rektangelntill ett movieclip och ge den instansnamnet hitMe (eller valfritt namn).
Lägg den sedan på ett eget lager ovanför lagret som din "bildremsa" är på.
Dra ner alphan på rektangeln till 0.

Det vi vill göra nu är att kolla OM musen är över hitMe-rektangeln NÄR musen rör på sig.
Koden för det ska ligga vid slutet av ditt skript.

Såhär ser din kod ut nu:

this.onMouseMove = function()  [I]// när musen rör sig, kör följande skript:[/I]
{

     speed = (this._xmouse-centerX)/3000;   [I]// bestäm värdet 'speed' (som i detta fall bestämmer hur snabbt "bildremsan" ska snurra) [/I]
}

Nu lägger vi till det här (i fetstil):

this.onMouseMove = function() 
     [B]if(hitMe.hitTest(_xmouse, _ymouse, true) == true) {[/B]  [I]// om hitMe och musen rör vid varandra, kör följande skript:[/I]
          speed = (this._xmouse-centerX)/3000;
     [B]}else { // i annat fall, kör följande skript istället:
         speed = 0; // sätt hastigheten på 0 (vilket stoppar animationen)
     }[/B]
}

Koden jag lade till nu kollar OM ett visst objekt (hitMe) träffar en viss punkt (musens x och y-värde).

Nu har jag inte testat om det här skriptet funkar, men det ska det göra.

Som du kommer märka (om skriptet funkar) så stannar animationen abrupt när musen är utanför bildremsan. Detta går nog att göra snyggare, men jag har tyvärr inte mer tid att hjälpa dig just nu.
Kanske någon annan vänlig själ kan lägga till koden för det :D

ha det fint sålänge

ALeafMedlem sedan maj 200720 inlägg
#4

Kanon! fungerade ypperligt.
Tackar för detta!
Är ju underbart att det finns kunniga folk att fråga så här smidigt :)

Andyoumaydie: Tackar för rådet om taggarna, börjar användas fr.o.m nu ;)

Har dock en liten undran ang. senaste varianten, så detta faller på plats.

värdet "speed":

}else { // i annat fall, kör följande skript istället:
         speed = [red][B]0[/B][/red]; // sätt hastigheten på 0 (vilket stoppar animationen)
     }

Testade jag att ändra, då jag ville testa hur det såg ut om den snurrade långsamt när man inte var inom "hitMe" området. Men om jag angav något annat än 5 så snurrade det på som aldrig förr, men 5 gick bra :) Hur kommer detta sig?

Tack än en gång!
Ha d!

andyoumaydieMedlem sedan dec. 2006608 inlägg
#5

Du kan ju ha den else satsen i min kod också. :)

Ang. din fråga, speed är antal grader karusellen vrider sig per frame om jag inte tar fel.
Alltså borde det bli långsammare ju lägre du har.
Blev det inte det om du hade lägre än fem?

Lägg en trace på speed så ser du vad den är när det ska snurra normalt.

this.onMouseMove = function() {
	if (_xmouse>100 && _xmouse<200 && _ymouse>100 && _ymouse<200) {
		speed = (this._xmouse-centerX)/3000;
		[B]trace("speed = "+speed);[/B]
	}else {
		speed = 0;
	}
}

/Patrik

doridoriMedlem sedan juni 2006244 inlägg
#6

Förmodligen är det så att speed skall vara ett väldigt lågt tal.
I början av koden står det "var speed:Number = 0.05;", vilket ger en antydan på hur låga tal som är lagom för speed-variabeln.
Testa med tal mellan 0 och 1, eller gör för enkelhets skull som andyoumaydie skriver och lägg till en trace-funktion som berättar för dig vilket värde speed har.
Att den snurrar normalt på 5 kanske har att göra med att ekvationen som använder sig av speed-värdet jämnas ut på nåt sätt just på 5, men det är bara en gissning.
andyoumaydie verkar ha bättre koll på hur speed-värdet fungerar i din kod =)

ALeafMedlem sedan maj 200720 inlägg
#7

jajjemen, det stämde. Handlar om ganska små värden skrev nu 0.003 och då var jag nöjd :)

Ingen som vet hur en kod skulle kunna se ut som gör så att karusellen vid "stannat läge" går ifrån hastigheten som var när man lämnade "hitMe" ytan till t.ex hastigheten 0.003, med en mjuk nedtrappning?

Dessa ständiga frågor, men frågar man ingenting får man ingenting veta ;)

andyoumaydieMedlem sedan dec. 2006608 inlägg
#8

Kan du posta den kod du har nu?
Så ska vi nog kunna få till nåt. :)

ALeafMedlem sedan maj 200720 inlägg
#9

Självklart kan jag göra det :) Här kommer den:

import mx.utils.Delegate;

var numOfItems:Number;
var radiusX:Number = 240;
var radiusY:Number =140;
var centerX:Number =520;
var centerY:Number = 450;
var speed:Number = 0.05;
var perspective:Number = 150;
var home:MovieClip = this;

var tooltip:MovieClip = this.attachMovie("tooltip","tooltip",10000);
tooltip._alpha = 0;

var xml:XML = new XML();
xml.ignoreWhite = true;

xml.onLoad = function()
{
	var nodes = this.firstChild.childNodes;
	numOfItems = nodes.length;
	for(var i=0;i<numOfItems;i++)
	{
		var t = home.attachMovie("item","item"+i,i+1);
		t.angle = i * ((Math.PI*2)/numOfItems);
		t.onEnterFrame = mover;
		t.toolText = nodes[i].attributes.tooltip;
		t.icon.inner.loadMovie(nodes[i].attributes.image);
		t.r.inner.loadMovie(nodes[i].attributes.image);
		t.icon.onRollOver = over;
		t.icon.onRollOut = out;
		t.icon.onRelease = released;
	}
}

function over()
{
	home.tooltip.tipText.text = this._parent.toolText;
	home.tooltip._x = this._parent._x;
	home.tooltip._y = this._parent._y - this._parent._height/2;
	home.tooltip.onEnterFrame = Delegate.create(this,moveTip);
	home.tooltip._alpha =100;
}

function out()
{
	delete home.tooltip.onEnterFrame;
	home.tooltip._alpha = 0;
}

function released()
{
	trace(this._parent.toolText);
}

function moveTip()
{
	home.tooltip._x = this._parent._x;
	home.tooltip._y = this._parent._y - this._parent._height/2;
}

xml.load("icons.xml");

function mover()
{
	this._x = Math.cos(this.angle) * radiusX + centerX;
	this._y = Math.sin(this.angle) * radiusY + centerY;
	var s = (this._y - perspective) /(centerY+radiusY-perspective);
	this._xscale = this._yscale = s*90;
	this.angle += this._parent.speed;
	this.swapDepths(Math.round(this._xscale) + 100);
	
	}

this.onMouseMove = function() {

if(hitMe.hitTest(_xmouse, _ymouse, true) == true) {
          speed = (this._xmouse-centerX)/4000;
     }else {
         speed = +0.003;
     }
	 
}
andyoumaydieMedlem sedan dec. 2006608 inlägg
#10

Då kan vi prova det här: (fetstilt=nyheter)

import mx.utils.Delegate;
[B]var muspekOver:Boolean;[/B]//Den här variabeln bestäms när musen flyttas
[B]var minskaSpeed = 0.0005;[/B]//Speed minskas med detta tal, om inte musen är över hitMe, ändras efter tycke o smak :)
var numOfItems:Number;
var radiusX:Number = 240;
var radiusY:Number = 140;
var centerX:Number = 520;
var centerY:Number = 450;
var speed:Number = 0.05;
var perspective:Number = 150;
var home:MovieClip = this;
var tooltip:MovieClip = this.attachMovie("tooltip", "tooltip", 10000);
tooltip._alpha = 0;
var xml:XML = new XML();
xml.ignoreWhite = true;
xml.onLoad = function() {
	var nodes = this.firstChild.childNodes;
	numOfItems = nodes.length;
	for (var i = 0; i<numOfItems; i++) {
		var t = home.attachMovie("item", "item"+i, i+1);
		t.angle = i*((Math.PI*2)/numOfItems);
		t.onEnterFrame = mover;
		t.toolText = nodes[i].attributes.tooltip;
		t.icon.inner.loadMovie(nodes[i].attributes.image);
		t.r.inner.loadMovie(nodes[i].attributes.image);
		t.icon.onRollOver = over;
		t.icon.onRollOut = out;
		t.icon.onRelease = released;
	}
};
function over() {
	home.tooltip.tipText.text = this._parent.toolText;
	home.tooltip._x = this._parent._x;
	home.tooltip._y = this._parent._y-this._parent._height/2;
	home.tooltip.onEnterFrame = Delegate.create(this, moveTip);
	home.tooltip._alpha = 100;
}
function out() {
	delete home.tooltip.onEnterFrame;
	home.tooltip._alpha = 0;
}
function released() {
	trace(this._parent.toolText);
}
function moveTip() {
	home.tooltip._x = this._parent._x;
	home.tooltip._y = this._parent._y-this._parent._height/2;
}
xml.load("icons.xml");
function mover() {
	//Nedanstående avsnitt är flyttad från mouseMove-funktionen
	[B]if (muspekOver == true) {
		speed = (this._xmouse-centerX)/4000;
	} else {
		if (speed>0.0003) {//Här minskas speed om det är större än 0.0003
			speed = speed-minskaSpeed;
		} else {
			speed = 0.0003;
		}
	}[/B]
	this._x = Math.cos(this.angle)*radiusX+centerX;
	this._y = Math.sin(this.angle)*radiusY+centerY;
	var s = (this._y-perspective)/(centerY+radiusY-perspective);
	this._xscale = this._yscale=s*90;
	this.angle += this._parent.speed;
	this.swapDepths(Math.round(this._xscale)+100);
}
this.onMouseMove = function() {
	//Nedanstånde kod tilldelar muspekOver värdena true eller false
	[B]if (hitMe.hitTest(_xmouse, _ymouse, true) == true) {
		muspekOver = true;
	} else {
		muspekOver = false;
	}[/B]
};

Det här är skrivit ur mitt huvud, och inte testat.
Så efter för lite sömn så kan jag inte garantera att den är felfri. :)
Är det något som är oklart eller inte funkar så får du fråga mer.

Jag ber om ursäkt att det tog så lång tid, men bakfull som jag var igår, så fokuserade jag på att komma i form till nattens arbetspass. :)

/Patrik

ALeafMedlem sedan maj 200720 inlägg
#11

Fick det inte att funka riktigt, när jag klistrade in de nya koderna så blev objeken i karusellen "lösa", dom cirkulerade runt hur som helst och till slut samlades alla på en punkt en det blev en "slung" effekt när man snurrade den, rätt coolt faktiskt :e

Men jag ska fortsätta att laborera lite med olika tal m.m. så kanske det löser sig.

andyoumaydieMedlem sedan dec. 2006608 inlägg
#12

hmm, det verkar konstigt. för ingenting är ju ändrat i upsättningen av objekten i karusellen...
prova att slänga in ett false där variabeln muspekOver deklares

var muspekOver:Boolean = false;
136 ms totalt · 3 externa anrop · v20260731065814-full.fb544a5a
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
132 ms — hämta tråd, inlägg och bilagor (db)