internal training - eda
TRANSCRIPT
EDA
Epsilon Mobile
Outline
What is EDA ?
3 Tiers model
Tier 1
Tier 2
Tier 3
Practice
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 …
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, …
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
Tier 1
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
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>
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>
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>
Tier 2
EDAGUI
EDAAnimation
EDAAction
EDA3DObject
EDAOpenGL
EDACanvas
EDAGUI
EDAView
autoresizingMasks
rect
Name Value
kEDAAutoresizingMaskNone 0
kEDAAutoresizingMaskFlexibleWidth 1
kEDAAutoresizingMaskFlexibleHeight 2
kEDAAutoresizingMaskFixedLeftMargin 4
kEDAAutoresizingMaskFixedRightMargin 8
kEDAAutoresizingMaskFixedTopMargin 16
kEDAAutoresizingMaskFixedBottomMargin 32
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.
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>
EDAView’s children
EDAImage
EDAScrollPage
EDABackgroundMusic
EDAScrollPage
Can scroll vertically or horizontally.
Will cached one or many pages based on the
configuration.
EDAAnimation
EDASprite
Run images frame by frame.
Properties:
rect
frames: array of images name
duration: time-intervale between frames
<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>
EDATransformAnimation
Points using unit vector (0,1) instead of absolute
vector.
fromPoint -> toPoint
fromScale->toScale
fromRotation->toRotation
fromAlpha->toAlpha
recursives
count
duration
EDAAnimation
Think of it as a view which animation applied up-on.
Can contains any EDAView inside.
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>
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
Tier 3
EDAComic
EDAMagazine
EDABook
EDASurvey
EDAFinance
EDAMotionComic
EDAComic
EDAMagazine
EDABook
EDA package
Is an archive which contains many files
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
-- ...
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>
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
QA
Thank you