28 May 2008

Simple Flex Effects Example

Open Flex Builder and go to File > New Project > Flex Project and name your project as MyEffects. In Design view take new Panel to the stage, set ID - mPanel , title – My Effects, Horizontal align – center, Vertical align – middle. Now inside this new panel, drag Image component. Set ID – mImage, scale content – true. Move to Category View for Image component, within Style choose center horizontalAlign and middle verticalAlign. Create assets folder inside your project, insert any image and for Image component, set Source for that image.

OK, we created our playground and we can open our box with toys. Let’s try Zoom effect first. Just below Application tag, insert Zoom tag like this:

< id="over" duration="100" zoomheightto="1.3" zoomwidthto="1.3">

Everything is simple here, but you also have to add another property inside Image tag:

rollOverEffect="{over}"

In this way we have made connection between two tags Image and Zoom with over ID. In the same way you can add rollOutEffect or any other like this:

< id="”out”" duration="200" zoomheightto="1" zoomwidthto="1"> and
rollOutEffect="{out}" as Image tag property.

You may notice different duration properties, which means, as you expected, that rollOut will last twice longer than rollOver. Insert another tag, Blur tag for mouseDownEffect:

< id="down" duration="1000">

In order to apply more than one effect on one action we need to use Parallel tag. If we put Zoom and Blur tags between Parallel tag, give new tag id – over while deleting Zoom and Blur id property. Something like this:

< id="over">
< duration="100" zoomheightto="1.3" zoomwidthto="1.3">
< duration="1000">
< /mx:Parallel >

Don’t forget also to delete mouseDown property or you will get an error. You can combine several effects for same action. It’s up to you to decide when is enough. You can choose between AnimateProperty, Blur, Dissolve, Fade, Glow, Iris, Move, Pause, Resize, Rotate, SoundEffect, Wipe, Zoom.




download source

p.s. this is post number 100!

.

update: since this Flex example still gets lot of attention here is the source:



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="422" width="481">

<mx:Parallel id="over">
<mx:Zoom duration="100" zoomHeightTo="1.3" zoomWidthTo="1.3"/>
<mx:Blur duration="1000"/>
</mx:Parallel>
<mx:Rotate id="down" angleFrom="0" angleTo="360" duration="500"/>
<mx:Zoom id="out" duration="200" zoomHeightTo="1" zoomWidthTo="1"/>
<mx:Panel x="10" y="10" width="458" height="400" layout="absolute" title="My Effects" id="mPanel" horizontalAlign="left" verticalAlign="top">
<mx:Image id="mImage" scaleContent="true" horizontalAlign="center" verticalAlign="middle" source="frost.jpg" width="332" height="240" rollOutEffect="{out}" rollOverEffect="{over}" mouseDownEffect="down" horizontalCenter="0" verticalCenter="-7"/>
</mx:Panel>

</mx:Application>


*_*

25 May 2008

It’s all about votes

pools image In last 30 days I have asked you few questions via Polls in order to know you better. I hope that this can help me write more about stuff most interested to majority of my readers because this blog covers wide area of interests mainly inside Flash Platform.

What have I learned?

Almost all of Flanture readers who voted on first Poll are first time comers. Now, I can’t say I don’t have returned visitors because number of RSS subscribers on this blog grows every new month, but I do have full feed that’s true. I have learned that most of the traffic comes from search engines and from Adobe feeds also, but only on days with new posts. Bigger presence in social networks required.

I have also find out that Flanture blog navigation is ‘bad’ for 33% of visitors and ‘can be better’ for 66% of them, but also that blog template is important, but after content.

Finally and most important question I asked was: ‘What do you want to read on Flanture?’ and results are:

Flash Tutorials 36%
Flex Tutorials 27%
Flashlite 9%
General programming 9%
Web Development 9%
All above 9%

This clearly shows that two out of three Flanture readers wants to read more Flash / Flex Tutorials and this is just about right direction for this blog, but that doesn’t mean that other subjects will be totally forgotten. Polls are going to continue, so please feel free to participate and in some sense decide about Flanture content. Thanks.

20 May 2008

Catchy title about Astro

adobe flash player 10 Astro Off course I’m gonna write about Astro! It’s a big news, everyone writes about it, so why should I be exception? Astro is code name for next version of Adobe Flash Player 10. While still in beta, meaning not much support, new features are known and explained on Labs .

While others are in agony for new info about FP10, some are already way ahead, testing and writing tutorials, like senocular on drawing API.

Non-developers don’t need to do anything yet, since beta is just that – beta, but they do need to prepare themselves for totally new experience FP10 enhancements are bringing. If you are still eager to try FP10, you will need to first uninstall previous FP versions and don’t expect many demos just yet.

Download Flash Player 10

.

15 May 2008

Flex components styling

Flex applications are known by their default theme. Changing default colors and fonts of Flex applications is called styling. Everything you can do with HTML, you can do also with Flex, because main responsibility for styling is on CSS (Cascading Style Sheets). You can create your CSS file directly typing code in your MXML file using Style tag or using external CSS file.

In Flex Builder, best practice is to create ‘assets’ folder within your project and create new CSS file, let’s say ‘mystyle.css’. Then you make reference line to include that file with Style tag, source property:


source="/assets/mystyle.css"


If you want easier way for styling your components, try Flex Style Explorer . This free online tool will help you achieve visually awesome results in no time. When you are finished playing, copy CSS code and paste it in previously created mystyle.css file. You can even run the Flex Style Explorer inside of Flex Builder or download SWF and run it from desktop. Great!

Now let’s take a look at example simple navigation . We have ViewStack and LinkBar components. Using Flex Style Explorer I altered LinkBar appearance, which is also possible for every Flex component.


styling flex component LinkBar


Here is CSS code:

/* CSS file */
LinkBar {
borderStyle: outset;
borderColor: #999999;
horizontalGap: 12;
separatorWidth: 2;
letterSpacing: 1;
cornerRadius: 0;
backgroundAlpha: 1;
backgroundColor: #0099cc;
separatorColor: #333333;
rollOverColor: #006699;
textRollOverColor: #cccccc;
textSelectedColor: #ffffff;
disabledColor: #ffffff;
fontSize: 10;
fontWeight: bold;
dropShadowEnabled: true;
shadowDistance: 4;
shadowDirection: right;
}

download style

.

11 May 2008

Flex example: simple navigation

Coding in Flex is possible in different ways, which depends on habits and personal style. Someone likes pure code, simple text editors and messing with compiler, while others are much happier with heavy IDEs. Flex Builder has more to offer with both styles, source coding and design approach.

Next example shows how to create simple navigation with just few lines of code. We use natural combination of two tags ViewStack and LinkBar. ViewStack has four Canvas tags and every one of them includes one Text field. Just to make difference between Canvases text fields have labels Home, Portfolio, About and Contact.

Connection between ViewStack and LinkBar is made with properties. ViewStack has id property with value “myViewStack” and LinkBar property dataProvider with same value. Grab source code below.




Download source.

* * * * * *

From yesterday, Flanture is part of Flash Bookmarks, excellent Flash directory.

05 May 2008

AIR for JS developers free ebook

Adobe AIR free ebook coverFirst of all if you didn’t noticed now is the right time to start with Adobe AIR, when 1.0 is out and stable and you have one more reason for this if you are JavaScript developer. That reason is Air for JavaScript developers pocket guide free ebook which you can buy in paper or download for free in PDF file format. The book is published under Creative Commons 3.0 license, meaning you can copy, distribute, transmit and adapt the work. Book has 204 pages packed with general introduction writings about AIR, but also has mini-cookbook inside which covers topics from Windowing and File API to Embedded Database and Networking.

On right sidebar I have asked you another poll question: What do you want to read about on Flanture. Feel free to give your answer and contribute. This is 4th poll in this series and many more will come. If you feel like writing for Flanture and you find yourself in some aspect of Flash Platform, submit your article and I will publish it as guest blogger’s post. Your writings must be unique and exclusive for this blog.

Flanture also feels quite happy about new Blogger’s feature - scheduled posting. It is one of those things when you say something like: This is invented just now? It’s better now than never.

 

template by blogger templates