Creating Templates
From Oxygen.next Wiki
Contents |
[edit] Introduction
Dynamic templates allow you to present your products, special offers and information easily, quickly and effectively.
With dynamic templates you can react to topical requirements within short time. Imagine being the owner of a supermarket. In your store you’re offering both parasols and umbrellas. By means of dynamic templates you can always promote exactly the product your customers currently need: parasols when the sun is shining – umbrellas when it’s raining outside.
In the Oxygen Management Suite Text Editor you can easily insert texts, images and even MP3 files into pre-designed templates. When saving the filled-in templates they will be instantly taken oven into your program.
You can also create news channels in the Oxygen Management Suite. These are automatically fed by RSS feeds on the internet or by other database interfaces. The news channels can be inserted into dynamic templates as well and are regularly updated.
For example, insert an RSS newsfeed into your template to create your very own news program.
In the following we will explain how to create your own dynamic templates.
Please note: To create Oxygen design templates previous knowledge of Flash and Actionscript is required.
[edit] ActionScript Preparation
To design a flash template for Oxygen you should create an „ActionScript Layer“ first.
On this layer the first frame should contain:
var Text = 1; //Number of text fields var Titel = 1; //Number of title fields var Pictures = 0; // Number of pictureholders var Movies = 0; // Number of Flash movies(Unsupported)
By means of these variables the Oxygen Management Suite will identify how many headlines, texts and images the template actually contains. The respective fields will then be shown in the drop-down menu of the text editor.
If the animations within the templates shall be implemented by means of the timeline, a stop command must be executed in the last frame. Therefor you have to convert the last frame of the “ActionScript Layer” into a keyframe. Insert the following text into this keyframe:
stop();
This command ensures that the template won’t be played in a loop and will stop after the first run-through.
[edit] Text and Title Fields
At first you need to set the text and title fields from static to dynamic text on the Properties Inspector so that they can be modified on the Management Suite later on.
Furthermore you have to assign variables to the text resp. title fields so that a correct assignment between Flash and Oxygen Management Suite is guaranteed. For this purpose the field Variable for the first text field has to be filled-in with “Text 1” and the first title field with “Title 1” etc. Please note that the input is case sensitive.
To make sure that the desired font will be displayed correctly on any other system, all fonts should be embedded. (Button “Font Embedding…” – can be found in the properties of a text field)
Generally it is sufficient to embed the following character sets: upper and lower case characters, ciphers, punctuation marks, Latin Simple, Latin I and Latin Extended A, ~ B, ~ (= 1076 characters overall).
To ensure that the text can be formatted on the Oxygen Management Suite Text Editor (bold, italic, font size etc.) you have to take the following actions:
1. The button „Render text as HTML“ on the Properties Inspector must be activated.
2. The different font styles (regular, bold, italic, and bold italic) of the selected font type must be imported into the library. (The font type has to support these font styles. If it doesn’t, subsequent formatting on the text editor won’t be possible.)
How to import: Right click the library and select the menu item “New font type…” to choose the desired font including style and to assign a suitable name. Mark “Export for ActionScript” and confirm by clicking “OK”.
3. Finally you have to set a variable (_EmbedFonts) in the ActionScript layer that will unlock the text formatting buttons. For example, for the first text resp. title field the following source code has to be added:
Text1_EmbedFonts = 1; Titel1_EmbedFonts = 1;
The assignment „=1“ activates the text formatting buttons for the respective text and title fields. If there’s more than one text resp. title field, the other fields must be activated as well by means of the variable „_EmbedFonts”.
[edit] Pictureholders
If you want to add one or more images (pictureholders) to the Flash template, the following source code must be included in the ActionScript layer:
//Picture 01 filejpg_01 = function(picName_01) { Pictureholder1.load(picName_01); } keepWaitingForKeyResponse_01(); function keepWaitingForKeyResponse_01() { intervalID = setInterval(function () { if (Picture1 != LastPath_01) { LastPath_01 = Picture1; filejpg_01(Picture1); } }, 100); }; //Picture 02 filejpg_02 = function(picName_02) { Pictureholder2.load(picName_02); } keepWaitingForKeyResponse_02(); function keepWaitingForKeyResponse_02() { intervalID = setInterval(function () { if (Picture2 != LastPath_02) { LastPath_02 = Picture2; filejpg_02(Picture2); } }, 100); } //Picture 03 filejpg_03 = function(picName_03) { Pictureholder3.load(picName_03); } keepWaitingForKeyResponse_03(); function keepWaitingForKeyResponse_03() { intervalID = setInterval(function () { if (Picture3 != LastPath_03) { LastPath_03 = Picture3; filejpg_03(Picture3); } }, 100); }; //etc.
In addtion to the adjustment of the ActionScript layer it is required that the Flash „Loader“ component is located in the library (Window → Components → User → Interface → Loader). Place one instance of this component on the stage and name it “Pictureholder 1” resp. name each additional „Pictureholder2“, „Pictureholder3“ etc.
Finally you should adjust the pictureholder to the subsequent size and position of the graphical material. This should be carried out in the first frame since the respective ActionScript command is located there.
[edit] Animations
To animate text and title fields on Flash you will often have to convert them into graphics or movie clips (right click „Convert into symbol…“). Afterwards any type of tween but also e.g. mask layers can be applied to the text field – either by means of a timeline animation or by a command in the ActionScript layer.
If you want to animate a pictureholder, the animation must be triggered by ActionScript code. For this purpose Flash provides so-called tweening classes. For example:
//imports the tweening class import mx.transitions.Tween; //imports the die acceleration classes import mx.transitions.easing.*; // defines the type of animation new Tween(Pictureholder1, "_alpha", Regular.easeIn, 100, 0, 30, false);
In this particular example the image is fading out. Therefor a tweening is carried out by setting the alpha value of the pictureholder from 100 to 0 in 30 frames. The last parameter “false/true” indicates whether the time unit for the animation is seconds (true) or frames (false). If you want to use the function “onMotionFinished” then you will have to define “true” for the last parameter since a trigger that confirms the end of the animation will only be triggered that way.
Tweenings can’t be applied to the „_alpha“ value only though but also to the X and Y position. More information on that can be found on the Flash help (just search for “tweening”).
[edit] Creating an .SWF-File
At first the publishing settings have to be defined (File → Publishing Settings… → Flash). Define your settings as desired but please note that the script language has to be set to „ActionScript 2.0“ since our text editor supports AS 2.0 only.
The template export can be carried out directly from the publishing settings (button “publish”) or via File → Export → Export movie…
In the end you’ll have an .SWF-file. This template can then be filled in on our text editor.
[edit] Rules to code by using Flash
For best performance:
* Use h.264 encoding for all video content. Avoid encoding your videos in h.263 or vp6. * The bit rate depends on the requirements to the video quality. Consider that a higher bit rate is more complex to decode for the CPU. * To ensure a smooth video-watching experience, make sure your content uses only one instance of the media player at a time. For example, make sure that your primary content and the ads are not running two parallel streams of the media player. Two parallel streams can significantly degrade system performance. * Be conscious of system memory, check availability and limitations when running Flash. Consume only what is necessary and test for memory leaks!!! * Handle errors or crashes gracefully with proper recovery messaging.
Perceived vs. actual performance
Users are the ultimate judges of whether your content performs well. Developers may measure application performance in terms of how long certain operations take or how many instances of objects are created. However, those metrics aren't important to end users. Sometimes users measure performance by different criteria. For example, does the application operate quickly and smoothly, and respond quickly to input? Does it have a negative effect on the performance of the system as a whole?
Ask yourself the following questions to measure perceived performance:
* Are animations smooth or choppy? * Does video content look smooth or choppy? * Do audioclips play continuously, or do they pause and resume? * Does the window flicker or turn blank during long operations? * When you type, does the text input keep up or lag behind? * If you click, does something happen immediately, or is there a delay? * Do other applications respond poorly when the application is running?
The distinction between perceived performance and actual performance is important. The way to achieve the best perceived performance isn't always the same as the way to get the absolute fastest performance. Make sure your application never executes So much code that the runtime isn't able to frequently update the screen and gather user input. In some cases, achieving this balance involves dividing up a program task into parts So that, between parts, the runtime updates the screen. Using bitmaps
Using vectors, especially in large numbers, dramatically increases the need for CPU or GPU resources. Using bitmaps is a good way to optimize rendering, because the Flash player needs fewer processing resources to draw pixels on the screen than to render vector content. Tweening syndrome
Limit the use of tweening to save CPU processing and memory. Designers and developers producing content for Flash tend to use many motion tweens in their applications. Try to minimize the use of motion tweens to help your content run faster.
Some flash guidelines referenced from Adobe, Inc.
