In this episode we're going to export code so let's get right to it.
We created the LikeButton animation in the previous tutorial…
This step starts at 0:12
… now we’re going to export it to code.
First thing we want to do is rename our Timeline, and Scene.
This step starts at 0:37
unlikedin the properties panel.
There are many options for exporting code (and we’ll be adding more as Flow grows).
Let’s export two projects at the same time – iOS and HTML.
This step starts at 0:53
⌘⇧E(Command+Shift+E) or o to
File > Export > Code
LikeTimelineoption on the left.
HTMLoptions on the right.
Open Folderbutton, or navigate to the project using Finder.
When you export to iOS it exports in a full Xcode project, let’s open that up and see the animation in the simulator.
You’ll need to: Grab Xcode for Free.
This step starts at 1:10
⌘Ricon at the top of the Xcode window.
There’s a little bit of clipping going on with the
plusIcon. Let’s fix it.
This step starts at 1:46
Let’s have a quick look at the Xcode project, there are two main elements: our code, and yours.
Flow’s export code doesn’t rely on opaque 3rd-party APIs. However, it does require a few lightweight classes that help sync your animations with
UIKit, Apple’s native API for programming.
This step starts at 2:17
To get an overview of the files in FlowCommon, please watch the video above, or have a look at our FlowCommon Docs.
The code for your animation comes as 3 separate files.
This step starts at 5:29
LikeView.swift– the main view and starting state of your animation.
LikeTimeline.swift– a representation of your animation in code – i.e. the ENCODED version of your animation.
LikeViewController.swift– a class that syncs together the view and the timeline.
To get a deeper overview of these files, please watch the video above, starting at 2:17.
Xcode constructs its interfaces from storyboard files. You’ll find the layout for your animation in the
This step starts at 7:29
To get a deeper overview of this files, please watch the video above, starting at 7:29.
Before we move onto the next episode what we can do is we can look at HTML.
This step starts at 8:17
LikeTimeline.htmlicon to launch your animation in a browser.
playbutton, or drag the slider to scrub through the animation.
In another episode we’ll go through the structure of the HTML project and for now let’s move on.
In the next screencast we’re going to integrate your animation into a real iOS project.
result(s) found for “”.