Author: Per Thykjaer Jensen

  • Corona Sprites – hvordan virker de?

    At skabe en sprite i Gimp eller Photoshop er relativt enkelt. Beslut dig for, hvor stor hver frame skal være, fx 512 x 256 px. I Photoshop skabes et dokument, med plads til fx 8 billeder. Koden herunder viser, hvordan animationen fungerer.

    • local sheetData – her oplysninger om png filens størrelse.
    • width = frame-bredde.
    • height = frame-højde.
    • sheetContentWidth og -Height: størrelsen på hele .png filen

    Når Corona har disse oplysninger kan animationen afvikles. Animationen initieres med andre ord af koden. Se eksemplet fra Coronas side om sprites.

    local sheetData = { width=512, height=256, numFrames=8, sheetContentWidth=1024, sheetContentHeight=1024 }
    
    local mySheet = graphics.newImageSheet( "runningcat.png", sheetData )
    
    local sequenceData = {
    { name = "normalRun", start=1, count=8, time=800 },
    { name = "fastRun", frames={ 1,2,4,5,6,7 }, time=250 }
    }
    
    local animation = display.newSprite( mySheet, sequenceData )
    animation.x = display.contentWidth/2 --center the sprite horizontally
    animation.y = display.contentHeight/2 --center the sprite vertically
    
    animation:play()
    
  • WordPress and jQuery

    Add this code to the header.php file in the theme. Add this line before wp_head():

    wp_enqueue_script("jquery");

    Then you can write a script (inside script tags) – somewhat like this:

    var $j = jQuery.noConflict(); // using j as selector to avoid conflicts
    
    $j(function(){
    
        $j("#respond").hide(); // hide comment field
    
    });

    Based on this tutorial by Chris Coyier.

  • Zengarden’s Classes and Ids

    Below you find the classes and ids in Zengarden’s index file. I used a terminal window on a MacBook like this:

    • grep “id=”  index.html
    • grep “class=” index html
    IDS IN ZENGARDEN'S INDEX.HTML
    
    <body id="css-zen-garden">
    	<section class="intro" id="zen-intro">
    		<div class="summary" id="zen-summary" role="article">
    		<div class="preamble" id="zen-preamble" role="article">
    	<div class="main supporting" id="zen-supporting" role="main">
    		<div class="explanation" id="zen-explanation" role="article">
    		<div class="participation" id="zen-participation" role="article">
    		<div class="benefits" id="zen-benefits" role="article">
    		<div class="requirements" id="zen-requirements" role="article">
    			<div class="design-selection" id="design-selection">
    			<div class="design-archives" id="design-archives">
    			<div class="zen-resources" id="zen-resources">
    
    CLASSES IN ZENGARDEN'S INDEX.HTML
    
    <div class="page-wrapper">
    	<section class="intro" id="zen-intro">
    		<div class="summary" id="zen-summary" role="article">
    		<div class="preamble" id="zen-preamble" role="article">
    	<div class="main supporting" id="zen-supporting" role="main">
    		<div class="explanation" id="zen-explanation" role="article">
    		<div class="participation" id="zen-participation" role="article">
    		<div class="benefits" id="zen-benefits" role="article">
    		<div class="requirements" id="zen-requirements" role="article">
    			<a href="http://validator.w3.org/check/referer" title="Check the validity of this site’s HTML" class="zen-validate-html">HTML</a>
    			<a href="http://jigsaw.w3.org/css-validator/check/referer" title="Check the validity of this site’s CSS" class="zen-validate-css">CSS</a>
    			<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" title="View the Creative Commons license of this site: Attribution-NonCommercial-ShareAlike." class="zen-license">CC</a>
    			<a href="http://mezzoblue.com/zengarden/faq/#aaa" title="Read about the accessibility of this site" class="zen-accessibility">A11y</a>
    			<a href="https://github.com/mezzoblue/csszengarden.com" title="Fork this site on Github" class="zen-github">GH</a>
    	<aside class="sidebar" role="complementary">
    		<div class="wrapper">
    			<div class="design-selection" id="design-selection">
    				<h3 class="select">Select a Design:</h3>
    						<a href="?cssfile=/216/216.css" class="design-name">Fountain Kiss</a> by						<a href="http://jeremycarlson.com" class="designer-name">Jeremy Carlson</a>
    						<a href="?cssfile=/215/215.css" class="design-name">A Robot Named Jimmy</a> by						<a href="http://meltmedia.com/" class="designer-name">meltmedia</a>
    						<a href="?cssfile=/214/214.css" class="design-name">Verde Moderna</a> by						<a href="http://www.mezzoblue.com/" class="designer-name">Dave Shea</a>
    						<a href="?cssfile=/213/213.css" class="design-name">Under the Sea!</a> by						<a href="http://www.ericstoltz.com/" class="designer-name">Eric Stoltz</a>
    						<a href="?cssfile=/212/212.css" class="design-name">Make ’em Proud</a> by						<a href="http://skybased.com/" class="designer-name">Michael McAghon and Scotty Reifsnyder</a>
    						<a href="?cssfile=/211/211.css" class="design-name">Orchid Beauty</a> by						<a href="#" class="designer-name">Kevin Addison</a>
    						<a href="?cssfile=/210/210.css" class="design-name">Oceanscape</a> by						<a href="http://www.pixel-house.com.au/" class="designer-name">Justin Gray</a>
    						<a href="?cssfile=/209/209.css" class="design-name">CSS Co., Ltd.</a> by						<a href="http://www.benklemm.de/" class="designer-name">Benjamin Klemm</a>
    			<div class="design-archives" id="design-archives">
    				<h3 class="archives">Archives:</h3>
    						<li class="next">
    								Next Designs <span class="indicator">›</span>
    						<li class="viewall">
    			<div class="zen-resources" id="zen-resources">
    				<h3 class="resources">Resources:</h3>
    					<li class="view-css">
    					<li class="css-resources">
    					<li class="zen-faq">
    					<li class="zen-submit">
    					<li class="zen-translations">
    <div class="extra1" role="presentation"></div><div class="extra2" role="presentation"></div><div class="extra3" role="presentation"></div>
    <div class="extra4" role="presentation"></div><div class="extra5" role="presentation"></div><div class="extra6" role="presentation"></div>
  • Photoshop Happens

    Has Photoshop gone too far? 
    Right now the debate is red hot in the international media. Some even suggest a ban on Photoshop. On the other hand: retouching is as old as the history of photography. Or even painting – not all portraits are completely honest.

    Debate on CNN
    On CNN the model protest against the photoshop rendering. She cannot live up to the picture that the photoshop wizard conjures up.

    http://youtu.be/tjugQoJfHeQ

    Above: The discussion on CNN

    Above: The Photoshop editing video

    Above: The Photoshop Effect

  • Typography test

    abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcd

  • Sound test

    [audio:http://static1.grsites.com/archive/sounds/cartoon/cartoon010.mp3]
    • Install the plugin “Audio Player”.
    • Make a post or a page.
    • Ad the shortcode as below:

    soundShortcode

  • HTML Encoder

    For WordPress and Blogger.

  • Problem Based Projects

    A nice video introduction  to problem based project work from Aalborg University in Denmark.

  • Facial Expressions

    [swf src=”http://petj.mmd.eal.dk/downloads/dice.swf” height=400 width=550]

    Here is a method where you can control a movie inside another movie. The strange beast on the top left has a dice face. It’s the same movie as the dice rolling. So by changing the frame you can control fairly complex animations.


    /*
    FACIAL EXPRESSIONS
    How to control a movie inside another movie.
    In a keyframe try the following:
    */


    addEventListener(Event.ENTER_FRAME,faceshift);
    function faceshift(event:Event) {
    kitty.kFace.gotoAndStop(3); // stops at face 3
    }

    The trick is in this codeline:

    • kitty.kFace.gotoAndStop(3);

    Here you control a movie inside another movie. So on the stage you see a kitty. Inside kitty is a movieclip named kFace. By gotoAndStop / Play you can control animations like facial expressions and similar.

    Tip: use onEnterFrame or buttons in order to control the movies.

  • Research save sortable

    <ul id="sortable">
        <li id="1">elem 1</li>
        <li id="2">elem 2</li>
        <li id="3">elem 3</li>
        <li id="4">elem 4</li>
    </ul>
    
    $(document).ready(function(){
        $('#sortable').sortable({
            update: function(event, ui) {
                var newOrder = $(this).sortable('toArray').toString();
                $.get('saveSortable.php', {order:newOrder});
            }
        });
    });

    Kilde: http://stackoverflow.com/questions/7097168/save-jquery-ui-sortable-positions-to-db

Enable Notifications OK No thanks

We use cookies - more information

Multimusen.dk will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies. Some of my pages use APIs - such as YouTube, LinkedIn, Google Fonts, Google Maps, Mapbox, Spotify, Jetpack, Twitter, Facebook &c.. Such plugins may set the odd cookie.

Close