Notions of Trust/Data Vis for Digital Publication

by Alan Murphy

The final sections that was left to be added is the “notions of trust” and the “data visualisation”. The initial idea was to create another animation showing the various statistics based on the user survey we carried out for this section of the project. However, I felt that since this is a digital publication there has to be some level of user interaction and it cannot just contain animations as it would turn into an animation only publication.

 

In order to create something that allows the user to engage in the publication whilst also containing the same information that is contained in the print publication, I made the decision to create a scrollable frame out of the data visualisation. A “scrollable frame” is defined as a function that lets users scroll to view more content. Instead of the user turning to the next page to see the information they would simply swipe in the direction where the rest of the content is placed.

 

In order to create this process I obtained the assets that my fellow members in my group Aidan Kelly and Aidan Prendeville created for the print publication of this section. I then placed the design into Adobe InDesign. In order to create a scrollable frame within InDesign, I had to create a horizontal frame box in InDesign and then paste the placed image within the frame. After the design was pasted into the frame, it was a matter of using the “Folio Overlays” panel to create a “scrollable frame” out of the design. It was important when creating the “scrollable frame” that a horizontal layout was selected as it eliminates any white space if the user decides to swipe up or down within that section

 

 

After each section was completed it was a matter of going through the document very closely and changing certain aspects and features of each page which seemed out of place. For example, some of the fonts had to be changed to match the font layout of the digital publication such as “The Dark Web” and “Credits” section. The colour scheme also had to be changed in various sections to match up with the print publication of the project. Some of the icons that are featured in the dark web map also had to be changed to so that they again were matched up against the icons that are in the print publication.

Timeline Animation for Digital Publication

by Alan Murphy

The print publication is based on three sections that fold onto each other. Since the digital publication is to mirror and expand on the print publication, the initial thought process would have the timeline animate in front of the user eyes while they hold the tablet. The inspiration for this effect came from TV Shows such as “House of Cards”(Imdb, 2015), specifically the parts where the animation would appear on screen when the actors are interacting with their mobile phones. The other inspiration came from a TV movie that was shown on Channel 4 in 2015 called “Cyberbully”(imdb, 2015). It also had the same effect that was seen in House of Cards. In order to see if this effect was achievable, I made a quick prototype demo using Adobe After Effects. By using a technique which involved scaling in and out key frames combined with using the “Typewriter” effect within After Effects, I created a prototype which would be the basis for creating this timeline.

 

Video of timeline Prototype

The next phase of prototyping the animation involves finding a solution to get it displaying and working correctly on the digital publication.

Image of various dimension sizes

The first and initial solution required creating three different After Effects video files based on the three different pages that are within the timeline. After the video files were animated and exported, I would then create an InDesign file that is three times the length of the iPad resolution(3072 x 768 pixels). I would then slot in each of the videos into the InDesign video and the user would scroll down to the next video after the present one is ended. The main problem with using this method is that the first video would play but the second video and third video would not load.

The second method that I figured would work is similar to the first method in the sense that it would be based on three pages and the user would scroll down to view the next page on the timeline. How it differs from the first method is that it would only consists of one After Effects file that again was three times the length of the iPad resolution(3072×768 pixels). My reasoning behind this is that there would no problems between each video as it would be one self-contained animation. The main reason why this method did not work as there was a problem on the DPS software side as it could not handle an animation that was the size of the exported After Effects video(the exported video was 3072×768 pixels).

The final method which eventually worked was to create one single After Effects file that was the same resolution as the iPad(1024×768 pixels). Within After Effects using various positioning key-frames I would create the illusion that the pages are being moved from within the animation. I figured that this solution would work as the DPS software is only dealing with 1 video file and does not need the user interaction to swipe up or down which was the main stumbling block with the first solution.

After I found the solution in how to display the animation it was a matter of creating the animation. Based on the same method I used to create the animation for the intro page and the “Anti-Trust-O-Bot” animation. This required getting the illustrator file for the print design, isolating each layer and then exporting each layer out as its own separate illustrator file and importing each individual file to then animate it.

Image of Layers contained in each illustrator file

 

The animations were a similar process to the technical demo in that it required using scaling key-frames to make the user icons and text boxes “appear” on screen and then using the “Typewriter” effect within After Effects to animate the text within each text box. Each advertisement that is featured within the timeline was its own separate After Effects file and the exported video file was imported into the timeline animation and scaling key-frames was applied to the video

 

Image of After Effect Workflow for the timeline animation

 

Below is the final output of the timeline video:

 

Anti Trust O Bot Animation for Digital Publication

by Alan Murphy

As part of my role on this project as the lead on the digital publication, I am tasked with transferring each page of content that is in the print version of the publication into the digital version. My next task was to animate the “Anti TrustOBot flyer” that was designed by Eoin Murphy. The thought process was similar to how I animated the cover page of the digital publication, again designed by Eoin Murphy. This involved using the original illustrator file, turning on each layer separately and then exporting out each layer as its own separate illustrator file. After each layer were its own illustrator file, I imported them into After Effects to begin the animation process.

 

Illustrator exporting out layers

 

The next process was to animate each layer. The idea was that the drawing of “Trust O Bot” would slowly fade in as all the text would appear and the lines would go across it after it fully faded in. The main hurdle with this was that since the lines are going across a black border with the background at either side of the border. In order to make it look like that the lines don’t cut over the border, I had to create a mask and invert it and add keyframes with the animated lines so that it does not overlap on the border.

 

Mask effect used in After Effects

 

After this was animation I exported out the animation and then added to the digital publication. Below is the final video

 

I also started capturing footage which will be the focus of the behind the scenes documentary of creating this project. Below is some of the footage captured so far.(724 words)

 

 

Animations for Dark Web Digital Publication

by Alan Murphy

This week’s main objective was to fit all the animations into the digital version of the project. The map that contains the animation will be visible just after the credits/glitch sequence. The main problem which I encountered when trying to map the animations and icons into the dark web map was that the map layout which I chose out of the various prototypes previously was in a landscape layout. The digital publication in itself is a vertically orientated. I guess it was hindsight on my behalf but the framework we are using to create the digital publication, Adobe DPS, does not allow for custom page orientations. What this means for the project is that each page contained in the digital publication must have a landscape and portrait version for this to work. This solution would not be viable due to the design of most of the pages as they were designed for a portrait layout. Also some of the pages contained in the digital publication are interactive movies which were also made with the portrait layout and would not work in a landscape layout.

 

An alternative solution I came up with in terms of solving this horizontal/vertical solution is to rotate the map, icons and animations counter clockwise by 90 degrees so that everything is vertically and when viewing on a tablet they will all show up in landscape mode.

Icons and background turned 90 degress

 

The next problem I faced was rotating the animations so that they will play at the right orientation. The first method that I went in order to complete this was by importing the animation into InDesign and then rotating it within the software. The main problem I faced with this method is that you are only rotating the frame and not the actual movie. In other words, it looks like the animation is rotated but when you press play on the animation it reverts back to its original orientation.

Video of orientation example in InDesign

 

The next possible solution I tried was to use Adobe Media Encoder to try and change the orientation. However this solution was not possible as it would only change the dimension relative to the source video.

 

Trying to orientate in within Media Encoder

 

The final possible solution to this was the method that fixed this problem. It required creating a new After Effects project file, importing the final animation file into the project file and then rotating the animation by 270 degrees and then exporting the rotated animation. After it is exported, I then placed it into the InDesign document to test to see if it worked.

 

After Effects file rotated 

Dark Web Map Digital Prototype

by Alan Murphy

The initial design process for the digital version of the Dark Web was to have the one animation play exactly after the glitch animation. However it did not seem viable to have the one movie clip play after another movie clip(the “glitch” animation is essentially a movie). I came up with three different wireframes that would solve how to visualise the Dark Web for the digital edition.

Screenshot of the first concept of the Dark Web digital version
First concept is very similar to the print prototype version of the dark web as it contains the same vertical landscape with the icons in the same position. How it differs is that all the content text is gone and when the user taps on the icon in the map above the video will play on the bottom left and the content of text referring to that icon will show in the bottom right.

 

The only disadvantage to this is that given the size of the tablet that the digital version will be displayed on, the video will be very small in comparison if it will only take up the bottom of the screen.

Screenshots of second concept of the Dark Web digital version
The second concept will take up a landscape mode and is similar to the first concept. It is similar in the sense that when you tap on the relevant icon the video will play and the text will be displayed below the video. The video will now be layered on top of the map and when the user hits the minimise button they will be back to the map screen where they can hit the relevant icon. However the same problem arose just like in concept one in the sense that the video is still too small on the device that it is being played on.

Screenshots of third concept of the Dark Web digital version
The third and final concept came from the style of how the animation will be created. The third concept removes the content of the text and just shows the map and the icons. The justification behind removing the text is based on the fact that the animations are basically kinetic typography and is based on the content of text that appears in the print version. The user would be essentially looking at duplicated content. When the user taps on the icon the animation will play almost full screen with just the minimise button to the far right to for the user to get back to the map. I feel that this is the perfect way concept to proceed with.

 

The initial plan as outlined above was to have one animation that will be the whole section on the Dark Web. However since there will be various icons that will be placed into various sections of the text it will make more sense to separate these into 4 different animations comprising of “What is Tor?”, “What is traded on the Dark Web”, “What is a VPN?” and finally the “benefits of the Dark Web”. These animations will  roughly 30 seconds each.

 

The next problem that I faced was how was I going get this effect in InDesign. My work previous with the software in creating an interactive PDF was that you could create buttons and use the “Show/Hide Feature”. This method does not work in the Digital Publishing Suite. In order for me to get this functioning properly, I would have to create multistate objects between the video and the icon and create a dummy button that over the icon so when the icon is pressed the video would play and when the minimised button was pressed the video would stop.

 

 

Below is an example of the multistate buttons working in the Adobe Content Viewer.

 

 

I have attached a link to the PDF of the storyboards at the end of this post.

 

References:

1. What is A Vpn? Storyboard

https://www.dropbox.com/s/wwap86gudfih979/What%20is%20A%20Vpn.pdf?dl=0

2. What is Traded on Tor Storyboard

https://www.dropbox.com/s/h6xq75c99alzsl6/whatstraded.pdf?dl=0

3. What is Tor? Storyboard

https://www.dropbox.com/s/cy7974g45pkzx26/whatistor.pdf?dl=0

4. Benefits of the Dark Web Storyboard

https://www.dropbox.com/s/ve74t5knd38ubdf/benefitsOfTor.pdf?dl=0

Dark Web Map Print Prototype

by Alan Murphy

The idea behind this section is that it would be a pull-out infographic that would be bigger than the size of the book. It will also share the same visual style of the digital publication.

 

Fig.1 Estimated design spec of the Dark Web Pullout.

 

Since my role on the physical edition of the project is limited due to the fact my role on this project is be the lead on the digital edition of the version, I decided to start laying down the footprints for the prototype of the physical edition.

 

Before I started designing the infographics, I decided to do some research on various examples of infographics. I came across a website called “The Power of Infographics”(ThePowerofInfographics, 2015) which shows various examples of infographics which keep a unique and striking visual style but yet retains the information required for the specified infographic.

 

After going through my research I being creating the infographic. Since the colour scheme for the Dark Web section is a black background with a white font. The font that was chosen at the time for the dark web animations and infographic is called Fjalla One(Google Fonts, 2015). The initial design for the infographic revolves around a world map with various icons placed around the map. The information will then be placed around the map and the icons that are shown on the map will correlate to the information that is placed around the map.

Sketch of what the infographic of the Dark Web will look like

 

To begin this process I brought in an image of a world map into Adobe Illustrator and then began to trace out the world map. After I traced out the world map, I decided to invert the colours from white to black and vice versa to match the visual style of the infographic.

 

Screenshot of the traced world map in Adobe Illustrator

 

The next process was to bring this illustrator file into Photoshop and add the content to the infographic as shown below:

 

 

The next process was to import the various icons into the infographics. Most of the icons were already made for the interactive storyboards for the dark web animation which was shown at the end of the Design module last December. With all of these icons imported into Photoshop the next process was to put them into the infographic. The final result is shown below:

 

As I mentioned previously the animation for the Dark Web which will live inside the digital version of the project. The reason why the group has chosen to do this is because we wish the use the digital version to expand on concepts and interactivity which is not possible to do in the print version of the product. The animation for the dark web is essentially the same as the version that shown at the end of the design module only that instead of it being a static item in terms of animation, it will be fleshed out using Adobe After Effects to make the animation for it.

1 The Power of Infographics – Infographic Design Services. 2015. The Power of Infographics – Infographic Design Services. [ONLINE] Available at: http://www.thepowerofinfographics.com. [Accessed 18 April 2015].

 

2 Google Fonts Fjalla One. 2015. Google Fonts Fjalla One. [ONLINE] Available at: http://www.google.com/fonts/specimen/Fjalla+One. [Accessed 18 April 2015].

Control Page Prototype for Digital Publication

by Alan Murphy

This controls page is exclusive to the digital publication and is essential as it teaches the user how to navigate through the digital publication.

The first draft of the contents page that was shown in the first pool session of the new semester was a prototype mock-up of what this page might look like.

controls

However this early mock up only displayed what the controls actually did and not accommodate what the icons did once the user interacted with them. I wanted the controls page to feel like an interactive demo where the user will learn what the icons will do when they interact with them before they start using the digital publication.

For the icons I wanted to keep the icons familiar to the point where the user would have a vague understanding what these icons meant before inserting them into the publication. For this I went with the “+” and “-“ icons to maximise and minimise content. These icons has signified maximising and minimise in consumer electronics going all the way back to the original VCR recorder. I created these icons in Adobe Illustrator and then exported the icons out as a png and imported them into the document.

The main problem that I encountered when creating these control interactions is that the Show/Hide Button pre-set where the tools that I learned for creating Interactive PDF’s at my tenure in college was incompatible with the DPS publishing suite. To combat this I had to convert the icons and the text into multistate objects. Multistate objects within Adobe DPS is the equivalent of recording states or snapshots. I then assigned buttons that will show the various states and create the effect of showing and hiding various content.

The other control mechanism that I wanted to include was a “pull tab” that will be present at the side of the document. When the user pull across the tab, text will appear and they can pull it back when they are finish reading the “pull tab”. This was created by grouping a couple of objects together, a Background box, a text box which includes the message,  and a separate rectangle box which creates a “tab” effect. To get the tab to animate and get it to slide from left to right, you have to group up the boxes and paste them into a rectangular frame. Using the DPS folio overlays, there is a “Scrollable frame” option which allows the grouped boxes to slide horizontally and create a tab effect. The final part of this process is to align the box to the edge of the document to create the tab effect.

After all of the icons were inserted into the document, it was a matter of exporting the finished output to test it on the iPad.

https://www.dropbox.com/s/yuvrmhox9p932gg/11018930_10205113446310275_119325395_n.mp4?dl=0