Ajuda Transition + efeitos

9 de outubro de 2009 12 respostas

fabioebner 9 de outubro de 2009

Pessoal seguinte. tenho uma aplicacao q no topo tem um canvas com uma imagem e um formulario, e um canvas abaixo (isso no INICIAL_STATE) depois criei um estado {PRINCIPAL_STATE} com outro form, sem a imagem e o tamanho do canvas menor, logo fiz o seguinte codigo:

<mx:transitions>
	<mx:Transition fromState="{INICIO_STATE}" toState="{PRINCIPAL_STATE}" > 
	<mx:Sequence>
	
		<mx:Parallel >
			<mx:Dissolve id="dissolveOutForm"  target="{formConsulta2}" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
			<mx:Dissolve id="dissolveOutMapa" target="{imagemMapa}" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
		</mx:Parallel>
		<mx:Resize id="resizeTop" target="{hBoxTop}" heightTo="250" />
		<mx:Dissolve id="dissolveInForm" target="{imagemMapa}" duration="500" alphaFrom="0.0" alphaTo="1.0"/>
	</mx:Sequence>
	</mx:Transition>
</mx:transitions>

porem acontece o seguinte: ele primeiro remove o form e a imagem (nao dissolve), espera o tempo de dissolver, para depois redimensionar o canvas de cima, quero q primeiro ele dissolva o form e a imagem, depois diminua o canvas e por ultimo mude de state

alguem pode me ajudar??

segue o codigo abaixo

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:views="br.com.dnasolution.cartoriomaps.views.*" width="100%" height="100%" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" horizontalGap="0" verticalGap="0" currentState="{INICIO_STATE}">
	<mx:states>
		<mx:State name="{PRINCIPAL_STATE}">
			<mx:RemoveChild target="{imagemMapa}"/>
			<mx:SetProperty target="{hBoxTop}" name="height" value="250"/>
			<mx:RemoveChild target="{formConsulta2}"/>
			<mx:AddChild relativeTo="{canvas1}" position="lastChild">
				<mx:Button x="333" y="95" label="Button"/>
			</mx:AddChild>
		</mx:State>
		<mx:State name="{INICIO_STATE}"/>
	</mx:states>
<mx:Script>
	<![CDATA[
		private static const INICIO_STATE:String = "INICIO_STATE";
		private static const PRINCIPAL_STATE:String = "PRINCIPAL_STATE";
		import mx.controls.Alert;
		public function iniciar(event:Event):void{
			currentState=PRINCIPAL_STATE;
		}
	]]>
</mx:Script>
<mx:Style>
LinkBar {
   borderStyle: none;
   borderColor: #ffffff;
   horizontalGap: 15;
   separatorWidth: 2;
   letterSpacing: 2;
   cornerRadius: 0;
   separatorColor: #ffffff;
   rollOverColor: #ffffff;
   selectionColor: #ffffff;
   color: #ffffff;
   textSelectedColor: #ffffff;
   disabledColor: #ff6600;
   fontFamily: Tahoma;
   fontSize: 14;
}
.myComboBoxInicial {
   cornerRadius: 0;
   highlightAlphas: 0, 0;
   backgroundAlpha: 1;
   useRollOver: true;
   openDuration: 10;
   closeDuration: 10;
   fontSize: 24;
   letterSpacing: 5;
   dropDownStyleName: "myComboBoxDropDowns";
}

.myComboBoxDropDownsInicial {
   cornerRadius: 0;
   borderThickness: 0;
   letterSpacing: 0;
   dropShadowEnabled: false;
   shadowDirection: right;
   shadowDistance: -20;
   dropShadowColor: #000000;
}
.myLabelInicial{
	fontSize: 18;
}

.myCheckBoxInicial {
   color: #ff6600;
   textSelectedColor: #ffffff;
   textRollOverColor: #ffffff;
   fontSize: 16;
}
.myButtonInicial {
   cornerRadius: 0;
   textIndent: 0;
   paddingLeft: 5;
   paddingRight: 5;
   paddingTop: 5;
   paddingBottom: 5;
   letterSpacing: 3;
   fontFamily: Tahoma;
   fontSize: 14;
}
</mx:Style>
<mx:transitions>
	<mx:Transition fromState="{INICIO_STATE}" toState="{PRINCIPAL_STATE}" > 
	<mx:Sequence>
	
		<mx:Parallel >
			<mx:Dissolve id="dissolveOutForm"  target="{formConsulta2}" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
			<mx:Dissolve id="dissolveOutMapa" target="{imagemMapa}" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
		</mx:Parallel>
		<mx:Resize id="resizeTop" target="{hBoxTop}" heightTo="250" />
		<mx:Dissolve id="dissolveInForm" target="{imagemMapa}" duration="500" alphaFrom="0.0" alphaTo="1.0"/>
	</mx:Sequence>
	</mx:Transition>
</mx:transitions>
	<mx:HBox width="100%" height="500" backgroundColor="#5E87B2" id="hBoxTop" horizontalGap="2" horizontalAlign="center">
		<mx:Canvas width="1005" height="100%" backgroundColor="#336699" id="canvas1">
			<mx:Image x="10" y="137" width="346" height="353" id="imagemMapa">
				<mx:source>br/com/dnasolution/cartoriomaps/imagens/mapa_brasil.gif</mx:source>
			</mx:Image>
			<mx:Form x="364" y="137" width="631" height="353" horizontalGap="0" verticalGap="7" paddingTop="5" paddingLeft="5"  id="formConsulta2">
				<mx:FormItem label="Estado :" color="#F7FCFD" width="100%" styleName="myLabelInicial" id="formitem1" required="true">
					<mx:ComboBox width="100%" styleName="myComboBoxInicial" id="combobox2"></mx:ComboBox>
				</mx:FormItem>
				<mx:FormItem label="Cidade: " width="100%" color="#F5F9FA" verticalGap="2" styleName="myLabelInicial" id="formitem2" required="true">
				<mx:ComboBox width="100%" styleName="myComboBoxInicial" id="combobox1"></mx:ComboBox>
				</mx:FormItem>
				<mx:FormItem label="Natureza: " id="formitem3" direction="vertical" styleName="myLabelInicial" color="#F6FCFD" width="100%"> 
					<mx:CheckBox label="Imovel" styleName="myCheckBoxInicial" id="checkbox1"/>
					<mx:CheckBox label="Notas" styleName="myCheckBoxInicial" id="checkbox2"/>
					<mx:CheckBox label="Civil" styleName="myCheckBoxInicial" id="checkbox3"/>
					<mx:CheckBox label="Protesto" styleName="myCheckBoxInicial" id="checkbox4"/>
					<mx:CheckBox label="Maritimo" styleName="myCheckBoxInicial" id="checkbox5"/>
					<mx:CheckBox label="Titulos e Documentos" styleName="myCheckBoxInicial" id="checkbox6"/>
				</mx:FormItem>
					<mx:FormItem direction="horizontal"   width="100%">
						<mx:Button label="Buscar Cartorios" cornerRadius="0" width="222" click="iniciar(event)" styleName="myButtonInicial" id="button1"/>
					</mx:FormItem>

			</mx:Form>
		</mx:Canvas>
	</mx:HBox>
	<mx:HBox width="100%" height="100%" backgroundColor="#DCD6D6" id="hBoxButton" horizontalGap="2" horizontalAlign="center">
		<mx:Canvas width="1005" height="100%" backgroundColor="#FFFFFF">
		</mx:Canvas>
	</mx:HBox>

</mx:Application>

12 Respostas

Thiago_Felix 9 de out. de 2009

Fabio.

Ainda não entendi direito seu problema (confesso que não parei ainda para entender) mais tem algumas coisas que você pode/deve fazer para deixar seu código mais limpo e identificar o problema mais facilmente.

Primeiro:
Separar a declaração de estilos em um arquivo .css

Segundo:
Instale o Flex Code Formatter para manter seu código bem identado e formatado

Terceiro
Troque o seguinte trecho no código:

<mx:Parallel > <mx:Dissolve id="dissolveOutForm" target="{formConsulta2}" duration="1000" alphaFrom="1.0" alphaTo="0.0"/> <mx:Dissolve id="dissolveOutMapa" target="{imagemMapa}" duration="1000" alphaFrom="1.0" alphaTo="0.0"/> </mx:Parallel>
Por

<mx:Dissolve id="dissolveOutForm"  targets="{[formConsulta2,imagemMapa]}" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>

Estas medidas não irão resolver seu problema, mais vai fazer com que seu código fique mais fácil de analisar e conseqüentemente mais fácil de resolver o problema em questão.

andre.gil 9 de out. de 2009

Veja se isso te ajuda:

<mx:states>
	<mx:State name="{PRINCIPAL_STATE}">

		<mx:RemoveChild target="{imagemMapa}"/>
		<mx:RemoveChild target="{formConsulta2}"/>

		<mx:AddChild relativeTo="{canvas1}" position="lastChild">
			<mx:Button id="myBtn" label="Button" x="333" y="95"/>
		</mx:AddChild>

	</mx:State>
	<mx:State name="{INICIO_STATE}"/>
</mx:states>

<mx:transitions>
	<mx:Transition fromState="{INICIO_STATE}" toState="{PRINCIPAL_STATE}">
		<mx:Sequence targets="{[formConsulta2, imagemMapa, hBoxTop, imagemMapa, myBtn]}">

			<mx:Parallel targets="{[formConsulta2, imagemMapa]}">
				<mx:Dissolve duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
			</mx:Parallel>

			<mx:RemoveChildAction/>

			<mx:Resize target="{hBoxTop}" heightTo="250"/>

			<mx:AddChildAction/>

		</mx:Sequence>
	</mx:Transition>
</mx:transitions>

Além de uma limpeza no código, repare nos mx:RemoveChildAction/ e mx:AddChildAction/ e no targets da Sequence.

Uma outra dica: Se você não for fazer nada no INITIAL_STATE, você não precisa declarar ele, simplesmente coloque em branco.

fabioebner 9 de out. de 2009

Andre perfeito. agora seria pedir mto pra tu me explicar o q tu fez?? hehe
pelo q eu entendi, vc definiu q o sequencia ia pegar todos os meus itens, porem nao entendi direito aquele remove e add la… eu nao teria q ter declarado ele em algum lugaR???

valeu

andre.gil 9 de out. de 2009

Opa, sem problemas, hehehe. Eu ia escrever explicadinho tudo, mas tive que desligar o PC correndo e acabou não saindo muita completa a resposta.

Primeiro eu fiz uma “limpeza” no código. Os pontos importantes são:

Por que usar dois Dissolve dentro do Parallel se você pode colocar a propriedade “targets” com os dois?
Por que ter um Dissolve no final da Sequence que repete o efeito para a imagem se ela vai ser removida no final da transição e já teve o efeito para ela em cima no Parallel? Duplicar o efeito?
Por que setar a “height” do hBoxTop no State se você já fez um Resize dentro do Transition?

Aí depois eu setei os “targets” da Sequence com os componentes que vão receber as transições. E coloquei os mx:RemoveChildAction/ e mx:AddChildAction/.

Se você der uma olhada na documentação, vai ver que eles servem para controlar em qual momento na transição será executado o RemoveChild e o AddChild do State. Sempre olhe a documentação do Flex quando algo não estiver correto, os exemplos são muito bons para tirar essas dúvidas. Nesse caso, na documentação de Transition tem um exemplo certinho que usa o mx:RemoveChildAction/ e o mx:AddChildAction/.

http://livedocs.adobe.com/flex/3/langref/mx/states/Transition.html
http://livedocs.adobe.com/flex/3/langref/mx/effects/RemoveChildAction.html
http://livedocs.adobe.com/flex/3/langref/mx/effects/AddChildAction.html

[]'s

fabioebner 13 de out. de 2009

Andre, nessa pergunta aqui :

[quote]Por que setar a “height” do hBoxTop no State se você já fez um Resize dentro do Transition?

[quote]

eu seitei pq no outro state eu vou precisar trabalhar com ele nesse tamanho o por isso do resize para eu ter a visualizacao dele nesse tamanho, esta certo ou tem alguma outra forma de fazer isso??

valeu

fabioebner 13 de out. de 2009

E oiutra coisa, caso eu tenha nesse meu exemplo, a imagem eu redimensiono ela e mudo o lugar no outro state, e o form eu tbm mudo o lugar e os css, e possivel eu fazer isso ja utilizando as configuracoes do state, ou eu tenho q fazer um efeito para redimensionar a imagem, depois move-la, e o mesmo para o form? ja tem como eu eu utilizar isso do proprio state entendeu??

eu falo q qdo mudar de um pro outro ele faca o efeito de blur apenas, e o de resize e move ele ja fazer automatico?

valeu

andre.gil 13 de out. de 2009

Sobre a pergunta do height, só comentei que você não precisa setar a propriedade no state e também o resize na transição. Da maneira que eu fiz já ficou correta, e não tem as duas coisas.

Sobre a segunda pergunta, não entendi muito bem o que você quer. Mas pelo que entendi, não tem problema algum você setar a propriedade direto no State sem ter que passar pela transição para fazer isso.

[]s

fabioebner 13 de out. de 2009

Entao andre, deixa eu tentar explicar melhor, imagina q eu tenho dois states, o primeiro com um formulario com o css myForm(para cada item dentro desse for eu tenho um css diferente), uma imagem grande, e o topo com 500 de altura, e no outro state eu tenho um topo com 250 de altura, uma imagem menor e em outra posicao, e um formulario menor e com outro css

e possivel eu falar q quero usar efeito para ele ir de um para o outro stato (ja fazendo as animacoes de resize e move ) sem ter q detalhar cada efeito??

no flash antigamenteo eu criava por exemplo uma bola em um quadro e depois de 10 quadros eu colocava uma bola maior e mandava anivar, ele ja criava os quadros intermediarios com a a bola crescendo entendeu?? pq se for possivel eu nao preciso fazer aquele efeito para diminuir o topo , eu coloco no estado 1 ele com 500 de altura e no estado 2 com 250 e ele faz essa transicao automaticamente.

valeu

andre.gil 13 de out. de 2009

Agora entendi, conheço essa opção no Flash. Mas para o que você quer fazer, acho que não teria uma maneira “automatizada” para isso. Se for algo mais simples, como um resize na tela toda e um fade, você até consegue, mas para cada componente automaticamente, não sei se tem como fazer igual é feito no Flash não.

[]s

fabioebner 13 de out. de 2009

Entao.. eu vou te mandar o codigo e tentar te explicar para tu ver como pode me ajudar, :)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:views="br.com.dnasolution.cartoriomaps.views.*" width="100%" height="100%" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" horizontalGap="0" verticalGap="0" currentState="{INICIO_STATE}">
	<mx:states>
	<mx:State name="{INICIO_STATE}"/>
	<mx:State name="{PRINCIPAL_STATE}" basedOn="{INICIO_STATE}">
		<mx:SetProperty target="{hBoxTop}" name="height" value="250"/>
		<mx:SetProperty target="{imagemMapa}" name="y" value="58"/>
		<mx:SetProperty target="{imagemMapa}" name="width" value="248"/>
		<mx:SetProperty target="{imagemMapa}" name="height" value="182"/>
		<mx:SetProperty target="{formitem1}" name="styleName"/>
		<mx:SetProperty target="{formitem2}" name="styleName"/>
		<mx:SetProperty target="{combobox2}" name="styleName"/>
		<mx:SetProperty target="{combobox1}" name="styleName"/>
		<mx:SetProperty target="{formitem3}" name="styleName"/>
		<mx:SetProperty target="{formConsulta2}" name="y" value="58"/>
		<mx:SetProperty target="{checkbox1}" name="styleName"/>
		<mx:SetProperty target="{checkbox2}" name="styleName"/>
		<mx:SetProperty target="{checkbox3}" name="styleName"/>
		<mx:SetProperty target="{checkbox4}" name="styleName"/>
		<mx:SetProperty target="{checkbox5}" name="styleName"/>
		<mx:SetProperty target="{formitem3}" name="direction" value="horizontal"/>
		<mx:SetProperty target="{button1}" name="styleName"/>
		<mx:SetProperty target="{formConsulta2}" name="height" value="182"/>
	</mx:State>
</mx:states>
<mx:Script>
	<![CDATA[
		private static const INICIO_STATE:String = "INICIO_STATE";
		private static const PRINCIPAL_STATE:String = "PRINCIPAL_STATE";
		import mx.controls.Alert;
		public function iniciar(event:Event):void{
			currentState=PRINCIPAL_STATE;
		}
	]]>
</mx:Script>
<mx:Style>
LinkBar {
   borderStyle: none;
   borderColor: #ffffff;
   horizontalGap: 15;
   separatorWidth: 2;
   letterSpacing: 2;
   cornerRadius: 0;
   separatorColor: #ffffff;
   rollOverColor: #ffffff;
   selectionColor: #ffffff;
   color: #ffffff;
   textSelectedColor: #ffffff;
   disabledColor: #ff6600;
   fontFamily: Tahoma;
   fontSize: 14;
}
.myComboBoxInicial {
   cornerRadius: 0;
   highlightAlphas: 0, 0;
   backgroundAlpha: 1;
   useRollOver: true;
   openDuration: 10;
   closeDuration: 10;
   fontSize: 24;
   letterSpacing: 5;
   dropDownStyleName: "myComboBoxDropDowns";
}

.myComboBoxDropDownsInicial {
   cornerRadius: 0;
   borderThickness: 0;
   letterSpacing: 0;
   dropShadowEnabled: false;
   shadowDirection: right;
   shadowDistance: -20;
   dropShadowColor: #000000;
}
.myLabelInicial{
	fontSize: 18;
}
CheckBox {
   color: #ff6600;
   textRollOverColor: #ffffff;
}
.myCheckBoxInicial {
   color: #ff6600;
   textSelectedColor: #ffffff;
   textRollOverColor: #ffffff;
   fontSize: 16;
}
.myButtonInicial {
   cornerRadius: 0;
   textIndent: 0;
   paddingLeft: 5;
   paddingRight: 5;
   paddingTop: 5;
   paddingBottom: 5;
   letterSpacing: 3;
   fontFamily: Tahoma;
   fontSize: 14;
}
</mx:Style>
<mx:transitions>
	<mx:Transition fromState="{INICIO_STATE}" toState="{PRINCIPAL_STATE}">
		<mx:Sequence targets="{[formConsulta2, imagemMapa, hBoxTop, imagemMapa]}">

			<mx:Parallel targets="{[formConsulta2, imagemMapa]}">
				<mx:Dissolve duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
			</mx:Parallel>

			<mx:RemoveChildAction/>
			
			<mx:Resize target="{hBoxTop}" heightTo="250"/>

			<mx:AddChildAction/>
			
		</mx:Sequence>
	</mx:Transition>
</mx:transitions>
	<mx:HBox width="100%" height="500" backgroundColor="#336699" id="hBoxTop" horizontalGap="2" horizontalAlign="center">
		<mx:Canvas width="1005" height="100%" backgroundColor="#336699" id="canvas1">
			<mx:Image x="10" y="137" width="346" height="353" id="imagemMapa">
				<mx:source>br/com/dnasolution/cartoriomaps/imagens/mapa_brasil.gif</mx:source>
			</mx:Image>
			<mx:Form x="364" y="137" width="631" height="353" horizontalGap="0" verticalGap="7" paddingTop="5" paddingLeft="5"  id="formConsulta2">
				<mx:FormItem label="Estado :" color="#F7FCFD" width="100%" styleName="myLabelInicial" id="formitem1" required="true">
					<mx:ComboBox width="100%" styleName="myComboBoxInicial" id="combobox2"></mx:ComboBox>
				</mx:FormItem>
				<mx:FormItem label="Cidade: " width="100%" color="#F5F9FA" verticalGap="2" styleName="myLabelInicial" id="formitem2" required="true">
				<mx:ComboBox width="100%" styleName="myComboBoxInicial" id="combobox1"></mx:ComboBox>
				</mx:FormItem>
				<mx:FormItem label="Natureza: " id="formitem3" direction="vertical" styleName="myLabelInicial" color="#F6FCFD" width="100%"> 
					<mx:CheckBox label="Imovel" styleName="myCheckBoxInicial" id="checkbox1"/>
					<mx:CheckBox label="Notas" styleName="myCheckBoxInicial" id="checkbox2"/>
					<mx:CheckBox label="Civil" styleName="myCheckBoxInicial" id="checkbox3"/>
					<mx:CheckBox label="Protesto" styleName="myCheckBoxInicial" id="checkbox4"/>
					<mx:CheckBox label="Maritimo" styleName="myCheckBoxInicial" id="checkbox5"/>
					<mx:CheckBox label="Titulos e Documentos" styleName="myCheckBoxInicial" id="checkbox6"/>
				</mx:FormItem>
					<mx:FormItem direction="horizontal"   width="100%">
						<mx:Button label="Buscar Cartorios" cornerRadius="0" width="222" click="iniciar(event)" styleName="myButtonInicial" id="button1"/>
					</mx:FormItem>

			</mx:Form>
		</mx:Canvas>
	</mx:HBox>
	<mx:HBox width="100%" height="100%" backgroundColor="#FFFFFF" id="hBoxButton" horizontalGap="2" horizontalAlign="center">
		<mx:Canvas width="1005" height="100%" backgroundColor="#FFFFFF" id="canvas2" >
		</mx:Canvas>
	</mx:HBox>

</mx:Application>

abstrai a parte de separa o css q vou fazer isso depois, eu tentei fazer igual vc falou :

<mx:transitions>
	<mx:Transition fromState="{INICIO_STATE}" toState="{PRINCIPAL_STATE}">
		<mx:Sequence targets="{[formConsulta2, imagemMapa, hBoxTop, imagemMapa]}">

			<mx:Parallel targets="{[formConsulta2, imagemMapa]}">
				<mx:Dissolve duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
			</mx:Parallel>

			<mx:RemoveChildAction/>
			
			<mx:Resize target="{hBoxTop}" heightTo="250"/>
                        <mx:SetPropertyAction/>
			<mx:AddChildAction/>
			
		</mx:Sequence>
	</mx:Transition>
</mx:transitions>

adicionei ali no codigo o porem ele nao primeiro faz o redimensionamento e depois aplica os efeitos :/ e no state PRINCIPAL_STATE eu faco aquele redimensionamento do topo pois eu vou querer criar minha tela, essas coisas naquela tamanho, por isso nao posso so usar o efeito, pq visualmente nao vou ter a imagem do tamanho certo para trabalhar entendeu

andre.gil 14 de out. de 2009

Fabio,

Da maneira que foi feita, ele vai primeiro fazer os RemoveChild que estão declarados no State, depois fazer o Resize com o efeito da transição, depois setar as propriedades com SetProperty que foram declaradas no State e, por último, adicionar os novos filhos que foram declarados no State.

Não entendi direito ainda por que você está setando o height e fazendo o efeito de Resize, mas de qualquer maneira, as coisas devem estar sendo feitas na ordem que te falei. As actions q vc declara na transição são apenas “gatilhos” para o que você declara no state.

[]s

fabioebner 14 de out. de 2009

Andre eu estou setando pq no state{PRINCIPAL_STATE} eu preciso dele VISUALMENTE em tamanho 250, por isso faco o resize visual no state, senao ele vai fazer programaticamente, mas para eu desenhar a tela nao vou ter ele do tamanho q eu quero entendeu?

Criado 9 de outubro de 2009

Ultima resposta 14 de out. de 2009

Respostas 12

Participantes 3

12 Respostas

Topicos relacionados