×
Namespaces

Variants
Actions
(Difference between revisions)

How to create GIF animation Screensavers for S60 3rd Ed FP 1 devices and above

From Nokia Developer Wiki
Jump to: navigation, search
kamalakshan (Talk | contribs)
(Creating animated GIF's to be used with Carbide.ui)
 
hamishwillee (Talk | contribs)
 
(9 intermediate revisions by 4 users not shown)
Line 1: Line 1:
[[Category:Mobile Design]][[Category:Themes]]
+
[[Category:Mobile Design]][[Category:S60 3rd Edition FP1]][[Category:S60 3rd Edition FP2]][[Category:S60 5th Edition]]
 +
{{ArticleMetaData <!-- v1.2 -->
 +
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090629
 +
|author= [[User:Kamalakshan]]
 +
}}
  
 
==Overview==
 
==Overview==
Screen savers add another dimension to S60 personalization. Starting with S60 3rd Edition FP1 Graphic designers and artists can create screen savers for S60 Devices. Using familiar tools one can create screensavers as animated GIF, animated SVG or Flashlite Adobe Files. Here in this case we will have a look in to how to create a Animated GIF screen saver using an external tool for creating GIF [http://www.adobe.com/products/photoshop (Adobe Photoshop)].
+
Screen savers add another dimension to S60 personalization. Starting with S60 3rd Edition FP1 Graphic designers and artists can create screen savers for S60 Devices. Using familiar tools one can create screensavers as animated GIF, animated SVG or Flashlite Adobe Files. Here in this case we will have a look in to how to create a Animated GIF screen saver using an external tool for creating GIF [http://www.adobe.com/special/products/photoshop/compare/ (Adobe Photoshop)].
  
 
==Tools==
 
==Tools==
[[Adobe Photoshop CS]] This is the recommended tool from Nokia for creating GIF animations.
 
  
 +
'''Adobe Photoshop Creative Suite''' is the recommended tool from Nokia for creating GIF animations.
  
 
==How To==
 
==How To==
  
1) To create our animation from the file menu select New.
+
# To create our animation from the file menu select '''New'''.
 
+
# In the New dialog set the name of the file.
2) In the New dialog set the name of the file.
+
# Change the width and height to 240 320 pixels (or the desired resolution of the device screen)
 
+
#: [[File:Creating Animated GIF 1.png]]
3) Change the width and height to 240 320 pixels (or the desired resolution of the device screen)
+
# On the blank canvas, create the initial frame for the GIF.
 
+
#: [[File:Creating Animated GIF 3.png]]
4) On the blank canvas, create the initial frame for the GIF.
+
# Once the initial frame is ready, Go to Window -> Animation to view the Animation Window.
 
+
# From the Animation window click the animation menu and insert a new Frame.
5) Once the initial frame is ready, Go to Window -> Animation to view the Animation Window.
+
#: [[File:Creating Animated GIF 4.png]]
 
+
# Once the new frame is inserted make the changes to the new frame. In this I have moved the logo upwards.  
6) From the Animation window click the animation menu and insert a new Frame.
+
# Continue inserting new frames as required. Set the frame duration to 0.2 sec and repeat it forever.
 
+
#: [[File:Creating Animated GIF 5.png]]
7) Once the new frame is inserted make the changes to the new frame. In this I have moved the logo upwards.  
+
# You can click on the play button to view how the final out put could be.
 
+
# Finally to save as GIF file, go to File menu -> Save for Web and Devices option or press Alt+Shift+Ctrl+S
8) Continue inserting new frames as required. Set the frame duration to 0.2 sec and repeat it forever.
+
#: [[File:Creating Animated GIF 6.png]]
 
+
# Since we dont have to do any further optimization for this simple animation, just press save.
9) You can click on the play button to view how the final out put could be.
+
#: [[File:Creating Animated GIF 2.png]]
 
+
# Final out put as animated GIF is ready.
10) Finally to save as GIF file, go to File menu -> Save for Web and Devices option or press Alt+Shift+Ctrl+S
+
#: [[File:Creating Animated GIF 7.gif]]
 
+
11) Since we dont have to do any further optimization for this simple animation, just press save.
+
 
+
12) Final out put as animated GIF is ready.
+
 
+
==E-Learning==
+
 
+
*[http://www.forum.nokia.com/info/sw.nokia.com/id/b0434bdb-3ec0-4c97-a128-1f84e4b3eda3/S60_3rd_Edition_FP1_Screensavers_v1_0_en.exe.html S60_3rd_Edition_FP1_Screensavers_v1_0_en.exe ]
+

Latest revision as of 04:40, 1 August 2012

Article Metadata
CompatibilityArticle
Created: kamalakshan (29 Jun 2009)
Last edited: hamishwillee (01 Aug 2012)

[edit] Overview

Screen savers add another dimension to S60 personalization. Starting with S60 3rd Edition FP1 Graphic designers and artists can create screen savers for S60 Devices. Using familiar tools one can create screensavers as animated GIF, animated SVG or Flashlite Adobe Files. Here in this case we will have a look in to how to create a Animated GIF screen saver using an external tool for creating GIF (Adobe Photoshop).

[edit] Tools

Adobe Photoshop Creative Suite is the recommended tool from Nokia for creating GIF animations.

[edit] How To

  1. To create our animation from the file menu select New.
  2. In the New dialog set the name of the file.
  3. Change the width and height to 240 320 pixels (or the desired resolution of the device screen)
    Creating Animated GIF 1.png
  4. On the blank canvas, create the initial frame for the GIF.
    Creating Animated GIF 3.png
  5. Once the initial frame is ready, Go to Window -> Animation to view the Animation Window.
  6. From the Animation window click the animation menu and insert a new Frame.
    Creating Animated GIF 4.png
  7. Once the new frame is inserted make the changes to the new frame. In this I have moved the logo upwards.
  8. Continue inserting new frames as required. Set the frame duration to 0.2 sec and repeat it forever.
    Creating Animated GIF 5.png
  9. You can click on the play button to view how the final out put could be.
  10. Finally to save as GIF file, go to File menu -> Save for Web and Devices option or press Alt+Shift+Ctrl+S
    Creating Animated GIF 6.png
  11. Since we dont have to do any further optimization for this simple animation, just press save.
    Creating Animated GIF 2.png
  12. Final out put as animated GIF is ready.
    Creating Animated GIF 7.gif
This page was last modified on 1 August 2012, at 04:40.
148 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×