Firemonkey: substituição da tecla TAB por tecla ENTER.

Antes de tudo, gostaria de deixar claro que esta é uma dica básica; porém alguns encontram dificuldades nesse assunto, então estou aqui com o intuito de esclarecimento.
Ultimamente tenho visto algumas dicas na internet de substituição da tecla tab pela tecla enter, porém muitas dicas
não funcionam perfeitamente, pulando muitas vezes dos “tedit” para o próximo componente, mas ainda há a possibilidade de o caso ser um botão
e ter um comando no evento “onclick”, o comando no “onclick” não ser executado.
Pois bem, tenho uma dica aqui que vai funcionar perfeitamente, em ambos aspectos: tanto no salto nos controls, como
sem perder os eventos onclick dos botões.

No Evento OnKeyDown do Form digite os comandos abaixo:

if Key = vkReturn then
 begin
 Key := vkTab;
 KeyDown(Key, KeyChar, Shift);
 end;

Dica básica mas muito útil, espero que tenham gostado!

Utilizando TImage3D e TText3D – FireMonkey

Neste artigo aprenderemos a usar os componentes “TImage3D” e “TText3D” do Firemonkey.

Hoje vamos realizar efeitos de animação com os componentes TImage3D e TText3D da biblioteca “FireMonkey”, onde viabiliza aos desenvolvedores a rápida construção de aplicações em HD e 3D, com desempenho nativo, animações, efeitos de imagem, conectividade à banco de dados de primeira linha. Hoje, os desenvolvedores FireMonkey podem desenvolver aplicações com facilidade, compilando-as de modo nativo nas plataformas Windows 32/64 e iOS, e num futuro breve, para Linux e Android, o FireMonkey está apenas a versão 1.0, com muitas correções e atualizações por vir. Vamos ao nosso projeto: crie uma aplicação FireMonkey 3D Application, e prossiga incluindo os seguintes componentes: um TImage3D, um TText3D, um TLayer3D dentro do Layer3D inclua dois TTrackBar e dois TLabel conforme imagem abaixo :

Figura 1. Layout do Projeto.

 Ainda precisamos adicionar componentes não visuais em nosso projeto, estes são componentes necessários para o desenvolvimento da animação,  dentro do componente Image3D1 inclua 2 TFloatAnimation, como resultado teremos duas animações na imagem, além destas inclua também mais um TFloatAnimation dentro do componente Text3D1 conforme a estrutura do projeto, observada na imagem abaixo:

Figura 2. Estrutura do Projeto.

Lembrando que em um aplicativo 3D, é impossível usar diretamente componentes como botões TLabel, TTrackBar, combobox, grid, etc… No entanto, há uma maneira muito simples para lidar com isso, o próprio FireMonkey nos fornece o componente “TLayer3D”.

Alterando propriedades dos componentes:

Propriedades Image3D1

• Bitmap.edit = escolha uma imagem

Propriedades FloatAnimation1

• Duration = 5
• Enable = True
• Interpolation = itLinear
• Loop = True
• PropertyName = RotationAngle.X
• StartValue = 0
• StopValue = 360

Propriedades FloatAnimation2

• Duration = 5
• Enable = True
• Interpolation = itQuintic
• Loop = True
• PropertyName = Position.X
• StartValue = 0
• StopValue = 66

Propriedades Text3D1

• Text = Firemonkey
• Font.Size = 2
• Material.Emissive = escolha uma cor
• as dimensões de altura , largura e profundidade fica a sua escolha alterando no próprio componente

Propriedades TFloatAnimation3

• Duration = 11
• Enable = True
• Interpolation = itLinear
• Loop = True
• PropertyName = RotationAngle.Y
• StartValue = 0
• StopValue = 360

Propriedades Layer3D1

• Projection = pjScreen

Propriedades TrackBar1

• Max = 10
• Min = -10

Propriedades TrackBar2

• Max = 22
• Min = 1

Após realizadas as alterações, vamos aos códigos nos eventos OnChange, dos componentes Trackbar, para termos noção através de um exemplo de controle dos componentes durante as animações.

Listagem 1: Alterando o evento OnChange do componente TrackBar1

procedure TForm1.TrackBar1Change(Sender: TObject);
begin
Image3D1.Position.Z := 0 - TrackBar1.Value;  //altera o tamanho Image3D1
end;

Listagem 2: Alterando o evento OnChange do componente TrackBar2

procedure TForm1.TrackBar2Change(Sender: TObject);
begin
FloatAnimation3.Stop;
FloatAnimation3.Duration := 22 - TrackBar2.Value;  //alterando a velocidade Text3D1
FloatAnimation3.Start;
end;

Este exemplo poderia ser realizado em projeto FireMonkey HD, da mesma maneira apresentado, seria necessário apenas incluir o componente TViewPort3D no projeto HD. Altere as propriedades dos componentes TFloatAnimation aqui configurados para ver as reações diversas da animação, tendo assim maiores opções para estudos e resultados. Espero que tenham gostado, segue o códigos fonte para facilitar o trabalho e pesquisa de vocês.

Muito obrigado. Fico por aqui, e espero por vocês na próxima! Grande abraço.

Código Fonte

Utilizando TLight – FireMonkey

Neste artigo aprenderemos a usar os componentes “TLight” e “TCube” do Firemonkey.

Hoje iremos realizar um efeito de iluminação com o componente TLight da biblioteca “FireMonkey”, que suporta a criação de aplicativos facilmente e intuitivamente como temos visto no Delphi por anos. O FMX também é ideal para rápido desenvolvimento de software, com elementos tridimensionais. Apenas inserindo um objeto geométrico “TCube”, alterando suas propriedades com o cursor do mouse, somos capazes de gerar bons efeitos facilmente.

Quando nos referimos a algum objeto em 3D, logo associamos a altura, largura e comprimento como parte do mesmo. O FMX possui dois tipos de projetos: o “FireMonkey 3D Application” e também o “FireMonkey HD Application”; os dois tipos de projetos dão-nos a possibilidade de trabalhar em 3D, sendo que os Forms do “FireMonkey 3D Application” já vem apto para cenas tridimensionais, e nos projetos “FireMonkey HD Application” é necessário adicionar um componente chamado “TViewport3D”. Vou mostrar a estrutura dos dois tipos de projetos 3D e HD mais vamos criar um novo HD e inclua os seguintes componentes um TViewport3D e dentro dele um TCube um TLight e um TFloatAnimation dentro do TCube conforme estrutura abaixo:

Figura 1. Estrutura dos projetos

Alterando propriedades dos componentes:

Propriedades Cube1

• Material.Emissive = cor desejada
• Material.Texture.Bitmap.edit = pode-se incluir uma imagem
• As dimensões, rotação, angulo etc… pode-se fazer com mouse, clicando e movimentando os pinos azuis do componente.

Propriedades Light1

• LightType = ItDirectional tem mais dois outros tipos ItSpot e ItPoint

Propriedades FloatAnimation1

• Duration = 4
• Enabled = True
• Loop = True
• PropertyName = RotationAngle.Y com varias outras opções vale a pena testar.
• StarValue = 0
• StopValue = 360

Depois de realizado o processo, teremos um resultado como este:

Figura 2. Posição dos Componentes

Agora, vamos fazer uma suposição, incluiremos um botão no Form e habilitaremos essa animação somente quando a opção for selecionada através do botão. Em um projeto HD você teria sucesso. Porém em um projeto 3D, não é possível a inclusão um botão diretamente no Form 3D. Segue detalhes na observação abaixo.

Observação Importante: em um aplicativo 3D é impossível usar diretamente componentes como botões, combobox, grid, etc… No entanto, há uma maneira muito simples para lidar com isso. Para isso teremos uma ligação entre as cenas 3D e 2D. O FireMonkey nos fornece o componente “TLayer3D”, que foi projetado apenas para isso.

Para não estender muito o artigo, segue no código fonte projeto HD e 3D, facilitando o entendimento de como usar o componente TLayer3D.

Espero que tenham gostado, e que os códigos e dicas tenham facilitado o trabalho e estudo de vocês.

Muito obrigado. Fico por aqui, e espero por vocês na próxima! Grande abraço.

CÓDIGO FONTE

Firemonkey – Movimentando Objetos com FloatAnimation

Neste artigo aprenderemos a dar movimento a objetos, fazendo animação com o componente TFloatAnimation.

Neste artigo vamos usar o componente TFloatAnimation propondo a criação de um efeito de movimento em Firemonkey. Lembrando que, na maioria dos efeitos  de animação o componente TFloatAnimation é necessario, compreendendo as propriedades do mesmo somos capazes de fazer qualquer tipo de efeitos de animações.  Vou tentar mostrar um exemplo simples em tempo de design e ser bem objetivo. Então vamos nessa!

Crie o projeto “Firemonkey HD Application” e então, inclua os componentes TButton, e um TCircle e posicione os componentes conforme mostra figura abaixo.  Dentro do componente TCircle inclua dois componentes TFloatAnimation, e troque o nome do componente FloatAnimation1 para FloatAnimationx e, FloatAnimation2  para FloatAnimationy. Ainda dentro do TCircle, inclua um componente TImage e na propriedade Bitmap.Edit… inclua imagem de uma bola conforme a imagem abaixo.

Figura 1. Layout e componentes do projeto.

No curso de física que conhecemos, os objetos raramente se movem uniformemente, até mesmo pelas influencias das forças naturais. No caso de uma bola  temos também a gravidade que influencia em seu movimento e trajetória, por isso vamos trabalhar com coordenadas eixo-X e coordenadas eixo-Y. Precisamos  entender tambem “Interpolation”, Interpolation e uma propriedade do componente TFloatAnimation que indica qual o movimento o objeto vai fazer.

Figura 2. Eixo X e Y.

A propriedade Interpolation tem vários gêneros de efeitos que se movimentam.  Podemos citar como outras propriedades importantes o StartValue e StopValue,  onde o próprio nome já descreve sua serventia. Confiram abaixo a imagem das propriedades a serem alteradas do componente FloatAnimationX e FloatAnimationY.

Alterando as propriedades do componente FloatAnimationx:

• Enable = False
• Duration = 4
• Interpolation = itLinear
• PropertyName = Position.X
• StartValue = 24
• StopValue = 800

Alterando as propriedades do componente FloatAnimationy:

• AutoReverse = True // Anima para trás após a animação para a frente.
• Duration = 2           // Tempo em segundos\Velocidade
• Enabled = False      // habilitar movimento
• Interpolation = itQuadratic // Tipo de movimento
• Inverse = True  // inverte coordenadas
• Loop = True  // Repete a animação indefinidamente.
• PropertyName = Position.Y  //Nome da propriedade para animar
• StartValue = 24  //coordenadas para iniciar
• StopValue = 424 //coordenadas para parar

Figura 3. Propriedades a serem alteradas.

Listagem 1. Agora só precisamos habilitar a animação no evento OnClick do Button1:

procedure TForm1.Button1Click(Sender: TObject);
begin
  FloatAnimationx.Enabled := True;
  FloatAnimationy.Enabled := True;
end;

Apenas execute o projeto, e verá o resultado desejado. Observe que depois de terminar o efeito do eixo-X, o efeito do eixo-Y continua a ser executado. Isso pelas  propriedades AutoReverse = True e a propriedade Loop = True. Depois de executar o projeto estude um pouco as propriedades, você pode trocar as propriedade  StopValue dos componentes FloatAnimation, troque também a propriedade Interpolation do componente FloatAnimationy para itElastic veja como comporta-se a  animação. Para maiores informações consulte documentação oficial da Embarcadero: http://docwiki.embarcadero.com/RADStudio/XE2/en/Using_FireMonkey_Animation_Effects

Espero que tenham gostado, segue o código fonte para facilitar o trabalho de vocês.

Muito obrigado. Fico por aqui, e espero por vocês na próxima! Grande abraço.

BloodTransitionEffect e ReflectionEffect – Firemonkey no Delphi

Neste artigo aprenderemos a usar dois componentes de efeitos que são: BloodTransitionEffect e o ReflectionEffect do Firemonkey.

Firemonkey é uma plataforma para desenvolvimento de aplicativos visualmente atraentes usando os recursos do processador gráfico. Usando essa plataforma, você pode desenvolver aplicativos para Mac OS X, Win32, Win64 e iOS. Além disso, é importante dizer que Firemonkey é não compatível com VCL (biblioteca componente Visual). Se você começar a desenvolver seu aplicativo com a VCL, você não poderá usar componentes de Firemonkey (FMX) e vice-versa.

No total existem mais de 50 efeitos visuais no Firemonkey que são divididos em várias categorias, como exemplo podemos citar: alteração de contraste, efeito de desfoque, desenvolver uma suave transição de uma imagem para outra, efeito de iluminação, efeito 3D, rotação,  entre outros. Hoje iremos trabalhar com 2 componentes do Firemonkey que são eles TReflectionEffect e o BloodTransitionEffect.

Crie o projeto “Firemonkey HD Application” e então, inclua o componente TText e um TReflectionEffect.

Alterando propriedades do TText:

Text digite Firemonkey

Font.Size 30

Font.Style.fsBold para True

Alterando eventos do TText:

Listagem 1. No evento MouseEnter digite o codigo abaixo:

procedure TForm1.Text1MouseEnter(Sender: TObject);
begin
  ReflectionEffect1.AnimateFloat('Length', 0.7, 0.5);
end;

Listagem 2. No evento MouseLeave digite o codigo abaixo:

procedure TForm1.Text1MouseLeave(Sender: TObject);
begin
  ReflectionEffect1.AnimateFloat('Length', 0.3, 0.5);
end;

Para continuarmos, execute o projeto e passe o cursor do mouse sobre o Text e veja o resultado.

Talvez alguns de vocês não tenham sucesso na execução, não tendo o resultado esperado. Confira então a observação abaixo, e então entenderá a razão disso acontecer.

Observação Importante:

Lembre-se, que cada componente Firemonkey é recipiente para outros componentes, você pode colocar um TImage dentro do componente TButton e irá tornar-se pai do componente TImage.

Observe na imagem abaixo a janela de Estrutura (Structure) o nó do Image1 (TImage) pertence ao nó pai que é o Button1(TButton), se clicarmos no botão que está no formulário e arrastarmos ele para outra posição, a imagem irá junto, isso ocorre porque agora o Image1 está  dentro do Button1.

Figura 1. Observação Importante

Então para que nosso projeto funcione corretamente, o componente ReflectionEffect1 (filho) deve estar dentro do componente Text1 (pai), conforme a imagem da estrutura(Structure) mostra-nos abaixo:

Figura 2.Estrutura coreta

Agora, vamos ver como funciona um efeito de transição de imagens com componente BloodTransitionEffect, para isso adicione um componente Timage primeiramente, e vamos configurar as propriedades do mesmo.

Alterando propriedades do TImage:

Bitmap.edit escolha uma imagem qualquer

Bitmap Create New TBitmapAnimation com esta opção executada é criado um componente BitmapAnimation1.

Alterando propriedades do BitmapAnimation1.

StartValue.edit Escolha uma imagem qualquer.

StopValue.edit Escolha uma imagem qualquer.

Trigger IsMouseOver=true

Trigger Inverse IsMouseOver=true

Observe as propriedades do BitmapAnimation1 na imagem abaixo:

Figura 3. Propriedades BitmapAnimation1

Se executarmos o projeto com todo o procedimento que aprendemos, ao passar o mouse sobre a imagem já conseguiremos ter um efeito de transição de imagem. Caso queira algo mais aperfeiçoado, podemos fazer uma animação nessa transição, tudo o que temos que fazer é incluir o componente  BloodTransitionEffect no formulário, lembrando que o BloodTransitionEffect (filho) deve estar dentro do componente Timage(Pai) conforme o modelo abaixo:

Figura 4. Estrutura final do Projeto.

Temos só que implementar dois eventos do componente Timage.

Alterando eventos do TImage.

Listagem 3. No evento MouseEnter digite o código abaixo:

procedure TForm1.Image1MouseEnter(Sender: TObject);
begin
if BloodTransitionEffect1.Enabled = False then
BloodTransitionEffect1.Enabled := True;
BloodTransitionEffect1.AnimateFloat(‘Progress’, 100, 0.8);
end;

Listagem 4. No evento MouseLeave digite o código abaixo:

procedure TForm1.Image1MouseLeave(Sender: TObject);
begin
BloodTransitionEffect1.AnimateFloat(‘Progress’, 0, 0.8);
end;

E com sucesso, teremos um projeto como mostra a imagem abaixo:

Figura 4. Resultado Final.

Temos vários outros efeitos na paleta Effects além do BloodTransitionEffect, e que em breve, possamos usá-los através de mais artigos que pretendo postar.

Espero que tenham gostado afinal o efeito é muito bonito e não tão complexo de realizar.

Abraços. Fico por aqui, e até a próxima!

Desenvolvendo para iOS com FireMonkey e Delphi XE2

Um utilitário para ajudar a converter Código da VCL em aplicativos Firemonkey

 

http://www.innovasolutions.com.au/delphistuf/ADUGVCLtoFMXConv.htm