{"id":9736,"date":"2014-09-21T05:06:58","date_gmt":"2014-09-20T19:06:58","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=9736"},"modified":"2016-06-14T11:48:11","modified_gmt":"2016-06-14T01:48:11","slug":"film-overlay-follow-up-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/film-overlay-follow-up-tutorial\/","title":{"rendered":"Film Overlay Follow Up Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/LibreOffice\/MathsFormula\/film_parameterizable.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" id=\"ipm\" alt=\"Film Overlay Follow Up Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/LibreOffice\/MathsFormula\/Film_Presentation.png\" title=\"Film Overlay Primer Tutorial\" onmouseover=\" this.src=this.src.replace('.png','.JPG').replace('.jpg','.png').replace('.JPG','.jpg');   \"  \/><\/a><p class=\"wp-caption-text\">Film Overlay Follow Up Tutorial<\/p><\/div>\n<p>Today we piece together a slideshow, like a film, of the presentation from two days back, similar to how we did it below with <a target=_blank href='#fopt' title='Film Overlay Primer Tutorial'>Film Overlay Primer Tutorial<\/a>, except that extra functionality is added to allow the film to run from top to bottom or left to right, without the addition of any new image files (to yesterday&#8217;s tutorial).  To do this we made use of:<\/p>\n<ul>\n<li>CSS <a target=_blank title='CSS transform' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_transform.asp'>transform<\/a> (specifically its <i>rotate<\/i> functionality)<\/li>\n<li>GIMP Filter-&gt;Combine-&gt;Filmstrip&#8230;<\/li>\n<li>Javascript <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp' title='setTimeout'>setTimeout<\/a> timer functionality<\/li>\n<li>Javascript <a target=_blank href='http:\/\/www.w3schools.com\/js\/js_htmldom.asp' title='Javascript DOM'>DOM<\/a> methods to dynamically change HTML (over time)<\/li>\n<li><a target=_blank href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp' title='z-index information from w3schools'><i>z-index<\/i><\/a><\/li>\n<li><a target=_blank href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp' title='position:absolute information from w3schools'><i>position:absolute<\/i><\/a><\/li>\n<li>Javascript <a target=_blank title='Javascript eval' href='http:\/\/www.w3schools.com\/jsref\/jsref_eval.asp'>eval()<\/a> method &#8230; Why? It can make &#8220;concepts&#8221; into &#8220;dimensions&#8221; &#8230; sort of &#8230; in practical terms it allows the exchange of Javascript DOM <i>.style.left = <\/i> code into  <i>.style.top = <\/i> code in a parameterizable fashion<\/li>\n<\/ul>\n<p>So the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/LibreOffice\/MathsFormula\/film_parameterizable.html\" title='Click picture'>tutorial<\/a> today is based on is <a target=_blank href='#lmfpt' title='LibreOffice Math Formula Primer Tutorial'>LibreOffice Math Formula Primer Tutorial<\/a> as shown way below.<\/p>\n<p>Add this to your thoughts regarding the theme of <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=overlay' title='overlay theme at this blog'>&#8220;overlay&#8221;<\/a> &#8230; rather than anything to do with <i><a target=_blank title='Vandalay Industries' href='https:\/\/www.youtube.com\/watch?v=_T35QhLx_KI'>Latex Salesmen<\/a><\/i>.<\/p>\n<p>Link to downloadable HTML programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/LibreOffice\/MathsFormula\/film_parameterizable.html-GETME\" title='film_parameterizable.html'>film_parameterizable.html<\/a><\/p>\n<p>Finally we have a link to show you how we got the code to be parameterizable in the way it allows both top to bottom or left to right film display within the one piece of code, <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Mac\/LibreOffice\/MathsFormula\/film_parameterizable.html-GETME' title='Code differences from tutorial below'>here<\/a>.<\/p>\n<hr \/>\n<p id='fopt'>Previous relevant <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=9728' title='Film Overlay Primer Tutorial'>Film Overlay Primer Tutorial<\/a> as shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/LibreOffice\/MathsFormula\/film.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Film Overlay Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/LibreOffice\/MathsFormula\/Film_Presentation.jpg\" title=\"Film Overlay Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Film Overlay Primer Tutorial<\/p><\/div>\n<p>Today we piece together a slideshow, like a film, of the presentation from yesterday.  To do this we made use of:<\/p>\n<ul>\n<li>GIMP Filter-&gt;Combine-&gt;Filmstrip&#8230;<\/li>\n<li>Javascript <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp' title='setTimeout'>setTimeout<\/a> timer functionality<\/li>\n<li>Javascript <a target=_blank href='http:\/\/www.w3schools.com\/js\/js_htmldom.asp' title='Javascript DOM'>DOM<\/a> methods to dynamically change HTML (over time)<\/li>\n<li><a target=_blank href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp' title='z-index information from w3schools'><i>z-index<\/i><\/a><\/li>\n<li><a target=_blank href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp' title='position:absolute information from w3schools'><i>position:absolute<\/i><\/a><\/li>\n<\/ul>\n<p>So the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/LibreOffice\/MathsFormula\/film.html\" title='Click picture'>tutorial<\/a> today is based on is <a target=_blank href='#lmfpt' title='LibreOffice Math Formula Primer Tutorial'>LibreOffice Math Formula Primer Tutorial<\/a> as shown below.<\/p>\n<p>Add this to your thoughts regarding the theme of <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=overlay' title='overlay theme at this blog'>&#8220;overlay&#8221;<\/a> &#8230; rather than <i><a target=_blank title='?' href='http:\/\/www.redandwhitekop.com\/forum\/index.php?topic=280293.280;wap'>underlay, underlay<\/a> <a target=_blank title='Speedy Gonzales' href='https:\/\/www.youtube.com\/watch?v=DDZBzvTDhGU'>arriba<\/a><\/i>.<\/p>\n<p>Link to downloadable HTML programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/LibreOffice\/MathsFormula\/film.html_GETME\" title='film.html'>film.html<\/a><\/p>\n<hr \/>\n<p id='lmfpt'>Previous relevant <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=9683' title='LibreOffice Math Formula Primer Tutorial'>LibreOffice Math Formula Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/LibreOffice\/MathsFormula\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"LibreOffice Math Formula Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/LibreOffice\/MathsFormula\/Libre_Maths_Formula-80of.jpg\" title=\"LibreOffice Math Formula Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">LibreOffice Math Formula Primer Tutorial<\/p><\/div>\n<p>Over the last few weeks we&#8217;ve talked a fair bit about the <a target=_blank title='LibreOffice from The Document Foundation' href='http:\/\/www.libreoffice.org'>LibreOffice<\/a> suite of office programs and its big links with the <a target=_blank title='OpenOffice' href='http:\/\/www.OpenOffice.org'>OpenOffice<\/a> suite of programs, and today we explore its Math Formula functionality.<\/p>\n<p>Today we took a mathematics problem from a school text book called <i>New Century Maths<\/i> Stages 5.2\/5.3 page 225, and imagine a teacher explaining the solution to a &#8220;Law 1: Multiplying terms with the same base&#8221; problem.<\/p>\n<p>LibreOffice makes this task end up with a very professional presentation, and maybe, for a desktop solution to something you want to do yourself, you will be interested in a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/LibreOffice\/MathsFormula\/\" title='click picture'>demonstration<\/a> of how it works.<\/p>\n<p>Link to input data file representing what was added into LibreOffice&#8217;s MathFormula for this tutorial <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/LibreOffice\/MathsFormula\/MathsProblem.txt_GETME\" title='MathsProblem.txt'>MathsProblem.txt<\/a><br \/>\nLink to output .odf LibreOffice  file of tutorial <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/LibreOffice\/MathsFormula\/MathsProblem.odf\" title='MathsProblem.odf'>MathsProblem.odf<\/a><\/p>\n<p>Link to LibreOffice information &#8230; <a target=_blank href='http:\/\/en.wikipedia.org\/wiki\/LibreOffice' title='LibreOffice information via Wikipedia'>from Wikipedia<\/a>.<br \/>\nLink to LibreOffice &#8220;spiritual home&#8221; &#8230; <a target=_blank title='LibreOffice from The Document Foundation' href='http:\/\/www.libreoffice.org'>LibreOffice<\/a> via the Document Foundation.\n<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d9693' onclick='var dv=document.getElementById(\"d9693\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=LibreOffice#content\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d9683' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr \/>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d9728' onclick='var dv=document.getElementById(\"d9728\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=GIMP\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d9728' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr \/>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d9736' onclick='var dv=document.getElementById(\"d9736\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=rotate\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d9736' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today we piece together a slideshow, like a film, of the presentation from two days back, similar to how we did it below with Film Overlay Primer Tutorial, except that extra functionality is added to allow the film to run &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/film-overlay-follow-up-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,12,16,37],"tags":[281,399,491,576,652,894,997,1072,1319],"class_list":["post-9736","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-gimp","category-tutorials","tag-css","tag-eval","tag-gimp","tag-html","tag-javascript","tag-overlay","tag-programming","tag-rotation","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/9736"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=9736"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/9736\/revisions"}],"predecessor-version":[{"id":48419,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/9736\/revisions\/48419"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=9736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=9736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=9736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}