Esato

Forum > Sony Ericsson / Sony > Software, Firmware and Drivers > How to make auto-rotate function in Flash Lite 2.0 (K850i)

Author How to make auto-rotate function in Flash Lite 2.0 (K850i)
LCARS-Expert
K850 Green
Joined: Aug 24, 2007
Posts: 194
From: Croatia
PM, WWW
Posted: 2007-12-11 19:21
Reply with quoteEdit/Delete This PostPrint this post
Here I'll try to explain how to make your Flash animation do the auto rotate function with a very simple script.
You can then use this script in any way you wish.

Creating a K850i compatible Flash document
To begin start your Adobe/Macromedia Flash and press CTRL+N to create a new document. Pick "Flash file (ActionScript 2.0)" and press OK.
Set size to 240x320, background is your pick (I'll use black for this tutorial) and set frame rate to acceptable value (I mostly use 25).
After that (this is very important) click on Settings button and set Version to Flash Lite 2.0.

The tutorial
For this tutorial I'll make a flash file with 1 image in 2 sizes:

And they'll change depending on the phone rotation.
You can use your own images (240x320 for portrait and 320x240 for landscape mode)

Scripting
First thing are the scripts. In the first layer add 3 more frames all keyframes (now ou should have 1 layer with 4 keyframes).
Scripts go like this:

Frame 1:
fscommand2("ExtendBacklightDuration");
fscommand2("FullScreen");

loadVariables("accelerometer://data", _root);
if ((accX > 800) && (accY < 400)) {
gotoAndPlay(3);
}


Frame 2:
gotoAndPlay(1);

Frame 3:
fscommand2("ExtendBacklightDuration");
fscommand2("FullScreen");

loadVariables("accelerometer://data", _root);
if ((accX < 400) && (accY > 800)) {
gotoAndPlay(1);
}


Frame 4:
gotoAndPlay(3);

Elaborating the script
fscommand2 does exactly what it says – Extends Backlight Duration, which makes max light stay a little longer and sets the animation to full screen which is not really required but you never know.
loadVariables("accelerometer://data", _root); - It loads variables from Accelerometer. These are accX, accY, and accZ and they represent gravitational force applied to them (which makes maximum of 990 when phone is static).
if ((accX > 800) && (accY < 400)) {
gotoAndPlay(3);
}

This script does the auto rotate, if your phone is placed exactly landscape the accX is 990 and accY is 0 which agrees with the condition above and the script sends the animation to frame 3.
Frame 2 has the script that does the loop; it sends the animation back to frame 1.
Frame 3 has the script that is very similar to the one in frame 1 but the difference is in numbers which changed the place. When phone is placed exactly portrait the accX is 0 and accY is 990.
Frame 4 has the script that does the same thing as the script in Frame 2, it loops.
Why the loop? – Every time the animation is sent back the script works again and it reads new accelerometer data, if there was no loop the animation would read accelerometer data only once – when you start the animation and the rotation would never happen.

Adding images
Now create a 2nd layer. Make keyframes on frame 1 and 3. Your timeline should look like this now:

Now all you have to do is add images. Put portrait image on the 2nd layer you created in Frame 1, make sure it's coordinates are X: 0.0 and Y: 0.0.
Go to the Frame 3 of the same layer and put the landscape image on it, while its selected press CTRL + SHIFT + 9 (that will rotate the image 90° CW), now set it's coordinates X: 0.0 and Y: 0.0.
That’s it! Now it's time to test the animation. Press CTRL + ALT + SHIFT + S (or click File, Export >, Export movie…) and click save (make sure SWF was set as the file type).
Completed FLA (source) file:
Link
Exported SWF file:
Link

Please post your works here.

[ This Message was edited by: LCARS-Expert on 2007-12-31 16:27 ]
adamnguyen
C905 Black
Joined: Apr 25, 2004
Posts: 22
PM
Posted: 2007-12-12 07:39
Reply with quoteEdit/Delete This PostPrint this post
Nicely done! This thread is as useful as the one discussing accelerometer and flashlite.
NightBlade
Sony Xperia T
Joined: Jul 29, 2007
Posts: > 500
From: Nessebar, Bulgaria
PM
Posted: 2007-12-12 16:56
Reply with quoteEdit/Delete This PostPrint this post
Thank you. Once I learn how to use Flash, it'll be really fun!
zaxan
C510 Black
Joined: Jun 01, 2007
Posts: 417
From: United Kingdom
PM
Posted: 2007-12-12 17:38
Reply with quoteEdit/Delete This PostPrint this post

On 2007-12-12 16:56:25, NightBlade wrote:
Thank you. Once I learn how to use Flash, it'll be really fun!


Sure you'll find it easy once you get some practice in Flash, and if not there are many free tutorials all over the internet anyway - including this one

@LCARS - Nice tutorial, really makes the actionscript seem simple now

EDIT - I've got Flash 8 and the highest option I get for flash lite is 1.1, is flash lite 2.0 only is CS3?

[ This Message was edited by: zaxan on 2007-12-12 16:39 ]
LCARS-Expert
K850 Green
Joined: Aug 24, 2007
Posts: 194
From: Croatia
PM, WWW
Posted: 2007-12-12 17:46
Reply with quoteEdit/Delete This PostPrint this post
It appears so, do you have Flash 8 Professional or Lite? I suggest you go to CS3, I find it much better!
zaxan
C510 Black
Joined: Jun 01, 2007
Posts: 417
From: United Kingdom
PM
Posted: 2007-12-12 17:59
Reply with quoteEdit/Delete This PostPrint this post
I think it's pro but I'll go to CS3 anyway - been meaning to upgrade for a while now.
LCARS-Expert
K850 Green
Joined: Aug 24, 2007
Posts: 194
From: Croatia
PM, WWW
Posted: 2007-12-12 20:03
Reply with quoteEdit/Delete This PostPrint this post
Here is my first animation that uses auto-rotate:
LCARS Screensaver
I worked on it for a while, only auto-rotate script was missing. It is fully animated, like a real LCARS and it matches my web site.
There are 4 modes:
Blue Portrait (when phone is portrait and battery is >10%)
Blue Landscape (when phone is landscape and battery is >10%)
Red Portrait (when phone is portrait and battery is<10%)
Red Landscape (when phone is landscape and battery is <10%)
Screenshots:

Features:
Signal strength meter (represented by a bar), battery meter (also represented by a bar), low battery warning, clock (HH:MM:SS), animations (low-range scan, particle sensor activity - similar to equaliser effect, interface activity, red alert animation), and interface auto rotate (as mentioned above).
Post any questions, comments, and/or error reports you may have.

Edit: I made a video of it in action on my K850i for those who don't have K850i and want to check it out: Link.

[ This Message was edited by: LCARS-Expert on 2007-12-13 17:30 ]
zaxan
C510 Black
Joined: Jun 01, 2007
Posts: 417
From: United Kingdom
PM
Posted: 2007-12-12 20:09
Reply with quoteEdit/Delete This PostPrint this post
Umm, seems like a dead link :S
LCARS-Expert
K850 Green
Joined: Aug 24, 2007
Posts: 194
From: Croatia
PM, WWW
Posted: 2007-12-12 20:11
Reply with quoteEdit/Delete This PostPrint this post
Actually, its not working yet... Takes long for it to start functioning.
Ah! It works now (Use Right click -> Save target as...)

[ This Message was edited by: LCARS-Expert on 2007-12-12 19:12 ]
zaxan
C510 Black
Joined: Jun 01, 2007
Posts: 417
From: United Kingdom
PM
Posted: 2007-12-12 20:20
Reply with quoteEdit/Delete This PostPrint this post
Yep, works now. Looks good - nice design
NightBlade
Sony Xperia T
Joined: Jul 29, 2007
Posts: > 500
From: Nessebar, Bulgaria
PM
Posted: 2007-12-12 20:32
Reply with quoteEdit/Delete This PostPrint this post

On 2007-12-12 17:38:17, zaxan wrote:

On 2007-12-12 16:56:25, NightBlade wrote:
Thank you. Once I learn how to use Flash, it'll be really fun!


Sure you'll find it easy once you get some practice in Flash, and if not there are many free tutorials all over the internet anyway - including this one

For now, I can make banners!
I just hope it's as easy to learn as Photoshop...
zaxan
C510 Black
Joined: Jun 01, 2007
Posts: 417
From: United Kingdom
PM
Posted: 2007-12-12 20:38
Reply with quoteEdit/Delete This PostPrint this post

On 2007-12-12 20:32:24, NightBlade wrote:

On 2007-12-12 17:38:17, zaxan wrote:

On 2007-12-12 16:56:25, NightBlade wrote:
Thank you. Once I learn how to use Flash, it'll be really fun!


Sure you'll find it easy once you get some practice in Flash, and if not there are many free tutorials all over the internet anyway - including this one

For now, I can make banners!
I just hope it's as easy to learn as Photoshop...


Yeah, it's just the actionscript coding you need to get used to. I would really advise you to start with slightly more simple actionscript than that mentioned in this thread and then build up so you understand it easily Aside from that I would say it is on a par with graphic design / editing in terms of difficulty (mabey coding does make it slightly harder though)

[ This Message was edited by: zaxan on 2007-12-12 19:39 ]
Dewgel
K850 Blue
Joined: Dec 13, 2007
Posts: 14
PM
Posted: 2007-12-13 02:25
Reply with quoteEdit/Delete This PostPrint this post
I'm a common user of Flash CS3, have been since Flash 4, so I'm familiar with animation techniques.

After a minute or so of fiddling I thought it was neat to add an animation for the image so when the screen flips it's animated, it looks pretty nice. if anyone wants it I can e-mail it to you for an example, it's extremely simple and makes it look quite fancy. It certainly entertains people when they see it.

Just trying to fathom out how to animate it working in the opposite direction, not a fan of coding.
LCARS-Expert
K850 Green
Joined: Aug 24, 2007
Posts: 194
From: Croatia
PM, WWW
Posted: 2007-12-14 20:39
Reply with quoteEdit/Delete This PostPrint this post
@Dewgel, are you referring to something like this:
http://www.youtube.com/watch?v=c8j4bXQSdHY

(My latest project, btw)
adamnguyen
C905 Black
Joined: Apr 25, 2004
Posts: 22
PM
Posted: 2007-12-16 22:39
Reply with quoteEdit/Delete This PostPrint this post
THat's pretty nice
Access the forum with a mobile phone via esato.mobi