internal training - eda

34
EDA Epsilon Mobile

Upload: thanh-loc-vo

Post on 05-Jul-2015

156 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: Internal training - Eda

EDA

Epsilon Mobile

Page 2: Internal training - Eda

Outline

What is EDA ?

3 Tiers model

Tier 1

Tier 2

Tier 3

Practice

Page 3: Internal training - Eda

What is EDA

Epsilon data format for digital publishing.

We use them to represent the digital data:

book, comic, magazine, …

Anything else ?

Motion

Comic, Brochure, Menu, Animation, Diagram, Fin

ance report, Survey, …

And much much more …

Page 4: Internal training - Eda

Principle

It’s designed based on the idea that every

business object can be represent as a

tree of other objects.

Example:

a magazine will contains many pages,

each page will contain one or many articles,

each articles in turn will contain many widget:

slideshow, text, title, …

Page 5: Internal training - Eda

3 Tiers

• EDA MAGAZINE

• EDA COMIC

• EDA BOOK

• EDA Survey

• EDA Finance

• EDA Motion ComicTier 3

• EDA GUI

• EDA Animation

• EDA Action

• EDA Data

• Eda OpenGL

• EDA Physic

• EDA 3D GUI

Tier 2• EDA Base

Tier 1

Page 6: Internal training - Eda

Tier 1

Page 7: Internal training - Eda

EDANode

One node will contain two parts:

Its properties and its children

Node will be identified by id, tags and type.

Node will have many states

Each states will contain its own attributes

For example: landscape, portrait, …

Any attributes which wasn’t declared in one state, it’s

contained in state default

Page 8: Internal training - Eda

Node’s structure

<node type="EDANode“ id=“content” tags=“photo”> <dict>

<key>rect</key>

<string>{{0,0},{768,1024}}</string>

<key>URI</key>

<string>1.png</string>

<key>autoresizingMasks</key>

<integer>63</integer>

</dict>

<node>

// put children’s declaring here

</node>

</node>

Page 9: Internal training - Eda

Node’s state

<node type="EDAImage"> <dict>

<key>rect</key>

<string>{{0,0},{768,1024}}</string>

<key>URI</key>

<string>1.png</string>

<key>states</key>

<dict> <key>landscape</key>

<dict> <key>URI</key> <string>No.png</string> <key>rect</key> <string>{{0,0},{1024,768}}</string>

</dict>

</dict>

</dict>

Page 10: Internal training - Eda

Node ref

If we declared a magazine with 200 pages. It’ll consume too much

memory.

That’s why we use node-ref

<node type="EDANode“ id=“content” tags=“photo”>

<dict/>

<node-ref type="EDAView" URI="page0.xml" storageMode="readonly"/>

<node-ref type="EDAView" URI="page1.xml" storageMode="readonly"/>

<node-ref type="EDAView" URI="page2.xml" storageMode="readonly"/>

</node>

Page 11: Internal training - Eda

Tier 2

EDAGUI

EDAAnimation

EDAAction

EDA3DObject

EDAOpenGL

EDACanvas

Page 12: Internal training - Eda

EDAGUI

Page 13: Internal training - Eda

EDAView

autoresizingMasks

rect

Name Value

kEDAAutoresizingMaskNone 0

kEDAAutoresizingMaskFlexibleWidth 1

kEDAAutoresizingMaskFlexibleHeight 2

kEDAAutoresizingMaskFixedLeftMargin 4

kEDAAutoresizingMaskFixedRightMargin 8

kEDAAutoresizingMaskFixedTopMargin 16

kEDAAutoresizingMaskFixedBottomMargin 32

Page 14: Internal training - Eda

EDAView (cont)

One view can have many renderer which can be

used separately for each purpose

By default, one view will have a render which named

by adding “-Renderer” to its class.

For example, EDAScrollPage will have

EDAScrollPageRenderer as its default renderer.

Page 15: Internal training - Eda

EDAView

<dict>

<key>rect</key>

<string>{{0,0},{768,1024}}</string>

<key>URI</key>

<string>1.png</string>

<key>autoresizingMasks</key>

<integer>63</integer>

</dict>

Page 16: Internal training - Eda

EDAView’s children

EDAImage

EDAScrollPage

EDABackgroundMusic

Page 17: Internal training - Eda

EDAScrollPage

Can scroll vertically or horizontally.

Will cached one or many pages based on the

configuration.

Page 18: Internal training - Eda

EDAAnimation

Page 19: Internal training - Eda

EDASprite

Run images frame by frame.

Properties:

rect

frames: array of images name

duration: time-intervale between frames

Page 20: Internal training - Eda

<node type="EDASprite">

<dict>

<key>rect</key>

<string>{{100,100},{50,50}}</string>

<key>name</key>

<string>ninja</string>

<key>frames</key>

<array>

<string>frame-0.png</string>

</array>

<key>states</key>

<dict>

<key>shoot</key>

<dict>

<key>duration</key>

<real>1.0</real>

<key>frames</key>

<array>

<string>frame-0.png</string>

<string>frame-1.png</string>

Page 21: Internal training - Eda

EDATransformAnimation

Points using unit vector (0,1) instead of absolute

vector.

fromPoint -> toPoint

fromScale->toScale

fromRotation->toRotation

fromAlpha->toAlpha

recursives

count

duration

Page 22: Internal training - Eda

EDAAnimation

Think of it as a view which animation applied up-on.

Can contains any EDAView inside.

Page 23: Internal training - Eda

EDATransformToAnimation

There’s no “from”. Just animate using the current

attributes.

<key>toPoint</key>

<string>{0.4013020833,0.814453125}</string>

<key>toAlpha</key>

<real>0.8</real>

<key>toScale</key>

<real>1</real>

Page 24: Internal training - Eda

EDASequenceAnimation

Play animation, one by one.

Every sub-animation will be represent as this node’s

children, and has tag animation

Can contains one and only one content node which

has id content

Page 25: Internal training - Eda

Tier 3

EDAComic

EDAMagazine

EDABook

EDASurvey

EDAFinance

EDAMotionComic

Page 26: Internal training - Eda

EDAComic

Page 27: Internal training - Eda

EDAMagazine

Page 28: Internal training - Eda

EDABook

Page 29: Internal training - Eda

EDA package

Is an archive which contains many files

Page 30: Internal training - Eda

EDA Package

main.xml

the starting point for each

package. It’ll contain the

root node.

list.xml

contain the required

information for transfering

one package from server

to client.

/

-- list.xml

-- main.xml

-- 1.jpg

-- 1.xml

-- 1-1.mp3

-- 1-2.mp4

-- 2.jpg

-- 2.xml

-- 2-1.png

-- 2-2.jpg

-- 3.xml

-- ...

Page 31: Internal training - Eda

List file <eda>

<group>

<key>LDFSK?</key>

< path >meta.zip</ path >

<file>

<key>FAGDSDF</key>

<path>main.xml</ path >

</file>

<file>

<key>FASDFWEQ</key>

< path >0.xml</ path >

</file>

...

</group>

<file>

<key>FKD!S?F</key>

< path >0.jpg</ path >

</file>

...

</eda>

Page 32: Internal training - Eda

Practice

Create a multi page scrolling

Example 1:

a static image as background

Another image on top

Different background for portrait and landscape

Example 2:

Sprite

Example 3:

A ball appear using animation

Background sound

Example 4:

Multi-scroll page for comic

Page 33: Internal training - Eda

QA

Page 34: Internal training - Eda

Thank you